@zvndev/yable-themes 0.4.0 → 0.4.2
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 +219 -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 ────────────────────────────────────────────────────────────────── */
|
|
@@ -410,6 +426,125 @@
|
|
|
410
426
|
z-index: calc(var(--yable-z-pinned) + 1);
|
|
411
427
|
}
|
|
412
428
|
|
|
429
|
+
/* ── Adaptive Card Layout ───────────────────────────────────────────────── */
|
|
430
|
+
|
|
431
|
+
.yable--adaptive-layout {
|
|
432
|
+
container-type: inline-size;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.yable--adaptive-cards-active .yable-main {
|
|
436
|
+
overflow: auto;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.yable-adaptive-cards {
|
|
440
|
+
display: grid;
|
|
441
|
+
gap: 10px;
|
|
442
|
+
padding: 10px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.yable-adaptive-card {
|
|
446
|
+
display: grid;
|
|
447
|
+
min-width: 0;
|
|
448
|
+
overflow: hidden;
|
|
449
|
+
border: var(--yable-border-width) solid var(--yable-border-color);
|
|
450
|
+
border-radius: 8px;
|
|
451
|
+
background: var(--yable-bg-row);
|
|
452
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
|
|
453
|
+
content-visibility: auto;
|
|
454
|
+
contain-intrinsic-size: 0 var(--yable-adaptive-card-intrinsic-height, 148px);
|
|
455
|
+
transition:
|
|
456
|
+
background var(--yable-transition-fast),
|
|
457
|
+
border-color var(--yable-transition-fast),
|
|
458
|
+
box-shadow var(--yable-transition-fast);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.yable-adaptive-card:hover {
|
|
462
|
+
background: var(--yable-bg-row-hover);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.yable-adaptive-card[data-selected='true'] {
|
|
466
|
+
border-color: var(--yable-accent);
|
|
467
|
+
background: var(--yable-bg-row-selected);
|
|
468
|
+
box-shadow: inset 2px 0 0 0 var(--yable-accent);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.yable-adaptive-card[data-clickable='true'] {
|
|
472
|
+
cursor: pointer;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.yable-adaptive-card-header {
|
|
476
|
+
display: flex;
|
|
477
|
+
align-items: flex-start;
|
|
478
|
+
justify-content: space-between;
|
|
479
|
+
gap: 12px;
|
|
480
|
+
min-width: 0;
|
|
481
|
+
padding: 12px 12px 10px;
|
|
482
|
+
border-bottom: var(--yable-border-width) solid var(--yable-border-color);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.yable-adaptive-card-title {
|
|
486
|
+
min-width: 0;
|
|
487
|
+
font-size: calc(var(--yable-font-size) + 1px);
|
|
488
|
+
font-weight: var(--yable-font-weight-semibold);
|
|
489
|
+
color: var(--yable-text-primary);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.yable-adaptive-card-primary {
|
|
493
|
+
min-width: 0;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.yable-adaptive-card-fields {
|
|
497
|
+
display: grid;
|
|
498
|
+
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
|
|
499
|
+
min-width: 0;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.yable-adaptive-card-cell {
|
|
503
|
+
display: grid;
|
|
504
|
+
grid-template-columns: minmax(82px, 0.42fr) minmax(0, 1fr);
|
|
505
|
+
align-items: baseline;
|
|
506
|
+
gap: 12px;
|
|
507
|
+
min-width: 0;
|
|
508
|
+
padding: 9px 12px;
|
|
509
|
+
border-top: var(--yable-border-width) solid var(--yable-border-color);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.yable-adaptive-card-cell:nth-child(-n + 2) {
|
|
513
|
+
border-top: 0;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.yable-adaptive-card-label {
|
|
517
|
+
min-width: 0;
|
|
518
|
+
overflow: hidden;
|
|
519
|
+
color: var(--yable-text-tertiary);
|
|
520
|
+
font-size: calc(var(--yable-font-size) - 1px);
|
|
521
|
+
font-weight: var(--yable-font-weight-medium);
|
|
522
|
+
text-overflow: ellipsis;
|
|
523
|
+
white-space: nowrap;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.yable-adaptive-card-value {
|
|
527
|
+
min-width: 0;
|
|
528
|
+
color: var(--yable-text-primary);
|
|
529
|
+
overflow-wrap: anywhere;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.yable-adaptive-card-primary .yable-adaptive-card-value {
|
|
533
|
+
display: block;
|
|
534
|
+
overflow: hidden;
|
|
535
|
+
text-overflow: ellipsis;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.yable-adaptive-card [data-cell-status='pending'] .yable-adaptive-card-value {
|
|
539
|
+
opacity: var(--yable-cell-pending-opacity);
|
|
540
|
+
cursor: var(--yable-cell-pending-cursor);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.yable-adaptive-card [data-cell-status='error'],
|
|
544
|
+
.yable-adaptive-card [data-cell-status='conflict'] {
|
|
545
|
+
position: relative;
|
|
546
|
+
}
|
|
547
|
+
|
|
413
548
|
/* ── Column Pinning ──────────────────────────────────────────────────────── */
|
|
414
549
|
|
|
415
550
|
.yable-th[data-pinned='left'],
|
|
@@ -622,15 +757,35 @@
|
|
|
622
757
|
cursor: pointer;
|
|
623
758
|
position: relative;
|
|
624
759
|
flex-shrink: 0;
|
|
760
|
+
vertical-align: middle;
|
|
625
761
|
transition:
|
|
626
762
|
background var(--yable-transition-fast),
|
|
627
763
|
border-color var(--yable-transition-fast),
|
|
628
|
-
box-shadow var(--yable-transition-fast)
|
|
764
|
+
box-shadow var(--yable-transition-fast),
|
|
765
|
+
transform var(--yable-transition-fast);
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
.yable-checkbox-hitbox {
|
|
769
|
+
display: inline-flex;
|
|
770
|
+
align-items: center;
|
|
771
|
+
justify-content: center;
|
|
772
|
+
width: 32px;
|
|
773
|
+
height: 32px;
|
|
774
|
+
margin: -8px;
|
|
775
|
+
border-radius: 8px;
|
|
776
|
+
cursor: pointer;
|
|
777
|
+
vertical-align: middle;
|
|
778
|
+
transition: background-color var(--yable-transition-fast);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.yable-checkbox-hitbox:hover {
|
|
782
|
+
background: color-mix(in srgb, var(--yable-accent) 10%, transparent);
|
|
629
783
|
}
|
|
630
784
|
|
|
631
785
|
.yable-checkbox:checked {
|
|
632
786
|
background: var(--yable-checkbox-bg-checked);
|
|
633
787
|
border-color: var(--yable-checkbox-border-checked);
|
|
788
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--yable-checkbox-bg-checked) 18%, transparent);
|
|
634
789
|
}
|
|
635
790
|
|
|
636
791
|
.yable-checkbox:checked::after {
|
|
@@ -663,12 +818,20 @@
|
|
|
663
818
|
|
|
664
819
|
.yable-checkbox:hover {
|
|
665
820
|
border-color: var(--yable-input-border-hover);
|
|
821
|
+
transform: scale(1.04);
|
|
666
822
|
}
|
|
667
823
|
|
|
668
824
|
.yable-checkbox:focus-visible {
|
|
825
|
+
outline: none;
|
|
669
826
|
box-shadow: var(--yable-input-shadow-focus);
|
|
670
827
|
}
|
|
671
828
|
|
|
829
|
+
.yable-checkbox:disabled,
|
|
830
|
+
.yable-checkbox:disabled + * {
|
|
831
|
+
cursor: not-allowed;
|
|
832
|
+
opacity: 0.55;
|
|
833
|
+
}
|
|
834
|
+
|
|
672
835
|
/* Toggle / Switch */
|
|
673
836
|
.yable-toggle {
|
|
674
837
|
appearance: none;
|
|
@@ -1839,6 +2002,41 @@
|
|
|
1839
2002
|
display: flex;
|
|
1840
2003
|
}
|
|
1841
2004
|
|
|
2005
|
+
/* Floating trigger that opens the tool panel. Without this the sidebar drawer
|
|
2006
|
+
(which starts closed) has no affordance to open it. */
|
|
2007
|
+
.yable-sidebar-trigger {
|
|
2008
|
+
position: absolute;
|
|
2009
|
+
top: 8px;
|
|
2010
|
+
right: 8px;
|
|
2011
|
+
z-index: calc(var(--yable-z-overlay) + 4);
|
|
2012
|
+
display: inline-flex;
|
|
2013
|
+
align-items: center;
|
|
2014
|
+
justify-content: center;
|
|
2015
|
+
width: 30px;
|
|
2016
|
+
height: 30px;
|
|
2017
|
+
padding: 0;
|
|
2018
|
+
border: 1px solid var(--yable-border-color);
|
|
2019
|
+
border-radius: var(--yable-border-radius-sm, 6px);
|
|
2020
|
+
background: var(--yable-bg);
|
|
2021
|
+
color: var(--yable-text-secondary, var(--yable-text-primary));
|
|
2022
|
+
cursor: pointer;
|
|
2023
|
+
transition:
|
|
2024
|
+
background var(--yable-transition),
|
|
2025
|
+
color var(--yable-transition),
|
|
2026
|
+
border-color var(--yable-transition);
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
.yable-sidebar-trigger:hover {
|
|
2030
|
+
color: var(--yable-text-primary);
|
|
2031
|
+
border-color: var(--yable-border-color-strong, var(--yable-border-color));
|
|
2032
|
+
background: var(--yable-row-hover-bg, var(--yable-bg));
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
.yable--rtl .yable-sidebar-trigger {
|
|
2036
|
+
right: auto;
|
|
2037
|
+
left: 8px;
|
|
2038
|
+
}
|
|
2039
|
+
|
|
1842
2040
|
.yable-sidebar {
|
|
1843
2041
|
position: absolute;
|
|
1844
2042
|
top: 0;
|