navs.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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
  78. @nav-tabs-border-color;
  79. }
  80. }
  81. // Active state, and its :hover to override normal :hover
  82. &.active > a {
  83. &,
  84. &:hover,
  85. &:focus {
  86. color: @nav-tabs-active-link-hover-color;
  87. cursor: default;
  88. background-color: @nav-tabs-active-link-hover-bg;
  89. border: 1px solid @nav-tabs-active-link-hover-border-color;
  90. border-bottom-color: transparent;
  91. }
  92. }
  93. }
  94. }
  95. // Pills
  96. // -------------------------
  97. .nav-pills {
  98. > li {
  99. float: left;
  100. // Links rendered as pills
  101. > a {
  102. border-radius: @nav-pills-border-radius;
  103. }
  104. + li {
  105. margin-left: 2px;
  106. }
  107. // Active state
  108. &.active > a {
  109. &,
  110. &:hover,
  111. &:focus {
  112. color: @nav-pills-active-link-hover-color;
  113. background-color: @nav-pills-active-link-hover-bg;
  114. }
  115. }
  116. }
  117. }
  118. // Tabbable tabs
  119. // -------------------------
  120. // Hide tabbable panes to start, show them when `.active`
  121. .tab-content {
  122. > .tab-pane {
  123. display: none;
  124. }
  125. > .active {
  126. display: block;
  127. }
  128. }
  129. // Dropdowns
  130. // -------------------------
  131. // Specific dropdowns
  132. .nav-tabs .dropdown-menu {
  133. // make dropdown border overlap tab border
  134. margin-top: -1px;
  135. // Remove the top rounded corners here since there is a hard edge above the menu
  136. border-top-left-radius: 0;
  137. border-top-right-radius: 0;
  138. }