wehub-resource-sync
93 lines
2.1 KiB
CSS
93 lines
2.1 KiB
CSS
.input {
|
|
@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;
|
|
|
|
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"] {
|
|
}
|
|
|
|
/* Invalid state */
|
|
&[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 */
|
|
.input--primary {
|
|
/* Default styles */
|
|
}
|
|
|
|
.input--secondary {
|
|
@apply shadow-none;
|
|
background-color: var(--input-bg);
|
|
|
|
--input-bg: var(--default);
|
|
--input-bg-hover: var(--default-hover);
|
|
--input-bg-focus: var(--default);
|
|
|
|
@media (hover: hover) {
|
|
&:hover:not(:focus):not(:focus-visible),
|
|
&[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) {
|
|
background-color: var(--input-bg-hover);
|
|
}
|
|
}
|
|
|
|
&:focus,
|
|
&[data-focused="true"] {
|
|
background-color: var(--input-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(--input-bg-focus);
|
|
}
|
|
}
|
|
|
|
/* Full width modifier */
|
|
.input--full-width {
|
|
@apply w-full;
|
|
}
|