wehub-resource-sync
146 lines
4.0 KiB
CSS
146 lines
4.0 KiB
CSS
/* ==========================================================================
|
|
ButtonGroup - Groups related buttons together
|
|
========================================================================== */
|
|
|
|
/* Base button group styles */
|
|
.button-group {
|
|
@apply inline-flex h-auto items-center justify-center gap-0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Orientation variants
|
|
========================================================================== */
|
|
|
|
.button-group--horizontal {
|
|
@apply flex-row;
|
|
}
|
|
|
|
.button-group--vertical {
|
|
@apply flex-col;
|
|
}
|
|
|
|
/* Remove border radius from all buttons in group */
|
|
.button-group .button {
|
|
@apply rounded-none;
|
|
}
|
|
|
|
/* Apply border radius to first button (start edge) */
|
|
.button-group--horizontal .button:first-child {
|
|
@apply rounded-s-3xl;
|
|
}
|
|
|
|
/* Apply border radius to last button (end edge) */
|
|
.button-group--horizontal .button:last-child {
|
|
@apply rounded-e-3xl;
|
|
}
|
|
|
|
/* If only one button, apply both rounded edges */
|
|
.button-group--horizontal .button:first-child:last-child {
|
|
@apply rounded-3xl;
|
|
}
|
|
|
|
/* Apply border radius to first button (top edge) in vertical */
|
|
.button-group--vertical .button:first-child {
|
|
@apply rounded-t-3xl;
|
|
}
|
|
|
|
/* Apply border radius to last button (bottom edge) in vertical */
|
|
.button-group--vertical .button:last-child {
|
|
@apply rounded-b-3xl;
|
|
}
|
|
|
|
/* If only one button in vertical, apply all rounded edges */
|
|
.button-group--vertical .button:first-child:last-child {
|
|
@apply rounded-3xl;
|
|
}
|
|
|
|
/* Remove scale transform on active/pressed state for buttons in group */
|
|
.button-group .button:active,
|
|
.button-group .button[data-pressed="true"] {
|
|
transform: none;
|
|
}
|
|
|
|
/* Override focus ring to use inset style so it stays within button bounds */
|
|
.button-group .button:focus-visible:not(:focus),
|
|
.button-group .button[data-focus-visible="true"] {
|
|
--tw-ring-offset-width: 0px;
|
|
@apply ring-inset;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Separator (compound component)
|
|
========================================================================== */
|
|
|
|
.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 */
|
|
.button-group--horizontal & {
|
|
left: -1px;
|
|
top: 25%;
|
|
width: 1px;
|
|
height: 50%;
|
|
}
|
|
|
|
/* Vertical orientation - horizontal divider */
|
|
.button-group--vertical & {
|
|
left: 25%;
|
|
top: -1px;
|
|
width: 50%;
|
|
height: 1px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Outline button border handling
|
|
========================================================================== */
|
|
|
|
/* Remove adjacent borders from outline buttons in horizontal group */
|
|
/* First button: remove end border (right in LTR, left in RTL) */
|
|
.button-group--horizontal .button--outline:first-child {
|
|
@apply border-e-0;
|
|
}
|
|
|
|
/* Last button: remove start border (left in LTR, right in RTL) */
|
|
.button-group--horizontal .button--outline:last-child {
|
|
@apply border-s-0;
|
|
}
|
|
|
|
/* Middle buttons: remove both inline borders */
|
|
.button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
|
|
@apply border-x-0;
|
|
}
|
|
|
|
/* Remove adjacent borders from outline buttons in vertical group */
|
|
/* First button: remove bottom border */
|
|
.button-group--vertical .button--outline:first-child {
|
|
@apply border-b-0;
|
|
}
|
|
|
|
/* Last button: remove top border */
|
|
.button-group--vertical .button--outline:last-child {
|
|
@apply border-t-0;
|
|
}
|
|
|
|
/* Middle buttons: remove both block borders */
|
|
.button-group--vertical .button--outline:not(:first-child):not(:last-child) {
|
|
@apply border-y-0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Full width modifier
|
|
========================================================================== */
|
|
|
|
.button-group--full-width {
|
|
@apply w-full;
|
|
}
|