@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
56 lines • 2.1 kB
CSS
/*
* Textarea theme
*
*/
/*
* Utilities
*/
.dnb-textarea {
--textarea-border-color: var(--sb-color-gray-dark-2);
--textarea-border-width: 0.0625rem;
--textarea-background-color: var(--color-white);
--textarea-color: var(--textarea-color--default);
--textarea-color--default: var(--color-black);
--textarea-color--active: var(--color-black);
--textarea-placeholder-color: var(--sb-color-gray-dark-3);
--textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
}
.dnb-textarea__textarea {
background-color: transparent;
}
.dnb-textarea__state {
transition: border-radius 0.25s ease-out;
}
.dnb-textarea__resize--medium .dnb-textarea__shell::after {
opacity: 0.1;
}
.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-violet);
--textarea-border-width: 0.125rem;
}
.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus {
--textarea-color: var(--textarea-color--active);
}
.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-violet);
--textarea-border-radius: 1.5rem;
outline: none;
}
html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
--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-textarea--disabled {
--textarea-color: var(--sb-color-gray-dark-2);
--textarea-background-color: var(--sb-color-gray-light);
--textarea-border-color: var(--sb-color-gray-dark-2);
}
.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) {
--textarea-color--default: var(--sb-color-red);
--textarea-color--active: var(--color-black);
}
.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-red);
}