_navbar.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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-y $navbar-padding-x;
  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: $navbar-brand-padding-y;
  58. padding-bottom: $navbar-brand-padding-y;
  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: $border-width;
  71. padding-top: .425rem;
  72. padding-bottom: .425rem;
  73. margin-right: $navbar-padding-x;
  74. margin-left: $navbar-padding-x;
  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. width: 2.5em;
  86. height: 2em;
  87. padding: .5rem .75rem;
  88. font-size: $font-size-lg;
  89. line-height: 1;
  90. background: transparent no-repeat center center;
  91. background-size: 24px 24px;
  92. border: $border-width solid transparent;
  93. @include border-radius($btn-border-radius);
  94. @include hover-focus {
  95. text-decoration: none;
  96. }
  97. }
  98. // Navigation
  99. //
  100. // Custom navbar navigation built on the base `.nav` styles.
  101. .navbar-nav {
  102. .nav-item {
  103. float: left;
  104. }
  105. .nav-link {
  106. display: block;
  107. padding-top: .425rem;
  108. padding-bottom: .425rem;
  109. + .nav-link {
  110. margin-left: 1rem;
  111. }
  112. }
  113. .nav-item + .nav-item {
  114. margin-left: 1rem;
  115. }
  116. }
  117. // Dark links against a light background
  118. .navbar-light {
  119. .navbar-brand {
  120. color: $navbar-light-active-color;
  121. @include hover-focus {
  122. color: $navbar-light-active-color;
  123. }
  124. }
  125. .navbar-nav {
  126. .nav-link {
  127. color: $navbar-light-color;
  128. @include hover-focus {
  129. color: $navbar-light-hover-color;
  130. }
  131. }
  132. .open > .nav-link,
  133. .active > .nav-link,
  134. .nav-link.open,
  135. .nav-link.active {
  136. @include plain-hover-focus {
  137. color: $navbar-light-active-color;
  138. }
  139. }
  140. }
  141. .navbar-toggler {
  142. background-image: $navbar-light-toggler-bg;
  143. }
  144. .navbar-divider {
  145. background-color: rgba(0,0,0,.075);
  146. }
  147. }
  148. // White links against a dark background
  149. .navbar-dark {
  150. .navbar-brand {
  151. color: $navbar-dark-active-color;
  152. @include hover-focus {
  153. color: $navbar-dark-active-color;
  154. }
  155. }
  156. .navbar-nav {
  157. .nav-link {
  158. color: $navbar-dark-color;
  159. @include hover-focus {
  160. color: $navbar-dark-hover-color;
  161. }
  162. }
  163. .open > .nav-link,
  164. .active > .nav-link,
  165. .nav-link.open,
  166. .nav-link.active {
  167. @include plain-hover-focus {
  168. color: $navbar-dark-active-color;
  169. }
  170. }
  171. }
  172. .navbar-toggler {
  173. background-image: $navbar-dark-toggler-bg;
  174. }
  175. .navbar-divider {
  176. background-color: rgba(255,255,255,.075);
  177. }
  178. }
  179. // Navbar toggleable
  180. //
  181. // Custom override for collapse plugin in navbar.
  182. .navbar-toggleable {
  183. &-xs {
  184. @include clearfix;
  185. @include media-breakpoint-down(xs) {
  186. .navbar-nav .nav-item {
  187. float: none;
  188. margin-left: 0;
  189. }
  190. }
  191. @include media-breakpoint-up(sm) {
  192. display: block !important;
  193. }
  194. }
  195. &-sm {
  196. @include clearfix;
  197. @include media-breakpoint-down(sm) {
  198. .navbar-nav .nav-item {
  199. float: none;
  200. margin-left: 0;
  201. }
  202. }
  203. @include media-breakpoint-up(md) {
  204. display: block !important;
  205. }
  206. }
  207. &-md {
  208. @include clearfix;
  209. @include media-breakpoint-down(md) {
  210. .navbar-nav .nav-item {
  211. float: none;
  212. margin-left: 0;
  213. }
  214. }
  215. @include media-breakpoint-up(lg) {
  216. display: block !important;
  217. }
  218. }
  219. }