wehub-resource-sync
95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
/* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
|
|
.textarea {
|
|
@apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
|
|
|
|
min-height: 38px;
|
|
|
|
border-width: var(--border-width-field);
|
|
border-color: var(--field-border);
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition:
|
|
background-color 150ms var(--ease-smooth),
|
|
border-color 150ms var(--ease-smooth),
|
|
box-shadow 150ms var(--ease-out);
|
|
@apply motion-reduce:transition-none;
|
|
|
|
@media (hover: hover) {
|
|
&:hover:not(:focus):not(:focus-visible),
|
|
&[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
|
|
@apply bg-field-hover;
|
|
border-color: var(--field-border-hover);
|
|
}
|
|
}
|
|
|
|
/* Focus state */
|
|
&:focus,
|
|
&[data-focused="true"] {
|
|
@apply status-focused-field;
|
|
border-color: var(--field-border-focus);
|
|
background-color: var(--field-focus);
|
|
}
|
|
|
|
/* Focus visible state */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
}
|
|
|
|
&[data-invalid="true"] {
|
|
@apply status-invalid-field;
|
|
background-color: var(--field-focus);
|
|
}
|
|
|
|
/* Disabled state */
|
|
&:disabled,
|
|
&[data-disabled="true"],
|
|
&[aria-disabled="true"] {
|
|
@apply status-disabled;
|
|
}
|
|
}
|
|
|
|
/* Variant property definitions */
|
|
.textarea--primary {
|
|
/* Default styles */
|
|
}
|
|
|
|
.textarea--secondary {
|
|
@apply shadow-none;
|
|
background-color: var(--textarea-bg);
|
|
|
|
--textarea-bg: var(--default);
|
|
--textarea-bg-hover: var(--default-hover);
|
|
--textarea-bg-focus: var(--default);
|
|
|
|
@media (hover: hover) {
|
|
&:hover:not(:focus):not(:focus-visible),
|
|
&[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
|
|
background-color: var(--textarea-bg-hover);
|
|
}
|
|
}
|
|
|
|
&:focus,
|
|
&[data-focused="true"] {
|
|
background-color: var(--textarea-bg-focus);
|
|
}
|
|
|
|
/* Focus visible state */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
}
|
|
|
|
/* Invalid state */
|
|
&[data-invalid="true"] {
|
|
@apply status-invalid-field;
|
|
background-color: var(--textarea-bg-focus);
|
|
}
|
|
}
|
|
|
|
/* Full width modifier */
|
|
.textarea--full-width {
|
|
@apply w-full;
|
|
}
|