@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
98 lines (97 loc) • 4.06 kB
CSS
/*
* Input theme
*
*/
/*
* Utilities
*/
.dnb-input__border--tokens {
--input-border-color: var(--sb-color-gray-dark-2);
--input-border-color--hover: var(--sb-color-violet);
--input-border-color--active: var(--sb-color-violet);
--input-border-color--focus: var(--focus-ring-color);
--input-border-color--disabled: var(--sb-color-gray);
--input-border-color__error: var(--sb-color-red);
--input-border-color__error--focus: var(--sb-color-red);
--input-border-width: 0.0625rem;
--input-border-width--hover: 0.125rem;
--input-border-width--active: 0.0625rem;
--input-border-width--disabled: 0.0625rem;
--input-border-width--focus: var(--focus-ring-width);
--input-border-width__error: 0.0625rem;
--input-border-width__error--hover: 0.125rem;
--input-border-width__error--active: 0.0625rem;
--input-border-inset: inset;
--input-border-inset--hover: inset;
--input-border-inset--active: inset;
--input-border-inset--focus: inset;
--input-border-inset--disabled: inset;
--input-border-radius: 0.5rem;
--input-border-radius--active: 1.5rem;
--input-border-radius--focus: 1.5rem;
}
.dnb-input {
--input-height: 2.5rem;
--input-color: var(--input-color--default);
--input-color--default: var(--sb-color-text);
--input-color--active: var(--sb-color-text);
--input-button-border-color: var(--input-border-color);
--input-button-border-width: var(--input-border-width);
--input-button-border-radius: var(--input-border-radius);
}
.dnb-input__shell {
background-color: var(--input-background-color);
transition: border-radius 0.25s ease-out;
border: none;
color: var(--input-color);
}
.dnb-input__submit-button__button {
--button-secondary-color: var(--sb-color-violet);
--button-secondary-color--active: var(--sb-color-violet);
}
.dnb-input__placeholder {
color: var(--sb-color-gray-dark-3);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell,
.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,
.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder {
color: var(--sb-color-gray-dark-2);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell {
-webkit-text-fill-color: currentcolor;
background-color: var(--sb-color-gray-light);
}
.dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
--input-color: var(--input-color--active);
--input-button-border-color: var(--input-border-color--active);
--input-button-border-radius: var(--input-border-radius--active);
}
html[data-whatinput=keyboard] .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] .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
);
}
.dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
--input-color--default: var(--sb-color-red);
--input-color--active: var(--sb-color-text);
--input-button-border-color: var(--sb-color-red);
}
.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);
}
.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
background-color: transparent;
box-shadow: none;
border-radius: 0 var(--input-button-border-radius) var(--input-button-border-radius) 0;
}
.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .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);
}