_navbar.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. // Wrapper and base class
  2. //
  3. // Provide a static navbar from which we expand to create full-width, fixed, and
  4. // other navbar variations.
  5. .navbar {
  6. position: relative;
  7. padding: $navbar-padding-vertical $navbar-padding-horizontal;
  8. @include clearfix;
  9. @include media-breakpoint-up(sm) {
  10. @include border-radius($navbar-border-radius);
  11. }
  12. }
  13. // Navbar alignment options
  14. //
  15. // Display the navbar across the entirety of the page or fixed it to the top or
  16. // bottom of the page.
  17. // A static, full width modifier with no rounded corners.
  18. .navbar-full {
  19. z-index: $zindex-navbar;
  20. @include media-breakpoint-up(sm) {
  21. @include border-radius(0);
  22. }
  23. }
  24. // Fix the top/bottom navbars when screen real estate supports it
  25. .navbar-fixed-top,
  26. .navbar-fixed-bottom {
  27. position: fixed;
  28. right: 0;
  29. left: 0;
  30. z-index: $zindex-navbar-fixed;
  31. // Undo the rounded corners
  32. @include media-breakpoint-up(sm) {
  33. @include border-radius(0);
  34. }
  35. }
  36. .navbar-fixed-top {
  37. top: 0;
  38. }
  39. .navbar-fixed-bottom {
  40. bottom: 0;
  41. }
  42. .navbar-sticky-top {
  43. position: sticky;
  44. top: 0;
  45. z-index: $zindex-navbar-sticky;
  46. width: 100%;
  47. // Undo the rounded corners
  48. @include media-breakpoint-up(sm) {
  49. @include border-radius(0);
  50. }
  51. }
  52. //
  53. // Brand/project name
  54. //
  55. .navbar-brand {
  56. float: left;
  57. padding-top: .25rem;
  58. padding-bottom: .25rem;
  59. margin-right: 1rem;
  60. font-size: $font-size-lg;
  61. @include hover-focus {
  62. text-decoration: none;
  63. }
  64. > img {
  65. display: block;
  66. }
  67. }
  68. .navbar-divider {
  69. float: left;
  70. width: 1px;
  71. padding-top: .425rem;
  72. padding-bottom: .425rem;
  73. margin-right: $navbar-padding-horizontal;
  74. margin-left: $navbar-padding-horizontal;
  75. overflow: hidden;
  76. &::before {
  77. content: "\00a0";
  78. }
  79. }
  80. // Navbar toggle
  81. //
  82. // Custom button for toggling the `.navbar-collapse`, powered by the collapse
  83. // Bootstrap JavaScript plugin.
  84. .navbar-toggler {
  85. padding: .5rem .75rem;
  86. font-size: $font-size-lg;
  87. line-height: 1;
  88. background: none;
  89. border: $border-width solid transparent;
  90. @include border-radius($btn-border-radius);
  91. @include hover-focus {
  92. text-decoration: none;
  93. }
  94. }
  95. // Custom override for
  96. .navbar-toggleable {
  97. &-xs {
  98. @include media-breakpoint-up(sm) {
  99. display: block !important;
  100. }
  101. }
  102. &-sm {
  103. @include media-breakpoint-up(md) {
  104. display: block !important;
  105. }
  106. }
  107. &-md {
  108. @include media-breakpoint-up(lg) {
  109. display: block !important;
  110. }
  111. }
  112. }
  113. // Navigation
  114. //
  115. // Custom navbar navigation built on the base `.nav` styles.
  116. .navbar-nav {
  117. .nav-item {
  118. float: left;
  119. }
  120. .nav-link {
  121. display: block;
  122. padding-top: .425rem;
  123. padding-bottom: .425rem;
  124. + .nav-link {
  125. margin-left: 1rem;
  126. }
  127. }
  128. .nav-item + .nav-item {
  129. margin-left: 1rem;
  130. }
  131. }
  132. // Dark links against a light background
  133. .navbar-light {
  134. .navbar-brand {
  135. color: $navbar-light-active-color;
  136. @include hover-focus {
  137. color: $navbar-light-active-color;
  138. }
  139. }
  140. .navbar-nav {
  141. .nav-link {
  142. color: $navbar-light-color;
  143. @include hover-focus {
  144. color: $navbar-light-hover-color;
  145. }
  146. }
  147. .open > .nav-link,
  148. .active > .nav-link,
  149. .nav-link.open,
  150. .nav-link.active {
  151. @include plain-hover-focus {
  152. color: $navbar-light-active-color;
  153. }
  154. }
  155. }
  156. .navbar-divider {
  157. background-color: rgba(0,0,0,.075);
  158. }
  159. }
  160. // White links against a dark background
  161. .navbar-dark {
  162. .navbar-brand {
  163. color: $navbar-dark-active-color;
  164. @include hover-focus {
  165. color: $navbar-dark-active-color;
  166. }
  167. }
  168. .navbar-nav {
  169. .nav-link {
  170. color: $navbar-dark-color;
  171. @include hover-focus {
  172. color: $navbar-dark-hover-color;
  173. }
  174. }
  175. .open > .nav-link,
  176. .active > .nav-link,
  177. .nav-link.open,
  178. .nav-link.active {
  179. @include plain-hover-focus {
  180. color: $navbar-dark-active-color;
  181. }
  182. }
  183. }
  184. .navbar-divider {
  185. background-color: rgba(255,255,255,.075);
  186. }
  187. }