@import “../../mixins/text”;
.#{$prefix}dropdown {
&-toggle { &::after { display: none; vertical-align: 2px; } } &-menu { width: auto; min-width: 80px; max-width: 684px; padding: 0; margin: 4px 0 0; overflow-y: hidden; background-color: $white; border: 1px solid $smoke; box-shadow: 0 2px 4px rgba(119, 119, 119, .1), 0 4px 8px rgba(119, 119, 119, .2); @include border-radius(4px); @include scroll-default; &--small { width: 80px; } &--medium { width: 184px; } &--large { width: 288px; } &--max-content { width: max-content; } &--fixed-height { max-height: 180px; .#{$prefix}dropdown-item--container { max-height: 180px; overflow: auto; } .#{$prefix}dropdown-item--search + .#{$prefix}dropdown-item--container { max-height: 126px; } } } &-item { padding: 8px; color: $dark; white-space: normal; cursor: pointer; outline: none; &--title { @extend %font-size-sm; padding-top: 12px; padding-bottom: 4px; color: $slate; text-transform: capitalize; border-top: 1px solid $smoke; } &--title:first-child { border: none; } &:hover { background-color: $cloud; &:active { color: $dark; } } &.active { &:hover { background-color: darken($primary, 10%); &:active { color: $cloud; } } .ic { color: inherit; } } &.is-selected { background-color: $cloud; } } &-divider { margin: 0; } &-not-found { display: block; padding: 8px; color: $muted; text-align: center; } &-selected-list { margin-top: 4px; .#{$prefix}badge { margin-top: 4px; margin-right: 8px; &:last-child { margin-right: 0; } } } &-action { padding: 8px; input { width: 100%; margin: 0; } &:hover { background-color: inherit; } } &-with-action { .#{$prefix}dropdown-menu { max-height: none; overflow: hidden; .#{$prefix}dropdown-action { &:hover { background-color: inherit; } } &-list { height: auto; max-height: 126px; overflow-y: auto; @include scroll-default; } } } &-with-avatar { span { vertical-align: middle; } } &-with-pill { .#{$prefix}dropdown-menu-list { .#{$prefix}dropdown-item { &.is-selected { color: $muted; pointer-events: none; background-color: transparent; } } } } &--medium { width: 184px; } &--large { width: 288px; }
}