80 lines
2.3 KiB
SCSS
80 lines
2.3 KiB
SCSS
.tiptap-button-group {
|
|
display: flex;
|
|
width: fit-content;
|
|
align-items: stretch;
|
|
|
|
/* nested tiptap-button-group gets a gap */
|
|
&:has(> [data-slot="tiptap-button-group"]) {
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
/* focus-visible children stack correctly */
|
|
& > *:focus-visible {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* select trigger without explicit width becomes fit-content */
|
|
& > [data-slot="select-trigger"]:not([class*="w-"]) {
|
|
width: fit-content;
|
|
}
|
|
|
|
/* input children fill remaining space */
|
|
& > input {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
/* ─── Horizontal ────────────────────────────────────────── */
|
|
.tiptap-button-group-horizontal {
|
|
/* all [data-slot] children: remove right radius */
|
|
& > [data-slot] {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* last [data-slot] child: restore right radius */
|
|
& > [data-slot]:not(:has(~ [data-slot])) {
|
|
border-top-right-radius: var(--tt-radius-lg) !important;
|
|
border-bottom-right-radius: var(--tt-radius-lg) !important;
|
|
}
|
|
|
|
/* non-first [data-slot] children: remove left radius + left border */
|
|
& > [data-slot] ~ [data-slot] {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
/* select trigger last of type when followed by hidden select */
|
|
&:has(select[aria-hidden="true"]:last-child)
|
|
> [data-slot="select-trigger"]:last-of-type {
|
|
border-top-right-radius: var(--tt-radius-lg);
|
|
border-bottom-right-radius: var(--tt-radius-lg);
|
|
}
|
|
}
|
|
|
|
/* ─── Vertical ──────────────────────────────────────────── */
|
|
.tiptap-button-group-vertical {
|
|
flex-direction: column;
|
|
|
|
/* all [data-slot] children: remove bottom radius */
|
|
& > [data-slot] {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* last [data-slot] child: restore bottom radius */
|
|
& > [data-slot]:not(:has(~ [data-slot])) {
|
|
border-bottom-left-radius: var(--tt-radius-lg) !important;
|
|
border-bottom-right-radius: var(--tt-radius-lg) !important;
|
|
}
|
|
|
|
/* non-first [data-slot] children: remove top radius + top border */
|
|
& > [data-slot] ~ [data-slot] {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-top-width: 0;
|
|
}
|
|
}
|