126 lines
4.3 KiB
SCSS
126 lines
4.3 KiB
SCSS
:root,
|
|
[data-bs-theme='light'] {
|
|
/* ------------------------------- navbar-top ------------------------------- */
|
|
&:not([data-bs-theme='dark']) {
|
|
[data-navbar-appearance='darker'] {
|
|
--#{$prefix}navbar-top-dropdown-hover-bg: #{$body-color};
|
|
--#{$prefix}navbar-top-dropdown-color: #{$gray-400};
|
|
}
|
|
[data-navbar-appearance='darker']:not([data-bs-theme='dark']) {
|
|
.navbar-top-collapse {
|
|
&.show {
|
|
--#{$prefix}navbar-top-link-color: #{$gray-400};
|
|
--#{$prefix}navbar-top-menu-bg-color: #{$gray-1100};
|
|
--#{$prefix}navbar-top-border-color: var(--#{$prefix}border-color);
|
|
--#{$prefix}navbar-top-link-hover-color: #{$gray-300};
|
|
--#{$prefix}navbar-top-link-hover-bg: #{$body-highlight-color};
|
|
--#{$prefix}navbar-top-link-active-color: #{$gray-300};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* ------------------------------- navbar-vertical light dark ------------------------------- */
|
|
[data-navbar-appearance='darker'] {
|
|
--#{$prefix}navbar-vertical-border-color: #{$gray-900};
|
|
--#{$prefix}navbar-vertical-bg-color: #{$body-highlight-color};
|
|
--#{$prefix}navbar-vertical-label-color: #{$gray-600};
|
|
--#{$prefix}navbar-vertical-link-color: #{$gray-400};
|
|
--#{$prefix}navbar-vertical-link-hover-color: #{$gray-100};
|
|
--#{$prefix}navbar-vertical-link-hover-bg: #{$body-color};
|
|
--#{$prefix}navbar-vertical-link-active-color: #{$white};
|
|
--#{$prefix}navbar-vertical-link-disable-color: #{$gray-500};
|
|
|
|
// ----------- collapsed colors ----------------
|
|
--#{$prefix}navbar-vertical-hr-color: $gray-800;
|
|
--#{$prefix}navbar-vertical-collapsed-menu-bg: #{$body-highlight-color};
|
|
// ----------- collapsed colors ----------------
|
|
--#{$prefix}logo-text: #{$gray-100};
|
|
--#{$prefix}navbar-footer-border-color: #{$gray-900};
|
|
|
|
//--------------- navbar top ---------------------------------
|
|
--#{$prefix}navbar-top-bg-color: #{$body-highlight-color};
|
|
.navbar-nav-icons {
|
|
--#{$prefix}nav-link-color: #{$gray-500};
|
|
}
|
|
|
|
&.navbar-slim {
|
|
.navbar-brand span {
|
|
color: #{$gray-300} !important;
|
|
}
|
|
}
|
|
.badge-phoenix-warning {
|
|
--#{$prefix}badge-bg: #{$warning-bg-subtle-dark};
|
|
--#{$prefix}badge-color: #{$warning-dark};
|
|
--#{$prefix}badge-border-color: #{$warning-border-subtle-dark};
|
|
}
|
|
}
|
|
|
|
&[data-navigation-type='dual'] {
|
|
&:not([data-bs-theme='dark']) {
|
|
[data-navbar-appearance='darker'] {
|
|
--#{$prefix}dual-nav-border-color: #{$body-color};
|
|
--#{$prefix}dual-nav-first-layer-bg: #{$body-bg-dark};
|
|
|
|
.search-box {
|
|
&.search-box-icon {
|
|
color: #{$body-quaternary-color-dark};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
&:not([data-bs-theme='dark']) {
|
|
[data-navbar-appearance='darker'] {
|
|
.search-box {
|
|
.btn-close {
|
|
background: transparent escape-svg($btn-close-darken-nav-bg) center /
|
|
$btn-close-width auto no-repeat; // include transparent for button elements
|
|
}
|
|
// .search-input:focus {
|
|
// border-color: var(--#{$prefix}quaternary);
|
|
// }
|
|
.search-input {
|
|
background-color: #{$gray-1100};
|
|
border-color: $border-color-dark;
|
|
}
|
|
&.search-box-icon {
|
|
color: #{$body-quaternary-color-dark};
|
|
}
|
|
.form-control {
|
|
color: #{$gray-600};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//---------- dark mode ----------
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
[data-navbar-appearance='darker'] {
|
|
--#{$prefix}navbar-vertical-bg-color: #{$gray-1000};
|
|
--#{$prefix}navbar-vertical-label-color: #{$gray-600};
|
|
--#{$prefix}navbar-vertical-link-color: #{gray-400};
|
|
--#{$prefix}navbar-vertical-link-hover-color: #{$gray-100};
|
|
--#{$prefix}navbar-vertical-link-hover-bg: #{$gray-900};
|
|
--#{$prefix}navbar-vertical-link-active-color: #{$white};
|
|
--#{$prefix}navbar-vertical-link-disable-color: #{$gray-600};
|
|
// ----------- collapsed colors ----------------
|
|
--#{$prefix}navbar-vertical-collapsed-menu-bg: #{$gray-1000};
|
|
|
|
//--------------- navbar top ---------------------------------
|
|
--#{$prefix}navbar-top-bg-color: #{$gray-1000};
|
|
//input
|
|
.form-control {
|
|
color: #{$gray-600};
|
|
}
|
|
.search-box .search-box-icon {
|
|
color: #{$body-quaternary-color-dark};
|
|
}
|
|
}
|
|
}
|
|
}
|