vuestic-ui
Version:
Vue 3 UI Framework
50 lines • 2.4 kB
CSS
:root,
:host {
--va-select-option-list-option-cursor: pointer;
--va-select-option-list-option-display: flex;
--va-select-option-list-option-align-items: center;
--va-select-option-list-option-padding: 0.375rem 0.75rem;
--va-select-option-list-option-min-height: 2.25rem;
--va-select-option-list-option-word-break: break-word;
/* Empty options list */
--va-select-option-list-empty-block-padding: 0.375rem 0.75rem;
/* Icon */
--va-select-option-list-option-icon-margin-right: 0.5rem;
/* Selected Icon */
--va-select-option-list-option-selected-icon-margin-left: auto;
--va-select-option-list-option-selected-icon-font-size: 0.8rem;
/* Disabled Option */
--va-select-option-list-option-disabled-opacity: 0.7;
/* Highlighted Chars */
--va-select-option-list-option-highlighted-color: var(--va-text-inverted);
--va-select-option-list-option-highlighted-background-color: var(--va-primary);
--va-select-option-list-option-highlighted-border-radius: 0.1rem;
--va-select-option-list-option-highlighted-margin: 0 1px;
--va-select-option-list-option-highlighted-padding: 0 1px;
/* Autocomplete */
--va-select-content-autocomplete-gap: 0.25rem;
--va-select-content-autocomplete-color: var(--va-text-primary);
--va-select-content-autocomplete-line-height: calc(var(--va-input-font-size) + 2px);
}
.va-select-option {
min-height: var(--va-select-option-list-option-min-height);
padding: var(--va-select-option-list-option-padding);
display: var(--va-select-option-list-option-display);
align-items: var(--va-select-option-list-option-align-items);
word-break: var(--va-select-option-list-option-word-break);
cursor: var(--va-select-option-list-option-cursor);
}
.va-select-option__icon {
margin-right: var(--va-select-option-list-option-icon-margin-right);
}
.va-select-option__selected-icon {
margin-left: var(--va-select-option-list-option-selected-icon-margin-left);
font-size: var(--va-select-option-list-option-selected-icon-font-size);
}
.va-select-option__highlighted {
color: var(--va-select-option-list-option-highlighted-color);
background-color: var(--va-select-option-list-option-highlighted-background-color);
border-radius: var(--va-select-option-list-option-highlighted-border-radius);
margin: var(--va-select-option-list-option-highlighted-margin);
padding: var(--va-select-option-list-option-highlighted-padding);
}