arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first init

Browse Source
This commit is contained in:
arifal
2025-01-16 17:16:14 +07:00
commit 84d8f3ca6a
227 changed files with 43922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
resources/scss/config/_theme-mode.scss Executable file
View File

@@ -0,0 +1,121 @@
//
// _theme-mode.scss
//
/* Root Prefix Variable */
:root {
--#{$prefix}logo-lg-height: 26px;
--#{$prefix}logo-sm-height: 24px;
--#{$prefix}sidebar-width: 250px;
--#{$prefix}sidebar-width-sm: 75px;
--#{$prefix}sidebar-item-icon-size: 18px;
--#{$prefix}sidebar-item-font-size: 15px;
--#{$prefix}sidebar-item-padding-x: 15px;
--#{$prefix}sidebar-item-padding-y: 10px;
--#{$prefix}sidebar-item-margin-y: 2px;
--#{$prefix}topbar-height: 70px;
--#{$prefix}footer-height: 60px;
--#{$prefix}input-border-color: #d8dfe7;
--#{$prefix}input-focus-border-color: #b0b0bb;
}
/* Dark Mode only */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] {
--#{$prefix}border-color: #2f3944;
--#{$prefix}light: #{$body-tertiary-bg-dark};
--#{$prefix}dark: #{$body-tertiary-color-dark};
--#{$prefix}light-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}dark-rgb: #{to-rgb($body-tertiary-color-dark)};
// Heading Variable
--#{$prefix}headings-color: #{$body-color-dark};
--#{$prefix}input-border-color: #3a4551;
--#{$prefix}input-focus-border-color: #4a5663;
}
/* Color system - Dark Mode only */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] {
--#{$prefix}border-color: #272f37;
--#{$prefix}light: #{$body-tertiary-bg-dark};
--#{$prefix}dark: #{$body-tertiary-color-dark};
--#{$prefix}light-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}dark-rgb: #{to-rgb($body-tertiary-color-dark)};
// Heading Variable
--#{$prefix}headings-color: #{$body-color-dark};
--#{$prefix}input-border-color: #3a4551;
--#{$prefix}input-focus-border-color: #4a5663;
}
/* Main sidebar Light */
html[data-sidebar-color="light"]{
--#{$prefix}sidebar-bg: #ffffff;
--#{$prefix}sidebar-item-color: #6e708c;
--#{$prefix}sidebar-item-hover-bg: #f4f3f6;
--#{$prefix}sidebar-item-hover-color: #3d4756;
--#{$prefix}sidebar-border-color: #eaedf1;
}
/* Main sidebar Dark */
html[data-sidebar-color="dark"] {
--#{$prefix}sidebar-bg: #393f4a;
--#{$prefix}sidebar-item-color: #afb9cf;
--#{$prefix}sidebar-item-hover-bg: #4697ce;
--#{$prefix}sidebar-item-hover-color: #{$white};
--#{$prefix}sidebar-border-color: #272f37;
}
/* Main sidebar Dark (Dark Mode Only) */
html[data-bs-theme="dark"][data-sidebar-color="dark"],
html[data-bs-theme="dark"][data-sidebar-color="light"] {
--#{$prefix}sidebar-bg: #1d2329;
--#{$prefix}sidebar-item-color: #afb9cf;
--#{$prefix}sidebar-item-hover-bg: #2a3139;
--#{$prefix}sidebar-item-hover-color: #{$white};
--#{$prefix}sidebar-border-color: #272f37;
}
/* Topbar Light */
html[data-topbar-color="light"] {
--#{$prefix}topbar-bg: #ffffff;
--#{$prefix}topbar-item-color: #707793;
--#{$prefix}topbar-search-bg: #f8f7fa;
}
/* Topbar Dark */
html[data-topbar-color="dark"] {
--#{$prefix}topbar-bg: #393f4a;
--#{$prefix}topbar-item-color: #afb9cf;
--#{$prefix}topbar-search-bg: #424957;
}
/* Topbar Dark (Dark Mode Only) */
html[data-bs-theme="dark"][data-topbar-color="dark"],
html[data-bs-theme="dark"][data-topbar-color="light"] {
--#{$prefix}topbar-bg: #1d2329;
--#{$prefix}topbar-item-color: #afb9cf;
--#{$prefix}topbar-search-bg: #232a31;
}

91
resources/scss/config/_variables-dark.scss Executable file
View File

@@ -0,0 +1,91 @@
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global Colors
//
// scss-docs-start sass-dark-mode-vars
$primary-text-emphasis-dark: tint-color($primary, 40%);
$secondary-text-emphasis-dark: tint-color($secondary, 40%);
$success-text-emphasis-dark: tint-color($success, 40%);
$info-text-emphasis-dark: tint-color($info, 40%);
$warning-text-emphasis-dark: tint-color($warning, 40%);
$danger-text-emphasis-dark: tint-color($danger, 40%);
$light-text-emphasis-dark: $gray-100;
$dark-text-emphasis-dark: $gray-300;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: rgba($primary, 15%);
$secondary-bg-subtle-dark: rgba($gray-700, 15%);
$success-bg-subtle-dark: rgba($success, 15%);
$info-bg-subtle-dark: rgba($info, 15%);
$warning-bg-subtle-dark: rgba($warning, 15%);
$danger-bg-subtle-dark: rgba($danger, 15%);
$light-bg-subtle-dark: rgba(var(--#{$prefix}light-rgb), .15);
$dark-bg-subtle-dark: rgba(var(--#{$prefix}dark-rgb), .15);
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%);
$secondary-border-subtle-dark: $gray-700;
$success-border-subtle-dark: shade-color($success, 40%);
$info-border-subtle-dark: shade-color($info, 40%);
$warning-border-subtle-dark: shade-color($warning, 40%);
$danger-border-subtle-dark: shade-color($danger, 40%);
$light-border-subtle-dark: $gray-700;
$dark-border-subtle-dark: $gray-500;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: #aab8c5;
$body-bg-dark: #191e23;
$body-secondary-color-dark: #8391a2;
$body-secondary-bg-dark: #1d2329;
$body-tertiary-color-dark: #f1f1f1;
$body-tertiary-bg-dark: #242b33;
$body-emphasis-color-dark: #dee2e6;
$border-color-dark: #272f37;
$border-color-translucent-dark: #8391a2;
$headings-color-dark: $body-color-dark;
$link-color-dark: #afb9cf;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
$code-color-dark: tint-color($code-color, 40%);
$mark-color-dark: $body-color-dark;
$mark-bg-dark: $yellow-800;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
$form-switch-color-dark: rgba($white, .25);
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300;
$form-valid-border-color-dark: $green-300;
$form-invalid-color-dark: $red-300;
$form-invalid-border-color-dark: $red-300;
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
// scss-docs-end sass-dark-mode-vars

1795
resources/scss/config/_variables.scss Executable file
View File

File diff suppressed because it is too large Load Diff