_navbar.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. // Navbar
  2. // THIS DOES NOTHING
  3. // .navbar {
  4. // @include gradient-bg();
  5. // }
  6. // Button for toggling the navbar when in its collapsed state
  7. .navbar-toggler {
  8. background-color: transparent; // remove default button style
  9. border: $border-width solid transparent; // remove default button style
  10. // &:focus {
  11. // box-shadow: 0 0 0 $navbar-toggler-focus-width;
  12. // }
  13. }
  14. // Navbar themes
  15. .navbar-light {
  16. .navbar-brand {
  17. color: $navbar-light-brand-color-alt;
  18. &:hover,
  19. &:focus {
  20. color: $navbar-light-brand-hover-color-alt;
  21. }
  22. }
  23. .navbar-nav {
  24. .nav-link {
  25. color: $navbar-light-color-alt;
  26. &:hover,
  27. &:focus {
  28. color: $navbar-light-hover-color-alt;
  29. }
  30. &.disabled {
  31. color: $navbar-light-disabled-color-alt;
  32. }
  33. }
  34. .show > .nav-link,
  35. .nav-link.active {
  36. color: $navbar-light-active-color-alt;
  37. }
  38. }
  39. .navbar-toggler {
  40. color: $navbar-light-color-alt;
  41. border-color: $navbar-light-toggler-border-color-alt;
  42. }
  43. .navbar-toggler-icon {
  44. background-image: escape-svg($navbar-light-toggler-icon-bg-alt);
  45. }
  46. .navbar-text {
  47. color: $navbar-light-color-alt;
  48. a,
  49. a:hover,
  50. a:focus {
  51. color: $navbar-light-active-color-alt;
  52. }
  53. }
  54. }
  55. // White links against a dark background
  56. .navbar-dark {
  57. .navbar-brand {
  58. color: $navbar-dark-brand-color-alt;
  59. &:hover,
  60. &:focus {
  61. color: $navbar-dark-brand-hover-color-alt;
  62. }
  63. }
  64. .navbar-nav {
  65. .nav-link {
  66. color: $navbar-dark-color-alt;
  67. &:hover,
  68. &:focus {
  69. color: $navbar-dark-hover-color-alt;
  70. }
  71. &.disabled {
  72. color: $navbar-dark-disabled-color-alt;
  73. }
  74. }
  75. .show > .nav-link,
  76. .nav-link.active {
  77. color: $navbar-dark-active-color-alt;
  78. }
  79. }
  80. .navbar-toggler {
  81. color: $navbar-dark-color-alt;
  82. border-color: $navbar-dark-toggler-border-color-alt;
  83. }
  84. .navbar-toggler-icon {
  85. background-image: escape-svg($navbar-dark-toggler-icon-bg-alt);
  86. }
  87. .navbar-text {
  88. color: $navbar-dark-color-alt;
  89. a,
  90. a:hover,
  91. a:focus {
  92. color: $navbar-dark-active-color-alt;
  93. }
  94. }
  95. }