dropdowns.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. //
  2. // Dropdown menus
  3. // --------------------------------------------------
  4. // Dropdown arrow/caret
  5. .caret {
  6. display: inline-block;
  7. width: 0;
  8. height: 0;
  9. margin-left: 2px;
  10. vertical-align: middle;
  11. border-top: @caret-width-base solid @dropdown-caret-color;
  12. border-right: @caret-width-base solid transparent;
  13. border-left: @caret-width-base solid transparent;
  14. // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
  15. // we can just straight up remove this.
  16. border-bottom: 0 dotted;
  17. content: "";
  18. }
  19. // The dropdown wrapper (div)
  20. .dropdown {
  21. position: relative;
  22. }
  23. // Prevent the focus on the dropdown toggle when closing dropdowns
  24. .dropdown-toggle:focus {
  25. outline: 0;
  26. }
  27. // The dropdown menu (ul)
  28. .dropdown-menu {
  29. position: absolute;
  30. top: 100%;
  31. left: 0;
  32. z-index: @zindex-dropdown;
  33. display: none; // none by default, but block on "open" of the menu
  34. float: left;
  35. min-width: 160px;
  36. padding: 5px 0;
  37. margin: 2px 0 0; // override default ul
  38. list-style: none;
  39. font-size: @font-size-base;
  40. background-color: @dropdown-bg;
  41. border: 1px solid @dropdown-fallback-border; // IE8 fallback
  42. border: 1px solid @dropdown-border;
  43. border-radius: @border-radius-base;
  44. .box-shadow(0 6px 12px rgba(0,0,0,.175));
  45. background-clip: padding-box;
  46. // Aligns the dropdown menu to right
  47. &.pull-right {
  48. right: 0;
  49. left: auto;
  50. }
  51. // Dividers (basically an hr) within the dropdown
  52. .divider {
  53. .nav-divider(@dropdown-divider-bg);
  54. }
  55. // Links within the dropdown menu
  56. > li > a {
  57. display: block;
  58. padding: 3px 20px;
  59. clear: both;
  60. font-weight: normal;
  61. line-height: @line-height-base;
  62. color: @dropdown-link-color;
  63. white-space: nowrap; // prevent links from randomly breaking onto new lines
  64. }
  65. }
  66. // Hover/Focus state
  67. .dropdown-menu > li > a {
  68. &:hover,
  69. &:focus {
  70. text-decoration: none;
  71. color: @dropdown-link-hover-color;
  72. background-color: @dropdown-link-hover-bg;
  73. }
  74. }
  75. // Active state
  76. .dropdown-menu > .active > a {
  77. &,
  78. &:hover,
  79. &:focus {
  80. color: @dropdown-link-active-color;
  81. text-decoration: none;
  82. outline: 0;
  83. background-color: @dropdown-link-active-bg;
  84. }
  85. }
  86. // Disabled state
  87. //
  88. // Gray out text and ensure the hover/focus state remains gray
  89. .dropdown-menu > .disabled > a {
  90. &,
  91. &:hover,
  92. &:focus {
  93. color: @dropdown-link-disabled-color;
  94. }
  95. }
  96. // Nuke hover/focus effects
  97. .dropdown-menu > .disabled > a {
  98. &:hover,
  99. &:focus {
  100. text-decoration: none;
  101. background-color: transparent;
  102. background-image: none; // Remove CSS gradient
  103. .reset-filter();
  104. cursor: not-allowed;
  105. }
  106. }
  107. // Open state for the dropdown
  108. .open {
  109. // Show the menu
  110. > .dropdown-menu {
  111. display: block;
  112. }
  113. // Remove the outline when :focus is triggered
  114. > a {
  115. outline: 0;
  116. }
  117. }
  118. // Dropdown section headers
  119. .dropdown-header {
  120. display: block;
  121. padding: 3px 20px;
  122. font-size: @font-size-small;
  123. line-height: @line-height-base;
  124. color: @dropdown-header-color;
  125. }
  126. // Backdrop to catch body clicks on mobile, etc.
  127. .dropdown-backdrop {
  128. position: fixed;
  129. left: 0;
  130. right: 0;
  131. bottom: 0;
  132. top: 0;
  133. z-index: @zindex-dropdown - 10;
  134. }
  135. // Right aligned dropdowns
  136. .pull-right > .dropdown-menu {
  137. right: 0;
  138. left: auto;
  139. }
  140. // Allow for dropdowns to go bottom up (aka, dropup-menu)
  141. //
  142. // Just add .dropup after the standard .dropdown class and you're set, bro.
  143. // TODO: abstract this so that the navbar fixed styles are not placed here?
  144. .dropup,
  145. .navbar-fixed-bottom .dropdown {
  146. // Reverse the caret
  147. .caret {
  148. // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
  149. // gets fixed, restore `border-top: 0;`.
  150. border-top: 0 dotted;
  151. border-bottom: 4px solid @dropdown-caret-color;
  152. content: "";
  153. }
  154. // Different positioning for bottom up menu
  155. .dropdown-menu {
  156. top: auto;
  157. bottom: 100%;
  158. margin-bottom: 1px;
  159. }
  160. }
  161. // Component alignment
  162. //
  163. // Reiterate per navbar.less and the modified component alignment there.
  164. @media (min-width: @grid-float-breakpoint) {
  165. .navbar-right {
  166. .dropdown-menu {
  167. .pull-right > .dropdown-menu();
  168. }
  169. }
  170. }