wehub-resource-sync
84 lines
2.0 KiB
CSS
84 lines
2.0 KiB
CSS
/* === Focus Ring === */
|
|
@utility focus-ring {
|
|
@apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
|
|
/* Overrides the ring offset from the theme variables */
|
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
}
|
|
|
|
@utility focus-field-ring {
|
|
@apply ring-2 ring-focus ring-offset-0 outline-none;
|
|
/* No separation - ring sits directly against the element */
|
|
--tw-ring-offset-width: 0px;
|
|
}
|
|
|
|
@utility invalid-field-ring {
|
|
/* Unfocused: show 1px outline */
|
|
@apply outline-1 outline-danger outline-solid;
|
|
--tw-ring-offset-width: 3px;
|
|
|
|
/* Focused: show 2px ring in danger color, remove outline */
|
|
&:focus,
|
|
&:focus-visible,
|
|
&[data-focused="true"],
|
|
&[data-focus-visible="true"],
|
|
&:focus-within,
|
|
&[data-focus-within="true"] {
|
|
@apply ring-2 ring-danger ring-offset-0;
|
|
--tw-ring-offset-width: 0px;
|
|
}
|
|
}
|
|
|
|
@utility no-highlight {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* === Statuses === */
|
|
@utility status-focused {
|
|
@apply focus-ring;
|
|
}
|
|
|
|
@utility status-focused-field {
|
|
@apply focus-field-ring;
|
|
}
|
|
|
|
@utility status-invalid-field {
|
|
@apply invalid-field-ring;
|
|
}
|
|
|
|
@utility status-disabled {
|
|
opacity: var(--disabled-opacity);
|
|
cursor: var(--cursor-disabled);
|
|
pointer-events: none;
|
|
}
|
|
|
|
@utility status-pending {
|
|
@apply pointer-events-none;
|
|
}
|
|
|
|
/* === Scrollbars (standards-only; apply per scroll slot in component CSS) === */
|
|
@utility scrollbar {
|
|
scrollbar-width: var(--scrollbar-width);
|
|
scrollbar-color: var(--scrollbar-color);
|
|
scrollbar-gutter: var(--scrollbar-gutter);
|
|
}
|
|
|
|
@utility scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
scrollbar-gutter: auto;
|
|
}
|
|
|
|
@utility scrollbar-default {
|
|
scrollbar-width: auto;
|
|
scrollbar-color: auto;
|
|
scrollbar-gutter: auto;
|
|
}
|
|
|
|
/* Direct properties only — does not inherit none to nested scroll slots */
|
|
@utility scrollbar-none {
|
|
scrollbar-width: none;
|
|
scrollbar-color: auto;
|
|
scrollbar-gutter: auto;
|
|
-ms-overflow-style: none;
|
|
}
|