_navs.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. //
  2. // Navs
  3. // --------------------------------------------------
  4. // Base class
  5. // --------------------------------------------------
  6. .nav {
  7. margin-bottom: 0;
  8. padding-left: 0; // Override default ul/ol
  9. list-style: none;
  10. @include clearfix();
  11. > li {
  12. position: relative;
  13. display: block;
  14. > a {
  15. position: relative;
  16. display: block;
  17. padding: $nav-link-padding;
  18. &:hover,
  19. &:focus {
  20. text-decoration: none;
  21. background-color: $nav-link-hover-bg;
  22. }
  23. }
  24. // Disabled state sets text to gray and nukes hover/tab effects
  25. &.disabled > a {
  26. color: $nav-disabled-link-color;
  27. &:hover,
  28. &:focus {
  29. color: $nav-disabled-link-hover-color;
  30. text-decoration: none;
  31. background-color: transparent;
  32. cursor: not-allowed;
  33. }
  34. }
  35. }
  36. // Open dropdowns
  37. .open > a {
  38. &,
  39. &:hover,
  40. &:focus {
  41. background-color: $nav-link-hover-bg;
  42. border-color: $link-color;
  43. }
  44. }
  45. // Nav dividers (deprecated with v3.0.1)
  46. //
  47. // This should have been removed in v3 with the dropping of `.nav-list`, but
  48. // we missed it. We don't currently support this anywhere, but in the interest
  49. // of maintaining backward compatibility in case you use it, it's deprecated.
  50. .nav-divider {
  51. @include nav-divider();
  52. }
  53. // Prevent IE8 from misplacing imgs
  54. //
  55. // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  56. > li > a > img {
  57. max-width: none;
  58. }
  59. }
  60. // Tabs
  61. // -------------------------
  62. // Give the tabs something to sit on
  63. .nav-tabs {
  64. border-bottom: 1px solid $nav-tabs-border-color;
  65. > li {
  66. float: left;
  67. // Make the list-items overlay the bottom border
  68. margin-bottom: -1px;
  69. // Actual tabs (as links)
  70. > a {
  71. margin-right: 2px;
  72. line-height: $line-height-base;
  73. border: 1px solid transparent;
  74. border-radius: $border-radius-base $border-radius-base 0 0;
  75. &:hover {
  76. border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
  77. }
  78. }
  79. // Active state, and its :hover to override normal :hover
  80. &.active > a {
  81. &,
  82. &:hover,
  83. &:focus {
  84. color: $nav-tabs-active-link-hover-color;
  85. background-color: $nav-tabs-active-link-hover-bg;
  86. border: 1px solid $nav-tabs-active-link-hover-border-color;
  87. border-bottom-color: transparent;
  88. cursor: default;
  89. }
  90. }
  91. }
  92. // pulling this in mainly for less shorthand
  93. &.nav-justified {
  94. @extend .nav-justified;
  95. @extend .nav-tabs-justified;
  96. }
  97. }
  98. // Pills
  99. // -------------------------
  100. .nav-pills {
  101. > li {
  102. float: left;
  103. // Links rendered as pills
  104. > a {
  105. border-radius: $nav-pills-border-radius;
  106. }
  107. + li {
  108. margin-left: 2px;
  109. }
  110. // Active state
  111. &.active > a {
  112. &,
  113. &:hover,
  114. &:focus {
  115. color: $nav-pills-active-link-hover-color;
  116. background-color: $nav-pills-active-link-hover-bg;
  117. }
  118. }
  119. }
  120. }
  121. // Stacked pills
  122. .nav-stacked {
  123. > li {
  124. float: none;
  125. + li {
  126. margin-top: 2px;
  127. margin-left: 0; // no need for this gap between nav items
  128. }
  129. }
  130. }
  131. // Nav variations
  132. // --------------------------------------------------
  133. // Justified nav links
  134. // -------------------------
  135. .nav-justified {
  136. width: 100%;
  137. > li {
  138. float: none;
  139. > a {
  140. text-align: center;
  141. margin-bottom: 5px;
  142. }
  143. }
  144. > .dropdown .dropdown-menu {
  145. top: auto;
  146. left: auto;
  147. }
  148. @media (min-width: $screen-sm-min) {
  149. > li {
  150. display: table-cell;
  151. width: 1%;
  152. > a {
  153. margin-bottom: 0;
  154. }
  155. }
  156. }
  157. }
  158. // Move borders to anchors instead of bottom of list
  159. //
  160. // Mixin for adding on top the shared `.nav-justified` styles for our tabs
  161. .nav-tabs-justified {
  162. border-bottom: 0;
  163. > li > a {
  164. // Override margin from .nav-tabs
  165. margin-right: 0;
  166. border-radius: $border-radius-base;
  167. }
  168. > .active > a,
  169. > .active > a:hover,
  170. > .active > a:focus {
  171. border: 1px solid $nav-tabs-justified-link-border-color;
  172. }
  173. @media (min-width: $screen-sm-min) {
  174. > li > a {
  175. border-bottom: 1px solid $nav-tabs-justified-link-border-color;
  176. border-radius: $border-radius-base $border-radius-base 0 0;
  177. }
  178. > .active > a,
  179. > .active > a:hover,
  180. > .active > a:focus {
  181. border-bottom-color: $nav-tabs-justified-active-link-border-color;
  182. }
  183. }
  184. }
  185. // Tabbable tabs
  186. // -------------------------
  187. // Hide tabbable panes to start, show them when `.active`
  188. .tab-content {
  189. > .tab-pane {
  190. display: none;
  191. }
  192. > .active {
  193. display: block;
  194. }
  195. }
  196. // Dropdowns
  197. // -------------------------
  198. // Specific dropdowns
  199. .nav-tabs .dropdown-menu {
  200. // make dropdown border overlap tab border
  201. margin-top: -1px;
  202. // Remove the top rounded corners here since there is a hard edge above the menu
  203. @include border-top-radius(0);
  204. }