df3731273c82d43121ea4d7f2f4cec70e5799983.svn-base 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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. // Static top (unfixed, but 100% wide) navbar
  18. .navbar-static-top {
  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. margin-bottom: 0; // override .navbar defaults
  32. // Undo the rounded corners
  33. @include media-breakpoint-up(sm) {
  34. @include border-radius(0);
  35. }
  36. }
  37. .navbar-fixed-top {
  38. top: 0;
  39. }
  40. .navbar-fixed-bottom {
  41. bottom: 0;
  42. }
  43. .navbar-sticky-top {
  44. position: sticky;
  45. top: 0;
  46. z-index: $zindex-navbar-sticky;
  47. width: 100%;
  48. // Undo the rounded corners
  49. @include media-breakpoint-up(sm) {
  50. @include border-radius(0);
  51. }
  52. }
  53. //
  54. // Brand/project name
  55. //
  56. .navbar-brand {
  57. float: left;
  58. margin-right: 1rem;
  59. padding-top: .25rem;
  60. padding-bottom: .25rem;
  61. font-size: $font-size-lg;
  62. @include hover-focus {
  63. text-decoration: none;
  64. }
  65. > img {
  66. display: block;
  67. }
  68. }
  69. .navbar-divider {
  70. float: left;
  71. width: 1px;
  72. padding-top: .425rem;
  73. padding-bottom: .425rem;
  74. overflow: hidden;
  75. margin-left: $navbar-padding-horizontal;
  76. margin-right: $navbar-padding-horizontal;
  77. &:before {
  78. content: '\00a0';
  79. }
  80. }
  81. // Navbar toggle
  82. //
  83. // Custom button for toggling the `.navbar-collapse`, powered by the collapse
  84. // Bootstrap JavaScript plugin.
  85. .navbar-toggler {
  86. padding: .5rem .75rem;
  87. font-size: $font-size-lg;
  88. line-height: 1;
  89. background: none;
  90. border: $border-width solid transparent;
  91. @include border-radius($btn-border-radius);
  92. @include hover-focus {
  93. text-decoration: none;
  94. }
  95. }
  96. // Custom override for
  97. .navbar-toggleable {
  98. &-xs {
  99. @include media-breakpoint-up(sm) {
  100. display: block !important;
  101. }
  102. }
  103. &-sm {
  104. @include media-breakpoint-up(md) {
  105. display: block !important;
  106. }
  107. }
  108. }
  109. // Navigation
  110. //
  111. // Custom navbar navigation built on the base `.nav` styles.
  112. .navbar-nav {
  113. .nav-item {
  114. float: left;
  115. }
  116. .nav-link {
  117. display: block;
  118. padding-top: .425rem;
  119. padding-bottom: .425rem;
  120. + .nav-link {
  121. margin-left: 1rem;
  122. }
  123. }
  124. .nav-item + .nav-item {
  125. margin-left: 1rem;
  126. }
  127. }
  128. // Dark links against a light background
  129. .navbar-light {
  130. .navbar-brand {
  131. color: $navbar-light-active-color;
  132. @include hover-focus {
  133. color: $navbar-light-active-color;
  134. }
  135. }
  136. .navbar-nav {
  137. .nav-link {
  138. color: $navbar-light-color;
  139. @include hover-focus {
  140. color: $navbar-light-hover-color;
  141. }
  142. }
  143. .open > .nav-link,
  144. .active > .nav-link,
  145. .nav-link.open,
  146. .nav-link.active {
  147. @include plain-hover-focus {
  148. color: $navbar-light-active-color;
  149. }
  150. }
  151. }
  152. .navbar-divider {
  153. background-color: rgba(0,0,0,.075);
  154. }
  155. }
  156. // White links against a dark background
  157. .navbar-dark {
  158. .navbar-brand {
  159. color: $navbar-dark-active-color;
  160. @include hover-focus {
  161. color: $navbar-dark-active-color;
  162. }
  163. }
  164. .navbar-nav {
  165. .nav-link {
  166. color: $navbar-dark-color;
  167. @include hover-focus {
  168. color: $navbar-dark-hover-color;
  169. }
  170. }
  171. .open > .nav-link,
  172. .active > .nav-link,
  173. .nav-link.open,
  174. .nav-link.active {
  175. @include plain-hover-focus {
  176. color: $navbar-dark-active-color;
  177. }
  178. }
  179. }
  180. .navbar-divider {
  181. background-color: rgba(255,255,255,.075);
  182. }
  183. }