_dropdowns.scss 4.8 KB

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