1
0

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