navs.less 4.9 KB

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