dropdowns.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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 dashed;
  12. border-top: @caret-width-base solid ~"\9"; // IE8
  13. border-right: @caret-width-base solid transparent;
  14. border-left: @caret-width-base solid transparent;
  15. }
  16. // The dropdown wrapper (div)
  17. .dropup,
  18. .dropdown {
  19. position: relative;
  20. }
  21. // Prevent the focus on the dropdown toggle when closing dropdowns
  22. .dropdown-toggle:focus {
  23. outline: 0;
  24. }
  25. // The dropdown menu (ul)
  26. .dropdown-menu {
  27. position: absolute;
  28. top: 100%;
  29. left: 0;
  30. z-index: @zindex-dropdown;
  31. display: none; // none by default, but block on "open" of the menu
  32. float: left;
  33. min-width: 160px;
  34. padding: 5px 0;
  35. margin: 2px 0 0; // override default ul
  36. font-size: @font-size-base;
  37. text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  38. list-style: none;
  39. background-color: @dropdown-bg;
  40. background-clip: padding-box;
  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. // Aligns the dropdown menu to right
  46. //
  47. // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
  48. &.pull-right {
  49. right: 0;
  50. left: auto;
  51. }
  52. // Dividers (basically an hr) within the dropdown
  53. .divider {
  54. .nav-divider(@dropdown-divider-bg);
  55. }
  56. // Links within the dropdown menu
  57. > li > a {
  58. display: block;
  59. padding: 3px 20px;
  60. clear: both;
  61. font-weight: 400;
  62. line-height: @line-height-base;
  63. color: @dropdown-link-color;
  64. white-space: nowrap; // prevent links from randomly breaking onto new lines
  65. &:hover,
  66. &:focus {
  67. color: @dropdown-link-hover-color;
  68. text-decoration: none;
  69. background-color: @dropdown-link-hover-bg;
  70. }
  71. }
  72. }
  73. // Active state
  74. .dropdown-menu > .active > a {
  75. &,
  76. &:hover,
  77. &:focus {
  78. color: @dropdown-link-active-color;
  79. text-decoration: none;
  80. background-color: @dropdown-link-active-bg;
  81. outline: 0;
  82. }
  83. }
  84. // Disabled state
  85. //
  86. // Gray out text and ensure the hover/focus state remains gray
  87. .dropdown-menu > .disabled > a {
  88. &,
  89. &:hover,
  90. &:focus {
  91. color: @dropdown-link-disabled-color;
  92. }
  93. // Nuke hover/focus effects
  94. &:hover,
  95. &:focus {
  96. text-decoration: none;
  97. cursor: @cursor-disabled;
  98. background-color: transparent;
  99. background-image: none; // Remove CSS gradient
  100. .reset-filter();
  101. }
  102. }
  103. // Open state for the dropdown
  104. .open {
  105. // Show the menu
  106. > .dropdown-menu {
  107. display: block;
  108. }
  109. // Remove the outline when :focus is triggered
  110. > a {
  111. outline: 0;
  112. }
  113. }
  114. // Menu positioning
  115. //
  116. // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
  117. // menu with the parent.
  118. .dropdown-menu-right {
  119. right: 0;
  120. left: auto; // Reset the default from `.dropdown-menu`
  121. }
  122. // With v3, we enabled auto-flipping if you have a dropdown within a right
  123. // aligned nav component. To enable the undoing of that, we provide an override
  124. // to restore the default dropdown menu alignment.
  125. //
  126. // This is only for left-aligning a dropdown menu within a `.navbar-right` or
  127. // `.pull-right` nav component.
  128. .dropdown-menu-left {
  129. right: auto;
  130. left: 0;
  131. }
  132. // Dropdown section headers
  133. .dropdown-header {
  134. display: block;
  135. padding: 3px 20px;
  136. font-size: @font-size-small;
  137. line-height: @line-height-base;
  138. color: @dropdown-header-color;
  139. white-space: nowrap; // as with > li > a
  140. }
  141. // Backdrop to catch body clicks on mobile, etc.
  142. .dropdown-backdrop {
  143. position: fixed;
  144. top: 0;
  145. right: 0;
  146. bottom: 0;
  147. left: 0;
  148. z-index: (@zindex-dropdown - 10);
  149. }
  150. // Right aligned dropdowns
  151. .pull-right > .dropdown-menu {
  152. right: 0;
  153. left: auto;
  154. }
  155. // Allow for dropdowns to go bottom up (aka, dropup-menu)
  156. //
  157. // Just add .dropup after the standard .dropdown class and you're set, bro.
  158. // TODO: abstract this so that the navbar fixed styles are not placed here?
  159. .dropup,
  160. .navbar-fixed-bottom .dropdown {
  161. // Reverse the caret
  162. .caret {
  163. content: "";
  164. border-top: 0;
  165. border-bottom: @caret-width-base dashed;
  166. border-bottom: @caret-width-base solid ~"\9"; // IE8
  167. }
  168. // Different positioning for bottom up menu
  169. .dropdown-menu {
  170. top: auto;
  171. bottom: 100%;
  172. margin-bottom: 2px;
  173. }
  174. }
  175. // Component alignment
  176. //
  177. // Reiterate per navbar.less and the modified component alignment there.
  178. @media (min-width: @grid-float-breakpoint) {
  179. .navbar-right {
  180. .dropdown-menu {
  181. .dropdown-menu-right();
  182. }
  183. // Necessary for overrides of the default right aligned menu.
  184. // Will remove come v4 in all likelihood.
  185. .dropdown-menu-left {
  186. .dropdown-menu-left();
  187. }
  188. }
  189. }