navs.less 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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. .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. // Dividers (basically an hr) within the dropdown
  46. .nav-divider {
  47. .nav-divider();
  48. }
  49. // Prevent IE8 from misplacing imgs
  50. // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  51. > li > a > img {
  52. max-width: none;
  53. }
  54. }
  55. // Tabs
  56. // -------------------------
  57. // Give the tabs something to sit on
  58. .nav-tabs {
  59. border-bottom: 1px solid @nav-tabs-border-color;
  60. > li {
  61. float: left;
  62. // Make the list-items overlay the bottom border
  63. margin-bottom: -1px;
  64. // Actual tabs (as links)
  65. > a {
  66. margin-right: 2px;
  67. line-height: @line-height-base;
  68. border: 1px solid transparent;
  69. border-radius: @border-radius-base @border-radius-base 0 0;
  70. &:hover {
  71. border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
  72. }
  73. }
  74. // Active state, and it's :hover to override normal :hover
  75. &.active > a {
  76. &,
  77. &:hover,
  78. &:focus {
  79. color: @nav-tabs-active-link-hover-color;
  80. background-color: @nav-tabs-active-link-hover-bg;
  81. border: 1px solid @nav-tabs-active-link-hover-border-color;
  82. border-bottom-color: transparent;
  83. cursor: default;
  84. }
  85. }
  86. }
  87. // pulling this in mainly for less shorthand
  88. &.nav-justified {
  89. .nav-justified();
  90. .nav-tabs-justified();
  91. }
  92. }
  93. // Pills
  94. // -------------------------
  95. .nav-pills {
  96. > li {
  97. float: left;
  98. // Links rendered as pills
  99. > a {
  100. border-radius: 5px;
  101. }
  102. + li {
  103. margin-left: 2px;
  104. }
  105. // Active state
  106. &.active > a {
  107. &,
  108. &:hover,
  109. &:focus {
  110. color: @nav-pills-active-link-hover-color;
  111. background-color: @nav-pills-active-link-hover-bg;
  112. }
  113. }
  114. }
  115. }
  116. // Stacked pills
  117. .nav-stacked {
  118. > li {
  119. float: none;
  120. + li {
  121. margin-top: 2px;
  122. margin-left: 0; // no need for this gap between nav items
  123. }
  124. }
  125. }
  126. // Nav variations
  127. // --------------------------------------------------
  128. // Justified nav links
  129. // -------------------------
  130. .nav-justified {
  131. width: 100%;
  132. > li {
  133. float: none;
  134. > a {
  135. text-align: center;
  136. }
  137. }
  138. @media (min-width: @screen-sm) {
  139. > li {
  140. display: table-cell;
  141. width: 1%;
  142. }
  143. }
  144. }
  145. // Move borders to anchors instead of bottom of list
  146. .nav-tabs-justified {
  147. border-bottom: 0;
  148. > li > a {
  149. border-bottom: 1px solid @nav-tabs-justified-link-border-color;
  150. // Override margin from .nav-tabs
  151. margin-right: 0;
  152. }
  153. > .active > a {
  154. border-bottom-color: @nav-tabs-justified-active-link-border-color;
  155. }
  156. }
  157. // Tabbable tabs
  158. // -------------------------
  159. // Clear any floats
  160. .tabbable {
  161. .clearfix();
  162. }
  163. // Show/hide tabbable areas
  164. .tab-content > .tab-pane,
  165. .pill-content > .pill-pane {
  166. display: none;
  167. }
  168. .tab-content,
  169. .pill-content {
  170. > .active {
  171. display: block;
  172. }
  173. }
  174. // Dropdowns
  175. // -------------------------
  176. // Make dropdown carets use link color in navs
  177. .nav .caret {
  178. border-top-color: @link-color;
  179. border-bottom-color: @link-color;
  180. }
  181. .nav a:hover .caret {
  182. border-top-color: @link-hover-color;
  183. border-bottom-color: @link-hover-color;
  184. }
  185. // Specific dropdowns
  186. .nav-tabs .dropdown-menu {
  187. // make dropdown border overlap tab border
  188. margin-top: -1px;
  189. // Remove the top rounded corners here since there is a hard edge above the menu
  190. .border-top-radius(0);
  191. }