@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
98 lines • 4.28 kB
CSS
/*
* Dropdown theme
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.dnb-dropdown {
--dropdown-border-radius: 0.5rem;
--dropdown-height: 2.5rem;
--dropdown-error-border-width: 0.125rem;
--dropdown-button-padding: 0 0.75rem 0 0.5rem;
--dropdown-foreground-color-primary: var(--sb-color-gray-dark-2);
--dropdown-foreground-color-error: var(--sb-color-red);
--dropdown-background-color-disabled: var(--sb-color-gray-light);
--dropdown-background-color-error-active: var(--sb-color-white);
}
.dnb-dropdown__icon {
color: var(--sb-color-text);
}
.dnb-dropdown__trigger:not(.dnb-button--tertiary) {
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
color: var(--sb-color-gray-dark-3);
line-height: var(--dropdown-height);
}
html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover:not([disabled]) {
--border-color: var(--sb-color-violet);
--border-width: 2px;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
color: var(--sb-color-gray-dark-3);
background-color: var(--sb-color-white);
}
html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover:not([disabled]) .dnb-dropdown__icon {
color: var(--sb-color-violet);
}
.dnb-dropdown__trigger:not(.dnb-button--tertiary):focus[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus[disabled] {
cursor: not-allowed;
}
html[data-whatinput=keyboard] .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
color: var(--sb-color-blue-dark);
background-color: var(--sb-color-blue-light-3);
}
.dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
outline: none;
}
html[data-whatinput=keyboard] .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) .dnb-dropdown__icon, html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) .dnb-dropdown__icon {
color: var(--sb-color-blue-dark);
}
.dnb-dropdown__trigger.dnb-button--active {
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.125rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
}
.dnb-dropdown__trigger[disabled] {
color: var(--sb-color-gray-dark-2);
background-color: var(--sb-color-gray-light);
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-dropdown__trigger[disabled] .dnb-dropdown__icon {
color: inherit;
}
html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
--border-color: var(--dropdown-foreground-color-error);
--border-width: var(--dropdown-error-border-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-dropdown--top .dnb-dropdown__trigger.dnb-button--active {
border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
}