_dropdown.scss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. // The dropdown wrapper (`<div>`)
  2. .dropup,
  3. .dropdown {
  4. position: relative;
  5. }
  6. .dropdown-toggle {
  7. // Generate the caret automatically
  8. &::after {
  9. display: inline-block;
  10. width: 0;
  11. height: 0;
  12. margin-right: .25rem;
  13. margin-left: .25rem;
  14. vertical-align: middle;
  15. content: "";
  16. border-top: $caret-width solid;
  17. border-right: $caret-width solid transparent;
  18. border-left: $caret-width solid transparent;
  19. }
  20. // Prevent the focus on the dropdown toggle when closing dropdowns
  21. &:focus {
  22. outline: 0;
  23. }
  24. }
  25. .dropup {
  26. .dropdown-toggle {
  27. &::after {
  28. border-top: 0;
  29. border-bottom: $caret-width solid;
  30. }
  31. }
  32. }
  33. // The dropdown menu
  34. .dropdown-menu {
  35. position: absolute;
  36. top: 100%;
  37. left: 0;
  38. z-index: $zindex-dropdown;
  39. display: none; // none by default, but block on "open" of the menu
  40. float: left;
  41. min-width: 160px;
  42. padding: 5px 0;
  43. margin: 2px 0 0; // override default ul
  44. font-size: $font-size-base;
  45. color: $body-color;
  46. text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  47. list-style: none;
  48. background-color: $dropdown-bg;
  49. background-clip: padding-box;
  50. border: $dropdown-border-width solid $dropdown-border-color;
  51. @include border-radius($border-radius);
  52. @include box-shadow(0 6px 12px rgba(0,0,0,.175));
  53. }
  54. // Dividers (basically an `<hr>`) within the dropdown
  55. .dropdown-divider {
  56. @include nav-divider($dropdown-divider-bg);
  57. }
  58. // Links, buttons, and more within the dropdown menu
  59. //
  60. // `<button>`-specific styles are denoted with `// For <button>s`
  61. .dropdown-item {
  62. display: block;
  63. width: 100%; // For `<button>`s
  64. padding: 3px 20px;
  65. clear: both;
  66. font-weight: normal;
  67. line-height: $line-height;
  68. color: $dropdown-link-color;
  69. text-align: inherit; // For `<button>`s
  70. white-space: nowrap; // prevent links from randomly breaking onto new lines
  71. background: none; // For `<button>`s
  72. border: 0; // For `<button>`s
  73. @include hover-focus {
  74. color: $dropdown-link-hover-color;
  75. text-decoration: none;
  76. background-color: $dropdown-link-hover-bg;
  77. }
  78. // Active state
  79. &.active {
  80. @include plain-hover-focus {
  81. color: $dropdown-link-active-color;
  82. text-decoration: none;
  83. background-color: $dropdown-link-active-bg;
  84. outline: 0;
  85. }
  86. }
  87. // Disabled state
  88. //
  89. // Gray out text and ensure the hover/focus state remains gray
  90. &.disabled {
  91. @include plain-hover-focus {
  92. color: $dropdown-link-disabled-color;
  93. }
  94. // Nuke hover/focus effects
  95. @include hover-focus {
  96. text-decoration: none;
  97. cursor: $cursor-disabled;
  98. background-color: transparent;
  99. background-image: none; // Remove CSS gradient
  100. @include reset-filter();
  101. }
  102. }
  103. }
  104. // Open state for the dropdown
  105. .open {
  106. // Show the menu
  107. > .dropdown-menu {
  108. display: block;
  109. }
  110. // Remove the outline when :focus is triggered
  111. > a {
  112. outline: 0;
  113. }
  114. }
  115. // Menu positioning
  116. //
  117. // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
  118. // menu with the parent.
  119. .dropdown-menu-right {
  120. right: 0;
  121. left: auto; // Reset the default from `.dropdown-menu`
  122. }
  123. // With v3, we enabled auto-flipping if you have a dropdown within a right
  124. // aligned nav component. To enable the undoing of that, we provide an override
  125. // to restore the default dropdown menu alignment.
  126. //
  127. // This is only for left-aligning a dropdown menu within a `.navbar-right` or
  128. // `.pull-right` nav component.
  129. .dropdown-menu-left {
  130. right: auto;
  131. left: 0;
  132. }
  133. // Dropdown section headers
  134. .dropdown-header {
  135. display: block;
  136. padding: 3px 20px;
  137. font-size: $font-size-sm;
  138. line-height: $line-height;
  139. color: $dropdown-header-color;
  140. white-space: nowrap; // as with > li > a
  141. }
  142. // Backdrop to catch body clicks on mobile, etc.
  143. .dropdown-backdrop {
  144. position: fixed;
  145. top: 0;
  146. right: 0;
  147. bottom: 0;
  148. left: 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.
  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. content: "";
  165. border-top: 0;
  166. border-bottom: $caret-width solid;
  167. }
  168. // Different positioning for bottom up menu
  169. .dropdown-menu {
  170. top: auto;
  171. bottom: 100%;
  172. margin-bottom: 2px;
  173. }
  174. }