331 lines
21 KiB
SCSS
331 lines
21 KiB
SCSS
:root {
|
|
|
|
// card
|
|
--#{$prefix}card-logo-dark: block;
|
|
--#{$prefix}card-logo-light: none;
|
|
|
|
//vertical menu
|
|
--#{$prefix}vertical-menu-width: #{$vertical-menu-width};
|
|
--#{$prefix}vertical-menu-width-md: #{$vertical-menu-width-md};
|
|
--#{$prefix}vertical-menu-width-sm: #{$vertical-menu-width-sm};
|
|
|
|
// Topbar - (Default Light)
|
|
--#{$prefix}header-bg: #{$header-bg};
|
|
--#{$prefix}header-border: #{$header-border};
|
|
--#{$prefix}header-item-color: #{$header-item-color};
|
|
--#{$prefix}header-item-bg: #{$header-item-bg};
|
|
--#{$prefix}header-item-sub-color: #{$header-item-sub-color};
|
|
--#{$prefix}topbar-search-bg: #{$topbar-search-bg};
|
|
--#{$prefix}topbar-search-color: #{$topbar-search-color};
|
|
--#{$prefix}topbar-user-bg: #{$topbar-user-bg};
|
|
|
|
//page title
|
|
--#{$prefix}page-title-box-shadow: #{$page-title-box-shadow};
|
|
--#{$prefix}page-title-border: #{$page-title-border};
|
|
|
|
// Topbar - Dark
|
|
&[data-topbar="dark"] {
|
|
--#{$prefix}header-bg: #{$dark-header-bg};
|
|
--#{$prefix}header-item-color: #{$dark-header-item-color};
|
|
--#{$prefix}header-item-bg: #{$dark-header-item-bg};
|
|
--#{$prefix}header-item-sub-color: #{$dark-header-item-sub-color};
|
|
--#{$prefix}topbar-user-bg: #{$dark-topbar-user-bg};
|
|
--#{$prefix}topbar-search-bg: #{$dark-topbar-search-bg};
|
|
--#{$prefix}topbar-search-color: #{$dark-topbar-search-color};
|
|
--#{$prefix}header-border: #{$dark-header-border};
|
|
}
|
|
|
|
// Horizontal nav
|
|
--#{$prefix}topnav-bg: #{$twocolumn-menu-iconview-bg};
|
|
--#{$prefix}topnav-item-color: #{$topnav-item-color};
|
|
--#{$prefix}topnav-item-active-color: #{$topnav-item-active-color};
|
|
|
|
// twocolumn menu
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg};
|
|
--#{$prefix}twocolumn-menu-box-shadow: #{$twocolumn-menu-box-shadow};
|
|
|
|
// boxed
|
|
--#{$prefix}boxed-layout-width: #{$boxed-layout-width};
|
|
--#{$prefix}boxed-body-bg: #{$boxed-body-bg};
|
|
|
|
//semibox layout
|
|
--#{$prefix}semibox-width: #{$semibox-width};
|
|
|
|
//footer
|
|
--#{$prefix}footer-bg: #{$footer-bg};
|
|
--#{$prefix}footer-color: #{$footer-color};
|
|
|
|
//form
|
|
--#{$prefix}input-bg-custom: #{$input-bg-custom};
|
|
--#{$prefix}input-border-custom: #{$input-border-custom};
|
|
}
|
|
|
|
//sidebar light theme
|
|
@if $sidebar-mode {
|
|
:root {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border};
|
|
--#{$prefix}vertical-menu-item-color: #{$vertical-menu-item-color};
|
|
--#{$prefix}vertical-menu-item-bg: #{$vertical-menu-item-bg};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$vertical-menu-item-hover-color};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$vertical-menu-item-active-color};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$vertical-menu-item-active-bg};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$vertical-menu-sub-item-color};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$vertical-menu-sub-item-hover-color};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$vertical-menu-sub-item-active-color};
|
|
--#{$prefix}vertical-menu-title-color: #{$vertical-menu-title-color};
|
|
--#{$prefix}vertical-menu-box-shadow: #{$vertical-menu-box-shadow};
|
|
--#{$prefix}vertical-menu-dropdown-box-shadow: #{$vertical-menu-dropdown-box-shadow};
|
|
|
|
&[data-sidebar="dark"] {
|
|
//vertical dark
|
|
--#{$prefix}vertical-menu-bg: #{$dark-vertical-menu-bg};
|
|
--#{$prefix}vertical-menu-border: #{$dark-vertical-menu-border};
|
|
--#{$prefix}vertical-menu-item-color: #{$dark-vertical-menu-item-color};
|
|
--#{$prefix}vertical-menu-item-bg: #{$dark-vertical-menu-item-bg};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$dark-vertical-menu-item-hover-color};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$dark-vertical-menu-item-active-color};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$dark-vertical-menu-item-active-bg};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$dark-vertical-menu-sub-item-color};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$dark-vertical-menu-sub-item-hover-color};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$dark-vertical-menu-sub-item-active-color};
|
|
--#{$prefix}vertical-menu-title-color: #{$dark-vertical-menu-title-color};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$dark-twocolumn-menu-iconview-bg};
|
|
--#{$prefix}vertical-menu-box-shadow: #{$dark-vertical-menu-box-shadow};
|
|
--#{$prefix}vertical-menu-dropdown-box-shadow: #{$dark-vertical-menu-dropdown-box-shadow};
|
|
}
|
|
}
|
|
}
|
|
|
|
//sidebar gradient light theme
|
|
@if $sidebar-gradient-mode {
|
|
:root {
|
|
&:is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) {
|
|
--#{$prefix}vertical-menu-item-color: #{$vertical-menu-item-color-gradient};
|
|
--#{$prefix}vertical-menu-item-bg: #{$vertical-menu-item-bg-gradient};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$vertical-menu-item-hover-color-gradient};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$vertical-menu-item-active-color-gradient};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$vertical-menu-item-active-bg-gradient};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$vertical-menu-sub-item-color-gradient};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$vertical-menu-sub-item-hover-color-gradient};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$vertical-menu-sub-item-active-color-gradient};
|
|
--#{$prefix}vertical-menu-title-color: #{$vertical-menu-title-color-gradient};
|
|
--#{$prefix}vertical-menu-box-shadow: #{$vertical-menu-box-shadow-gradient};
|
|
--#{$prefix}vertical-menu-dropdown-box-shadow: #{$vertical-menu-dropdown-box-shadow-gradient};
|
|
|
|
}
|
|
|
|
&[data-sidebar="gradient"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient};
|
|
}
|
|
|
|
&[data-sidebar="gradient-2"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-2};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-2};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-2};
|
|
}
|
|
|
|
&[data-sidebar="gradient-3"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-3};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-3};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-3};
|
|
|
|
}
|
|
|
|
&[data-sidebar="gradient-4"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-4};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-4};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-4};
|
|
}
|
|
}
|
|
}
|
|
|
|
//theme dark
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
--#{$prefix}light: #{$light-dark};
|
|
--#{$prefix}light-rgb: #{to-rgb($light-dark)};
|
|
--#{$prefix}light-text-emphasis: #{$light-text-emphasis-dark};
|
|
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
|
|
--#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
|
|
|
|
--#{$prefix}dark: #{$dark-color};
|
|
--#{$prefix}dark-rgb: #{to-rgb($dark-color)};
|
|
--#{$prefix}dark-text-emphasis: #{$dark-text-emphasis-dark};
|
|
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
|
|
--#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
|
|
|
|
// card
|
|
--#{$prefix}card-logo-dark: none;
|
|
--#{$prefix}card-logo-light: block;
|
|
|
|
//footer
|
|
--#{$prefix}footer-bg: #{$footer-bg-dark};
|
|
--#{$prefix}footer-color: #{$footer-color-dark};
|
|
|
|
// Horizontal nav
|
|
--#{$prefix}topnav-bg: #{$topnav-bg-dark};
|
|
--#{$prefix}topnav-item-color: #{$topnav-item-color-dark};
|
|
--#{$prefix}topnav-item-active-color: #{$topnav-item-active-color-dark};
|
|
//page title
|
|
--#{$prefix}page-title-box-shadow: #{$page-title-box-shadow-dark};
|
|
--#{$prefix}page-title-border: #{$page-title-border-dark};
|
|
|
|
//two columns
|
|
--#{$prefix}twocolumn-menu-box-shadow: #{$twocolumn-menu-box-shadow-dark};
|
|
|
|
// boxed
|
|
--#{$prefix}boxed-body-bg: #{$boxed-body-bg-dark};
|
|
|
|
.table-light {
|
|
--#{$prefix}table-color: #{lighten($light-dark, 100%)};
|
|
--#{$prefix}table-bg: var(--#{$prefix}light);
|
|
--#{$prefix}table-border-color: var(--#{$prefix}border-color);
|
|
--#{$prefix}table-striped-bg: var(--#{$prefix}light);
|
|
--#{$prefix}table-striped-color: #{lighten($light-dark, 100%)};
|
|
--#{$prefix}table-active-bg: var(--#{$prefix}light);
|
|
--#{$prefix}table-active-color: #{lighten($light-dark, 100%)};
|
|
--#{$prefix}table-hover-bg: var(--#{$prefix}light);
|
|
--#{$prefix}table-hover-color: #{lighten($light-dark, 100%)};
|
|
}
|
|
|
|
.btn-light,
|
|
.btn-outline-light {
|
|
--#{$prefix}btn-color: #{tint-color($body-bg-dark, 50%)};
|
|
--#{$prefix}btn-active-color: #{$white};
|
|
--#{$prefix}btn-hover-color: #{$white};
|
|
}
|
|
|
|
.btn-outline-dark,
|
|
.btn-soft-dark, .btn-ghost-dark {
|
|
--#{$prefix}btn-color: #{$white};
|
|
}
|
|
|
|
.btn-ghost-dark {
|
|
--#{$prefix}btn-active-color: #{$white};
|
|
--#{$prefix}btn-hover-color: #{$white};
|
|
}
|
|
|
|
.dropdown-menu {
|
|
--#{$prefix}dropdown-bg: #{$dropdown-bg-dark};
|
|
--#{$prefix}dropdown-link-color: #{$dropdown-link-color-dark};
|
|
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color-dark};
|
|
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg-dark};
|
|
--#{$prefix}dropdown-border-width: #{$dropdown-border-width-dark};
|
|
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color-dark};
|
|
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg-dark};
|
|
}
|
|
|
|
//form
|
|
--#{$prefix}input-bg-custom: #{$input-bg-custom-dark};
|
|
--#{$prefix}input-border-custom: #{$input-border-custom-dark};
|
|
}
|
|
}
|
|
|
|
//topbar dark mode
|
|
@if $topbar-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
// Topbar
|
|
--#{$prefix}header-bg: #{$header-bg-dark};
|
|
--#{$prefix}header-border: #{$header-border-dark};
|
|
--#{$prefix}header-item-color: #{$header-item-color-dark};
|
|
--#{$prefix}header-item-bg: #{$header-item-bg-dark};
|
|
--#{$prefix}header-item-sub-color: #{$header-item-sub-color-dark};
|
|
--#{$prefix}topbar-user-bg: #{$topbar-user-bg-dark};
|
|
--#{$prefix}topbar-search-bg: #{$topbar-search-bg-dark};
|
|
--#{$prefix}topbar-search-color: #{$topbar-search-color-dark};
|
|
|
|
// Topbar - Dark
|
|
&[data-topbar="dark"] {
|
|
--#{$prefix}header-bg: #{$dark-header-bg-dark};
|
|
--#{$prefix}header-border: #{$dark-header-border-dark};
|
|
--#{$prefix}header-item-color: #{$dark-header-item-color-dark};
|
|
--#{$prefix}header-item-bg: #{$dark-header-item-bg-dark};
|
|
--#{$prefix}header-item-sub-color: #{$dark-header-item-sub-color-dark};
|
|
--#{$prefix}topbar-user-bg: #{$dark-topbar-user-bg-dark};
|
|
--#{$prefix}topbar-search-bg: #{$dark-topbar-search-bg-dark};
|
|
--#{$prefix}topbar-search-color: #{$dark-topbar-search-color-dark};
|
|
}
|
|
}
|
|
}
|
|
|
|
//sidebar dark mode
|
|
@if $sidebar-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
|
|
//sidebar light
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-dark};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-dark};
|
|
--#{$prefix}vertical-menu-item-color: #{$vertical-menu-item-color-dark};
|
|
--#{$prefix}vertical-menu-item-bg: #{$vertical-menu-item-bg-dark};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$vertical-menu-item-hover-color-dark};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$vertical-menu-item-active-color-dark};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$vertical-menu-item-active-bg-dark};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$vertical-menu-sub-item-color-dark};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$vertical-menu-sub-item-hover-color-dark};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$vertical-menu-sub-item-active-color-dark};
|
|
--#{$prefix}vertical-menu-title-color: #{$vertical-menu-title-color-dark};
|
|
|
|
&[data-sidebar="dark"] {
|
|
//vertical dark
|
|
--#{$prefix}vertical-menu-bg: #{$dark-vertical-menu-bg-dark};
|
|
--#{$prefix}vertical-menu-border: #{$dark-vertical-menu-border-dark};
|
|
--#{$prefix}vertical-menu-item-color: #{$dark-vertical-menu-item-color-dark};
|
|
--#{$prefix}vertical-menu-item-bg: #{$dark-vertical-menu-item-bg-dark};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$dark-vertical-menu-item-hover-color-dark};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$dark-vertical-menu-item-active-color-dark};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$dark-vertical-menu-item-active-bg-dark};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$dark-vertical-menu-sub-item-color-dark};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$dark-vertical-menu-sub-item-hover-color-dark};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$dark-vertical-menu-sub-item-active-color-dark};
|
|
--#{$prefix}vertical-menu-title-color: #{$dark-vertical-menu-title-color-dark};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$dark-twocolumn-menu-iconview-bg-dark};
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//sidebar gradient dark mode
|
|
@if $sidebar-gradient-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
&:is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) {
|
|
--#{$prefix}vertical-menu-item-color: #{$vertical-menu-item-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-item-bg: #{$vertical-menu-item-bg-gradient-dark};
|
|
--#{$prefix}vertical-menu-item-hover-color: #{$vertical-menu-item-hover-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-item-active-color: #{$vertical-menu-item-active-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-item-active-bg: #{$vertical-menu-item-active-bg-gradient-dark};
|
|
--#{$prefix}vertical-menu-sub-item-color: #{$vertical-menu-sub-item-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-sub-item-hover-color: #{$vertical-menu-sub-item-hover-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-sub-item-active-color: #{$vertical-menu-sub-item-active-color-gradient-dark};
|
|
--#{$prefix}vertical-menu-title-color: #{$vertical-menu-title-color-gradient-dark};
|
|
|
|
}
|
|
|
|
&[data-sidebar="gradient"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-dark};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-dark};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-dark};
|
|
}
|
|
|
|
&[data-sidebar="gradient-2"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-2-dark};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-2-dark};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-2-dark};
|
|
}
|
|
|
|
&[data-sidebar="gradient-3"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-3-dark};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-3-dark};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-3-dark};
|
|
|
|
}
|
|
|
|
&[data-sidebar="gradient-4"] {
|
|
--#{$prefix}vertical-menu-bg: #{$vertical-menu-bg-gradient-4-dark};
|
|
--#{$prefix}vertical-menu-border: #{$vertical-menu-border-gradient-4-dark};
|
|
--#{$prefix}twocolumn-menu-iconview-bg: #{$twocolumn-menu-iconview-bg-gradient-4-dark};
|
|
}
|
|
}
|
|
} |