You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

240 lines
5.4 KiB

  1. // The dropdown wrapper (`<div>`)
  2. .dropup,
  3. .dropend,
  4. .dropdown,
  5. .dropstart {
  6. position: relative;
  7. }
  8. .dropdown-toggle {
  9. white-space: nowrap;
  10. // Generate the caret automatically
  11. @include caret();
  12. }
  13. // The dropdown menu
  14. .dropdown-menu {
  15. position: absolute;
  16. z-index: $zindex-dropdown;
  17. display: none; // none by default, but block on "open" of the menu
  18. min-width: $dropdown-min-width;
  19. padding: $dropdown-padding-y $dropdown-padding-x;
  20. margin: 0; // Override default margin of ul
  21. @include font-size($dropdown-font-size);
  22. color: $dropdown-color;
  23. text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  24. list-style: none;
  25. background-color: $dropdown-bg;
  26. background-clip: padding-box;
  27. border: $dropdown-border-width solid $dropdown-border-color;
  28. @include border-radius($dropdown-border-radius);
  29. @include box-shadow($dropdown-box-shadow);
  30. &[data-bs-popper] {
  31. top: 100%;
  32. left: 0;
  33. margin-top: $dropdown-spacer;
  34. }
  35. }
  36. // scss-docs-start responsive-breakpoints
  37. // We deliberately hardcode the `bs-` prefix because we check
  38. // this custom property in JS to determine Popper's positioning
  39. @each $breakpoint in map-keys($grid-breakpoints) {
  40. @include media-breakpoint-up($breakpoint) {
  41. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  42. .dropdown-menu#{$infix}-start {
  43. --bs-position: start;
  44. &[data-bs-popper] {
  45. right: auto;
  46. left: 0;
  47. }
  48. }
  49. .dropdown-menu#{$infix}-end {
  50. --bs-position: end;
  51. &[data-bs-popper] {
  52. right: 0;
  53. left: auto;
  54. }
  55. }
  56. }
  57. }
  58. // scss-docs-end responsive-breakpoints
  59. // Allow for dropdowns to go bottom up (aka, dropup-menu)
  60. // Just add .dropup after the standard .dropdown class and you're set.
  61. .dropup {
  62. .dropdown-menu[data-bs-popper] {
  63. top: auto;
  64. bottom: 100%;
  65. margin-top: 0;
  66. margin-bottom: $dropdown-spacer;
  67. }
  68. .dropdown-toggle {
  69. @include caret(up);
  70. }
  71. }
  72. .dropend {
  73. .dropdown-menu[data-bs-popper] {
  74. top: 0;
  75. right: auto;
  76. left: 100%;
  77. margin-top: 0;
  78. margin-left: $dropdown-spacer;
  79. }
  80. .dropdown-toggle {
  81. @include caret(end);
  82. &::after {
  83. vertical-align: 0;
  84. }
  85. }
  86. }
  87. .dropstart {
  88. .dropdown-menu[data-bs-popper] {
  89. top: 0;
  90. right: 100%;
  91. left: auto;
  92. margin-top: 0;
  93. margin-right: $dropdown-spacer;
  94. }
  95. .dropdown-toggle {
  96. @include caret(start);
  97. &::before {
  98. vertical-align: 0;
  99. }
  100. }
  101. }
  102. // Dividers (basically an `<hr>`) within the dropdown
  103. .dropdown-divider {
  104. height: 0;
  105. margin: $dropdown-divider-margin-y 0;
  106. overflow: hidden;
  107. border-top: 1px solid $dropdown-divider-bg;
  108. }
  109. // Links, buttons, and more within the dropdown menu
  110. //
  111. // `<button>`-specific styles are denoted with `// For <button>s`
  112. .dropdown-item {
  113. display: block;
  114. width: 100%; // For `<button>`s
  115. padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  116. clear: both;
  117. font-weight: $font-weight-normal;
  118. color: $dropdown-link-color;
  119. text-align: inherit; // For `<button>`s
  120. text-decoration: if($link-decoration == none, null, none);
  121. white-space: nowrap; // prevent links from randomly breaking onto new lines
  122. background-color: transparent; // For `<button>`s
  123. border: 0; // For `<button>`s
  124. // Prevent dropdown overflow if there's no padding
  125. // See https://github.com/twbs/bootstrap/pull/27703
  126. @if $dropdown-padding-y == 0 {
  127. &:first-child {
  128. @include border-top-radius($dropdown-inner-border-radius);
  129. }
  130. &:last-child {
  131. @include border-bottom-radius($dropdown-inner-border-radius);
  132. }
  133. }
  134. &:hover,
  135. &:focus {
  136. color: $dropdown-link-hover-color;
  137. text-decoration: if($link-hover-decoration == underline, none, null);
  138. @include gradient-bg($dropdown-link-hover-bg);
  139. }
  140. &.active,
  141. &:active {
  142. color: $dropdown-link-active-color;
  143. text-decoration: none;
  144. @include gradient-bg($dropdown-link-active-bg);
  145. }
  146. &.disabled,
  147. &:disabled {
  148. color: $dropdown-link-disabled-color;
  149. pointer-events: none;
  150. background-color: transparent;
  151. // Remove CSS gradients if they're enabled
  152. background-image: if($enable-gradients, none, null);
  153. }
  154. }
  155. .dropdown-menu.show {
  156. display: block;
  157. }
  158. // Dropdown section headers
  159. .dropdown-header {
  160. display: block;
  161. padding: $dropdown-header-padding;
  162. margin-bottom: 0; // for use with heading elements
  163. @include font-size($font-size-sm);
  164. color: $dropdown-header-color;
  165. white-space: nowrap; // as with > li > a
  166. }
  167. // Dropdown text
  168. .dropdown-item-text {
  169. display: block;
  170. padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  171. color: $dropdown-link-color;
  172. }
  173. // Dark dropdowns
  174. .dropdown-menu-dark {
  175. color: $dropdown-dark-color;
  176. background-color: $dropdown-dark-bg;
  177. border-color: $dropdown-dark-border-color;
  178. @include box-shadow($dropdown-dark-box-shadow);
  179. .dropdown-item {
  180. color: $dropdown-dark-link-color;
  181. &:hover,
  182. &:focus {
  183. color: $dropdown-dark-link-hover-color;
  184. @include gradient-bg($dropdown-dark-link-hover-bg);
  185. }
  186. &.active,
  187. &:active {
  188. color: $dropdown-dark-link-active-color;
  189. @include gradient-bg($dropdown-dark-link-active-bg);
  190. }
  191. &.disabled,
  192. &:disabled {
  193. color: $dropdown-dark-link-disabled-color;
  194. }
  195. }
  196. .dropdown-divider {
  197. border-color: $dropdown-dark-divider-bg;
  198. }
  199. .dropdown-item-text {
  200. color: $dropdown-dark-link-color;
  201. }
  202. .dropdown-header {
  203. color: $dropdown-dark-header-color;
  204. }
  205. }