@qvant/qui-max
Version:
A Vue 3 Design system for Web.
77 lines • 2.17 kB
CSS
.q-option {
--option-background-color-base: var(--color-tertiary-gray-light);
--option-background-color-hover: var(--color-tertiary-gray);
--option-background-color-focus: var(--color-tertiary-gray);
--option-background-color-selected: var(--color-tertiary-gray-ultra-light);
--option-background-color-disabled: var(--color-tertiary-gray-light);
--option-color-base: var(--color-primary-blue);
--option-color-hover: var(--color-primary-black);
--option-color-selected: var(--color-primary-black);
--option-color-disabled: rgb(var(--color-rgb-gray) / 64%);
position: relative;
display: flex;
align-items: flex-end;
height: 40px;
padding: 8px 16px;
cursor: pointer;
user-select: none;
background-color: var(--option-background-color-base);
outline: none;
box-shadow: -1px -1px 3px rgb(var(--color-rgb-white)/25%), 1px 1px 3px rgb(var(--color-rgb-blue)/40%);
}
.q-option:focus {
outline: none;
}
.q-option:not(:first-child) {
margin-top: 1px;
}
.q-option_selected {
background-color: var(--option-background-color-selected);
}
.q-option_disabled {
padding-right: 40px;
cursor: not-allowed;
background-color: var(--option-background-color-disabled);
}
.q-option_all ~ .q-option {
padding-left: 24px;
}
.q-option:hover:not(.q-option_disabled) {
background-color: var(--option-background-color-hover);
}
.q-option_with-checkbox {
padding-left: 8px;
}
.q-option.focus-visible {
background-color: var(--option-background-color-focus);
}
.q-option__label {
overflow: hidden;
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--option-color-base);
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.q-option_selected .q-option__label {
color: var(--option-color-selected);
}
.q-option_with-checkbox .q-option__label {
margin-left: 8px;
}
.q-option_disabled .q-option__label {
color: var(--option-color-disabled);
}
.q-option:hover:not(.q-option_disabled) .q-option__label {
color: var(--option-color-hover);
}
.q-option__lock {
position: absolute;
top: 0;
right: 0;
width: 40px;
font-size: 24px;
line-height: 40px;
text-align: center;
}