@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
47 lines • 2.11 kB
CSS
/*
* Textarea theme
*
*/
/*
* Utilities
*/
.dnb-textarea {
--textarea-border-color: var(--color-sea-green);
--textarea-border-color--hover: var(--color-emerald-green);
--textarea-border-color--disabled: var(--color-black-55);
--textarea-border-width: 0.0625rem;
--textarea-border-width--hover: 0.125rem;
--textarea-color: var(--color-black);
--textarea-background-color: var(--color-white);
--textarea-placeholder-color: var(--color-black-55);
--textarea-placeholder-color--focus: var(--color-black-20);
}
.dnb-textarea__textarea ::selection {
background-color: var(--color-mint-green);
text-shadow: none;
}
.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):not(.no-hover):hover ~ .dnb-textarea__state {
--textarea-border-color: var(--textarea-border-color--hover);
--textarea-border-width: var(--textarea-border-width--hover);
--textarea-border-inset: ;
}
.dnb-textarea--disabled {
--textarea-color: var(--color-black-55);
--textarea-background-color: var(--color-black-3);
--textarea-border-color: var(--textarea-border-color--disabled);
}
.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
color: var(--color-fire-red);
}
.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
--border-color: var(--color-fire-red);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
--border-color: var(--color-fire-red);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}