wehub-resource-sync
66 lines
1.3 KiB
CSS
66 lines
1.3 KiB
CSS
/* Close Button component styles */
|
|
|
|
/* Base close button styles */
|
|
.close-button {
|
|
@apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight;
|
|
|
|
/* Cursor */
|
|
cursor: var(--cursor-interactive);
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition:
|
|
transform 250ms var(--ease-out-quart),
|
|
color 150ms var(--ease-out),
|
|
background-color 100ms var(--ease-out),
|
|
box-shadow 150ms var(--ease-out);
|
|
@apply transform-gpu motion-reduce:transition-none;
|
|
|
|
/* Focus visible state */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
@apply status-focused;
|
|
}
|
|
|
|
/* Disabled state */
|
|
&:disabled,
|
|
&[aria-disabled="true"] {
|
|
@apply status-disabled;
|
|
}
|
|
|
|
/* Pending state */
|
|
&[data-pending="true"] {
|
|
@apply status-pending;
|
|
}
|
|
|
|
/* SVG icon styling*/
|
|
& svg {
|
|
@apply pointer-events-none;
|
|
@apply size-4 shrink-0 self-center;
|
|
@apply -mx-0.5 my-0.5;
|
|
}
|
|
}
|
|
|
|
/* Variants */
|
|
.close-button--default {
|
|
@apply bg-default text-muted;
|
|
|
|
&:active,
|
|
&[data-pressed="true"] {
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover,
|
|
&[data-hovered="true"] {
|
|
@apply bg-default-hover;
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&[data-pressed="true"] {
|
|
transform: scale(0.93);
|
|
}
|
|
}
|