// 18px is the minimum input field line-height and 14px is the font-size of // the drop down selector elements. $dropdown-selector-line-height: 18/14; .wc-block-components-dropdown-selector { max-width: 300px; position: relative; width: 100%; } .wc-block-components-dropdown-selector__input-wrapper { background: #fff; border: 1px solid $input-border-gray; color: $input-text-active; align-items: center; border-radius: 4px; cursor: text; display: flex; flex-wrap: wrap; padding: 2px $gap-smaller; .is-disabled & { background-color: $core-grey-light-500; } .is-multiple.has-checked > & { padding: 2px $gap-smallest; } .is-open > & { border-radius: 4px 4px 0 0; } } .wc-block-components-dropdown-selector__input { @include font-size(small); line-height: $dropdown-selector-line-height; margin: em($gap-small/4) 0; min-width: 0; padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75); .is-single & { width: 100%; &:hover, &:focus, &:active { outline: 0; } } .is-single.has-checked.is-open & { margin-bottom: 1.5px; margin-top: 1.5px; } .is-single.has-checked:not(.is-open) & { @include visually-hidden(); // Fixes an issue in Firefox that `flex: wrap` in the container was making // this element to still occupy one line. position: absolute; } .is-multiple & { flex: 1; min-width: 0; } } // Visually hide the input .is-single .wc-block-components-dropdown-selector__input:first-child, .is-multiple .wc-block-components-dropdown-selector__input { background: transparent; border: 0; &:hover, &:focus, &:active { outline: 0; } } .wc-block-components-dropdown-selector { // Reset

Academia