_dropdowns.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. .dropdown-menu {
  2. user-select: none;
  3. background-clip: border-box;
  4. &.card {
  5. padding: 0;
  6. min-width: $dropdown-max-width;
  7. display: none;
  8. &.show {
  9. display: flex;
  10. }
  11. }
  12. }
  13. .dropdown-item {
  14. min-width: $dropdown-min-width;
  15. display: flex;
  16. align-items: center;
  17. margin: 0;
  18. line-height: $line-height-base;
  19. gap: .5rem;
  20. }
  21. .dropdown-item-icon {
  22. width: $icon-size !important;
  23. height: $icon-size !important;
  24. margin-right: .5rem;
  25. color: var(--#{$prefix}secondary);
  26. opacity: $text-secondary-opacity;
  27. text-align: center;
  28. }
  29. .dropdown-item-indicator {
  30. margin-right: .5rem;
  31. margin-left: -.25rem;
  32. height: 1.25rem;
  33. display: inline-flex;
  34. line-height: 1;
  35. vertical-align: bottom;
  36. align-items: center;
  37. }
  38. .dropdown-header {
  39. @include subheader;
  40. padding-bottom: .25rem;
  41. pointer-events: none;
  42. }
  43. .dropdown-menu-scrollable {
  44. height: auto;
  45. max-height: $dropdown-scrollable-height;
  46. overflow-x: hidden;
  47. }
  48. .dropdown-menu-column {
  49. min-width: $dropdown-min-width;
  50. .dropdown-item {
  51. min-width: 0;
  52. }
  53. }
  54. .dropdown-menu-columns {
  55. display: flex;
  56. flex: 0 .25rem;
  57. }
  58. .dropdown-menu-arrow {
  59. &:before {
  60. content: "";
  61. position: absolute;
  62. top: -.25rem;
  63. left: .75rem;
  64. display: block;
  65. background: inherit;
  66. width: 14px;
  67. height: 14px;
  68. /*rtl:ignore*/
  69. transform: rotate(45deg);
  70. transform-origin: center;
  71. border: 1px solid;
  72. border-color: inherit;
  73. z-index: -1;
  74. clip: rect(0px, 9px, 9px, 0px);
  75. }
  76. &.dropdown-menu-end {
  77. &:before {
  78. right: .75rem;
  79. left: auto;
  80. }
  81. }
  82. }
  83. .dropend {
  84. > .dropdown-menu {
  85. margin-top: subtract(-$dropdown-padding-y, 1px);
  86. margin-left: -.25rem;
  87. }
  88. .dropdown-toggle {
  89. &:after {
  90. margin-left: auto;
  91. }
  92. }
  93. }
  94. .dropdown-menu-card {
  95. padding: 0;
  96. > .card {
  97. margin: 0;
  98. border: 0;
  99. box-shadow: none;
  100. }
  101. }