@zvndev/yable-themes 0.4.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 +100 -21
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -249,31 +249,47 @@
|
|
|
249
249
|
cursor: pointer;
|
|
250
250
|
}
|
|
251
251
|
|
|
252
|
-
/*
|
|
253
|
-
|
|
254
|
-
.
|
|
255
|
-
.yable-th[data-drag-over]::after {
|
|
256
|
-
content: '';
|
|
257
|
-
position: absolute;
|
|
258
|
-
top: 0;
|
|
259
|
-
bottom: 0;
|
|
260
|
-
width: 2px;
|
|
261
|
-
background: var(--yable-accent);
|
|
262
|
-
pointer-events: none;
|
|
263
|
-
z-index: calc(var(--yable-z-resize) + 1);
|
|
264
|
-
}
|
|
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. */
|
|
265
255
|
|
|
266
|
-
.
|
|
267
|
-
|
|
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);
|
|
268
259
|
}
|
|
269
260
|
|
|
270
|
-
|
|
271
|
-
|
|
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;
|
|
272
266
|
}
|
|
273
267
|
|
|
274
|
-
.
|
|
275
|
-
.yable-
|
|
276
|
-
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;
|
|
277
293
|
}
|
|
278
294
|
|
|
279
295
|
/* ── Body ────────────────────────────────────────────────────────────────── */
|
|
@@ -622,15 +638,35 @@
|
|
|
622
638
|
cursor: pointer;
|
|
623
639
|
position: relative;
|
|
624
640
|
flex-shrink: 0;
|
|
641
|
+
vertical-align: middle;
|
|
625
642
|
transition:
|
|
626
643
|
background var(--yable-transition-fast),
|
|
627
644
|
border-color var(--yable-transition-fast),
|
|
628
|
-
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);
|
|
629
664
|
}
|
|
630
665
|
|
|
631
666
|
.yable-checkbox:checked {
|
|
632
667
|
background: var(--yable-checkbox-bg-checked);
|
|
633
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);
|
|
634
670
|
}
|
|
635
671
|
|
|
636
672
|
.yable-checkbox:checked::after {
|
|
@@ -663,12 +699,20 @@
|
|
|
663
699
|
|
|
664
700
|
.yable-checkbox:hover {
|
|
665
701
|
border-color: var(--yable-input-border-hover);
|
|
702
|
+
transform: scale(1.04);
|
|
666
703
|
}
|
|
667
704
|
|
|
668
705
|
.yable-checkbox:focus-visible {
|
|
706
|
+
outline: none;
|
|
669
707
|
box-shadow: var(--yable-input-shadow-focus);
|
|
670
708
|
}
|
|
671
709
|
|
|
710
|
+
.yable-checkbox:disabled,
|
|
711
|
+
.yable-checkbox:disabled + * {
|
|
712
|
+
cursor: not-allowed;
|
|
713
|
+
opacity: 0.55;
|
|
714
|
+
}
|
|
715
|
+
|
|
672
716
|
/* Toggle / Switch */
|
|
673
717
|
.yable-toggle {
|
|
674
718
|
appearance: none;
|
|
@@ -1839,6 +1883,41 @@
|
|
|
1839
1883
|
display: flex;
|
|
1840
1884
|
}
|
|
1841
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
|
+
|
|
1842
1921
|
.yable-sidebar {
|
|
1843
1922
|
position: absolute;
|
|
1844
1923
|
top: 0;
|