wehub-resource-sync
137 lines
4.0 KiB
CSS
137 lines
4.0 KiB
CSS
/* ==========================================================================
|
|
ToggleButtonGroup - Groups multiple ToggleButtons into a unified control
|
|
========================================================================== */
|
|
|
|
/* Base styles */
|
|
.toggle-button-group {
|
|
@apply inline-flex h-auto w-fit items-center justify-center gap-0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Orientation variants
|
|
========================================================================== */
|
|
|
|
.toggle-button-group--horizontal {
|
|
@apply flex-row;
|
|
}
|
|
|
|
.toggle-button-group--vertical {
|
|
@apply flex-col;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Full width modifier
|
|
========================================================================== */
|
|
|
|
.toggle-button-group--full-width {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Attached mode (default) - buttons connected with dividers
|
|
========================================================================== */
|
|
|
|
/* Remove border radius from all toggle buttons in attached group */
|
|
.toggle-button-group .toggle-button {
|
|
@apply rounded-none;
|
|
}
|
|
|
|
/* Apply border radius to first button (start edge) */
|
|
.toggle-button-group--horizontal .toggle-button:first-child {
|
|
@apply rounded-s-3xl;
|
|
}
|
|
|
|
/* Apply border radius to last button (end edge) */
|
|
.toggle-button-group--horizontal .toggle-button:last-child {
|
|
@apply rounded-e-3xl;
|
|
}
|
|
|
|
/* If only one button, apply both rounded edges */
|
|
.toggle-button-group--horizontal .toggle-button:first-child:last-child {
|
|
@apply rounded-3xl;
|
|
}
|
|
|
|
/* Apply border radius to first button (top edge) in vertical */
|
|
.toggle-button-group--vertical .toggle-button:first-child {
|
|
@apply rounded-t-3xl;
|
|
}
|
|
|
|
/* Apply border radius to last button (bottom edge) in vertical */
|
|
.toggle-button-group--vertical .toggle-button:last-child {
|
|
@apply rounded-b-3xl;
|
|
}
|
|
|
|
/* If only one button in vertical, apply all rounded edges */
|
|
.toggle-button-group--vertical .toggle-button:first-child:last-child {
|
|
@apply rounded-3xl;
|
|
}
|
|
|
|
/* Remove scale transform on active/pressed state for buttons in group */
|
|
.toggle-button-group .toggle-button:active,
|
|
.toggle-button-group .toggle-button[data-pressed="true"] {
|
|
transform: none;
|
|
}
|
|
|
|
/* Override focus ring to use inset style so it stays within button bounds */
|
|
.toggle-button-group .toggle-button:focus-visible:not(:focus),
|
|
.toggle-button-group .toggle-button[data-focus-visible="true"] {
|
|
--tw-ring-offset-width: 0px;
|
|
@apply ring-inset;
|
|
}
|
|
|
|
/* Full width: stretch each toggle button */
|
|
.toggle-button-group--full-width .toggle-button {
|
|
@apply flex-1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Separator (compound component)
|
|
========================================================================== */
|
|
|
|
.toggle-button-group__separator {
|
|
@apply rounded-sm bg-current opacity-15;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition: opacity 150ms var(--ease-smooth);
|
|
@apply motion-reduce:transition-none;
|
|
|
|
/* Horizontal orientation - vertical divider */
|
|
.toggle-button-group--horizontal & {
|
|
left: -1px;
|
|
top: 25%;
|
|
width: 1px;
|
|
height: 50%;
|
|
}
|
|
|
|
/* Vertical orientation - horizontal divider */
|
|
.toggle-button-group--vertical & {
|
|
left: 25%;
|
|
top: -1px;
|
|
width: 50%;
|
|
height: 1px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Detached mode - buttons separated with gaps
|
|
========================================================================== */
|
|
|
|
.toggle-button-group--detached {
|
|
@apply gap-1;
|
|
}
|
|
|
|
/* Restore border radius in detached mode */
|
|
.toggle-button-group--detached .toggle-button {
|
|
@apply rounded-3xl;
|
|
}
|
|
|
|
/* Hide separators in detached mode */
|
|
.toggle-button-group--detached .toggle-button-group__separator {
|
|
display: none;
|
|
}
|