@zvndev/yable-themes 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.css +103 -27
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -237,46 +237,59 @@
|
|
|
237
237
|
|
|
238
238
|
/* ── Column Reorder ──────────────────────────────────────────────────────── */
|
|
239
239
|
|
|
240
|
-
.yable-th[data-reorderable='true'] {
|
|
240
|
+
.yable-th[data-reorderable='true'] > .yable-th-content {
|
|
241
241
|
cursor: grab;
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
.yable-th[data-reorderable='true']:active {
|
|
244
|
+
.yable-th[data-reorderable='true'] > .yable-th-content:active {
|
|
245
245
|
cursor: grabbing;
|
|
246
246
|
}
|
|
247
247
|
|
|
248
|
-
|
|
249
|
-
header still feels clickable. The drag is initiated from a mousedown that
|
|
250
|
-
moves; a click without movement still triggers the sort. */
|
|
251
|
-
.yable-th[data-sortable='true'][data-reorderable='true'] {
|
|
248
|
+
.yable-th[data-sortable='true'][data-reorderable='true'] > .yable-th-content {
|
|
252
249
|
cursor: pointer;
|
|
253
250
|
}
|
|
254
251
|
|
|
255
|
-
/*
|
|
256
|
-
|
|
257
|
-
.
|
|
258
|
-
.yable-th[data-drag-over]::after {
|
|
259
|
-
content: '';
|
|
260
|
-
position: absolute;
|
|
261
|
-
top: 0;
|
|
262
|
-
bottom: 0;
|
|
263
|
-
width: 2px;
|
|
264
|
-
background: var(--yable-accent);
|
|
265
|
-
pointer-events: none;
|
|
266
|
-
z-index: calc(var(--yable-z-resize) + 1);
|
|
267
|
-
}
|
|
252
|
+
/* While a reorder drag is live, the dragged header is lifted into a floating
|
|
253
|
+
ghost that tracks the cursor; its original slot is held open and the other
|
|
254
|
+
headers slide aside (transform set inline) to reveal where it will land. */
|
|
268
255
|
|
|
269
|
-
.
|
|
270
|
-
|
|
256
|
+
/* Headers slide to make room while a reorder is live (transform set inline). */
|
|
257
|
+
.yable-th[data-reordering] {
|
|
258
|
+
transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
|
|
271
259
|
}
|
|
272
260
|
|
|
273
|
-
|
|
274
|
-
|
|
261
|
+
/* The dragged column is lifted into the ghost: its header cell goes fully
|
|
262
|
+
transparent but keeps its layout width, so the neighbour that slides into
|
|
263
|
+
this slot shows through and the real gap opens at the insertion point. */
|
|
264
|
+
.yable-th[data-drag-source] {
|
|
265
|
+
opacity: 0;
|
|
275
266
|
}
|
|
276
267
|
|
|
277
|
-
.
|
|
278
|
-
.yable-
|
|
279
|
-
display:
|
|
268
|
+
/* The floating clone that follows the cursor (portaled to <body>). */
|
|
269
|
+
.yable-col-drag-ghost {
|
|
270
|
+
display: flex;
|
|
271
|
+
align-items: center;
|
|
272
|
+
box-sizing: border-box;
|
|
273
|
+
padding: var(--yable-header-padding-y) var(--yable-header-padding-x);
|
|
274
|
+
font-size: var(--yable-font-size-header);
|
|
275
|
+
font-weight: var(--yable-font-weight-medium);
|
|
276
|
+
letter-spacing: 0.02em;
|
|
277
|
+
color: var(--yable-text-header);
|
|
278
|
+
background: var(--yable-bg-header);
|
|
279
|
+
border: 1px solid var(--yable-accent);
|
|
280
|
+
border-radius: 6px;
|
|
281
|
+
box-shadow:
|
|
282
|
+
0 1px 2px rgba(0, 0, 0, 0.12),
|
|
283
|
+
0 8px 24px rgba(0, 0, 0, 0.18);
|
|
284
|
+
pointer-events: none;
|
|
285
|
+
z-index: var(--yable-z-drag, 9999);
|
|
286
|
+
opacity: 0.96;
|
|
287
|
+
transform: scale(1.02);
|
|
288
|
+
transform-origin: center;
|
|
289
|
+
cursor: grabbing;
|
|
290
|
+
overflow: hidden;
|
|
291
|
+
white-space: nowrap;
|
|
292
|
+
text-overflow: ellipsis;
|
|
280
293
|
}
|
|
281
294
|
|
|
282
295
|
/* ── Body ────────────────────────────────────────────────────────────────── */
|
|
@@ -625,15 +638,35 @@
|
|
|
625
638
|
cursor: pointer;
|
|
626
639
|
position: relative;
|
|
627
640
|
flex-shrink: 0;
|
|
641
|
+
vertical-align: middle;
|
|
628
642
|
transition:
|
|
629
643
|
background var(--yable-transition-fast),
|
|
630
644
|
border-color var(--yable-transition-fast),
|
|
631
|
-
box-shadow var(--yable-transition-fast)
|
|
645
|
+
box-shadow var(--yable-transition-fast),
|
|
646
|
+
transform var(--yable-transition-fast);
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.yable-checkbox-hitbox {
|
|
650
|
+
display: inline-flex;
|
|
651
|
+
align-items: center;
|
|
652
|
+
justify-content: center;
|
|
653
|
+
width: 32px;
|
|
654
|
+
height: 32px;
|
|
655
|
+
margin: -8px;
|
|
656
|
+
border-radius: 8px;
|
|
657
|
+
cursor: pointer;
|
|
658
|
+
vertical-align: middle;
|
|
659
|
+
transition: background-color var(--yable-transition-fast);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.yable-checkbox-hitbox:hover {
|
|
663
|
+
background: color-mix(in srgb, var(--yable-accent) 10%, transparent);
|
|
632
664
|
}
|
|
633
665
|
|
|
634
666
|
.yable-checkbox:checked {
|
|
635
667
|
background: var(--yable-checkbox-bg-checked);
|
|
636
668
|
border-color: var(--yable-checkbox-border-checked);
|
|
669
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--yable-checkbox-bg-checked) 18%, transparent);
|
|
637
670
|
}
|
|
638
671
|
|
|
639
672
|
.yable-checkbox:checked::after {
|
|
@@ -666,12 +699,20 @@
|
|
|
666
699
|
|
|
667
700
|
.yable-checkbox:hover {
|
|
668
701
|
border-color: var(--yable-input-border-hover);
|
|
702
|
+
transform: scale(1.04);
|
|
669
703
|
}
|
|
670
704
|
|
|
671
705
|
.yable-checkbox:focus-visible {
|
|
706
|
+
outline: none;
|
|
672
707
|
box-shadow: var(--yable-input-shadow-focus);
|
|
673
708
|
}
|
|
674
709
|
|
|
710
|
+
.yable-checkbox:disabled,
|
|
711
|
+
.yable-checkbox:disabled + * {
|
|
712
|
+
cursor: not-allowed;
|
|
713
|
+
opacity: 0.55;
|
|
714
|
+
}
|
|
715
|
+
|
|
675
716
|
/* Toggle / Switch */
|
|
676
717
|
.yable-toggle {
|
|
677
718
|
appearance: none;
|
|
@@ -1842,6 +1883,41 @@
|
|
|
1842
1883
|
display: flex;
|
|
1843
1884
|
}
|
|
1844
1885
|
|
|
1886
|
+
/* Floating trigger that opens the tool panel. Without this the sidebar drawer
|
|
1887
|
+
(which starts closed) has no affordance to open it. */
|
|
1888
|
+
.yable-sidebar-trigger {
|
|
1889
|
+
position: absolute;
|
|
1890
|
+
top: 8px;
|
|
1891
|
+
right: 8px;
|
|
1892
|
+
z-index: calc(var(--yable-z-overlay) + 4);
|
|
1893
|
+
display: inline-flex;
|
|
1894
|
+
align-items: center;
|
|
1895
|
+
justify-content: center;
|
|
1896
|
+
width: 30px;
|
|
1897
|
+
height: 30px;
|
|
1898
|
+
padding: 0;
|
|
1899
|
+
border: 1px solid var(--yable-border-color);
|
|
1900
|
+
border-radius: var(--yable-border-radius-sm, 6px);
|
|
1901
|
+
background: var(--yable-bg);
|
|
1902
|
+
color: var(--yable-text-secondary, var(--yable-text-primary));
|
|
1903
|
+
cursor: pointer;
|
|
1904
|
+
transition:
|
|
1905
|
+
background var(--yable-transition),
|
|
1906
|
+
color var(--yable-transition),
|
|
1907
|
+
border-color var(--yable-transition);
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
.yable-sidebar-trigger:hover {
|
|
1911
|
+
color: var(--yable-text-primary);
|
|
1912
|
+
border-color: var(--yable-border-color-strong, var(--yable-border-color));
|
|
1913
|
+
background: var(--yable-row-hover-bg, var(--yable-bg));
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
.yable--rtl .yable-sidebar-trigger {
|
|
1917
|
+
right: auto;
|
|
1918
|
+
left: 8px;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1845
1921
|
.yable-sidebar {
|
|
1846
1922
|
position: absolute;
|
|
1847
1923
|
top: 0;
|