No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_navbar.scss 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /* Navbar
  2. ******************************************************************************* */
  3. .layout-navbar {
  4. background-color: var(--#{$prefix}paper-bg);
  5. }
  6. /* IE fix */
  7. /* Mega dropdown
  8. ****************************************************************************** */
  9. .mega-dropdown {
  10. .dropdown-toggle {
  11. box-shadow: none;
  12. outline: 0;
  13. }
  14. .dropdown-menu {
  15. inline-size: 100%;
  16. }
  17. }
  18. .navbar {
  19. &.bg-body-tertiary {
  20. --#{$prefix}navbar-color: var(--#{$prefix}body-color);
  21. --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color);
  22. --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg));
  23. --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color);
  24. --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color);
  25. --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg));
  26. }
  27. &.bg-white {
  28. --#{$prefix}navbar-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}white));
  29. --#{$prefix}navbar-hover-color: var(--#{$prefix}pure-black);
  30. --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}pure-black) 40%, var(--#{$prefix}white));
  31. --#{$prefix}navbar-active-color: var(--#{$prefix}pure-black);
  32. --#{$prefix}navbar-brand-color: var(--#{$prefix}pure-black);
  33. --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}white));
  34. }
  35. }
  36. /* Generate contextual modifier classes for colorizing the navbar */
  37. @each $state in map-keys($theme-colors) {
  38. .navbar.bg-#{$state} {
  39. @if $state == "light" {
  40. --#{$prefix}navbar-color: var(--#{$prefix}body-color);
  41. --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color);
  42. --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg));
  43. --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color);
  44. --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color);
  45. --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg));
  46. }
  47. @else {
  48. --#{$prefix}navbar-color: color-mix(in sRGB, var(--#{$prefix}#{$state}-contrast) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
  49. --#{$prefix}navbar-hover-color: var(--#{$prefix}#{$state}-contrast);
  50. --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}#{$state}-contrast) 60%, var(--#{$prefix}#{$state}));
  51. --#{$prefix}navbar-active-color: var(--#{$prefix}#{$state}-contrast);
  52. --#{$prefix}navbar-brand-color: var(--#{$prefix}#{$state}-contrast);
  53. --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
  54. }
  55. }
  56. }