@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
61 lines • 2.53 kB
CSS
/*
* Dropdown theme
*
*/
/*
* Utilities
*/
.dnb-dropdown {
--dropdown-border-radius: 0.5rem;
--dropdown-height: 2.5rem;
--dropdown-button-padding: 0 0.75rem 0 0.5rem;
--dropdown-sb-icon-color--default: var(--token-color-icon-action);
--dropdown-sb-icon-color--hover: var(--token-color-icon-action-hover);
--dropdown-sb-icon-color--active: var(--token-color-icon-action-pressed);
--dropdown-sb-icon-color--focus: var(--token-color-icon-action-focus);
--dropdown-error-border-inset: inset;
}
.dnb-dropdown__icon {
color: var(--dropdown-sb-icon-color, var(--dropdown-sb-icon-color--default));
}
.dnb-dropdown__status--error {
--dropdown-sb-icon-color--default: inherit;
--dropdown-sb-icon-color--hover: inherit;
}
.dnb-dropdown__trigger:not(.dnb-button--tertiary) {
line-height: var(--dropdown-height);
}
html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):hover:not([disabled]) {
--dropdown-sb-icon-color: var(--dropdown-sb-icon-color--hover);
}
.dnb-dropdown__trigger:not(.dnb-button__status--error):active[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):active[disabled] {
cursor: not-allowed;
}
.dnb-dropdown__trigger:not(.dnb-button__status--error):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):active:not([disabled]) {
--dropdown-sb-icon-color: var(--dropdown-sb-icon-color--active);
}
html:not([data-whatinput=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatinput=touch]) .dnb-dropdown__trigger:not(.dnb-button__status--error):focus-visible:not([disabled]) {
--dropdown-sb-icon-color: var(--dropdown-sb-icon-color--focus);
}
.dnb-dropdown__trigger:not(.dnb-button__status--error).dnb-button--secondary {
--button-color-border--hover: var(
--token-color-stroke-action-hover
);
}
.dnb-dropdown--open .dnb-dropdown__trigger {
--button-border-inset--hover: inset;
--button-border-width--default: 0.125rem;
border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
}
.dnb-dropdown__trigger[disabled] .dnb-dropdown__icon {
color: inherit;
}
.dnb-dropdown--open.dnb-dropdown--top .dnb-dropdown__trigger {
border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
}