@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
52 lines (51 loc) • 2.54 kB
CSS
/*
* Input theme
*
*/
.eufemia-scope--11_0_0 .dnb-input__border--tokens {
--input-border-radius--default: 0.5rem;
--input-border-radius--active: 1.5rem;
--input-border-radius--focus: 1.5rem;
}
.eufemia-scope--11_0_0 .dnb-input {
--input-height: 2.5rem;
--input-button-border-color: var(--input-border-color);
--input-button-border-width: var(--input-border-width);
--input-button-border-radius: var(--input-border-radius);
}
.eufemia-scope--11_0_0 .dnb-input__shell, .eufemia-scope--11_0_0 .dnb-input__input {
transition: border-radius 0.25s ease-out;
}
.eufemia-scope--11_0_0 .dnb-input__submit-button__button {
--button-secondary-color: var(--sb-color-violet);
--button-secondary-color--active: var(--sb-color-violet);
}
.eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
--input-button-border-color: var(--input-border-color--active);
--input-button-border-radius: var(--input-border-radius--active);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
--input-button-border-color: var(--input-border-color--focus);
--input-button-border-width: var(--input-border-width--focus);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus].dnb-input__status--error {
--input-button-border-color: var(
--input-border-color__error--focus
);
}
.eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
--input-button-border-color: var(--sb-color-red);
}
.eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button {
--button-secondary-background--hover: var(--sb-color-red);
--button-secondary-color--hover: var(--sb-color-white);
--button-secondary-color--active: var(--sb-color-red);
}
.eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
border-radius: 0 var(--input-button-border-radius) var(--input-button-border-radius) 0;
}
.eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .eufemia-scope--11_0_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active {
border: var(--input-button-border-width) solid var(--input-button-border-color);
border-left: none;
padding-left: var(--input-button-border-width);
}