@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
79 lines (78 loc) • 3.87 kB
CSS
/*
* Input theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-input__border--tokens {
--input-border-color: var(--color-sea-green);
--input-border-color--hover: var(--color-emerald-green);
--input-border-color--active: var(--color-emerald-green);
--input-border-color--focus: var(--color-emerald-green);
--input-border-color--disabled: var(--color-black-55);
--input-border-color__error: var(--color-fire-red);
--input-border-color__error--focus: var(--color-fire-red);
--input-border-width: 0.0625rem;
--input-border-width--hover: 0.125rem;
--input-border-width--active: 0.125rem;
--input-border-width--focus: 0.125rem;
--input-border-width--disabled: 0.0625rem;
--input-border-width__error: 0.0625rem;
--input-border-width__error--hover: 0.125rem;
--input-border-width__error--active: 0.125rem;
--input-border-inset: inset;
--input-border-inset--hover: ;
--input-border-inset--active: ;
--input-border-inset--focus: ;
--input-border-inset--disabled: inset;
--input-border-radius: 0.25rem;
--input-border-radius--active: 0.25rem;
--input-border-radius--focus: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-input {
color: var(--color-black);
}
.eufemia-scope--10_104_0 .dnb-input__inner {
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-input__shell {
color: inherit;
background-color: var(--input-background-color);
border: none;
}
.eufemia-scope--10_104_0 .dnb-input__status--error.dnb-input .dnb-input__shell:not(:focus-within) {
color: var(--color-fire-red);
}
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell {
-webkit-text-fill-color: currentcolor;
background-color: var(--color-black-3);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover,
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover::after,
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus-visible,
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus-visible::after {
background-color: var(--color-fire-red);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover:active,
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus-visible:active {
color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-input__icon {
color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__icon {
color: var(--color-fire-red);
}
.eufemia-scope--10_104_0 .dnb-input__input::selection {
background-color: var(--color-mint-green);
color: var(--color-black);
text-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-input__placeholder {
color: var(--color-black-55);
}