| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- /* Navbar
- ******************************************************************************* */
- .layout-navbar {
- background-color: var(--#{$prefix}paper-bg);
- }
-
- /* IE fix */
-
- /* Mega dropdown
- ****************************************************************************** */
-
- .mega-dropdown {
- .dropdown-toggle {
- box-shadow: none;
- outline: 0;
- }
- .dropdown-menu {
- inline-size: 100%;
- }
- }
- .navbar {
- &.bg-body-tertiary {
- --#{$prefix}navbar-color: var(--#{$prefix}body-color);
- --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg));
- --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg));
- }
- &.bg-white {
- --#{$prefix}navbar-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}white));
- --#{$prefix}navbar-hover-color: var(--#{$prefix}pure-black);
- --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}pure-black) 40%, var(--#{$prefix}white));
- --#{$prefix}navbar-active-color: var(--#{$prefix}pure-black);
- --#{$prefix}navbar-brand-color: var(--#{$prefix}pure-black);
- --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}white));
- }
- }
-
- /* Generate contextual modifier classes for colorizing the navbar */
- @each $state in map-keys($theme-colors) {
- .navbar.bg-#{$state} {
- @if $state == "light" {
- --#{$prefix}navbar-color: var(--#{$prefix}body-color);
- --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg));
- --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color);
- --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg));
- }
- @else {
- --#{$prefix}navbar-color: color-mix(in sRGB, var(--#{$prefix}#{$state}-contrast) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
- --#{$prefix}navbar-hover-color: var(--#{$prefix}#{$state}-contrast);
- --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}#{$state}-contrast) 60%, var(--#{$prefix}#{$state}));
- --#{$prefix}navbar-active-color: var(--#{$prefix}#{$state}-contrast);
- --#{$prefix}navbar-brand-color: var(--#{$prefix}#{$state}-contrast);
- --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
- }
- }
- }
|