@konce-pt/styles 0.11.2 → 0.14.0
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/README.md +11 -11
- package/components.css +2004 -263
- package/index.css +27 -3
- package/package.json +4 -3
- package/src/index.scss +36 -12
package/components.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @konce-pt/styles/components
|
|
2
|
+
* @konce-pt/styles/components - warstwa `kpt.components` wspólna dla portów Angulara i Reacta.
|
|
3
3
|
* PLIK GENEROWANY (scripts/build-components.mjs) ze wszystkich plików *.component.scss
|
|
4
4
|
* w angular (rdzeń + subpathy).
|
|
5
|
-
* Uwaga: żadnej gwiazdki bezpośrednio przed ukośnikiem
|
|
5
|
+
* Uwaga: żadnej gwiazdki bezpośrednio przed ukośnikiem - glob `**` + `/` zamknąłby
|
|
6
6
|
* ten komentarz w połowie zdania, a reszta nagłówka poleciałaby do parsera jako CSS.
|
|
7
|
-
* Nie edytuj ręcznie
|
|
7
|
+
* Nie edytuj ręcznie - zmieniaj SCSS komponentu.
|
|
8
8
|
*
|
|
9
9
|
* Wymaga wcześniej załadowanych tokenów (--kpt-*) i `@konce-pt/styles` (kolejność `@layer`).
|
|
10
10
|
*/
|
|
@@ -42,15 +42,19 @@
|
|
|
42
42
|
}
|
|
43
43
|
.kpt-accordion-panel__chevron {
|
|
44
44
|
color: var(--kpt-color-on-surface-muted);
|
|
45
|
-
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
46
45
|
}
|
|
47
|
-
.kpt-accordion-
|
|
48
|
-
|
|
46
|
+
.kpt-accordion-panel__body {
|
|
47
|
+
padding: 0 var(--kpt-space-5, 1.25rem) var(--kpt-space-4, 1rem);
|
|
48
|
+
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
49
|
+
color: var(--kpt-color-on-surface);
|
|
50
|
+
}
|
|
51
|
+
.kpt-accordion-panel {
|
|
52
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
49
53
|
}
|
|
50
54
|
.kpt-accordion-panel__collapse {
|
|
51
55
|
display: grid;
|
|
52
56
|
grid-template-rows: 0fr;
|
|
53
|
-
transition: grid-template-rows var(--
|
|
57
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
54
58
|
}
|
|
55
59
|
.kpt-accordion-panel__collapse.is-open {
|
|
56
60
|
grid-template-rows: 1fr;
|
|
@@ -59,14 +63,58 @@
|
|
|
59
63
|
overflow: hidden;
|
|
60
64
|
min-height: 0;
|
|
61
65
|
}
|
|
62
|
-
.kpt-accordion-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
.kpt-accordion-panel > .kpt-accordion-panel__header > .kpt-accordion-panel__chevron {
|
|
67
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
68
|
+
}
|
|
69
|
+
.kpt-accordion-panel > .kpt-accordion-panel__header > .kpt-accordion-panel__chevron.is-open {
|
|
70
|
+
transform: rotate(180deg);
|
|
71
|
+
}
|
|
72
|
+
.kpt-accordion-panel[data-motion=none] > .kpt-accordion-panel__collapse {
|
|
73
|
+
transition: none;
|
|
74
|
+
}
|
|
75
|
+
.kpt-accordion-panel[data-motion=none] > .kpt-accordion-panel__header > .kpt-accordion-panel__chevron {
|
|
76
|
+
transition: none;
|
|
77
|
+
}
|
|
78
|
+
.kpt-accordion-panel[data-motion=fade] > .kpt-accordion-panel__collapse > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body {
|
|
79
|
+
opacity: 0;
|
|
80
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
81
|
+
}
|
|
82
|
+
.kpt-accordion-panel[data-motion=fade] > .kpt-accordion-panel__collapse.is-open > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
85
|
+
}
|
|
86
|
+
.kpt-accordion-panel[data-motion=spring] > .kpt-accordion-panel__collapse {
|
|
87
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
88
|
+
}
|
|
89
|
+
.kpt-accordion-panel[data-motion=spring] > .kpt-accordion-panel__collapse:not(.is-open) {
|
|
90
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
91
|
+
}
|
|
92
|
+
.kpt-accordion-panel[data-motion=spring] > .kpt-accordion-panel__header > .kpt-accordion-panel__chevron {
|
|
93
|
+
transition: transform calc(var(--_d) * 0.7) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
94
|
+
}
|
|
95
|
+
.kpt-accordion-panel[data-motion=spring] > .kpt-accordion-panel__collapse > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body {
|
|
96
|
+
opacity: 0;
|
|
97
|
+
translate: 0 -0.5rem;
|
|
98
|
+
filter: blur(4px);
|
|
99
|
+
transition: opacity calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), filter calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard);
|
|
100
|
+
}
|
|
101
|
+
.kpt-accordion-panel[data-motion=spring] > .kpt-accordion-panel__collapse.is-open > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body {
|
|
102
|
+
opacity: 1;
|
|
103
|
+
translate: none;
|
|
104
|
+
filter: none;
|
|
105
|
+
transition: opacity calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12), translate calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_d) * 0.08), filter calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12);
|
|
66
106
|
}
|
|
67
107
|
@media (prefers-reduced-motion: reduce) {
|
|
68
|
-
.kpt-accordion-panel__collapse
|
|
108
|
+
.kpt-accordion-panel__collapse,
|
|
109
|
+
.kpt-accordion-panel > .kpt-accordion-panel__header > .kpt-accordion-panel__chevron {
|
|
110
|
+
transition: none;
|
|
111
|
+
}
|
|
112
|
+
.kpt-accordion-panel[data-motion] > .kpt-accordion-panel__collapse > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body,
|
|
113
|
+
.kpt-accordion-panel[data-motion] > .kpt-accordion-panel__collapse.is-open > .kpt-accordion-panel__collapse-inner > .kpt-accordion-panel__body {
|
|
69
114
|
transition: none;
|
|
115
|
+
opacity: 1;
|
|
116
|
+
translate: none;
|
|
117
|
+
filter: none;
|
|
70
118
|
}
|
|
71
119
|
}
|
|
72
120
|
}
|
|
@@ -137,7 +185,7 @@
|
|
|
137
185
|
.kpt-app-shell {
|
|
138
186
|
--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);
|
|
139
187
|
--_kpt-shell-z: var(--kpt-z-overlay, 1100);
|
|
140
|
-
--_kpt-shell-duration: var(--kpt-motion-duration-base, 200ms);
|
|
188
|
+
--_kpt-shell-duration: calc(var(--kpt-motion-duration-base, 200ms) * var(--kpt-motion-scale, 1));
|
|
141
189
|
--_kpt-shell-easing: var(--kpt-motion-easing-standard);
|
|
142
190
|
--_kpt-shell-out: -100%;
|
|
143
191
|
display: flex;
|
|
@@ -683,7 +731,7 @@
|
|
|
683
731
|
@layer kpt.components {
|
|
684
732
|
.kpt-auth-host {
|
|
685
733
|
display: block;
|
|
686
|
-
--_kpt-auth-duration: var(--kpt-anim-duration, var(--kpt-motion-duration-slow, 320ms));
|
|
734
|
+
--_kpt-auth-duration: calc(var(--kpt-anim-duration, var(--kpt-motion-duration-slow, 320ms)) * var(--kpt-motion-scale, 1));
|
|
687
735
|
--_kpt-auth-easing: var(--kpt-motion-easing-emphasized, cubic-bezier(0.3, 0, 0, 1));
|
|
688
736
|
--_kpt-auth-dir: 1;
|
|
689
737
|
}
|
|
@@ -1018,6 +1066,7 @@
|
|
|
1018
1066
|
background: var(--kpt-color-surface-variant);
|
|
1019
1067
|
}
|
|
1020
1068
|
.kpt-autocomplete__panel {
|
|
1069
|
+
flex: 1 1 auto;
|
|
1021
1070
|
list-style: none;
|
|
1022
1071
|
margin: 0;
|
|
1023
1072
|
padding: 0.25rem;
|
|
@@ -1038,6 +1087,29 @@
|
|
|
1038
1087
|
.kpt-autocomplete__option.is-active {
|
|
1039
1088
|
background: var(--kpt-color-surface-variant);
|
|
1040
1089
|
}
|
|
1090
|
+
.kpt-autocomplete__input {
|
|
1091
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
1092
|
+
}
|
|
1093
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1094
|
+
.kpt-autocomplete__input {
|
|
1095
|
+
transition: none;
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
.kpt-autocomplete-host[data-speech] {
|
|
1099
|
+
position: relative;
|
|
1100
|
+
}
|
|
1101
|
+
.kpt-autocomplete-host[data-speech] .kpt-autocomplete__input {
|
|
1102
|
+
padding-inline-end: 2.5rem;
|
|
1103
|
+
}
|
|
1104
|
+
.kpt-autocomplete-host[data-speech=listening] .kpt-autocomplete__input {
|
|
1105
|
+
padding-inline-end: 4.5rem;
|
|
1106
|
+
}
|
|
1107
|
+
.kpt-autocomplete__speech {
|
|
1108
|
+
position: absolute;
|
|
1109
|
+
inset-block: 0;
|
|
1110
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
1111
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
1112
|
+
}
|
|
1041
1113
|
}
|
|
1042
1114
|
|
|
1043
1115
|
/* src/lib/avatar/avatar.component.scss */
|
|
@@ -1130,11 +1202,11 @@
|
|
|
1130
1202
|
@charset "UTF-8";
|
|
1131
1203
|
@layer kpt.components {
|
|
1132
1204
|
.kpt-backdrop-host {
|
|
1133
|
-
/* Kolor kwadratów czyta z tej własności TypeScript
|
|
1205
|
+
/* Kolor kwadratów czyta z tej własności TypeScript - canvas nie rozwija `var()` sam. */
|
|
1134
1206
|
--_dot: var(--kpt-backdrop-color, var(--kpt-color-primary));
|
|
1135
1207
|
position: relative;
|
|
1136
1208
|
display: block;
|
|
1137
|
-
/* Siatka celowo wychodzi poza obszar, żeby nie kończyć się przed krawędzią
|
|
1209
|
+
/* Siatka celowo wychodzi poza obszar, żeby nie kończyć się przed krawędzią - tu się ją ucina. */
|
|
1138
1210
|
overflow: hidden;
|
|
1139
1211
|
/* Własny kontekst nakładania: `z-index` treści nie ma się o co bić z resztą strony. */
|
|
1140
1212
|
isolation: isolate;
|
|
@@ -1148,7 +1220,7 @@
|
|
|
1148
1220
|
display: block;
|
|
1149
1221
|
inline-size: 100%;
|
|
1150
1222
|
block-size: 100%;
|
|
1151
|
-
/* Tło nie łapie kliknięć ani zaznaczenia
|
|
1223
|
+
/* Tło nie łapie kliknięć ani zaznaczenia - pod spodem nie ma czego dotykać. */
|
|
1152
1224
|
pointer-events: none;
|
|
1153
1225
|
}
|
|
1154
1226
|
.kpt-backdrop__content {
|
|
@@ -1256,7 +1328,7 @@
|
|
|
1256
1328
|
background: var(--kpt-color-overlay-scrim);
|
|
1257
1329
|
opacity: 0;
|
|
1258
1330
|
visibility: hidden;
|
|
1259
|
-
transition: opacity 0.2s, visibility 0.2s;
|
|
1331
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1));
|
|
1260
1332
|
}
|
|
1261
1333
|
.kpt-bottom-sheet__backdrop.is-open {
|
|
1262
1334
|
opacity: 1;
|
|
@@ -1276,8 +1348,8 @@
|
|
|
1276
1348
|
box-shadow: var(--kpt-elevation-4);
|
|
1277
1349
|
transform: translateY(100%);
|
|
1278
1350
|
visibility: hidden;
|
|
1279
|
-
--_kpt-bottom-sheet-vis-delay: 0.25s;
|
|
1280
|
-
transition: transform 0.25s ease, visibility 0s linear var(--_kpt-bottom-sheet-vis-delay, 0s);
|
|
1351
|
+
--_kpt-bottom-sheet-vis-delay: calc(0.25s * var(--kpt-motion-scale, 1));
|
|
1352
|
+
transition: transform calc(0.25s * var(--kpt-motion-scale, 1)) ease, visibility 0s linear var(--_kpt-bottom-sheet-vis-delay, 0s);
|
|
1281
1353
|
}
|
|
1282
1354
|
.kpt-bottom-sheet__panel.is-open {
|
|
1283
1355
|
transform: none;
|
|
@@ -1364,8 +1436,12 @@
|
|
|
1364
1436
|
--_bg: var(--kpt-button-filled-bg);
|
|
1365
1437
|
--_fg: var(--kpt-button-filled-fg);
|
|
1366
1438
|
--_bg-hover: var(--kpt-button-filled-bg-hover);
|
|
1367
|
-
--_bg-active: var(--kpt-button-filled-bg-active);
|
|
1368
1439
|
--_border: transparent;
|
|
1440
|
+
}
|
|
1441
|
+
.kpt-button:not([data-variant]), .kpt-button[data-variant=filled] {
|
|
1442
|
+
--_bg-active: var(--kpt-button-filled-bg-active);
|
|
1443
|
+
}
|
|
1444
|
+
.kpt-button {
|
|
1369
1445
|
position: relative;
|
|
1370
1446
|
isolation: isolate;
|
|
1371
1447
|
display: inline-flex;
|
|
@@ -1387,7 +1463,17 @@
|
|
|
1387
1463
|
background-color: var(--_bg);
|
|
1388
1464
|
color: var(--_fg);
|
|
1389
1465
|
text-decoration: none;
|
|
1390
|
-
transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
1466
|
+
transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
1467
|
+
}
|
|
1468
|
+
.kpt-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
1469
|
+
--_press-t: 0.08s;
|
|
1470
|
+
--_press-e: ease-out;
|
|
1471
|
+
scale: 0.96;
|
|
1472
|
+
}
|
|
1473
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1474
|
+
.kpt-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
1475
|
+
scale: none;
|
|
1476
|
+
}
|
|
1391
1477
|
}
|
|
1392
1478
|
.kpt-button::after {
|
|
1393
1479
|
content: "";
|
|
@@ -1456,10 +1542,14 @@
|
|
|
1456
1542
|
--_fg: var(--kpt-button-elevated-fg);
|
|
1457
1543
|
--_bg-hover: var(--kpt-button-elevated-bg-hover);
|
|
1458
1544
|
box-shadow: var(--kpt-shadow-sm);
|
|
1545
|
+
transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
1459
1546
|
}
|
|
1460
1547
|
.kpt-button[data-variant=elevated]:hover:not(:disabled):not([aria-disabled=true]) {
|
|
1461
1548
|
box-shadow: var(--kpt-shadow-md);
|
|
1462
1549
|
}
|
|
1550
|
+
.kpt-button[data-variant=elevated]:active:not(:disabled):not([aria-disabled=true]) {
|
|
1551
|
+
box-shadow: var(--kpt-shadow-sm);
|
|
1552
|
+
}
|
|
1463
1553
|
.kpt-button[data-variant=tonal] {
|
|
1464
1554
|
--_bg: var(--kpt-button-tonal-bg);
|
|
1465
1555
|
--_fg: var(--kpt-button-tonal-fg);
|
|
@@ -1485,10 +1575,21 @@
|
|
|
1485
1575
|
--_bg-hover: transparent;
|
|
1486
1576
|
--_px: 0;
|
|
1487
1577
|
text-decoration: underline;
|
|
1578
|
+
text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
|
|
1488
1579
|
text-underline-offset: 0.2em;
|
|
1580
|
+
transition: color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), text-decoration-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), text-underline-offset var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
1581
|
+
}
|
|
1582
|
+
.kpt-button[data-variant=link]::after {
|
|
1583
|
+
display: none;
|
|
1489
1584
|
}
|
|
1490
1585
|
.kpt-button[data-variant=link]:hover:not(:disabled):not([aria-disabled=true]) {
|
|
1491
1586
|
--_fg: var(--kpt-button-link-fg-hover);
|
|
1587
|
+
text-decoration-color: currentColor;
|
|
1588
|
+
text-underline-offset: 0.3em;
|
|
1589
|
+
}
|
|
1590
|
+
.kpt-button[data-variant=link]:active:not(:disabled):not([aria-disabled=true]) {
|
|
1591
|
+
scale: none;
|
|
1592
|
+
opacity: 0.7;
|
|
1492
1593
|
}
|
|
1493
1594
|
.kpt-button[data-variant=danger] {
|
|
1494
1595
|
--_bg: var(--kpt-button-danger-bg);
|
|
@@ -1521,6 +1622,16 @@
|
|
|
1521
1622
|
border-right-color: transparent;
|
|
1522
1623
|
border-radius: 50%;
|
|
1523
1624
|
animation: kpt-button-spin 0.6s linear infinite;
|
|
1625
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), opacity calc(0.15s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
1626
|
+
}
|
|
1627
|
+
@starting-style {
|
|
1628
|
+
.kpt-button__spinner {
|
|
1629
|
+
scale: 0.3;
|
|
1630
|
+
opacity: 0;
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
.kpt-button__content {
|
|
1634
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
1524
1635
|
}
|
|
1525
1636
|
@media (prefers-reduced-motion: reduce) {
|
|
1526
1637
|
.kpt-button {
|
|
@@ -1531,8 +1642,12 @@
|
|
|
1531
1642
|
}
|
|
1532
1643
|
.kpt-button__spinner {
|
|
1533
1644
|
animation-duration: 1.4s;
|
|
1645
|
+
transition: none;
|
|
1534
1646
|
}
|
|
1535
1647
|
}
|
|
1648
|
+
:root[data-kpt-motion=off] .kpt-button__spinner {
|
|
1649
|
+
animation-duration: 1.4s;
|
|
1650
|
+
}
|
|
1536
1651
|
@keyframes kpt-button-spin {
|
|
1537
1652
|
to {
|
|
1538
1653
|
transform: rotate(360deg);
|
|
@@ -1552,6 +1667,9 @@
|
|
|
1552
1667
|
overflow: hidden;
|
|
1553
1668
|
background: var(--kpt-color-surface);
|
|
1554
1669
|
}
|
|
1670
|
+
.kpt-button-group--invalid {
|
|
1671
|
+
border-color: var(--kpt-form-field-border-error, var(--kpt-color-danger));
|
|
1672
|
+
}
|
|
1555
1673
|
.kpt-button-group__item {
|
|
1556
1674
|
appearance: none;
|
|
1557
1675
|
border: 0;
|
|
@@ -1568,7 +1686,19 @@
|
|
|
1568
1686
|
font-size: var(--_fs, 0.875rem);
|
|
1569
1687
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
1570
1688
|
cursor: pointer;
|
|
1571
|
-
|
|
1689
|
+
position: relative;
|
|
1690
|
+
isolation: isolate;
|
|
1691
|
+
transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
1692
|
+
}
|
|
1693
|
+
.kpt-button-group__item:active:not(:disabled):not([aria-disabled=true]) {
|
|
1694
|
+
--_press-t: 0.08s;
|
|
1695
|
+
--_press-e: ease-out;
|
|
1696
|
+
scale: 0.95;
|
|
1697
|
+
}
|
|
1698
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1699
|
+
.kpt-button-group__item:active:not(:disabled):not([aria-disabled=true]) {
|
|
1700
|
+
scale: none;
|
|
1701
|
+
}
|
|
1572
1702
|
}
|
|
1573
1703
|
.kpt-button-group__item:first-child {
|
|
1574
1704
|
border-inline-start: 0;
|
|
@@ -1576,10 +1706,21 @@
|
|
|
1576
1706
|
.kpt-button-group__item:hover:not(:disabled):not(.is-active) {
|
|
1577
1707
|
background: var(--kpt-color-muted);
|
|
1578
1708
|
}
|
|
1579
|
-
.kpt-button-group__item
|
|
1709
|
+
.kpt-button-group__item::before {
|
|
1710
|
+
content: "";
|
|
1711
|
+
position: absolute;
|
|
1712
|
+
inset: 0;
|
|
1713
|
+
z-index: -1;
|
|
1580
1714
|
background: var(--kpt-color-primary);
|
|
1715
|
+
opacity: 0;
|
|
1716
|
+
pointer-events: none;
|
|
1717
|
+
}
|
|
1718
|
+
.kpt-button-group__item.is-active {
|
|
1581
1719
|
color: var(--kpt-color-on-primary);
|
|
1582
1720
|
}
|
|
1721
|
+
.kpt-button-group__item.is-active::before {
|
|
1722
|
+
opacity: 1;
|
|
1723
|
+
}
|
|
1583
1724
|
.kpt-button-group__item:disabled {
|
|
1584
1725
|
opacity: 0.5;
|
|
1585
1726
|
cursor: not-allowed;
|
|
@@ -1609,6 +1750,11 @@
|
|
|
1609
1750
|
--_px: 0;
|
|
1610
1751
|
width: var(--_h);
|
|
1611
1752
|
}
|
|
1753
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1754
|
+
.kpt-button-group__item {
|
|
1755
|
+
transition: none;
|
|
1756
|
+
}
|
|
1757
|
+
}
|
|
1612
1758
|
}
|
|
1613
1759
|
|
|
1614
1760
|
/* src/lib/card/card.component.scss */
|
|
@@ -1864,6 +2010,30 @@
|
|
|
1864
2010
|
.kpt-checkbox__input[aria-invalid=true] + .kpt-checkbox__box {
|
|
1865
2011
|
border-color: var(--kpt-form-field-border-error);
|
|
1866
2012
|
}
|
|
2013
|
+
.kpt-checkbox[data-motion=spring] .kpt-checkbox__check {
|
|
2014
|
+
opacity: 1;
|
|
2015
|
+
transition: none;
|
|
2016
|
+
}
|
|
2017
|
+
.kpt-checkbox[data-motion=spring] .kpt-checkbox__check path {
|
|
2018
|
+
stroke-dasharray: 1;
|
|
2019
|
+
stroke-dashoffset: 1;
|
|
2020
|
+
transition: stroke-dashoffset calc(0.12s * var(--kpt-motion-scale, 1)) ease-in;
|
|
2021
|
+
}
|
|
2022
|
+
.kpt-checkbox[data-motion=spring] .kpt-checkbox__input:checked + .kpt-checkbox__box .kpt-checkbox__check path {
|
|
2023
|
+
stroke-dashoffset: 0;
|
|
2024
|
+
transition: stroke-dashoffset calc(0.3s * var(--kpt-motion-scale, 1)) ease-out calc(0.06s * var(--kpt-motion-scale, 1));
|
|
2025
|
+
}
|
|
2026
|
+
.kpt-checkbox[data-motion=none] .kpt-checkbox__box,
|
|
2027
|
+
.kpt-checkbox[data-motion=none] .kpt-checkbox__check {
|
|
2028
|
+
transition: none;
|
|
2029
|
+
}
|
|
2030
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2031
|
+
.kpt-checkbox__box,
|
|
2032
|
+
.kpt-checkbox__check,
|
|
2033
|
+
.kpt-checkbox[data-motion] .kpt-checkbox__check path {
|
|
2034
|
+
transition: none;
|
|
2035
|
+
}
|
|
2036
|
+
}
|
|
1867
2037
|
}
|
|
1868
2038
|
|
|
1869
2039
|
/* src/lib/chip/chip.component.scss */
|
|
@@ -1965,6 +2135,7 @@
|
|
|
1965
2135
|
display: block;
|
|
1966
2136
|
}
|
|
1967
2137
|
.kpt-chips-input {
|
|
2138
|
+
position: relative;
|
|
1968
2139
|
display: flex;
|
|
1969
2140
|
flex-wrap: wrap;
|
|
1970
2141
|
align-items: center;
|
|
@@ -2002,6 +2173,14 @@
|
|
|
2002
2173
|
.kpt-chips-input__field::placeholder {
|
|
2003
2174
|
color: var(--kpt-form-field-placeholder);
|
|
2004
2175
|
}
|
|
2176
|
+
.kpt-chips-input {
|
|
2177
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
2178
|
+
}
|
|
2179
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2180
|
+
.kpt-chips-input {
|
|
2181
|
+
transition: none;
|
|
2182
|
+
}
|
|
2183
|
+
}
|
|
2005
2184
|
}
|
|
2006
2185
|
|
|
2007
2186
|
/* src/lib/color-picker/color-picker.component.scss */
|
|
@@ -2067,6 +2246,14 @@
|
|
|
2067
2246
|
outline: 2px solid var(--kpt-color-focus-ring);
|
|
2068
2247
|
outline-offset: 1px;
|
|
2069
2248
|
}
|
|
2249
|
+
.kpt-color-picker__hex {
|
|
2250
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
2251
|
+
}
|
|
2252
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2253
|
+
.kpt-color-picker__hex {
|
|
2254
|
+
transition: none;
|
|
2255
|
+
}
|
|
2256
|
+
}
|
|
2070
2257
|
}
|
|
2071
2258
|
|
|
2072
2259
|
/* src/lib/confirm/confirm-container.component.scss */
|
|
@@ -2102,6 +2289,18 @@
|
|
|
2102
2289
|
.kpt-context-menu__area {
|
|
2103
2290
|
display: contents;
|
|
2104
2291
|
}
|
|
2292
|
+
.kpt-context-menu__layer {
|
|
2293
|
+
position: fixed;
|
|
2294
|
+
inset: 0;
|
|
2295
|
+
width: auto;
|
|
2296
|
+
height: auto;
|
|
2297
|
+
margin: 0;
|
|
2298
|
+
padding: 0;
|
|
2299
|
+
border: 0;
|
|
2300
|
+
background: transparent;
|
|
2301
|
+
overflow: visible;
|
|
2302
|
+
color: inherit;
|
|
2303
|
+
}
|
|
2105
2304
|
.kpt-context-menu__backdrop {
|
|
2106
2305
|
position: fixed;
|
|
2107
2306
|
inset: 0;
|
|
@@ -2141,7 +2340,7 @@
|
|
|
2141
2340
|
.kpt-context-menu__item--danger {
|
|
2142
2341
|
color: var(--kpt-color-danger);
|
|
2143
2342
|
}
|
|
2144
|
-
/* Wiersz nagłówkowy
|
|
2343
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
2145
2344
|
.kpt-context-menu__header {
|
|
2146
2345
|
display: flex;
|
|
2147
2346
|
align-items: center;
|
|
@@ -2216,6 +2415,23 @@
|
|
|
2216
2415
|
border-color: var(--kpt-form-field-border-focus);
|
|
2217
2416
|
box-shadow: 0 0 0 2px color-mix(in oklch, var(--kpt-form-field-border-focus) 30%, transparent);
|
|
2218
2417
|
}
|
|
2418
|
+
.kpt-data-table__search {
|
|
2419
|
+
position: relative;
|
|
2420
|
+
width: 100%;
|
|
2421
|
+
max-width: 20rem;
|
|
2422
|
+
}
|
|
2423
|
+
.kpt-data-table__search[data-speech] .kpt-data-table__filter {
|
|
2424
|
+
padding-inline-end: 2.5rem;
|
|
2425
|
+
}
|
|
2426
|
+
.kpt-data-table__search[data-speech=listening] .kpt-data-table__filter {
|
|
2427
|
+
padding-inline-end: 4.5rem;
|
|
2428
|
+
}
|
|
2429
|
+
.kpt-data-table__speech {
|
|
2430
|
+
position: absolute;
|
|
2431
|
+
inset-block: 0;
|
|
2432
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
2433
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
2434
|
+
}
|
|
2219
2435
|
.kpt-data-table__scroll {
|
|
2220
2436
|
overflow: auto;
|
|
2221
2437
|
}
|
|
@@ -2233,7 +2449,8 @@
|
|
|
2233
2449
|
}
|
|
2234
2450
|
.kpt-data-table__table {
|
|
2235
2451
|
width: 100%;
|
|
2236
|
-
border-collapse:
|
|
2452
|
+
border-collapse: separate;
|
|
2453
|
+
border-spacing: 0;
|
|
2237
2454
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
2238
2455
|
}
|
|
2239
2456
|
.kpt-data-table__table--frozen {
|
|
@@ -2279,23 +2496,33 @@
|
|
|
2279
2496
|
border-bottom: 0;
|
|
2280
2497
|
border-top: var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);
|
|
2281
2498
|
}
|
|
2282
|
-
.kpt-data-
|
|
2283
|
-
|
|
2499
|
+
.kpt-data-table__filter-row {
|
|
2500
|
+
--_filter-h: 2rem;
|
|
2284
2501
|
}
|
|
2285
2502
|
.kpt-data-table__filter-row th {
|
|
2503
|
+
height: calc(var(--_filter-h) + 2 * var(--kpt-space-2, 0.5rem) + var(--kpt-border-width-thin, 1px));
|
|
2286
2504
|
padding: var(--kpt-space-2, 0.5rem);
|
|
2287
2505
|
font-weight: var(--kpt-font-weight-normal, 400);
|
|
2288
2506
|
cursor: auto;
|
|
2289
2507
|
}
|
|
2508
|
+
.kpt-data-table__filter-row .kpt-select {
|
|
2509
|
+
min-height: var(--_filter-h);
|
|
2510
|
+
padding-block: 0;
|
|
2511
|
+
}
|
|
2512
|
+
.kpt-data-table__filter-row .kpt-date-range {
|
|
2513
|
+
height: var(--_filter-h);
|
|
2514
|
+
}
|
|
2290
2515
|
.kpt-data-table__fcell {
|
|
2291
2516
|
width: 100%;
|
|
2292
|
-
height:
|
|
2517
|
+
height: var(--_filter-h);
|
|
2518
|
+
box-sizing: border-box;
|
|
2519
|
+
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
2293
2520
|
padding-inline: var(--kpt-space-2, 0.5rem);
|
|
2294
2521
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);
|
|
2295
2522
|
border-radius: var(--kpt-form-field-radius, 0.5rem);
|
|
2296
2523
|
background: var(--kpt-form-field-bg);
|
|
2297
2524
|
color: var(--kpt-form-field-text);
|
|
2298
|
-
font: inherit;
|
|
2525
|
+
font-family: inherit;
|
|
2299
2526
|
}
|
|
2300
2527
|
.kpt-data-table__fcell:focus-visible {
|
|
2301
2528
|
outline: none;
|
|
@@ -2322,12 +2549,47 @@
|
|
|
2322
2549
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
2323
2550
|
color: var(--kpt-color-on-surface-muted);
|
|
2324
2551
|
}
|
|
2325
|
-
.kpt-data-table__th--sortable {
|
|
2552
|
+
.kpt-data-table__th--sortable:hover {
|
|
2553
|
+
color: var(--kpt-color-on-surface);
|
|
2554
|
+
}
|
|
2555
|
+
.kpt-data-table__sort-btn {
|
|
2556
|
+
display: inline-flex;
|
|
2557
|
+
align-items: center;
|
|
2558
|
+
padding: 0;
|
|
2559
|
+
border: 0;
|
|
2560
|
+
background: none;
|
|
2561
|
+
font: inherit;
|
|
2562
|
+
color: inherit;
|
|
2563
|
+
text-align: inherit;
|
|
2326
2564
|
cursor: pointer;
|
|
2565
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
2327
2566
|
}
|
|
2328
|
-
.kpt-data-
|
|
2567
|
+
.kpt-data-table__sort-btn:focus-visible {
|
|
2568
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
2569
|
+
outline-offset: 2px;
|
|
2570
|
+
}
|
|
2571
|
+
.kpt-data-table__caption {
|
|
2572
|
+
caption-side: top;
|
|
2573
|
+
padding: var(--kpt-space-3, 0.75rem) var(--kpt-table-cell-padding, 0.75rem) var(--kpt-space-2, 0.5rem);
|
|
2574
|
+
text-align: start;
|
|
2575
|
+
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
2329
2576
|
color: var(--kpt-color-on-surface);
|
|
2330
2577
|
}
|
|
2578
|
+
.kpt-data-table__caption-text {
|
|
2579
|
+
position: sticky;
|
|
2580
|
+
inset-inline-start: var(--kpt-table-cell-padding, 0.75rem);
|
|
2581
|
+
}
|
|
2582
|
+
.kpt-data-table__live {
|
|
2583
|
+
position: absolute;
|
|
2584
|
+
width: 1px;
|
|
2585
|
+
height: 1px;
|
|
2586
|
+
margin: -1px;
|
|
2587
|
+
padding: 0;
|
|
2588
|
+
overflow: hidden;
|
|
2589
|
+
clip-path: inset(50%);
|
|
2590
|
+
white-space: nowrap;
|
|
2591
|
+
border: 0;
|
|
2592
|
+
}
|
|
2331
2593
|
.kpt-data-table__cell--editable {
|
|
2332
2594
|
cursor: pointer;
|
|
2333
2595
|
}
|
|
@@ -2365,15 +2627,31 @@
|
|
|
2365
2627
|
box-shadow: inset 2px 0 0 0 var(--kpt-color-primary);
|
|
2366
2628
|
}
|
|
2367
2629
|
.kpt-data-table__grip {
|
|
2630
|
+
display: inline-flex;
|
|
2631
|
+
align-items: center;
|
|
2368
2632
|
margin-inline-end: 0.4em;
|
|
2633
|
+
padding: 0;
|
|
2634
|
+
border: 0;
|
|
2635
|
+
background: none;
|
|
2636
|
+
color: inherit;
|
|
2369
2637
|
opacity: 0.45;
|
|
2638
|
+
cursor: inherit;
|
|
2639
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
2640
|
+
}
|
|
2641
|
+
.kpt-data-table__grip:hover, .kpt-data-table__grip:focus-visible {
|
|
2642
|
+
opacity: 1;
|
|
2643
|
+
}
|
|
2644
|
+
.kpt-data-table__grip:focus-visible {
|
|
2645
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
2646
|
+
outline-offset: 1px;
|
|
2370
2647
|
}
|
|
2371
2648
|
.kpt-data-table__checkbox {
|
|
2372
2649
|
width: 1px;
|
|
2373
2650
|
white-space: nowrap;
|
|
2374
2651
|
text-align: center;
|
|
2375
2652
|
}
|
|
2376
|
-
.kpt-data-table__checkbox input[type=checkbox]
|
|
2653
|
+
.kpt-data-table__checkbox input[type=checkbox],
|
|
2654
|
+
.kpt-data-table__checkbox input[type=radio] {
|
|
2377
2655
|
appearance: none;
|
|
2378
2656
|
-webkit-appearance: none;
|
|
2379
2657
|
position: relative;
|
|
@@ -2388,7 +2666,8 @@
|
|
|
2388
2666
|
background: var(--kpt-form-field-bg);
|
|
2389
2667
|
transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), border-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
2390
2668
|
}
|
|
2391
|
-
.kpt-data-table__checkbox input[type=checkbox]::after
|
|
2669
|
+
.kpt-data-table__checkbox input[type=checkbox]::after,
|
|
2670
|
+
.kpt-data-table__checkbox input[type=radio]::after {
|
|
2392
2671
|
content: "";
|
|
2393
2672
|
position: absolute;
|
|
2394
2673
|
inset: 0;
|
|
@@ -2398,24 +2677,38 @@
|
|
|
2398
2677
|
-webkit-mask: no-repeat center/0.85rem;
|
|
2399
2678
|
mask: no-repeat center/0.85rem;
|
|
2400
2679
|
}
|
|
2401
|
-
.kpt-data-table__checkbox input[type=checkbox]:checked, .kpt-data-table__checkbox input[type=checkbox]:indeterminate
|
|
2680
|
+
.kpt-data-table__checkbox input[type=checkbox]:checked, .kpt-data-table__checkbox input[type=checkbox]:indeterminate,
|
|
2681
|
+
.kpt-data-table__checkbox input[type=radio]:checked,
|
|
2682
|
+
.kpt-data-table__checkbox input[type=radio]:indeterminate {
|
|
2402
2683
|
background: var(--kpt-color-primary);
|
|
2403
2684
|
border-color: var(--kpt-color-primary);
|
|
2404
2685
|
}
|
|
2405
|
-
.kpt-data-table__checkbox input[type=checkbox]:checked::after
|
|
2686
|
+
.kpt-data-table__checkbox input[type=checkbox]:checked::after,
|
|
2687
|
+
.kpt-data-table__checkbox input[type=radio]:checked::after {
|
|
2406
2688
|
opacity: 1;
|
|
2407
2689
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
2408
2690
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
2409
2691
|
}
|
|
2410
|
-
.kpt-data-table__checkbox input[type=checkbox]:indeterminate::after
|
|
2692
|
+
.kpt-data-table__checkbox input[type=checkbox]:indeterminate::after,
|
|
2693
|
+
.kpt-data-table__checkbox input[type=radio]:indeterminate::after {
|
|
2411
2694
|
opacity: 1;
|
|
2412
2695
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
2413
2696
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
2414
2697
|
}
|
|
2415
|
-
.kpt-data-table__checkbox input[type=checkbox]:focus-visible
|
|
2698
|
+
.kpt-data-table__checkbox input[type=checkbox]:focus-visible,
|
|
2699
|
+
.kpt-data-table__checkbox input[type=radio]:focus-visible {
|
|
2416
2700
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
2417
2701
|
outline-offset: 2px;
|
|
2418
2702
|
}
|
|
2703
|
+
.kpt-data-table__checkbox input[type=radio] {
|
|
2704
|
+
border-radius: 50%;
|
|
2705
|
+
}
|
|
2706
|
+
.kpt-data-table__checkbox input[type=radio]:checked::after {
|
|
2707
|
+
-webkit-mask-image: none;
|
|
2708
|
+
mask-image: none;
|
|
2709
|
+
inset: 25%;
|
|
2710
|
+
border-radius: 50%;
|
|
2711
|
+
}
|
|
2419
2712
|
.kpt-data-table__expander {
|
|
2420
2713
|
width: 2.5rem;
|
|
2421
2714
|
min-width: 2.5rem;
|
|
@@ -2472,6 +2765,13 @@
|
|
|
2472
2765
|
.kpt-data-table__row--selected {
|
|
2473
2766
|
background: var(--kpt-table-row-selected) !important;
|
|
2474
2767
|
}
|
|
2768
|
+
.kpt-data-table__row--clickable {
|
|
2769
|
+
cursor: pointer;
|
|
2770
|
+
}
|
|
2771
|
+
.kpt-data-table__row--clickable:focus-visible {
|
|
2772
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
2773
|
+
outline-offset: -2px;
|
|
2774
|
+
}
|
|
2475
2775
|
.kpt-data-table__row--expanded {
|
|
2476
2776
|
background: var(--kpt-table-row-hover);
|
|
2477
2777
|
}
|
|
@@ -2487,7 +2787,7 @@
|
|
|
2487
2787
|
position: sticky;
|
|
2488
2788
|
z-index: 1;
|
|
2489
2789
|
background: var(--kpt-table-bg);
|
|
2490
|
-
|
|
2790
|
+
box-shadow: inset calc(-1 * var(--kpt-border-width-thin, 1px)) 0 0 var(--kpt-table-border);
|
|
2491
2791
|
}
|
|
2492
2792
|
.kpt-data-table thead th.kpt-data-table__cell--frozen {
|
|
2493
2793
|
z-index: 3;
|
|
@@ -2520,6 +2820,31 @@
|
|
|
2520
2820
|
padding: 0 !important;
|
|
2521
2821
|
border: 0 !important;
|
|
2522
2822
|
}
|
|
2823
|
+
.kpt-data-table__table--virtual {
|
|
2824
|
+
table-layout: fixed;
|
|
2825
|
+
min-width: 100%;
|
|
2826
|
+
}
|
|
2827
|
+
.kpt-data-table__table--virtual th {
|
|
2828
|
+
overflow: hidden;
|
|
2829
|
+
text-overflow: ellipsis;
|
|
2830
|
+
}
|
|
2831
|
+
.kpt-data-table__col-expander {
|
|
2832
|
+
width: 2.5rem;
|
|
2833
|
+
}
|
|
2834
|
+
.kpt-data-table__col-checkbox {
|
|
2835
|
+
width: 3rem;
|
|
2836
|
+
}
|
|
2837
|
+
.kpt-data-table__hspacer {
|
|
2838
|
+
padding: 0 !important;
|
|
2839
|
+
}
|
|
2840
|
+
.kpt-data-table thead .kpt-data-table__hspacer {
|
|
2841
|
+
position: sticky;
|
|
2842
|
+
top: 0;
|
|
2843
|
+
background: var(--kpt-table-header-bg);
|
|
2844
|
+
}
|
|
2845
|
+
.kpt-data-table thead tr:nth-child(2) .kpt-data-table__hspacer {
|
|
2846
|
+
top: var(--kpt-thead-offset, 0px);
|
|
2847
|
+
}
|
|
2523
2848
|
.kpt-data-table tbody tr:last-child td {
|
|
2524
2849
|
border-bottom: 0;
|
|
2525
2850
|
}
|
|
@@ -2597,6 +2922,37 @@
|
|
|
2597
2922
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
2598
2923
|
padding: var(--kpt-space-3, 0.75rem);
|
|
2599
2924
|
background: var(--kpt-color-surface-raised);
|
|
2925
|
+
transform-origin: 0 0;
|
|
2926
|
+
}
|
|
2927
|
+
.kpt-data-view__body {
|
|
2928
|
+
height: 100%;
|
|
2929
|
+
transform-origin: 0 0;
|
|
2930
|
+
}
|
|
2931
|
+
.kpt-data-view__item--moving {
|
|
2932
|
+
position: relative;
|
|
2933
|
+
z-index: 1;
|
|
2934
|
+
overflow: clip;
|
|
2935
|
+
}
|
|
2936
|
+
::view-transition-group(.kpt-data-view-morph) {
|
|
2937
|
+
animation-duration: 0.6s;
|
|
2938
|
+
animation-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
2939
|
+
}
|
|
2940
|
+
::view-transition-image-pair(.kpt-data-view-morph) {
|
|
2941
|
+
overflow: clip;
|
|
2942
|
+
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
2943
|
+
}
|
|
2944
|
+
::view-transition-old(.kpt-data-view-morph),
|
|
2945
|
+
::view-transition-new(.kpt-data-view-morph) {
|
|
2946
|
+
width: 100%;
|
|
2947
|
+
height: 100%;
|
|
2948
|
+
object-fit: none;
|
|
2949
|
+
object-position: 0 0;
|
|
2950
|
+
}
|
|
2951
|
+
::view-transition-old(.kpt-data-view-morph) {
|
|
2952
|
+
animation-duration: 0.22s;
|
|
2953
|
+
}
|
|
2954
|
+
::view-transition-new(.kpt-data-view-morph) {
|
|
2955
|
+
animation-duration: 0.38s;
|
|
2600
2956
|
}
|
|
2601
2957
|
.kpt-data-view__empty {
|
|
2602
2958
|
padding: var(--kpt-space-6, 1.5rem);
|
|
@@ -2645,6 +3001,9 @@
|
|
|
2645
3001
|
opacity: 0.6;
|
|
2646
3002
|
background: var(--kpt-color-surface-variant);
|
|
2647
3003
|
}
|
|
3004
|
+
.kpt-date-range.kpt-date-range--readonly {
|
|
3005
|
+
cursor: default;
|
|
3006
|
+
}
|
|
2648
3007
|
.kpt-date-range__placeholder {
|
|
2649
3008
|
color: var(--kpt-form-field-placeholder);
|
|
2650
3009
|
}
|
|
@@ -2781,11 +3140,11 @@
|
|
|
2781
3140
|
max-width: calc(100vw - 2rem);
|
|
2782
3141
|
}
|
|
2783
3142
|
/*
|
|
2784
|
-
* Pasmo zakresu. Rysuje je pseudoelement pod treścią, a nie tło komórki
|
|
3143
|
+
* Pasmo zakresu. Rysuje je pseudoelement pod treścią, a nie tło komórki - dzięki temu dzień
|
|
2785
3144
|
* skrajny ma jednocześnie pełną plamę zaznaczenia i pół-pasmo w stronę wnętrza zakresu.
|
|
2786
3145
|
* Plamę też przenosimy na `::after`, bo pełne tło komórki zasłoniłoby to pół-pasmo.
|
|
2787
3146
|
* Klasy `.kpt-calendar__*` są wspólne z `kpt-datepicker`, a jego globalna reguła
|
|
2788
|
-
* `--selected` ma `!important`
|
|
3147
|
+
* `--selected` ma `!important` - stąd jawne zdjęcie tła przy wyższej specyficzności.
|
|
2789
3148
|
*/
|
|
2790
3149
|
.kpt-calendar--range .kpt-calendar__day--range::before, .kpt-calendar--range .kpt-calendar__day--range-start::before, .kpt-calendar--range .kpt-calendar__day--range-end::before {
|
|
2791
3150
|
content: "";
|
|
@@ -2846,6 +3205,14 @@
|
|
|
2846
3205
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
2847
3206
|
box-shadow: var(--kpt-elevation-1);
|
|
2848
3207
|
}
|
|
3208
|
+
.kpt-date-range {
|
|
3209
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
3210
|
+
}
|
|
3211
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3212
|
+
.kpt-date-range {
|
|
3213
|
+
transition: none;
|
|
3214
|
+
}
|
|
3215
|
+
}
|
|
2849
3216
|
}
|
|
2850
3217
|
|
|
2851
3218
|
/* src/lib/datepicker/clock.component.scss */
|
|
@@ -2862,6 +3229,8 @@
|
|
|
2862
3229
|
font-variant-numeric: tabular-nums;
|
|
2863
3230
|
}
|
|
2864
3231
|
.kpt-clock__seg {
|
|
3232
|
+
display: inline-block;
|
|
3233
|
+
user-select: none;
|
|
2865
3234
|
border: 0;
|
|
2866
3235
|
background: none;
|
|
2867
3236
|
padding: 0.1rem 0.4rem;
|
|
@@ -2875,6 +3244,10 @@
|
|
|
2875
3244
|
color: var(--kpt-color-primary);
|
|
2876
3245
|
background: var(--kpt-color-muted);
|
|
2877
3246
|
}
|
|
3247
|
+
.kpt-clock__seg:focus-visible {
|
|
3248
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
3249
|
+
outline-offset: 2px;
|
|
3250
|
+
}
|
|
2878
3251
|
.kpt-clock__colon {
|
|
2879
3252
|
font-size: var(--kpt-font-size-2xl, 1.5rem);
|
|
2880
3253
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
@@ -3015,6 +3388,9 @@
|
|
|
3015
3388
|
opacity: 0.6;
|
|
3016
3389
|
background: var(--kpt-color-surface-variant);
|
|
3017
3390
|
}
|
|
3391
|
+
.kpt-datepicker.kpt-datepicker--readonly {
|
|
3392
|
+
cursor: default;
|
|
3393
|
+
}
|
|
3018
3394
|
.kpt-datepicker__placeholder {
|
|
3019
3395
|
color: var(--kpt-form-field-placeholder);
|
|
3020
3396
|
}
|
|
@@ -3045,8 +3421,19 @@
|
|
|
3045
3421
|
color: var(--kpt-color-on-surface);
|
|
3046
3422
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
3047
3423
|
}
|
|
3048
|
-
.kpt-
|
|
3049
|
-
|
|
3424
|
+
.kpt-calendar__live {
|
|
3425
|
+
position: absolute;
|
|
3426
|
+
width: 1px;
|
|
3427
|
+
height: 1px;
|
|
3428
|
+
margin: -1px;
|
|
3429
|
+
padding: 0;
|
|
3430
|
+
overflow: hidden;
|
|
3431
|
+
clip-path: inset(50%);
|
|
3432
|
+
white-space: nowrap;
|
|
3433
|
+
border: 0;
|
|
3434
|
+
}
|
|
3435
|
+
.kpt-calendar__header {
|
|
3436
|
+
display: flex;
|
|
3050
3437
|
align-items: center;
|
|
3051
3438
|
justify-content: space-between;
|
|
3052
3439
|
margin-bottom: var(--kpt-space-2, 0.5rem);
|
|
@@ -3198,6 +3585,14 @@
|
|
|
3198
3585
|
.kpt-calendar--clock {
|
|
3199
3586
|
width: 16rem;
|
|
3200
3587
|
}
|
|
3588
|
+
.kpt-datepicker {
|
|
3589
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
3590
|
+
}
|
|
3591
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3592
|
+
.kpt-datepicker {
|
|
3593
|
+
transition: none;
|
|
3594
|
+
}
|
|
3595
|
+
}
|
|
3201
3596
|
}
|
|
3202
3597
|
|
|
3203
3598
|
/* src/lib/dialog/dialog.component.scss */
|
|
@@ -3229,7 +3624,7 @@
|
|
|
3229
3624
|
* Kolumna flex: nagłówek i stopka stoją, przewija się wyłącznie treść.
|
|
3230
3625
|
*
|
|
3231
3626
|
* Scoping `[open]` jest obowiązkowy. Regułę `dialog:not([open]) { display: none }`
|
|
3232
|
-
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije
|
|
3627
|
+
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije - także z `@layer`.
|
|
3233
3628
|
* Niescopowane `display: flex` zostawiłoby zamknięte okna widoczne.
|
|
3234
3629
|
*/
|
|
3235
3630
|
}
|
|
@@ -3280,7 +3675,7 @@
|
|
|
3280
3675
|
display: flex;
|
|
3281
3676
|
/*
|
|
3282
3677
|
* Zawijanie jest obowiązkowe, nie kosmetyczne. `<dialog>` dostaje z arkusza przeglądarki
|
|
3283
|
-
* `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje
|
|
3678
|
+
* `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje -
|
|
3284
3679
|
* zostaje **ucięta**. Cztery przyciski w oknie `sm` wystarczą, żeby pierwszy z nich
|
|
3285
3680
|
* przestał być czytelny, a użytkownik nie ma jak się do niego dostać.
|
|
3286
3681
|
*/
|
|
@@ -3330,7 +3725,7 @@
|
|
|
3330
3725
|
background: var(--kpt-color-overlay-scrim);
|
|
3331
3726
|
opacity: 0;
|
|
3332
3727
|
visibility: hidden;
|
|
3333
|
-
transition: opacity 0.2s, visibility 0.2s;
|
|
3728
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1));
|
|
3334
3729
|
}
|
|
3335
3730
|
.kpt-drawer__backdrop.is-open {
|
|
3336
3731
|
opacity: 1;
|
|
@@ -3349,8 +3744,8 @@
|
|
|
3349
3744
|
width: min(20rem, 90vw);
|
|
3350
3745
|
transform: translateX(-100%);
|
|
3351
3746
|
visibility: hidden;
|
|
3352
|
-
--_kpt-drawer-vis-delay: 0.25s;
|
|
3353
|
-
transition: transform 0.25s ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3747
|
+
--_kpt-drawer-vis-delay: calc(0.25s * var(--kpt-motion-scale, 1));
|
|
3748
|
+
transition: transform calc(0.25s * var(--kpt-motion-scale, 1)) ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3354
3749
|
}
|
|
3355
3750
|
.kpt-drawer__panel[data-position=right] {
|
|
3356
3751
|
inset: 0 0 0 auto;
|
|
@@ -3476,7 +3871,17 @@
|
|
|
3476
3871
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
3477
3872
|
position: relative;
|
|
3478
3873
|
isolation: isolate;
|
|
3479
|
-
transition: box-shadow var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
3874
|
+
transition: box-shadow var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
3875
|
+
}
|
|
3876
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3877
|
+
--_press-t: 0.08s;
|
|
3878
|
+
--_press-e: ease-out;
|
|
3879
|
+
scale: 0.92;
|
|
3880
|
+
}
|
|
3881
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3882
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3883
|
+
scale: none;
|
|
3884
|
+
}
|
|
3480
3885
|
}
|
|
3481
3886
|
.kpt-fab::after {
|
|
3482
3887
|
content: "";
|
|
@@ -3533,14 +3938,22 @@
|
|
|
3533
3938
|
display: block;
|
|
3534
3939
|
}
|
|
3535
3940
|
.kpt-fieldset {
|
|
3941
|
+
--_bg: transparent;
|
|
3942
|
+
background: var(--_bg);
|
|
3536
3943
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
3537
3944
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
3538
3945
|
padding: var(--kpt-space-4, 1rem);
|
|
3539
3946
|
margin: 0;
|
|
3540
3947
|
min-inline-size: 0;
|
|
3948
|
+
block-size: 100%;
|
|
3949
|
+
}
|
|
3950
|
+
.kpt-fieldset-host[data-variant=filled] .kpt-fieldset {
|
|
3951
|
+
--_bg: var(--kpt-color-surface);
|
|
3541
3952
|
}
|
|
3542
3953
|
.kpt-fieldset__legend {
|
|
3543
|
-
padding
|
|
3954
|
+
padding: calc(var(--kpt-space-1, 0.25rem) / 2) var(--kpt-space-2, 0.5rem);
|
|
3955
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
3956
|
+
background: var(--_bg);
|
|
3544
3957
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3545
3958
|
color: var(--kpt-color-on-surface);
|
|
3546
3959
|
}
|
|
@@ -3556,10 +3969,16 @@
|
|
|
3556
3969
|
font: inherit;
|
|
3557
3970
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3558
3971
|
}
|
|
3972
|
+
.kpt-fieldset__body {
|
|
3973
|
+
padding-top: var(--kpt-space-2, 0.5rem);
|
|
3974
|
+
}
|
|
3975
|
+
.kpt-fieldset {
|
|
3976
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
3977
|
+
}
|
|
3559
3978
|
.kpt-fieldset__collapse {
|
|
3560
3979
|
display: grid;
|
|
3561
3980
|
grid-template-rows: 0fr;
|
|
3562
|
-
transition: grid-template-rows var(--
|
|
3981
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
3563
3982
|
}
|
|
3564
3983
|
.kpt-fieldset__collapse.is-open {
|
|
3565
3984
|
grid-template-rows: 1fr;
|
|
@@ -3568,13 +3987,59 @@
|
|
|
3568
3987
|
overflow: hidden;
|
|
3569
3988
|
min-height: 0;
|
|
3570
3989
|
}
|
|
3571
|
-
.kpt-
|
|
3572
|
-
|
|
3990
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
3991
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
3992
|
+
}
|
|
3993
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron.is-open {
|
|
3994
|
+
transform: rotate(180deg);
|
|
3995
|
+
}
|
|
3996
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__collapse {
|
|
3997
|
+
transition: none;
|
|
3998
|
+
}
|
|
3999
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4000
|
+
transition: none;
|
|
4001
|
+
}
|
|
4002
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4003
|
+
opacity: 0;
|
|
4004
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
4005
|
+
}
|
|
4006
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4007
|
+
opacity: 1;
|
|
4008
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
4009
|
+
}
|
|
4010
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse {
|
|
4011
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
4012
|
+
}
|
|
4013
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse:not(.is-open) {
|
|
4014
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
4015
|
+
}
|
|
4016
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4017
|
+
transition: transform calc(var(--_d) * 0.7) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4018
|
+
}
|
|
4019
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4020
|
+
opacity: 0;
|
|
4021
|
+
translate: 0 -0.5rem;
|
|
4022
|
+
filter: blur(4px);
|
|
4023
|
+
transition: opacity calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), filter calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard);
|
|
4024
|
+
}
|
|
4025
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4026
|
+
opacity: 1;
|
|
4027
|
+
translate: none;
|
|
4028
|
+
filter: none;
|
|
4029
|
+
transition: opacity calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12), translate calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_d) * 0.08), filter calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12);
|
|
3573
4030
|
}
|
|
3574
4031
|
@media (prefers-reduced-motion: reduce) {
|
|
3575
|
-
.kpt-fieldset__collapse
|
|
4032
|
+
.kpt-fieldset__collapse,
|
|
4033
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
3576
4034
|
transition: none;
|
|
3577
4035
|
}
|
|
4036
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body,
|
|
4037
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4038
|
+
transition: none;
|
|
4039
|
+
opacity: 1;
|
|
4040
|
+
translate: none;
|
|
4041
|
+
filter: none;
|
|
4042
|
+
}
|
|
3578
4043
|
}
|
|
3579
4044
|
}
|
|
3580
4045
|
|
|
@@ -3751,8 +4216,34 @@
|
|
|
3751
4216
|
background: var(--kpt-form-field-bg);
|
|
3752
4217
|
transform: translateY(calc(-50% - 1.25rem)) scale(0.85);
|
|
3753
4218
|
}
|
|
4219
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4220
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), translate var(--kpt-motion-duration-slow, 320ms) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), filter var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4221
|
+
}
|
|
4222
|
+
@starting-style {
|
|
4223
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4224
|
+
opacity: 0;
|
|
4225
|
+
translate: 0 -0.35rem;
|
|
4226
|
+
filter: blur(3px);
|
|
4227
|
+
}
|
|
4228
|
+
}
|
|
4229
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4230
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4231
|
+
}
|
|
4232
|
+
@starting-style {
|
|
4233
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4234
|
+
opacity: 0;
|
|
4235
|
+
}
|
|
4236
|
+
}
|
|
4237
|
+
.kpt-form-field--float[data-motion=spring] .kpt-form-field__label {
|
|
4238
|
+
transition: transform calc(var(--kpt-motion-duration-slow, 320ms) * 1.1) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
4239
|
+
}
|
|
4240
|
+
.kpt-form-field--float[data-motion=none] .kpt-form-field__label {
|
|
4241
|
+
transition: none;
|
|
4242
|
+
}
|
|
3754
4243
|
@media (prefers-reduced-motion: reduce) {
|
|
3755
|
-
.kpt-form-field--float .kpt-form-field__label
|
|
4244
|
+
.kpt-form-field--float .kpt-form-field__label,
|
|
4245
|
+
.kpt-form-field--float[data-motion] .kpt-form-field__label,
|
|
4246
|
+
.kpt-form-field[data-live][data-motion] .kpt-form-field__message {
|
|
3756
4247
|
transition: none;
|
|
3757
4248
|
}
|
|
3758
4249
|
}
|
|
@@ -3824,7 +4315,7 @@
|
|
|
3824
4315
|
background: none;
|
|
3825
4316
|
cursor: pointer;
|
|
3826
4317
|
opacity: 0.6;
|
|
3827
|
-
transition: opacity 0.15s, border-color 0.15s;
|
|
4318
|
+
transition: opacity calc(0.15s * var(--kpt-motion-scale, 1)), border-color calc(0.15s * var(--kpt-motion-scale, 1));
|
|
3828
4319
|
}
|
|
3829
4320
|
.kpt-galleria__thumb img {
|
|
3830
4321
|
width: 100%;
|
|
@@ -3892,6 +4383,17 @@
|
|
|
3892
4383
|
color: var(--_fg);
|
|
3893
4384
|
cursor: pointer;
|
|
3894
4385
|
font-size: 1.25rem;
|
|
4386
|
+
transition: scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
4387
|
+
}
|
|
4388
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4389
|
+
--_press-t: 0.08s;
|
|
4390
|
+
--_press-e: ease-out;
|
|
4391
|
+
scale: 0.9;
|
|
4392
|
+
}
|
|
4393
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4394
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4395
|
+
scale: none;
|
|
4396
|
+
}
|
|
3895
4397
|
}
|
|
3896
4398
|
.kpt-icon-button::after {
|
|
3897
4399
|
content: "";
|
|
@@ -3954,6 +4456,15 @@
|
|
|
3954
4456
|
border-right-color: transparent;
|
|
3955
4457
|
border-radius: 50%;
|
|
3956
4458
|
animation: kpt-spinner-rotate 0.6s linear infinite;
|
|
4459
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4460
|
+
}
|
|
4461
|
+
@starting-style {
|
|
4462
|
+
.kpt-icon-button__spinner {
|
|
4463
|
+
scale: 0.3;
|
|
4464
|
+
}
|
|
4465
|
+
}
|
|
4466
|
+
:root[data-kpt-motion=off] .kpt-icon-button__spinner {
|
|
4467
|
+
animation-duration: 1.4s;
|
|
3957
4468
|
}
|
|
3958
4469
|
}
|
|
3959
4470
|
|
|
@@ -3991,7 +4502,7 @@
|
|
|
3991
4502
|
font-size: 1.25rem;
|
|
3992
4503
|
background: var(--kpt-color-overlay-scrim);
|
|
3993
4504
|
opacity: 0;
|
|
3994
|
-
transition: opacity 0.2s;
|
|
4505
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1));
|
|
3995
4506
|
}
|
|
3996
4507
|
.kpt-image__mask .kpt-icon-host {
|
|
3997
4508
|
width: 2.5rem;
|
|
@@ -4092,6 +4603,22 @@
|
|
|
4092
4603
|
opacity: 0.6;
|
|
4093
4604
|
background-color: var(--kpt-color-surface-variant);
|
|
4094
4605
|
}
|
|
4606
|
+
.kpt-input-host[data-speech] {
|
|
4607
|
+
position: relative;
|
|
4608
|
+
}
|
|
4609
|
+
.kpt-input-host[data-speech] .kpt-input__field {
|
|
4610
|
+
padding-inline-end: 2.5rem;
|
|
4611
|
+
transition-property: border-color, box-shadow, padding-inline-end;
|
|
4612
|
+
}
|
|
4613
|
+
.kpt-input-host[data-speech=listening] .kpt-input__field {
|
|
4614
|
+
padding-inline-end: 4.5rem;
|
|
4615
|
+
}
|
|
4616
|
+
.kpt-input__speech {
|
|
4617
|
+
position: absolute;
|
|
4618
|
+
inset-block: 0;
|
|
4619
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
4620
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
4621
|
+
}
|
|
4095
4622
|
}
|
|
4096
4623
|
|
|
4097
4624
|
/* src/lib/input-mask/input-mask.component.scss */
|
|
@@ -4126,6 +4653,14 @@
|
|
|
4126
4653
|
.kpt-input-mask--invalid {
|
|
4127
4654
|
border-color: var(--kpt-form-field-border-error);
|
|
4128
4655
|
}
|
|
4656
|
+
.kpt-input-mask__input {
|
|
4657
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4658
|
+
}
|
|
4659
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4660
|
+
.kpt-input-mask__input {
|
|
4661
|
+
transition: none;
|
|
4662
|
+
}
|
|
4663
|
+
}
|
|
4129
4664
|
}
|
|
4130
4665
|
|
|
4131
4666
|
/* src/lib/input-number/input-number.component.scss */
|
|
@@ -4191,6 +4726,14 @@
|
|
|
4191
4726
|
cursor: not-allowed;
|
|
4192
4727
|
opacity: 0.5;
|
|
4193
4728
|
}
|
|
4729
|
+
.kpt-input-number {
|
|
4730
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4731
|
+
}
|
|
4732
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4733
|
+
.kpt-input-number {
|
|
4734
|
+
transition: none;
|
|
4735
|
+
}
|
|
4736
|
+
}
|
|
4194
4737
|
}
|
|
4195
4738
|
|
|
4196
4739
|
/* src/lib/input-otp/input-otp.component.scss */
|
|
@@ -4226,6 +4769,20 @@
|
|
|
4226
4769
|
.kpt-input-otp--invalid .kpt-input-otp__cell {
|
|
4227
4770
|
border-color: var(--kpt-form-field-border-error);
|
|
4228
4771
|
}
|
|
4772
|
+
.kpt-input-otp__sep {
|
|
4773
|
+
align-self: center;
|
|
4774
|
+
color: var(--kpt-color-text-muted);
|
|
4775
|
+
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4776
|
+
user-select: none;
|
|
4777
|
+
}
|
|
4778
|
+
.kpt-input-otp__cell {
|
|
4779
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4780
|
+
}
|
|
4781
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4782
|
+
.kpt-input-otp__cell {
|
|
4783
|
+
transition: none;
|
|
4784
|
+
}
|
|
4785
|
+
}
|
|
4229
4786
|
}
|
|
4230
4787
|
|
|
4231
4788
|
/* src/lib/knob/knob.component.scss */
|
|
@@ -4255,12 +4812,45 @@
|
|
|
4255
4812
|
.kpt-knob__value {
|
|
4256
4813
|
stroke: var(--kpt-color-primary);
|
|
4257
4814
|
}
|
|
4815
|
+
.kpt-knob svg {
|
|
4816
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4817
|
+
}
|
|
4818
|
+
.kpt-knob__value {
|
|
4819
|
+
transition: filter var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4820
|
+
}
|
|
4821
|
+
.kpt-knob__text {
|
|
4822
|
+
transform-box: fill-box;
|
|
4823
|
+
transform-origin: center;
|
|
4824
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4825
|
+
}
|
|
4826
|
+
.kpt-knob:hover:not([aria-disabled=true]) .kpt-knob__value {
|
|
4827
|
+
filter: drop-shadow(0 0 3px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent));
|
|
4828
|
+
}
|
|
4829
|
+
.kpt-knob.is-grabbing {
|
|
4830
|
+
cursor: grabbing;
|
|
4831
|
+
}
|
|
4832
|
+
.kpt-knob.is-grabbing svg {
|
|
4833
|
+
scale: 1.04;
|
|
4834
|
+
}
|
|
4835
|
+
.kpt-knob.is-grabbing .kpt-knob__value {
|
|
4836
|
+
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--kpt-color-primary) 60%, transparent));
|
|
4837
|
+
}
|
|
4838
|
+
.kpt-knob.is-grabbing .kpt-knob__text {
|
|
4839
|
+
scale: 1.1;
|
|
4840
|
+
}
|
|
4258
4841
|
.kpt-knob__text {
|
|
4259
4842
|
fill: var(--kpt-color-on-surface);
|
|
4260
4843
|
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4261
4844
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
4262
4845
|
font-variant-numeric: tabular-nums;
|
|
4263
4846
|
}
|
|
4847
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4848
|
+
.kpt-knob svg,
|
|
4849
|
+
.kpt-knob__value,
|
|
4850
|
+
.kpt-knob__text {
|
|
4851
|
+
transition: none;
|
|
4852
|
+
}
|
|
4853
|
+
}
|
|
4264
4854
|
}
|
|
4265
4855
|
|
|
4266
4856
|
/* src/lib/listbox/listbox.component.scss */
|
|
@@ -4346,6 +4936,105 @@
|
|
|
4346
4936
|
color: var(--kpt-color-on-surface-muted);
|
|
4347
4937
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
4348
4938
|
}
|
|
4939
|
+
.kpt-listbox {
|
|
4940
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4941
|
+
}
|
|
4942
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4943
|
+
.kpt-listbox {
|
|
4944
|
+
transition: none;
|
|
4945
|
+
}
|
|
4946
|
+
}
|
|
4947
|
+
}
|
|
4948
|
+
|
|
4949
|
+
/* src/lib/loader/loader.component.scss */
|
|
4950
|
+
@layer kpt.components {
|
|
4951
|
+
.kpt-loader-host {
|
|
4952
|
+
display: inline-flex;
|
|
4953
|
+
vertical-align: middle;
|
|
4954
|
+
}
|
|
4955
|
+
.kpt-loader {
|
|
4956
|
+
--_size: 5rem;
|
|
4957
|
+
position: relative;
|
|
4958
|
+
display: inline-grid;
|
|
4959
|
+
place-items: center;
|
|
4960
|
+
color: var(--kpt-color-text);
|
|
4961
|
+
}
|
|
4962
|
+
.kpt-loader__stage,
|
|
4963
|
+
.kpt-loader__content {
|
|
4964
|
+
grid-area: 1/1;
|
|
4965
|
+
}
|
|
4966
|
+
.kpt-loader__stage {
|
|
4967
|
+
display: block;
|
|
4968
|
+
line-height: 0;
|
|
4969
|
+
}
|
|
4970
|
+
.kpt-loader__svg {
|
|
4971
|
+
display: block;
|
|
4972
|
+
overflow: visible;
|
|
4973
|
+
width: calc(var(--_size) * var(--_vw, 100) / 100);
|
|
4974
|
+
height: calc(var(--_size) * var(--_vh, 100) / 100);
|
|
4975
|
+
}
|
|
4976
|
+
.kpt-loader__content {
|
|
4977
|
+
display: grid;
|
|
4978
|
+
place-items: center;
|
|
4979
|
+
width: calc(var(--_size) * 0.64);
|
|
4980
|
+
aspect-ratio: 1;
|
|
4981
|
+
transform-origin: 50% 50%;
|
|
4982
|
+
font-size: calc(var(--_size) * 0.3);
|
|
4983
|
+
}
|
|
4984
|
+
.kpt-loader__content:empty,
|
|
4985
|
+
.kpt-loader:not([data-variant=ring]) .kpt-loader__content {
|
|
4986
|
+
display: none;
|
|
4987
|
+
}
|
|
4988
|
+
.kpt-loader__blob {
|
|
4989
|
+
transition: fill calc(0.35s * var(--kpt-motion-scale, 1)) ease;
|
|
4990
|
+
}
|
|
4991
|
+
.kpt-loader__shadow {
|
|
4992
|
+
fill: var(--kpt-color-overlay-scrim);
|
|
4993
|
+
}
|
|
4994
|
+
.kpt-loader__mark path {
|
|
4995
|
+
fill: none;
|
|
4996
|
+
stroke: currentColor;
|
|
4997
|
+
stroke-width: 2.6;
|
|
4998
|
+
stroke-linecap: round;
|
|
4999
|
+
stroke-linejoin: round;
|
|
5000
|
+
}
|
|
5001
|
+
.kpt-loader__halo {
|
|
5002
|
+
fill: none;
|
|
5003
|
+
stroke: currentColor;
|
|
5004
|
+
}
|
|
5005
|
+
.kpt-loader__track,
|
|
5006
|
+
.kpt-loader__arc,
|
|
5007
|
+
.kpt-loader__line {
|
|
5008
|
+
fill: none;
|
|
5009
|
+
stroke-linecap: round;
|
|
5010
|
+
stroke-linejoin: round;
|
|
5011
|
+
transition: stroke calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
5012
|
+
}
|
|
5013
|
+
.kpt-loader__track {
|
|
5014
|
+
stroke: var(--kpt-color-border);
|
|
5015
|
+
}
|
|
5016
|
+
.kpt-loader__track,
|
|
5017
|
+
.kpt-loader__arc {
|
|
5018
|
+
stroke-width: 3.6;
|
|
5019
|
+
}
|
|
5020
|
+
.kpt-loader__line {
|
|
5021
|
+
stroke-width: 4;
|
|
5022
|
+
}
|
|
5023
|
+
.kpt-loader__text {
|
|
5024
|
+
font-family: var(--kpt-font-family-sans);
|
|
5025
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
5026
|
+
}
|
|
5027
|
+
.kpt-loader__label {
|
|
5028
|
+
position: absolute;
|
|
5029
|
+
width: 1px;
|
|
5030
|
+
height: 1px;
|
|
5031
|
+
margin: -1px;
|
|
5032
|
+
padding: 0;
|
|
5033
|
+
overflow: hidden;
|
|
5034
|
+
clip-path: inset(50%);
|
|
5035
|
+
white-space: nowrap;
|
|
5036
|
+
border: 0;
|
|
5037
|
+
}
|
|
4349
5038
|
}
|
|
4350
5039
|
|
|
4351
5040
|
/* src/lib/megamenu/megamenu.component.scss */
|
|
@@ -4432,7 +5121,7 @@
|
|
|
4432
5121
|
/* src/lib/mention/mention.component.scss */
|
|
4433
5122
|
@charset "UTF-8";
|
|
4434
5123
|
@layer kpt.components {
|
|
4435
|
-
/* Wzmianka żyje w zdaniu, więc host jest `inline`
|
|
5124
|
+
/* Wzmianka żyje w zdaniu, więc host jest `inline` - `inline-block` nie łamałby się razem
|
|
4436
5125
|
z wierszem i długi akapit rozjeżdżałby się na wąskim ekranie. */
|
|
4437
5126
|
.kpt-mention-host,
|
|
4438
5127
|
.kpt-mentions-host,
|
|
@@ -4450,7 +5139,7 @@
|
|
|
4450
5139
|
background: transparent;
|
|
4451
5140
|
color: var(--kpt-color-primary);
|
|
4452
5141
|
font: inherit;
|
|
4453
|
-
/* Kropkowana linia mówi
|
|
5142
|
+
/* Kropkowana linia mówi "tu coś jest do podejrzenia", zanim ktokolwiek najedzie - ciągłe
|
|
4454
5143
|
podkreślenie znaczyłoby link, a wzmianka zwykle nigdzie nie prowadzi, tylko otwiera kartę.
|
|
4455
5144
|
W spoczynku jest jasna, żeby nie rozbijała akapitu; pod kursorem i przy otwartej karcie
|
|
4456
5145
|
ciemnieje do koloru samej wzmianki. */
|
|
@@ -4473,7 +5162,7 @@
|
|
|
4473
5162
|
}
|
|
4474
5163
|
}
|
|
4475
5164
|
.kpt-mention {
|
|
4476
|
-
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje
|
|
5165
|
+
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje - więc także
|
|
4477
5166
|
bez kropkowanej linii, która tę obietnicę składa. */
|
|
4478
5167
|
}
|
|
4479
5168
|
.kpt-mention[data-plain] {
|
|
@@ -4533,7 +5222,7 @@
|
|
|
4533
5222
|
.kpt-menu__item--danger .kpt-icon-host {
|
|
4534
5223
|
color: var(--kpt-color-danger);
|
|
4535
5224
|
}
|
|
4536
|
-
/* Wiersz nagłówkowy
|
|
5225
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
4537
5226
|
.kpt-menu__header {
|
|
4538
5227
|
display: flex;
|
|
4539
5228
|
align-items: center;
|
|
@@ -4669,7 +5358,7 @@
|
|
|
4669
5358
|
}
|
|
4670
5359
|
.kpt-meter-group__segment {
|
|
4671
5360
|
height: 100%;
|
|
4672
|
-
transition: width 0.3s ease;
|
|
5361
|
+
transition: width calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
4673
5362
|
}
|
|
4674
5363
|
.kpt-meter-group__legend {
|
|
4675
5364
|
display: flex;
|
|
@@ -4781,6 +5470,28 @@
|
|
|
4781
5470
|
.kpt-order-list__item.is-dragging {
|
|
4782
5471
|
opacity: 0.5;
|
|
4783
5472
|
}
|
|
5473
|
+
.kpt-order-list__item--moving {
|
|
5474
|
+
position: relative;
|
|
5475
|
+
z-index: 1;
|
|
5476
|
+
}
|
|
5477
|
+
.kpt-order-list__item--moving.is-selected {
|
|
5478
|
+
background: linear-gradient(color-mix(in oklch, var(--kpt-color-primary) 16%, transparent) 0 0) var(--kpt-color-surface-raised);
|
|
5479
|
+
}
|
|
5480
|
+
::view-transition-group(.kpt-order-list-morph) {
|
|
5481
|
+
animation-duration: 0.5s;
|
|
5482
|
+
animation-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5483
|
+
}
|
|
5484
|
+
::view-transition-image-pair(.kpt-order-list-morph) {
|
|
5485
|
+
overflow: clip;
|
|
5486
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5487
|
+
}
|
|
5488
|
+
::view-transition-old(.kpt-order-list-morph),
|
|
5489
|
+
::view-transition-new(.kpt-order-list-morph) {
|
|
5490
|
+
width: 100%;
|
|
5491
|
+
height: 100%;
|
|
5492
|
+
object-fit: none;
|
|
5493
|
+
object-position: 0 0;
|
|
5494
|
+
}
|
|
4784
5495
|
}
|
|
4785
5496
|
|
|
4786
5497
|
/* src/lib/paginator/paginator.component.scss */
|
|
@@ -4856,10 +5567,16 @@
|
|
|
4856
5567
|
.kpt-panel__toggle:hover {
|
|
4857
5568
|
color: var(--kpt-color-on-surface);
|
|
4858
5569
|
}
|
|
5570
|
+
.kpt-panel__body {
|
|
5571
|
+
padding: var(--kpt-space-4, 1rem);
|
|
5572
|
+
}
|
|
5573
|
+
.kpt-panel {
|
|
5574
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
5575
|
+
}
|
|
4859
5576
|
.kpt-panel__collapse {
|
|
4860
5577
|
display: grid;
|
|
4861
5578
|
grid-template-rows: 0fr;
|
|
4862
|
-
transition: grid-template-rows var(--
|
|
5579
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
4863
5580
|
}
|
|
4864
5581
|
.kpt-panel__collapse.is-open {
|
|
4865
5582
|
grid-template-rows: 1fr;
|
|
@@ -4868,13 +5585,59 @@
|
|
|
4868
5585
|
overflow: hidden;
|
|
4869
5586
|
min-height: 0;
|
|
4870
5587
|
}
|
|
4871
|
-
.kpt-
|
|
4872
|
-
|
|
5588
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5589
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
5590
|
+
}
|
|
5591
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron.is-open {
|
|
5592
|
+
transform: rotate(180deg);
|
|
5593
|
+
}
|
|
5594
|
+
.kpt-panel[data-motion=none] > .kpt-panel__collapse {
|
|
5595
|
+
transition: none;
|
|
5596
|
+
}
|
|
5597
|
+
.kpt-panel[data-motion=none] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5598
|
+
transition: none;
|
|
5599
|
+
}
|
|
5600
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5601
|
+
opacity: 0;
|
|
5602
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
5603
|
+
}
|
|
5604
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5605
|
+
opacity: 1;
|
|
5606
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
5607
|
+
}
|
|
5608
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse {
|
|
5609
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5610
|
+
}
|
|
5611
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse:not(.is-open) {
|
|
5612
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
5613
|
+
}
|
|
5614
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5615
|
+
transition: transform calc(var(--_d) * 0.7) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
5616
|
+
}
|
|
5617
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5618
|
+
opacity: 0;
|
|
5619
|
+
translate: 0 -0.5rem;
|
|
5620
|
+
filter: blur(4px);
|
|
5621
|
+
transition: opacity calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), filter calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard);
|
|
5622
|
+
}
|
|
5623
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5624
|
+
opacity: 1;
|
|
5625
|
+
translate: none;
|
|
5626
|
+
filter: none;
|
|
5627
|
+
transition: opacity calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12), translate calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_d) * 0.08), filter calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12);
|
|
4873
5628
|
}
|
|
4874
5629
|
@media (prefers-reduced-motion: reduce) {
|
|
4875
|
-
.kpt-panel__collapse
|
|
5630
|
+
.kpt-panel__collapse,
|
|
5631
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
4876
5632
|
transition: none;
|
|
4877
5633
|
}
|
|
5634
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body,
|
|
5635
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5636
|
+
transition: none;
|
|
5637
|
+
opacity: 1;
|
|
5638
|
+
translate: none;
|
|
5639
|
+
filter: none;
|
|
5640
|
+
}
|
|
4878
5641
|
}
|
|
4879
5642
|
}
|
|
4880
5643
|
|
|
@@ -4943,49 +5706,106 @@
|
|
|
4943
5706
|
flex: 1;
|
|
4944
5707
|
}
|
|
4945
5708
|
.kpt-password__bar {
|
|
5709
|
+
position: relative;
|
|
4946
5710
|
height: 4px;
|
|
4947
5711
|
flex: 1;
|
|
5712
|
+
overflow: hidden;
|
|
4948
5713
|
border-radius: 2px;
|
|
4949
5714
|
background: var(--kpt-color-border);
|
|
4950
|
-
|
|
5715
|
+
}
|
|
5716
|
+
.kpt-password__bar::after {
|
|
5717
|
+
content: "";
|
|
5718
|
+
position: absolute;
|
|
5719
|
+
inset: 0;
|
|
5720
|
+
border-radius: inherit;
|
|
5721
|
+
background: var(--_bar-color, transparent);
|
|
5722
|
+
scale: 0 1;
|
|
5723
|
+
transform-origin: left center;
|
|
5724
|
+
transition: scale calc(0.32s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-emphasized, ease-out) calc((3 - var(--_i, 0)) * 0.04s * var(--kpt-motion-scale, 1)), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
5725
|
+
}
|
|
5726
|
+
.kpt-password__bar:dir(rtl)::after {
|
|
5727
|
+
transform-origin: right center;
|
|
5728
|
+
}
|
|
5729
|
+
.kpt-password__bar.is-on::after {
|
|
5730
|
+
scale: 1 1;
|
|
5731
|
+
transition-delay: calc(var(--_i, 0) * 0.04s * var(--kpt-motion-scale, 1)), 0s;
|
|
4951
5732
|
}
|
|
4952
5733
|
.kpt-password__hint {
|
|
4953
5734
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
4954
5735
|
color: var(--kpt-color-on-surface-muted);
|
|
4955
5736
|
}
|
|
4956
|
-
.kpt-password__meter[data-score="1"]
|
|
4957
|
-
|
|
5737
|
+
.kpt-password__meter[data-score="1"] {
|
|
5738
|
+
--_bar-color: var(--kpt-color-danger);
|
|
4958
5739
|
}
|
|
4959
|
-
.kpt-password__meter[data-score="2"]
|
|
4960
|
-
|
|
5740
|
+
.kpt-password__meter[data-score="2"] {
|
|
5741
|
+
--_bar-color: var(--kpt-color-warning);
|
|
4961
5742
|
}
|
|
4962
|
-
.kpt-password__meter[data-score="3"]
|
|
4963
|
-
|
|
5743
|
+
.kpt-password__meter[data-score="3"] {
|
|
5744
|
+
--_bar-color: var(--kpt-color-info);
|
|
4964
5745
|
}
|
|
4965
|
-
.kpt-password__meter[data-score="4"]
|
|
4966
|
-
|
|
5746
|
+
.kpt-password__meter[data-score="4"] {
|
|
5747
|
+
--_bar-color: var(--kpt-color-success);
|
|
4967
5748
|
}
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
@charset "UTF-8";
|
|
4972
|
-
@layer kpt.components {
|
|
4973
|
-
/* Host i zaczepienie są `inline`, nie `inline-flex`: karta wisi najczęściej na wzmiance w środku
|
|
4974
|
-
akapitu, a element flex nie łamie się razem z wierszem tekstu. */
|
|
4975
|
-
.kpt-peek-host,
|
|
4976
|
-
.kpt-peek__origin {
|
|
4977
|
-
display: inline;
|
|
5749
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5750
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5751
|
+
transition: opacity calc(0.24s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), translate calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1), filter calc(0.24s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
4978
5752
|
}
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
|
|
4982
|
-
|
|
4983
|
-
|
|
4984
|
-
|
|
4985
|
-
|
|
5753
|
+
@starting-style {
|
|
5754
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5755
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5756
|
+
opacity: 0;
|
|
5757
|
+
}
|
|
5758
|
+
}
|
|
5759
|
+
@starting-style {
|
|
5760
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__meter {
|
|
5761
|
+
translate: 0 -0.25rem;
|
|
5762
|
+
}
|
|
5763
|
+
}
|
|
5764
|
+
@starting-style {
|
|
5765
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__hint {
|
|
5766
|
+
translate: 0 0.35rem;
|
|
5767
|
+
filter: blur(3px);
|
|
5768
|
+
}
|
|
5769
|
+
}
|
|
5770
|
+
.kpt-password-host[data-motion=none] .kpt-password__bar::after {
|
|
5771
|
+
transition: none;
|
|
5772
|
+
}
|
|
5773
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5774
|
+
.kpt-password__bar::after,
|
|
5775
|
+
.kpt-password-host[data-live] .kpt-password__meter,
|
|
5776
|
+
.kpt-password-host[data-live] .kpt-password__hint {
|
|
5777
|
+
transition: none;
|
|
5778
|
+
}
|
|
5779
|
+
}
|
|
5780
|
+
.kpt-password {
|
|
5781
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
5782
|
+
}
|
|
5783
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5784
|
+
.kpt-password {
|
|
5785
|
+
transition: none;
|
|
5786
|
+
}
|
|
5787
|
+
}
|
|
5788
|
+
}
|
|
5789
|
+
|
|
5790
|
+
/* src/lib/peek/peek.component.scss */
|
|
5791
|
+
@charset "UTF-8";
|
|
5792
|
+
@layer kpt.components {
|
|
5793
|
+
/* Host i zaczepienie są `inline`, nie `inline-flex`: karta wisi najczęściej na wzmiance w środku
|
|
5794
|
+
akapitu, a element flex nie łamie się razem z wierszem tekstu. */
|
|
5795
|
+
.kpt-peek-host,
|
|
5796
|
+
.kpt-peek__origin {
|
|
5797
|
+
display: inline;
|
|
5798
|
+
}
|
|
5799
|
+
.kpt-peek__panel {
|
|
5800
|
+
max-inline-size: 22rem;
|
|
5801
|
+
padding: var(--kpt-space-4, 1rem);
|
|
5802
|
+
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
5803
|
+
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
5804
|
+
background: var(--kpt-color-surface-raised);
|
|
5805
|
+
color: var(--kpt-color-on-surface);
|
|
4986
5806
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
4987
5807
|
box-shadow: var(--kpt-elevation-3);
|
|
4988
|
-
/* Karta otwarta hoverem nie pokazuje obwódki fokusu
|
|
5808
|
+
/* Karta otwarta hoverem nie pokazuje obwódki fokusu - dostaje ją dopiero przypięta, bo wtedy
|
|
4989
5809
|
naprawdę trzyma fokus i użytkownik musi wiedzieć, gdzie jest. */
|
|
4990
5810
|
}
|
|
4991
5811
|
.kpt-peek__panel:focus {
|
|
@@ -5003,10 +5823,39 @@
|
|
|
5003
5823
|
display: block;
|
|
5004
5824
|
}
|
|
5005
5825
|
.kpt-pick-list {
|
|
5826
|
+
position: relative;
|
|
5006
5827
|
display: flex;
|
|
5007
5828
|
align-items: stretch;
|
|
5008
5829
|
gap: var(--kpt-space-3, 0.75rem);
|
|
5009
5830
|
}
|
|
5831
|
+
.kpt-pick-list__ghost {
|
|
5832
|
+
z-index: 2;
|
|
5833
|
+
list-style: none;
|
|
5834
|
+
background: var(--kpt-color-surface-raised);
|
|
5835
|
+
box-shadow: 0 4px 14px -6px var(--kpt-color-overlay-scrim);
|
|
5836
|
+
}
|
|
5837
|
+
.kpt-pick-list__item--waiting {
|
|
5838
|
+
visibility: hidden;
|
|
5839
|
+
}
|
|
5840
|
+
.kpt-pick-list__item--moving {
|
|
5841
|
+
position: relative;
|
|
5842
|
+
z-index: 1;
|
|
5843
|
+
}
|
|
5844
|
+
::view-transition-group(.kpt-pick-list-morph) {
|
|
5845
|
+
animation-duration: 0.5s;
|
|
5846
|
+
animation-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5847
|
+
}
|
|
5848
|
+
::view-transition-image-pair(.kpt-pick-list-morph) {
|
|
5849
|
+
overflow: clip;
|
|
5850
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5851
|
+
}
|
|
5852
|
+
::view-transition-old(.kpt-pick-list-morph),
|
|
5853
|
+
::view-transition-new(.kpt-pick-list-morph) {
|
|
5854
|
+
width: 100%;
|
|
5855
|
+
height: 100%;
|
|
5856
|
+
object-fit: none;
|
|
5857
|
+
object-position: 0 0;
|
|
5858
|
+
}
|
|
5010
5859
|
.kpt-pick-list__col {
|
|
5011
5860
|
flex: 1;
|
|
5012
5861
|
min-width: 0;
|
|
@@ -5080,9 +5929,13 @@
|
|
|
5080
5929
|
color: var(--kpt-color-on-surface);
|
|
5081
5930
|
cursor: pointer;
|
|
5082
5931
|
}
|
|
5083
|
-
.kpt-pick-list__controls button:hover {
|
|
5932
|
+
.kpt-pick-list__controls button:hover:not([aria-disabled=true]) {
|
|
5084
5933
|
background: var(--kpt-color-muted);
|
|
5085
5934
|
}
|
|
5935
|
+
.kpt-pick-list__controls button[aria-disabled=true] {
|
|
5936
|
+
opacity: 0.5;
|
|
5937
|
+
cursor: not-allowed;
|
|
5938
|
+
}
|
|
5086
5939
|
.kpt-pick-list__controls button .kpt-icon-host + .kpt-icon-host {
|
|
5087
5940
|
margin-left: -0.5rem;
|
|
5088
5941
|
}
|
|
@@ -5275,6 +6128,11 @@
|
|
|
5275
6128
|
stroke-dashoffset: -99;
|
|
5276
6129
|
}
|
|
5277
6130
|
}
|
|
6131
|
+
:root[data-kpt-motion=off] .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
6132
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate,
|
|
6133
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
|
|
6134
|
+
animation-duration: 3.2s;
|
|
6135
|
+
}
|
|
5278
6136
|
@media (prefers-reduced-motion: reduce) {
|
|
5279
6137
|
.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
5280
6138
|
.kpt-progress__circular.kpt-progress--indeterminate,
|
|
@@ -5352,6 +6210,22 @@
|
|
|
5352
6210
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
5353
6211
|
outline-offset: 2px;
|
|
5354
6212
|
}
|
|
6213
|
+
.kpt-radio-group[data-motion=spring] .kpt-radio__dot::after {
|
|
6214
|
+
transition: transform calc(0.42s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
6215
|
+
}
|
|
6216
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot {
|
|
6217
|
+
transition: none;
|
|
6218
|
+
}
|
|
6219
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot::after {
|
|
6220
|
+
transition: none;
|
|
6221
|
+
}
|
|
6222
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6223
|
+
.kpt-radio__dot,
|
|
6224
|
+
.kpt-radio__dot::after,
|
|
6225
|
+
.kpt-radio-group[data-motion] .kpt-radio__dot::after {
|
|
6226
|
+
transition: none;
|
|
6227
|
+
}
|
|
6228
|
+
}
|
|
5355
6229
|
}
|
|
5356
6230
|
|
|
5357
6231
|
/* src/lib/rating/rating.component.scss */
|
|
@@ -5363,6 +6237,15 @@
|
|
|
5363
6237
|
display: inline-flex;
|
|
5364
6238
|
gap: 0.15rem;
|
|
5365
6239
|
font-size: 1.4rem;
|
|
6240
|
+
touch-action: pan-y;
|
|
6241
|
+
user-select: none;
|
|
6242
|
+
-webkit-user-select: none;
|
|
6243
|
+
}
|
|
6244
|
+
.kpt-rating.is-dragging {
|
|
6245
|
+
cursor: grabbing;
|
|
6246
|
+
}
|
|
6247
|
+
.kpt-rating.is-dragging .kpt-rating__hit {
|
|
6248
|
+
cursor: grabbing;
|
|
5366
6249
|
}
|
|
5367
6250
|
.kpt-rating__star {
|
|
5368
6251
|
position: relative;
|
|
@@ -5662,6 +6545,13 @@
|
|
|
5662
6545
|
max-height: 20rem;
|
|
5663
6546
|
overflow-y: auto;
|
|
5664
6547
|
}
|
|
6548
|
+
.kpt-rich-text__style-panel:focus {
|
|
6549
|
+
outline: none;
|
|
6550
|
+
}
|
|
6551
|
+
.kpt-rich-text__style-panel:focus-visible .kpt-rich-text__style-opt.is-active {
|
|
6552
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
6553
|
+
outline-offset: -2px;
|
|
6554
|
+
}
|
|
5665
6555
|
.kpt-rich-text__style-opt {
|
|
5666
6556
|
padding: 0.35rem 0.6rem;
|
|
5667
6557
|
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
@@ -5796,6 +6686,10 @@
|
|
|
5796
6686
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
5797
6687
|
box-shadow: var(--kpt-elevation-3);
|
|
5798
6688
|
}
|
|
6689
|
+
.kpt-rt-grid:focus-visible {
|
|
6690
|
+
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
6691
|
+
outline-offset: 2px;
|
|
6692
|
+
}
|
|
5799
6693
|
.kpt-rt-grid {
|
|
5800
6694
|
display: flex;
|
|
5801
6695
|
flex-direction: column;
|
|
@@ -5822,7 +6716,7 @@
|
|
|
5822
6716
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
5823
6717
|
color: var(--kpt-color-on-surface-muted);
|
|
5824
6718
|
}
|
|
5825
|
-
/* Lista podpowiedzi wzmianek
|
|
6719
|
+
/* Lista podpowiedzi wzmianek - ten sam wygląd co menu kontekstowe tabeli, bo obie wychodzą
|
|
5826
6720
|
spod kursora w środku treści i mają się czytać jak jedna rodzina. */
|
|
5827
6721
|
.kpt-rt-mentions {
|
|
5828
6722
|
min-inline-size: 12rem;
|
|
@@ -5958,6 +6852,14 @@
|
|
|
5958
6852
|
.kpt-rt-border__widths button:hover {
|
|
5959
6853
|
background: var(--kpt-color-muted);
|
|
5960
6854
|
}
|
|
6855
|
+
.kpt-rich-text {
|
|
6856
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
6857
|
+
}
|
|
6858
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6859
|
+
.kpt-rich-text {
|
|
6860
|
+
transition: none;
|
|
6861
|
+
}
|
|
6862
|
+
}
|
|
5961
6863
|
}
|
|
5962
6864
|
|
|
5963
6865
|
/* src/lib/scroll-top/scroll-top.component.scss */
|
|
@@ -5984,7 +6886,7 @@
|
|
|
5984
6886
|
opacity: 0;
|
|
5985
6887
|
visibility: hidden;
|
|
5986
6888
|
transform: translateY(0.5rem);
|
|
5987
|
-
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
|
|
6889
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1)), transform calc(0.2s * var(--kpt-motion-scale, 1));
|
|
5988
6890
|
}
|
|
5989
6891
|
.kpt-scroll-top.is-visible {
|
|
5990
6892
|
opacity: 1;
|
|
@@ -6033,12 +6935,16 @@
|
|
|
6033
6935
|
.kpt-select.kpt-select--invalid {
|
|
6034
6936
|
border-color: var(--kpt-form-field-border-error);
|
|
6035
6937
|
}
|
|
6938
|
+
.kpt-select.kpt-select--readonly {
|
|
6939
|
+
cursor: default;
|
|
6940
|
+
}
|
|
6036
6941
|
.kpt-select.kpt-select--disabled {
|
|
6037
6942
|
cursor: not-allowed;
|
|
6038
6943
|
opacity: 0.6;
|
|
6039
6944
|
background: var(--kpt-color-surface-variant);
|
|
6040
6945
|
}
|
|
6041
6946
|
.kpt-select__value {
|
|
6947
|
+
position: relative;
|
|
6042
6948
|
flex: 1;
|
|
6043
6949
|
min-width: 0;
|
|
6044
6950
|
display: flex;
|
|
@@ -6177,6 +7083,14 @@
|
|
|
6177
7083
|
color: var(--kpt-color-on-surface-muted);
|
|
6178
7084
|
text-align: center;
|
|
6179
7085
|
}
|
|
7086
|
+
.kpt-select {
|
|
7087
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
7088
|
+
}
|
|
7089
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7090
|
+
.kpt-select {
|
|
7091
|
+
transition: none;
|
|
7092
|
+
}
|
|
7093
|
+
}
|
|
6180
7094
|
}
|
|
6181
7095
|
|
|
6182
7096
|
/* src/lib/sidenav/sidenav.component.scss */
|
|
@@ -6192,7 +7106,7 @@
|
|
|
6192
7106
|
color: var(--kpt-sidenav-fg);
|
|
6193
7107
|
border-inline-end: var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border);
|
|
6194
7108
|
}
|
|
6195
|
-
/* Przewija się tylko nawigacja
|
|
7109
|
+
/* Przewija się tylko nawigacja - stopka stoi poza tym obszarem. */
|
|
6196
7110
|
.kpt-sidenav__scroll {
|
|
6197
7111
|
display: flex;
|
|
6198
7112
|
flex-direction: column;
|
|
@@ -6255,6 +7169,9 @@
|
|
|
6255
7169
|
background-position: -200% 0;
|
|
6256
7170
|
}
|
|
6257
7171
|
}
|
|
7172
|
+
:root[data-kpt-motion=off] .kpt-skeleton {
|
|
7173
|
+
animation-duration: 2.8s;
|
|
7174
|
+
}
|
|
6258
7175
|
@media (prefers-reduced-motion: reduce) {
|
|
6259
7176
|
.kpt-skeleton {
|
|
6260
7177
|
animation: none;
|
|
@@ -6269,58 +7186,114 @@
|
|
|
6269
7186
|
align-items: center;
|
|
6270
7187
|
gap: var(--kpt-space-3, 0.75rem);
|
|
6271
7188
|
}
|
|
6272
|
-
.kpt-
|
|
6273
|
-
--
|
|
7189
|
+
.kpt-slider__track {
|
|
7190
|
+
--_p: 0;
|
|
7191
|
+
--_thumb: 1.1rem;
|
|
7192
|
+
--_glide: calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
7193
|
+
position: relative;
|
|
6274
7194
|
flex: 1;
|
|
6275
7195
|
height: 1.25rem;
|
|
7196
|
+
}
|
|
7197
|
+
.kpt-slider__track[data-dragging] {
|
|
7198
|
+
--_glide: 0s linear;
|
|
7199
|
+
}
|
|
7200
|
+
.kpt-slider__input,
|
|
7201
|
+
.kpt-slider__thumb {
|
|
7202
|
+
position: absolute;
|
|
7203
|
+
inset: 0;
|
|
7204
|
+
width: 100%;
|
|
7205
|
+
height: 100%;
|
|
7206
|
+
margin: 0;
|
|
6276
7207
|
appearance: none;
|
|
6277
7208
|
background: none;
|
|
6278
7209
|
cursor: pointer;
|
|
6279
7210
|
}
|
|
6280
|
-
.kpt-slider__input::-webkit-slider-runnable-track
|
|
7211
|
+
.kpt-slider__input::-webkit-slider-runnable-track,
|
|
7212
|
+
.kpt-slider__thumb::-webkit-slider-runnable-track {
|
|
6281
7213
|
height: 0.4rem;
|
|
6282
|
-
|
|
6283
|
-
background: linear-gradient(to right, var(--kpt-color-primary) var(--_pct), var(--kpt-color-surface-variant) var(--_pct));
|
|
7214
|
+
background: none;
|
|
6284
7215
|
}
|
|
6285
|
-
.kpt-slider__input::-moz-range-track
|
|
7216
|
+
.kpt-slider__input::-moz-range-track,
|
|
7217
|
+
.kpt-slider__thumb::-moz-range-track {
|
|
6286
7218
|
height: 0.4rem;
|
|
6287
|
-
|
|
6288
|
-
background: var(--kpt-color-surface-variant);
|
|
7219
|
+
background: none;
|
|
6289
7220
|
}
|
|
6290
|
-
.kpt-slider__input::-moz-range-progress
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
background: var(--kpt-color-primary);
|
|
7221
|
+
.kpt-slider__input::-moz-range-progress,
|
|
7222
|
+
.kpt-slider__thumb::-moz-range-progress {
|
|
7223
|
+
background: none;
|
|
6294
7224
|
}
|
|
6295
|
-
.kpt-slider__input::-webkit-slider-thumb
|
|
7225
|
+
.kpt-slider__input::-webkit-slider-thumb,
|
|
7226
|
+
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6296
7227
|
appearance: none;
|
|
6297
|
-
width:
|
|
6298
|
-
height:
|
|
7228
|
+
width: var(--_thumb);
|
|
7229
|
+
height: var(--_thumb);
|
|
6299
7230
|
margin-top: -0.35rem;
|
|
6300
7231
|
border-radius: 50%;
|
|
6301
|
-
background:
|
|
6302
|
-
box-shadow: var(--kpt-elevation-1);
|
|
7232
|
+
background: transparent;
|
|
6303
7233
|
}
|
|
6304
|
-
.kpt-slider__input::-moz-range-thumb
|
|
6305
|
-
|
|
6306
|
-
|
|
7234
|
+
.kpt-slider__input::-moz-range-thumb,
|
|
7235
|
+
.kpt-slider__thumb::-moz-range-thumb {
|
|
7236
|
+
width: var(--_thumb);
|
|
7237
|
+
height: var(--_thumb);
|
|
6307
7238
|
border: 0;
|
|
6308
7239
|
border-radius: 50%;
|
|
7240
|
+
background: transparent;
|
|
7241
|
+
}
|
|
7242
|
+
.kpt-slider__input:focus-visible,
|
|
7243
|
+
.kpt-slider__thumb:focus-visible {
|
|
7244
|
+
outline: none;
|
|
7245
|
+
}
|
|
7246
|
+
.kpt-slider__input:disabled,
|
|
7247
|
+
.kpt-slider__thumb:disabled {
|
|
7248
|
+
cursor: not-allowed;
|
|
7249
|
+
}
|
|
7250
|
+
.kpt-slider__bar {
|
|
7251
|
+
position: absolute;
|
|
7252
|
+
inset-inline: 0;
|
|
7253
|
+
top: 50%;
|
|
7254
|
+
translate: 0 -50%;
|
|
7255
|
+
height: 0.4rem;
|
|
7256
|
+
overflow: hidden;
|
|
7257
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7258
|
+
background: var(--kpt-color-surface-variant);
|
|
7259
|
+
pointer-events: none;
|
|
7260
|
+
}
|
|
7261
|
+
.kpt-slider__bar-fill {
|
|
7262
|
+
display: block;
|
|
7263
|
+
width: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_p));
|
|
7264
|
+
height: 100%;
|
|
7265
|
+
border-radius: inherit;
|
|
7266
|
+
background: var(--kpt-color-primary);
|
|
7267
|
+
transition: width var(--_glide);
|
|
7268
|
+
}
|
|
7269
|
+
.kpt-slider__knob {
|
|
7270
|
+
position: absolute;
|
|
7271
|
+
top: 50%;
|
|
7272
|
+
inset-inline-start: calc((100% - var(--_thumb)) * var(--_p));
|
|
7273
|
+
width: var(--_thumb);
|
|
7274
|
+
height: var(--_thumb);
|
|
7275
|
+
margin-top: calc(var(--_thumb) / -2);
|
|
7276
|
+
border-radius: 50%;
|
|
6309
7277
|
background: var(--kpt-color-primary);
|
|
6310
7278
|
box-shadow: var(--kpt-elevation-1);
|
|
7279
|
+
pointer-events: none;
|
|
7280
|
+
transition: inset-inline-start var(--_glide), scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
6311
7281
|
}
|
|
6312
|
-
.kpt-slider__input:
|
|
6313
|
-
|
|
7282
|
+
.kpt-slider__input:hover:not(:disabled) ~ .kpt-slider__knob {
|
|
7283
|
+
scale: 1.15;
|
|
6314
7284
|
}
|
|
6315
|
-
.kpt-slider__input:
|
|
6316
|
-
|
|
7285
|
+
.kpt-slider__input:active:not(:disabled) {
|
|
7286
|
+
cursor: grabbing;
|
|
7287
|
+
}
|
|
7288
|
+
.kpt-slider__input:active:not(:disabled) ~ .kpt-slider__knob {
|
|
7289
|
+
scale: 1.3;
|
|
7290
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
6317
7291
|
}
|
|
6318
|
-
.kpt-slider__input:focus-visible
|
|
7292
|
+
.kpt-slider__input:focus-visible ~ .kpt-slider__knob {
|
|
6319
7293
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6320
7294
|
}
|
|
6321
|
-
.kpt-slider__input:disabled {
|
|
7295
|
+
.kpt-slider__input:disabled ~ * {
|
|
6322
7296
|
opacity: 0.5;
|
|
6323
|
-
cursor: not-allowed;
|
|
6324
7297
|
}
|
|
6325
7298
|
.kpt-slider__sr {
|
|
6326
7299
|
position: absolute;
|
|
@@ -6340,81 +7313,243 @@
|
|
|
6340
7313
|
font-variant-numeric: tabular-nums;
|
|
6341
7314
|
color: var(--kpt-color-on-surface);
|
|
6342
7315
|
}
|
|
6343
|
-
.kpt-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
6348
|
-
align-items: center;
|
|
7316
|
+
.kpt-slider__track--range {
|
|
7317
|
+
--_lo: 0;
|
|
7318
|
+
--_hi: 1;
|
|
7319
|
+
cursor: pointer;
|
|
7320
|
+
touch-action: pan-y;
|
|
6349
7321
|
}
|
|
6350
|
-
.kpt-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
border-radius: var(--kpt-radius-full, 9999px);
|
|
6355
|
-
background: var(--kpt-color-surface-variant);
|
|
7322
|
+
.kpt-slider__track--range .kpt-slider__bar-fill {
|
|
7323
|
+
width: calc((100% - var(--_thumb)) * (var(--_hi) - var(--_lo)));
|
|
7324
|
+
margin-inline-start: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_lo));
|
|
7325
|
+
transition: width var(--_glide), margin-inline-start var(--_glide);
|
|
6356
7326
|
}
|
|
6357
|
-
.kpt-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
7327
|
+
.kpt-slider__knob--low {
|
|
7328
|
+
--_p: var(--_lo);
|
|
7329
|
+
}
|
|
7330
|
+
.kpt-slider__knob--high {
|
|
7331
|
+
--_p: var(--_hi);
|
|
6362
7332
|
}
|
|
6363
7333
|
.kpt-slider__thumb {
|
|
6364
|
-
position: absolute;
|
|
6365
|
-
inset-inline: 0;
|
|
6366
|
-
width: 100%;
|
|
6367
|
-
height: 1.25rem;
|
|
6368
|
-
margin: 0;
|
|
6369
|
-
appearance: none;
|
|
6370
|
-
background: none;
|
|
6371
7334
|
pointer-events: none;
|
|
6372
7335
|
}
|
|
6373
|
-
.kpt-slider__thumb::-webkit-slider-runnable-track {
|
|
6374
|
-
height: 0.4rem;
|
|
6375
|
-
background: none;
|
|
6376
|
-
}
|
|
6377
|
-
.kpt-slider__thumb::-moz-range-track {
|
|
6378
|
-
height: 0.4rem;
|
|
6379
|
-
background: none;
|
|
6380
|
-
}
|
|
6381
7336
|
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6382
7337
|
pointer-events: auto;
|
|
6383
|
-
appearance: none;
|
|
6384
|
-
width: 1.1rem;
|
|
6385
|
-
height: 1.1rem;
|
|
6386
|
-
margin-top: -0.35rem;
|
|
6387
|
-
border-radius: 50%;
|
|
6388
|
-
background: var(--kpt-color-primary);
|
|
6389
|
-
box-shadow: var(--kpt-elevation-1);
|
|
6390
|
-
cursor: pointer;
|
|
6391
7338
|
}
|
|
6392
7339
|
.kpt-slider__thumb::-moz-range-thumb {
|
|
6393
7340
|
pointer-events: auto;
|
|
6394
|
-
width: 1.1rem;
|
|
6395
|
-
height: 1.1rem;
|
|
6396
|
-
border: 0;
|
|
6397
|
-
border-radius: 50%;
|
|
6398
|
-
background: var(--kpt-color-primary);
|
|
6399
|
-
box-shadow: var(--kpt-elevation-1);
|
|
6400
|
-
cursor: pointer;
|
|
6401
7341
|
}
|
|
6402
|
-
.kpt-slider__thumb
|
|
6403
|
-
|
|
7342
|
+
.kpt-slider__thumb--high {
|
|
7343
|
+
z-index: 1;
|
|
6404
7344
|
}
|
|
6405
|
-
.kpt-
|
|
7345
|
+
.kpt-slider__track[data-low-top] .kpt-slider__thumb--low {
|
|
7346
|
+
z-index: 2;
|
|
7347
|
+
}
|
|
7348
|
+
.kpt-slider__thumb--low:hover:not(:disabled) ~ .kpt-slider__knob--low {
|
|
7349
|
+
scale: 1.15;
|
|
7350
|
+
}
|
|
7351
|
+
.kpt-slider__thumb--low:active:not(:disabled) ~ .kpt-slider__knob--low,
|
|
7352
|
+
.kpt-slider__track[data-pressed=low] .kpt-slider__knob--low {
|
|
7353
|
+
scale: 1.3;
|
|
7354
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
7355
|
+
}
|
|
7356
|
+
.kpt-slider__thumb--low:focus-visible ~ .kpt-slider__knob--low {
|
|
6406
7357
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6407
7358
|
}
|
|
6408
|
-
.kpt-slider__thumb:
|
|
7359
|
+
.kpt-slider__thumb--high:hover:not(:disabled) ~ .kpt-slider__knob--high {
|
|
7360
|
+
scale: 1.15;
|
|
7361
|
+
}
|
|
7362
|
+
.kpt-slider__thumb--high:active:not(:disabled) ~ .kpt-slider__knob--high,
|
|
7363
|
+
.kpt-slider__track[data-pressed=high] .kpt-slider__knob--high {
|
|
7364
|
+
scale: 1.3;
|
|
7365
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
7366
|
+
}
|
|
7367
|
+
.kpt-slider__thumb--high:focus-visible ~ .kpt-slider__knob--high {
|
|
6409
7368
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6410
7369
|
}
|
|
6411
|
-
.kpt-slider__thumb
|
|
6412
|
-
|
|
7370
|
+
.kpt-slider__thumb:active:not(:disabled),
|
|
7371
|
+
.kpt-slider__track[data-pressed] {
|
|
7372
|
+
cursor: grabbing;
|
|
6413
7373
|
}
|
|
6414
|
-
.kpt-slider__thumb:disabled {
|
|
6415
|
-
opacity: 0.5;
|
|
7374
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) {
|
|
6416
7375
|
cursor: not-allowed;
|
|
6417
7376
|
}
|
|
7377
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) > :not(input) {
|
|
7378
|
+
opacity: 0.5;
|
|
7379
|
+
}
|
|
7380
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7381
|
+
.kpt-slider__bar-fill,
|
|
7382
|
+
.kpt-slider__knob {
|
|
7383
|
+
transition: none;
|
|
7384
|
+
}
|
|
7385
|
+
}
|
|
7386
|
+
}
|
|
7387
|
+
|
|
7388
|
+
/* src/lib/speech/speech-button.component.scss */
|
|
7389
|
+
@charset "UTF-8";
|
|
7390
|
+
@layer kpt.components {
|
|
7391
|
+
/* Kolor nasłuchu: "stop" i fala. Domyślnie kolor motywu; `listeningColor` wybiera inną rolę,
|
|
7392
|
+
a `--kpt-speech-color` / `--kpt-speech-on-color` dowolną barwę - obie dziedziczą, więc da się je
|
|
7393
|
+
ustawić na polu z wbudowanym mikrofonem albo globalnie w `:root`. */
|
|
7394
|
+
.kpt-speech-button-host {
|
|
7395
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-primary));
|
|
7396
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-primary));
|
|
7397
|
+
}
|
|
7398
|
+
.kpt-speech-button-host[data-color=danger] {
|
|
7399
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-danger));
|
|
7400
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-danger));
|
|
7401
|
+
}
|
|
7402
|
+
.kpt-speech-button-host[data-color=success] {
|
|
7403
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-success-bg));
|
|
7404
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-success-fg));
|
|
7405
|
+
}
|
|
7406
|
+
.kpt-speech-button-host[data-color=warning] {
|
|
7407
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-warning-bg));
|
|
7408
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-warning-fg));
|
|
7409
|
+
}
|
|
7410
|
+
.kpt-speech-button-host[data-color=info] {
|
|
7411
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-info-bg));
|
|
7412
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-info-fg));
|
|
7413
|
+
}
|
|
7414
|
+
.kpt-speech-button-host {
|
|
7415
|
+
display: inline-flex;
|
|
7416
|
+
align-items: center;
|
|
7417
|
+
gap: var(--kpt-space-2, 0.5rem);
|
|
7418
|
+
vertical-align: middle;
|
|
7419
|
+
}
|
|
7420
|
+
.kpt-speech-button-host[hidden] {
|
|
7421
|
+
display: none;
|
|
7422
|
+
}
|
|
7423
|
+
/* Fala stoi przed przyciskiem (domyślnie) albo za nim - kolejność wizualna, DOM bez zmian. */
|
|
7424
|
+
.kpt-speech-button-host .kpt-speech-button__wave {
|
|
7425
|
+
order: -1;
|
|
7426
|
+
/* Fala w kolorze "stop"; `--kpt-speech-wave-color` wciąż ma pierwszeństwo. */
|
|
7427
|
+
--_color: var(--kpt-speech-wave-color, var(--_accent));
|
|
7428
|
+
animation: kpt-speech-button-wave-in var(--kpt-motion-duration-base, 0.2s) ease-out;
|
|
7429
|
+
}
|
|
7430
|
+
.kpt-speech-button-host[data-wave-position=end] .kpt-speech-button__wave {
|
|
7431
|
+
order: 1;
|
|
7432
|
+
}
|
|
7433
|
+
/* "Stop" w trakcie nasłuchu - wypełniony kolorem nasłuchu zamiast wariantu `filled`. */
|
|
7434
|
+
.kpt-speech-button-host .kpt-icon-button[aria-pressed=true] {
|
|
7435
|
+
--_bg: var(--_accent);
|
|
7436
|
+
--_fg: var(--_on-accent);
|
|
7437
|
+
--_bg-hover: color-mix(in oklab, var(--_accent) 88%, black);
|
|
7438
|
+
}
|
|
7439
|
+
@keyframes kpt-speech-button-wave-in {
|
|
7440
|
+
from {
|
|
7441
|
+
opacity: 0;
|
|
7442
|
+
transform: scaleX(0.4);
|
|
7443
|
+
}
|
|
7444
|
+
}
|
|
7445
|
+
/* Region statusu: odczytywany, niewidoczny. Własna reguła, bo komponent nie może zakładać,
|
|
7446
|
+
że aplikacja wczytała `@konce-pt/styles` z `.kpt-visually-hidden`. */
|
|
7447
|
+
.kpt-speech-button__status {
|
|
7448
|
+
position: absolute;
|
|
7449
|
+
width: 1px;
|
|
7450
|
+
height: 1px;
|
|
7451
|
+
margin: -1px;
|
|
7452
|
+
padding: 0;
|
|
7453
|
+
overflow: hidden;
|
|
7454
|
+
clip-path: inset(50%);
|
|
7455
|
+
white-space: nowrap;
|
|
7456
|
+
border: 0;
|
|
7457
|
+
}
|
|
7458
|
+
/* Tekst tymczasowy w celach spoza pól tekstowych (`@konce-pt/speech`): nakładka przy kursorze
|
|
7459
|
+
w contenteditable i końcówka podglądu w zwykłym elemencie. Klasy stawia rdzeń, nie szablon,
|
|
7460
|
+
więc reguły są globalne - nakładka wisi w `<body>`. */
|
|
7461
|
+
.kpt-speech-ghost {
|
|
7462
|
+
color: var(--kpt-color-text-muted);
|
|
7463
|
+
font-style: italic;
|
|
7464
|
+
background: var(--kpt-color-surface, transparent);
|
|
7465
|
+
}
|
|
7466
|
+
.kpt-speech-interim {
|
|
7467
|
+
color: var(--kpt-color-text-muted);
|
|
7468
|
+
font-style: italic;
|
|
7469
|
+
}
|
|
7470
|
+
}
|
|
7471
|
+
|
|
7472
|
+
/* src/lib/speech/speech-wave.component.scss */
|
|
7473
|
+
@charset "UTF-8";
|
|
7474
|
+
@layer kpt.components {
|
|
7475
|
+
.kpt-speech-wave-host {
|
|
7476
|
+
--_height: 1.25rem;
|
|
7477
|
+
--_bar: 0.1875rem;
|
|
7478
|
+
--_color: var(--kpt-speech-wave-color, var(--kpt-color-primary));
|
|
7479
|
+
display: inline-flex;
|
|
7480
|
+
align-items: center;
|
|
7481
|
+
gap: 0.125rem;
|
|
7482
|
+
block-size: var(--_height);
|
|
7483
|
+
color: var(--_color);
|
|
7484
|
+
}
|
|
7485
|
+
.kpt-speech-wave__bar {
|
|
7486
|
+
/* Każdy słupek ma własny szczyt fali syntetycznej - środek najwyżej, boki niżej. */
|
|
7487
|
+
--_peak: 0.7;
|
|
7488
|
+
inline-size: var(--_bar);
|
|
7489
|
+
block-size: 100%;
|
|
7490
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7491
|
+
background: currentColor;
|
|
7492
|
+
transform-origin: center;
|
|
7493
|
+
transform: scaleY(0.18);
|
|
7494
|
+
}
|
|
7495
|
+
.kpt-speech-wave__bar:nth-child(5n+2), .kpt-speech-wave__bar:nth-child(5n+4) {
|
|
7496
|
+
--_peak: 0.85;
|
|
7497
|
+
}
|
|
7498
|
+
.kpt-speech-wave__bar:nth-child(5n+3) {
|
|
7499
|
+
--_peak: 1;
|
|
7500
|
+
}
|
|
7501
|
+
/* Na żywo: wysokość z miernika. Krótkie przejście wygładza 60 klatek na sekundę w ruch,
|
|
7502
|
+
a nie w skoki; nigdy poniżej kreski, żeby cisza nie znikała z ekranu. */
|
|
7503
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7504
|
+
transform: scaleY(max(0.18, var(--_level, 0)));
|
|
7505
|
+
transition: transform calc(0.08s * var(--kpt-motion-scale, 1)) linear;
|
|
7506
|
+
}
|
|
7507
|
+
/* Syntetycznie: każdy słupek oscyluje do swojego szczytu z przesunięciem fazy. Bez głosu
|
|
7508
|
+
(`data-active` nieobecne) amplituda maleje, ale fala nie staje - widać, że mikrofon słucha. */
|
|
7509
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7510
|
+
--_gain: 0.35;
|
|
7511
|
+
animation: kpt-speech-wave-bounce 0.9s ease-in-out infinite alternate;
|
|
7512
|
+
animation-delay: calc(var(--_i, 0) * -0.23s);
|
|
7513
|
+
}
|
|
7514
|
+
.kpt-speech-wave-host[data-mode=synthetic][data-active] .kpt-speech-wave__bar {
|
|
7515
|
+
--_gain: 1;
|
|
7516
|
+
animation-duration: 0.55s;
|
|
7517
|
+
}
|
|
7518
|
+
@keyframes kpt-speech-wave-bounce {
|
|
7519
|
+
from {
|
|
7520
|
+
transform: scaleY(0.18);
|
|
7521
|
+
}
|
|
7522
|
+
to {
|
|
7523
|
+
transform: scaleY(max(0.18, var(--_peak) * var(--_gain)));
|
|
7524
|
+
}
|
|
7525
|
+
}
|
|
7526
|
+
@keyframes kpt-speech-wave-pulse {
|
|
7527
|
+
0%, 100% {
|
|
7528
|
+
opacity: 0.45;
|
|
7529
|
+
}
|
|
7530
|
+
50% {
|
|
7531
|
+
opacity: 1;
|
|
7532
|
+
}
|
|
7533
|
+
}
|
|
7534
|
+
/* Fala syntetyczna to wskaźnik stanu jak kropki pisania: przy wyłączonym ruchu nie staje,
|
|
7535
|
+
tylko zamienia skakanie na spokojne pulsowanie - nieruchome słupki wyglądałyby jak ozdoba,
|
|
7536
|
+
nie jak nasłuch. Fala na żywo niesie informację (głośność), więc zostaje - traci tylko
|
|
7537
|
+
wygładzające przejście (to robi już mnożnik `--kpt-motion-scale`). */
|
|
7538
|
+
:root[data-kpt-motion=off] .kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7539
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7540
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7541
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7542
|
+
}
|
|
7543
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7544
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7545
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7546
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7547
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7548
|
+
}
|
|
7549
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7550
|
+
transition: none;
|
|
7551
|
+
}
|
|
7552
|
+
}
|
|
6418
7553
|
}
|
|
6419
7554
|
|
|
6420
7555
|
/* src/lib/speed-dial/speed-dial.component.scss */
|
|
@@ -6429,7 +7564,7 @@
|
|
|
6429
7564
|
}
|
|
6430
7565
|
.kpt-speed-dial__trigger-icon {
|
|
6431
7566
|
display: inline-flex;
|
|
6432
|
-
transition: transform 0.
|
|
7567
|
+
transition: transform calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
6433
7568
|
}
|
|
6434
7569
|
.kpt-speed-dial.is-open .kpt-speed-dial__trigger-icon {
|
|
6435
7570
|
transform: rotate(45deg);
|
|
@@ -6438,16 +7573,14 @@
|
|
|
6438
7573
|
position: absolute;
|
|
6439
7574
|
display: flex;
|
|
6440
7575
|
gap: var(--kpt-space-2, 0.5rem);
|
|
6441
|
-
opacity: 0;
|
|
6442
7576
|
pointer-events: none;
|
|
6443
7577
|
visibility: hidden;
|
|
6444
|
-
transition:
|
|
7578
|
+
transition: visibility 0s linear calc(0.4s * var(--kpt-motion-scale, 1));
|
|
6445
7579
|
}
|
|
6446
7580
|
.kpt-speed-dial.is-open .kpt-speed-dial__actions {
|
|
6447
|
-
opacity: 1;
|
|
6448
7581
|
pointer-events: auto;
|
|
6449
7582
|
visibility: visible;
|
|
6450
|
-
transition:
|
|
7583
|
+
transition: visibility 0s;
|
|
6451
7584
|
}
|
|
6452
7585
|
.kpt-speed-dial[data-direction=up] .kpt-speed-dial__actions {
|
|
6453
7586
|
flex-direction: column-reverse;
|
|
@@ -6473,7 +7606,71 @@
|
|
|
6473
7606
|
top: 50%;
|
|
6474
7607
|
transform: translateY(-50%);
|
|
6475
7608
|
}
|
|
7609
|
+
.kpt-speed-dial[data-direction=up] {
|
|
7610
|
+
--_from: 0 0.75rem;
|
|
7611
|
+
}
|
|
7612
|
+
.kpt-speed-dial[data-direction=down] {
|
|
7613
|
+
--_from: 0 -0.75rem;
|
|
7614
|
+
}
|
|
7615
|
+
.kpt-speed-dial[data-direction=left] {
|
|
7616
|
+
--_from: 0.75rem 0;
|
|
7617
|
+
}
|
|
7618
|
+
.kpt-speed-dial[data-direction=right] {
|
|
7619
|
+
--_from: -0.75rem 0;
|
|
7620
|
+
}
|
|
7621
|
+
.kpt-speed-dial__action:nth-child(1) {
|
|
7622
|
+
--_i: 0;
|
|
7623
|
+
}
|
|
7624
|
+
.kpt-speed-dial__action:nth-last-child(1) {
|
|
7625
|
+
--_r: 0;
|
|
7626
|
+
}
|
|
7627
|
+
.kpt-speed-dial__action:nth-child(2) {
|
|
7628
|
+
--_i: 1;
|
|
7629
|
+
}
|
|
7630
|
+
.kpt-speed-dial__action:nth-last-child(2) {
|
|
7631
|
+
--_r: 1;
|
|
7632
|
+
}
|
|
7633
|
+
.kpt-speed-dial__action:nth-child(3) {
|
|
7634
|
+
--_i: 2;
|
|
7635
|
+
}
|
|
7636
|
+
.kpt-speed-dial__action:nth-last-child(3) {
|
|
7637
|
+
--_r: 2;
|
|
7638
|
+
}
|
|
7639
|
+
.kpt-speed-dial__action:nth-child(4) {
|
|
7640
|
+
--_i: 3;
|
|
7641
|
+
}
|
|
7642
|
+
.kpt-speed-dial__action:nth-last-child(4) {
|
|
7643
|
+
--_r: 3;
|
|
7644
|
+
}
|
|
7645
|
+
.kpt-speed-dial__action:nth-child(5) {
|
|
7646
|
+
--_i: 4;
|
|
7647
|
+
}
|
|
7648
|
+
.kpt-speed-dial__action:nth-last-child(5) {
|
|
7649
|
+
--_r: 4;
|
|
7650
|
+
}
|
|
7651
|
+
.kpt-speed-dial__action:nth-child(6) {
|
|
7652
|
+
--_i: 5;
|
|
7653
|
+
}
|
|
7654
|
+
.kpt-speed-dial__action:nth-last-child(6) {
|
|
7655
|
+
--_r: 5;
|
|
7656
|
+
}
|
|
7657
|
+
.kpt-speed-dial__action:nth-child(7) {
|
|
7658
|
+
--_i: 6;
|
|
7659
|
+
}
|
|
7660
|
+
.kpt-speed-dial__action:nth-last-child(7) {
|
|
7661
|
+
--_r: 6;
|
|
7662
|
+
}
|
|
7663
|
+
.kpt-speed-dial__action:nth-child(8) {
|
|
7664
|
+
--_i: 7;
|
|
7665
|
+
}
|
|
7666
|
+
.kpt-speed-dial__action:nth-last-child(8) {
|
|
7667
|
+
--_r: 7;
|
|
7668
|
+
}
|
|
6476
7669
|
.kpt-speed-dial__action {
|
|
7670
|
+
opacity: 0;
|
|
7671
|
+
transform: scale(0.5);
|
|
7672
|
+
translate: var(--_from, 0 0.75rem);
|
|
7673
|
+
transition: opacity calc(0.14s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), transform calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), translate calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
6477
7674
|
display: inline-flex;
|
|
6478
7675
|
align-items: center;
|
|
6479
7676
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6497,11 +7694,37 @@
|
|
|
6497
7694
|
.kpt-speed-dial__label {
|
|
6498
7695
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6499
7696
|
}
|
|
7697
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action {
|
|
7698
|
+
opacity: 1;
|
|
7699
|
+
transform: none;
|
|
7700
|
+
translate: 0 0;
|
|
7701
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), transform calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), translate calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
7702
|
+
}
|
|
7703
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7704
|
+
--_press-t: 0.08s;
|
|
7705
|
+
--_press-e: ease-out;
|
|
7706
|
+
scale: 0.94;
|
|
7707
|
+
}
|
|
7708
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7709
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7710
|
+
scale: none;
|
|
7711
|
+
}
|
|
7712
|
+
}
|
|
7713
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:disabled {
|
|
7714
|
+
opacity: 0.5;
|
|
7715
|
+
}
|
|
6500
7716
|
.kpt-speed-dial__backdrop {
|
|
6501
7717
|
position: fixed;
|
|
6502
7718
|
inset: 0;
|
|
6503
7719
|
z-index: var(--kpt-z-overlay, 1000);
|
|
6504
7720
|
}
|
|
7721
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7722
|
+
.kpt-speed-dial__action,
|
|
7723
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action,
|
|
7724
|
+
.kpt-speed-dial__trigger-icon {
|
|
7725
|
+
transition: none;
|
|
7726
|
+
}
|
|
7727
|
+
}
|
|
6505
7728
|
}
|
|
6506
7729
|
|
|
6507
7730
|
/* src/lib/spinner/spinner.component.scss */
|
|
@@ -6528,6 +7751,9 @@
|
|
|
6528
7751
|
animation-duration: 1.4s;
|
|
6529
7752
|
}
|
|
6530
7753
|
}
|
|
7754
|
+
:root[data-kpt-motion=off] .kpt-spinner {
|
|
7755
|
+
animation-duration: 1.4s;
|
|
7756
|
+
}
|
|
6531
7757
|
.kpt-spinner__label {
|
|
6532
7758
|
position: absolute;
|
|
6533
7759
|
width: 1px;
|
|
@@ -6554,6 +7780,17 @@
|
|
|
6554
7780
|
display: inline-flex;
|
|
6555
7781
|
border-radius: var(--kpt-button-radius, 0.5rem);
|
|
6556
7782
|
overflow: hidden;
|
|
7783
|
+
transition: scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
7784
|
+
}
|
|
7785
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7786
|
+
--_press-t: 0.08s;
|
|
7787
|
+
--_press-e: ease-out;
|
|
7788
|
+
scale: 0.97;
|
|
7789
|
+
}
|
|
7790
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7791
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7792
|
+
scale: none;
|
|
7793
|
+
}
|
|
6557
7794
|
}
|
|
6558
7795
|
.kpt-split-button[data-variant=tonal] {
|
|
6559
7796
|
--_bg: var(--kpt-color-muted);
|
|
@@ -6620,6 +7857,23 @@
|
|
|
6620
7857
|
width: 2.25rem;
|
|
6621
7858
|
border-inline-start: 1px solid var(--_divider, color-mix(in oklch, var(--_fg) 25%, transparent));
|
|
6622
7859
|
}
|
|
7860
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7861
|
+
transition: rotate calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
7862
|
+
}
|
|
7863
|
+
.kpt-split-button__toggle[aria-expanded=true] .kpt-icon-host {
|
|
7864
|
+
rotate: 180deg;
|
|
7865
|
+
}
|
|
7866
|
+
.kpt-split-button__panel {
|
|
7867
|
+
transform-origin: top;
|
|
7868
|
+
transition: opacity calc(0.16s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), scale calc(0.36s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1), translate calc(0.36s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
7869
|
+
}
|
|
7870
|
+
@starting-style {
|
|
7871
|
+
.kpt-split-button__panel {
|
|
7872
|
+
opacity: 0;
|
|
7873
|
+
scale: 1 0.92;
|
|
7874
|
+
translate: 0 -0.25rem;
|
|
7875
|
+
}
|
|
7876
|
+
}
|
|
6623
7877
|
.kpt-split-button__panel {
|
|
6624
7878
|
min-width: 11rem;
|
|
6625
7879
|
padding: 0.25rem;
|
|
@@ -6657,7 +7911,7 @@
|
|
|
6657
7911
|
color: var(--kpt-color-on-surface-muted);
|
|
6658
7912
|
}
|
|
6659
7913
|
.kpt-split-button {
|
|
6660
|
-
/* Wiersz nagłówkowy
|
|
7914
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
6661
7915
|
}
|
|
6662
7916
|
.kpt-split-button__header {
|
|
6663
7917
|
display: flex;
|
|
@@ -6695,6 +7949,14 @@
|
|
|
6695
7949
|
margin: 0.25rem 0;
|
|
6696
7950
|
background: var(--kpt-color-border);
|
|
6697
7951
|
}
|
|
7952
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7953
|
+
.kpt-split-button__panel {
|
|
7954
|
+
transition: none;
|
|
7955
|
+
}
|
|
7956
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7957
|
+
transition: none;
|
|
7958
|
+
}
|
|
7959
|
+
}
|
|
6698
7960
|
}
|
|
6699
7961
|
|
|
6700
7962
|
/* src/lib/splitter/splitter.component.scss */
|
|
@@ -6724,7 +7986,7 @@
|
|
|
6724
7986
|
.kpt-splitter__gutter {
|
|
6725
7987
|
flex: none;
|
|
6726
7988
|
background: var(--kpt-color-border);
|
|
6727
|
-
transition: background 0.15s;
|
|
7989
|
+
transition: background calc(0.15s * var(--kpt-motion-scale, 1));
|
|
6728
7990
|
}
|
|
6729
7991
|
.kpt-splitter__gutter:hover, .kpt-splitter__gutter:focus-visible {
|
|
6730
7992
|
background: var(--kpt-color-primary);
|
|
@@ -6744,6 +8006,7 @@
|
|
|
6744
8006
|
@layer kpt.components {
|
|
6745
8007
|
.kpt-stepper-host {
|
|
6746
8008
|
display: block;
|
|
8009
|
+
position: relative;
|
|
6747
8010
|
}
|
|
6748
8011
|
.kpt-stepper__header {
|
|
6749
8012
|
display: flex;
|
|
@@ -6753,6 +8016,7 @@
|
|
|
6753
8016
|
padding: 0;
|
|
6754
8017
|
}
|
|
6755
8018
|
.kpt-stepper__step {
|
|
8019
|
+
--_mark-delay: calc(var(--kpt-stepper-mark-delay, 0ms) * var(--kpt-motion-scale, 1));
|
|
6756
8020
|
display: flex;
|
|
6757
8021
|
align-items: center;
|
|
6758
8022
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6762,6 +8026,8 @@
|
|
|
6762
8026
|
flex: 0 0 auto;
|
|
6763
8027
|
}
|
|
6764
8028
|
.kpt-stepper__marker {
|
|
8029
|
+
position: relative;
|
|
8030
|
+
isolation: isolate;
|
|
6765
8031
|
display: inline-flex;
|
|
6766
8032
|
align-items: center;
|
|
6767
8033
|
justify-content: center;
|
|
@@ -6775,21 +8041,82 @@
|
|
|
6775
8041
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6776
8042
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
6777
8043
|
cursor: pointer;
|
|
8044
|
+
transition: border-color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), box-shadow calc(0.4s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
8045
|
+
}
|
|
8046
|
+
.kpt-stepper__marker::after {
|
|
8047
|
+
content: "";
|
|
8048
|
+
position: absolute;
|
|
8049
|
+
inset: 0;
|
|
8050
|
+
z-index: -1;
|
|
8051
|
+
border-radius: inherit;
|
|
8052
|
+
background: var(--kpt-color-primary);
|
|
8053
|
+
clip-path: circle(0% at 50% 50%);
|
|
8054
|
+
transition: clip-path calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
8055
|
+
}
|
|
8056
|
+
.kpt-stepper__marker::before {
|
|
8057
|
+
content: "";
|
|
8058
|
+
position: absolute;
|
|
8059
|
+
inset: calc(-1 * var(--kpt-border-width-medium, 2px));
|
|
8060
|
+
border-radius: inherit;
|
|
8061
|
+
border: var(--kpt-border-width-medium, 2px) solid color-mix(in oklch, var(--kpt-color-primary) 55%, transparent);
|
|
8062
|
+
opacity: 0;
|
|
8063
|
+
pointer-events: none;
|
|
8064
|
+
}
|
|
8065
|
+
.kpt-stepper__num {
|
|
8066
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), scale calc(0.3s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) var(--_mark-delay);
|
|
8067
|
+
}
|
|
8068
|
+
.kpt-stepper__check {
|
|
8069
|
+
position: absolute;
|
|
8070
|
+
color: var(--kpt-color-on-primary);
|
|
8071
|
+
opacity: 0;
|
|
8072
|
+
scale: 0.4;
|
|
8073
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), scale calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
6778
8074
|
}
|
|
6779
8075
|
.kpt-stepper__label {
|
|
6780
8076
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6781
8077
|
color: var(--kpt-color-on-surface-muted);
|
|
6782
8078
|
white-space: nowrap;
|
|
8079
|
+
transition: color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
6783
8080
|
}
|
|
6784
8081
|
.kpt-stepper__connector {
|
|
8082
|
+
position: relative;
|
|
8083
|
+
overflow: hidden;
|
|
6785
8084
|
flex: 1;
|
|
6786
8085
|
height: 2px;
|
|
6787
8086
|
margin-inline: var(--kpt-space-2, 0.5rem);
|
|
8087
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
6788
8088
|
background: var(--kpt-color-border);
|
|
6789
8089
|
}
|
|
8090
|
+
.kpt-stepper__connector::after {
|
|
8091
|
+
content: "";
|
|
8092
|
+
position: absolute;
|
|
8093
|
+
inset: 0;
|
|
8094
|
+
border-radius: inherit;
|
|
8095
|
+
background: var(--kpt-color-primary);
|
|
8096
|
+
transform: scaleX(0);
|
|
8097
|
+
transform-origin: left center;
|
|
8098
|
+
transition: transform calc(var(--kpt-stepper-line-dur, 0ms) * var(--kpt-motion-scale, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(var(--kpt-stepper-line-delay, 0ms) * var(--kpt-motion-scale, 1));
|
|
8099
|
+
}
|
|
8100
|
+
.kpt-stepper__connector:dir(rtl)::after {
|
|
8101
|
+
transform-origin: right center;
|
|
8102
|
+
}
|
|
8103
|
+
.kpt-stepper__comet {
|
|
8104
|
+
position: absolute;
|
|
8105
|
+
top: 0;
|
|
8106
|
+
left: 0;
|
|
8107
|
+
width: 0.625rem;
|
|
8108
|
+
height: 0.625rem;
|
|
8109
|
+
margin: -0.3125rem 0 0 -0.3125rem;
|
|
8110
|
+
border-radius: 50%;
|
|
8111
|
+
background: var(--kpt-color-surface-raised);
|
|
8112
|
+
box-shadow: 0 0 0 2px var(--kpt-color-primary), 0 0 12px 4px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent);
|
|
8113
|
+
opacity: 0;
|
|
8114
|
+
pointer-events: none;
|
|
8115
|
+
}
|
|
6790
8116
|
.kpt-stepper__step.is-active .kpt-stepper__marker {
|
|
6791
8117
|
border-color: var(--kpt-color-primary);
|
|
6792
8118
|
color: var(--kpt-color-primary);
|
|
8119
|
+
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-primary) 14%, transparent);
|
|
6793
8120
|
}
|
|
6794
8121
|
.kpt-stepper__step.is-active .kpt-stepper__label {
|
|
6795
8122
|
color: var(--kpt-color-on-surface);
|
|
@@ -6797,33 +8124,56 @@
|
|
|
6797
8124
|
}
|
|
6798
8125
|
.kpt-stepper__step.is-done .kpt-stepper__marker {
|
|
6799
8126
|
border-color: var(--kpt-color-primary);
|
|
6800
|
-
background: var(--kpt-color-primary);
|
|
6801
8127
|
color: var(--kpt-color-on-primary);
|
|
6802
8128
|
}
|
|
6803
|
-
.kpt-stepper__step.is-done .kpt-
|
|
6804
|
-
|
|
8129
|
+
.kpt-stepper__step.is-done .kpt-stepper__marker::after {
|
|
8130
|
+
clip-path: circle(75% at 50% 50%);
|
|
8131
|
+
}
|
|
8132
|
+
.kpt-stepper__step.is-done .kpt-stepper__num {
|
|
8133
|
+
opacity: 0;
|
|
8134
|
+
scale: 0.4;
|
|
8135
|
+
}
|
|
8136
|
+
.kpt-stepper__step.is-done .kpt-stepper__check {
|
|
8137
|
+
opacity: 1;
|
|
8138
|
+
scale: 1;
|
|
8139
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_mark-delay) + 0.1s * var(--kpt-motion-scale, 1)), scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_mark-delay) + 0.1s * var(--kpt-motion-scale, 1));
|
|
8140
|
+
}
|
|
8141
|
+
.kpt-stepper__step.is-done .kpt-stepper__connector::after {
|
|
8142
|
+
transform: none;
|
|
6805
8143
|
}
|
|
6806
8144
|
.kpt-stepper__body {
|
|
8145
|
+
position: relative;
|
|
6807
8146
|
padding-block: var(--kpt-space-5, 1.25rem);
|
|
6808
8147
|
overflow-x: clip;
|
|
6809
8148
|
}
|
|
6810
8149
|
@keyframes kpt-stepper-enter {
|
|
6811
8150
|
from {
|
|
6812
8151
|
opacity: 0;
|
|
6813
|
-
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.
|
|
8152
|
+
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.125rem));
|
|
8153
|
+
filter: blur(4px);
|
|
6814
8154
|
}
|
|
6815
8155
|
to {
|
|
6816
8156
|
opacity: 1;
|
|
6817
8157
|
transform: none;
|
|
8158
|
+
filter: none;
|
|
6818
8159
|
}
|
|
6819
8160
|
}
|
|
6820
8161
|
.kpt-stepper__panel {
|
|
6821
|
-
animation: kpt-stepper-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-
|
|
8162
|
+
animation: kpt-stepper-enter calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1) calc(0.08s * var(--kpt-motion-scale, 1)) backwards;
|
|
6822
8163
|
}
|
|
6823
8164
|
@media (prefers-reduced-motion: reduce) {
|
|
6824
8165
|
.kpt-stepper__panel {
|
|
6825
8166
|
animation: none;
|
|
6826
8167
|
}
|
|
8168
|
+
.kpt-stepper__marker,
|
|
8169
|
+
.kpt-stepper__marker::after,
|
|
8170
|
+
.kpt-stepper__num,
|
|
8171
|
+
.kpt-stepper__check,
|
|
8172
|
+
.kpt-stepper__step.is-done .kpt-stepper__check,
|
|
8173
|
+
.kpt-stepper__label,
|
|
8174
|
+
.kpt-stepper__connector::after {
|
|
8175
|
+
transition: none;
|
|
8176
|
+
}
|
|
6827
8177
|
}
|
|
6828
8178
|
}
|
|
6829
8179
|
|
|
@@ -6889,9 +8239,18 @@
|
|
|
6889
8239
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
6890
8240
|
outline-offset: 2px;
|
|
6891
8241
|
}
|
|
8242
|
+
.kpt-switch[data-motion=spring] .kpt-switch__thumb {
|
|
8243
|
+
transition: transform calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
8244
|
+
}
|
|
8245
|
+
.kpt-switch[data-motion=none] .kpt-switch__thumb,
|
|
8246
|
+
.kpt-switch[data-motion=none] .kpt-switch__track,
|
|
8247
|
+
.kpt-switch[data-motion=none] .kpt-switch__state {
|
|
8248
|
+
transition: none;
|
|
8249
|
+
}
|
|
6892
8250
|
@media (prefers-reduced-motion: reduce) {
|
|
6893
8251
|
.kpt-switch__thumb,
|
|
6894
|
-
.kpt-switch__track
|
|
8252
|
+
.kpt-switch__track,
|
|
8253
|
+
.kpt-switch[data-motion] .kpt-switch__thumb {
|
|
6895
8254
|
transition: none;
|
|
6896
8255
|
}
|
|
6897
8256
|
}
|
|
@@ -6951,7 +8310,7 @@
|
|
|
6951
8310
|
height: 2px;
|
|
6952
8311
|
background: var(--kpt-color-primary);
|
|
6953
8312
|
pointer-events: none;
|
|
6954
|
-
transition: transform var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard), width var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard);
|
|
8313
|
+
transition: transform calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), width calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
6955
8314
|
}
|
|
6956
8315
|
.kpt-tabs__body {
|
|
6957
8316
|
padding-block: var(--kpt-space-4, 1rem);
|
|
@@ -6968,7 +8327,7 @@
|
|
|
6968
8327
|
}
|
|
6969
8328
|
}
|
|
6970
8329
|
.kpt-tabs__panel {
|
|
6971
|
-
animation: kpt-tabs-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard);
|
|
8330
|
+
animation: kpt-tabs-enter calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
6972
8331
|
}
|
|
6973
8332
|
@media (prefers-reduced-motion: reduce) {
|
|
6974
8333
|
.kpt-tabs__panel {
|
|
@@ -7027,6 +8386,30 @@
|
|
|
7027
8386
|
font-variant-numeric: tabular-nums;
|
|
7028
8387
|
color: var(--kpt-color-on-surface-muted);
|
|
7029
8388
|
}
|
|
8389
|
+
.kpt-textarea__field {
|
|
8390
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
8391
|
+
}
|
|
8392
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8393
|
+
.kpt-textarea__field {
|
|
8394
|
+
transition: none;
|
|
8395
|
+
}
|
|
8396
|
+
}
|
|
8397
|
+
.kpt-textarea__box {
|
|
8398
|
+
position: relative;
|
|
8399
|
+
display: block;
|
|
8400
|
+
}
|
|
8401
|
+
.kpt-textarea-host[data-speech] .kpt-textarea__field {
|
|
8402
|
+
padding-inline-end: 2.75rem;
|
|
8403
|
+
}
|
|
8404
|
+
.kpt-textarea-host[data-speech=listening] .kpt-textarea__field {
|
|
8405
|
+
padding-inline-end: 4.75rem;
|
|
8406
|
+
}
|
|
8407
|
+
.kpt-textarea__speech {
|
|
8408
|
+
position: absolute;
|
|
8409
|
+
inset-block-start: var(--kpt-space-1, 0.25rem);
|
|
8410
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
8411
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
8412
|
+
}
|
|
7030
8413
|
}
|
|
7031
8414
|
|
|
7032
8415
|
/* src/lib/timeline/timeline.component.scss */
|
|
@@ -7118,23 +8501,51 @@
|
|
|
7118
8501
|
/* src/lib/toast/toast-container.component.scss */
|
|
7119
8502
|
@layer kpt.components {
|
|
7120
8503
|
.kpt-toast-container {
|
|
8504
|
+
--_offset: var(--kpt-toast-offset, var(--kpt-space-4, 1rem));
|
|
8505
|
+
--_enter: 0.5rem;
|
|
7121
8506
|
position: fixed;
|
|
7122
|
-
inset-block-end: var(--kpt-space-4, 1rem);
|
|
7123
|
-
inset-inline-end: var(--kpt-space-4, 1rem);
|
|
7124
8507
|
z-index: var(--kpt-z-toast, 1300);
|
|
7125
8508
|
display: flex;
|
|
7126
8509
|
flex-direction: column;
|
|
7127
8510
|
gap: var(--kpt-space-2, 0.5rem);
|
|
7128
|
-
|
|
8511
|
+
width: min(24rem, 100vw - 2 * var(--_offset));
|
|
7129
8512
|
pointer-events: none;
|
|
7130
8513
|
}
|
|
8514
|
+
.kpt-toast-container[data-position^=bottom] {
|
|
8515
|
+
inset-block-end: calc(var(--_offset) + env(safe-area-inset-bottom, 0px));
|
|
8516
|
+
}
|
|
8517
|
+
.kpt-toast-container[data-position^=top] {
|
|
8518
|
+
--_enter: -0.5rem;
|
|
8519
|
+
inset-block-start: calc(var(--_offset) + env(safe-area-inset-top, 0px));
|
|
8520
|
+
flex-direction: column-reverse;
|
|
8521
|
+
}
|
|
8522
|
+
.kpt-toast-container[data-position$=-start] {
|
|
8523
|
+
inset-inline-start: calc(var(--_offset) + env(safe-area-inset-left, 0px));
|
|
8524
|
+
}
|
|
8525
|
+
.kpt-toast-container[data-position$=-end] {
|
|
8526
|
+
inset-inline-end: calc(var(--_offset) + env(safe-area-inset-right, 0px));
|
|
8527
|
+
}
|
|
8528
|
+
.kpt-toast-container[data-position$=-center] {
|
|
8529
|
+
inset-inline: 0;
|
|
8530
|
+
margin-inline: auto;
|
|
8531
|
+
}
|
|
8532
|
+
@media (max-width: 40rem) {
|
|
8533
|
+
.kpt-toast-container[data-position] {
|
|
8534
|
+
inset-inline: var(--_offset);
|
|
8535
|
+
width: auto;
|
|
8536
|
+
margin-inline: 0;
|
|
8537
|
+
}
|
|
8538
|
+
}
|
|
7131
8539
|
.kpt-toast {
|
|
7132
8540
|
--_accent: var(--kpt-color-info);
|
|
8541
|
+
--_on: var(--kpt-color-info-contrast);
|
|
8542
|
+
position: relative;
|
|
8543
|
+
overflow: hidden;
|
|
7133
8544
|
pointer-events: auto;
|
|
7134
8545
|
display: flex;
|
|
7135
|
-
align-items:
|
|
8546
|
+
align-items: center;
|
|
7136
8547
|
gap: var(--kpt-space-3, 0.75rem);
|
|
7137
|
-
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
8548
|
+
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
7138
8549
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
7139
8550
|
border-inline-start: 3px solid var(--_accent);
|
|
7140
8551
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
@@ -7146,16 +8557,22 @@
|
|
|
7146
8557
|
}
|
|
7147
8558
|
.kpt-toast[data-variant=success] {
|
|
7148
8559
|
--_accent: var(--kpt-color-success);
|
|
8560
|
+
--_on: var(--kpt-color-success-contrast);
|
|
7149
8561
|
}
|
|
7150
8562
|
.kpt-toast[data-variant=warning] {
|
|
7151
8563
|
--_accent: var(--kpt-color-warning);
|
|
8564
|
+
--_on: var(--kpt-color-warning-contrast);
|
|
7152
8565
|
}
|
|
7153
8566
|
.kpt-toast[data-variant=danger] {
|
|
7154
8567
|
--_accent: var(--kpt-color-danger);
|
|
8568
|
+
--_on: var(--kpt-color-danger-contrast);
|
|
7155
8569
|
}
|
|
7156
8570
|
.kpt-toast__icon {
|
|
8571
|
+
flex: none;
|
|
8572
|
+
display: inline-grid;
|
|
8573
|
+
place-items: center;
|
|
7157
8574
|
color: var(--_accent);
|
|
7158
|
-
font-
|
|
8575
|
+
font-size: 1.15em;
|
|
7159
8576
|
}
|
|
7160
8577
|
.kpt-toast__content {
|
|
7161
8578
|
flex: 1;
|
|
@@ -7167,7 +8584,7 @@
|
|
|
7167
8584
|
}
|
|
7168
8585
|
.kpt-toast__action {
|
|
7169
8586
|
flex: none;
|
|
7170
|
-
|
|
8587
|
+
min-block-size: 1.75rem;
|
|
7171
8588
|
padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
|
|
7172
8589
|
border: 0;
|
|
7173
8590
|
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
@@ -7181,16 +8598,69 @@
|
|
|
7181
8598
|
background: var(--kpt-color-muted);
|
|
7182
8599
|
}
|
|
7183
8600
|
.kpt-toast__close {
|
|
7184
|
-
|
|
8601
|
+
flex: none;
|
|
8602
|
+
display: inline-grid;
|
|
8603
|
+
place-items: center;
|
|
8604
|
+
inline-size: 1.75rem;
|
|
8605
|
+
block-size: 1.75rem;
|
|
8606
|
+
padding: 0;
|
|
7185
8607
|
border: 0;
|
|
8608
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
8609
|
+
background: none;
|
|
7186
8610
|
cursor: pointer;
|
|
7187
8611
|
color: var(--kpt-color-on-surface-muted);
|
|
7188
8612
|
font-size: 1.15rem;
|
|
7189
8613
|
line-height: 1;
|
|
7190
|
-
padding: 0;
|
|
7191
8614
|
}
|
|
7192
8615
|
.kpt-toast__close:hover {
|
|
7193
8616
|
color: var(--kpt-color-on-surface);
|
|
8617
|
+
background: var(--kpt-color-muted);
|
|
8618
|
+
}
|
|
8619
|
+
.kpt-toast__action:focus-visible, .kpt-toast__close:focus-visible {
|
|
8620
|
+
outline: 2px solid var(--kpt-color-focus-ring);
|
|
8621
|
+
outline-offset: 1px;
|
|
8622
|
+
}
|
|
8623
|
+
.kpt-toast__timer {
|
|
8624
|
+
position: absolute;
|
|
8625
|
+
inset-inline: 0;
|
|
8626
|
+
inset-block-end: 0;
|
|
8627
|
+
block-size: 3px;
|
|
8628
|
+
background: var(--_accent);
|
|
8629
|
+
transform-origin: left center;
|
|
8630
|
+
animation: kpt-toast-timer var(--_duration, 4s) linear forwards;
|
|
8631
|
+
}
|
|
8632
|
+
.kpt-toast__timer:dir(rtl) {
|
|
8633
|
+
transform-origin: right center;
|
|
8634
|
+
}
|
|
8635
|
+
.kpt-toast[data-appearance=filled] {
|
|
8636
|
+
border-color: transparent;
|
|
8637
|
+
border-inline-start-width: var(--kpt-border-width-thin, 1px);
|
|
8638
|
+
background: var(--_accent);
|
|
8639
|
+
color: var(--_on);
|
|
8640
|
+
}
|
|
8641
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__icon,
|
|
8642
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action,
|
|
8643
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close {
|
|
8644
|
+
color: inherit;
|
|
8645
|
+
}
|
|
8646
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action {
|
|
8647
|
+
text-decoration: underline;
|
|
8648
|
+
text-underline-offset: 0.2em;
|
|
8649
|
+
}
|
|
8650
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:hover,
|
|
8651
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:hover {
|
|
8652
|
+
background: color-mix(in oklch, currentColor 14%, transparent);
|
|
8653
|
+
}
|
|
8654
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:focus-visible,
|
|
8655
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:focus-visible {
|
|
8656
|
+
outline-color: currentColor;
|
|
8657
|
+
}
|
|
8658
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__timer {
|
|
8659
|
+
background: currentColor;
|
|
8660
|
+
opacity: 0.45;
|
|
8661
|
+
}
|
|
8662
|
+
.kpt-toast-container[data-paused] .kpt-toast__timer {
|
|
8663
|
+
animation-play-state: paused;
|
|
7194
8664
|
}
|
|
7195
8665
|
.kpt-toast-container__live {
|
|
7196
8666
|
position: fixed;
|
|
@@ -7208,13 +8678,21 @@
|
|
|
7208
8678
|
@keyframes kpt-toast-in {
|
|
7209
8679
|
from {
|
|
7210
8680
|
opacity: 0;
|
|
7211
|
-
transform: translateY(0.5rem);
|
|
8681
|
+
transform: translateY(var(--_enter, 0.5rem));
|
|
7212
8682
|
}
|
|
7213
8683
|
to {
|
|
7214
8684
|
opacity: 1;
|
|
7215
8685
|
transform: translateY(0);
|
|
7216
8686
|
}
|
|
7217
8687
|
}
|
|
8688
|
+
@keyframes kpt-toast-timer {
|
|
8689
|
+
from {
|
|
8690
|
+
transform: scaleX(1);
|
|
8691
|
+
}
|
|
8692
|
+
to {
|
|
8693
|
+
transform: scaleX(0);
|
|
8694
|
+
}
|
|
8695
|
+
}
|
|
7218
8696
|
@media (prefers-reduced-motion: reduce) {
|
|
7219
8697
|
.kpt-toast {
|
|
7220
8698
|
animation: none;
|
|
@@ -7323,6 +8801,68 @@
|
|
|
7323
8801
|
.kpt-tree__chevron.is-open {
|
|
7324
8802
|
transform: rotate(90deg);
|
|
7325
8803
|
}
|
|
8804
|
+
.kpt-tree {
|
|
8805
|
+
--_d: calc(var(--kpt-motion-duration-slow, 320ms) * var(--kpt-motion-scale, 1));
|
|
8806
|
+
}
|
|
8807
|
+
.kpt-tree__collapse {
|
|
8808
|
+
display: grid;
|
|
8809
|
+
grid-template-rows: 0fr;
|
|
8810
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
8811
|
+
}
|
|
8812
|
+
.kpt-tree__collapse.is-open {
|
|
8813
|
+
grid-template-rows: 1fr;
|
|
8814
|
+
}
|
|
8815
|
+
.kpt-tree__collapse > .kpt-tree__group {
|
|
8816
|
+
overflow: hidden;
|
|
8817
|
+
min-height: 0;
|
|
8818
|
+
}
|
|
8819
|
+
@starting-style {
|
|
8820
|
+
.kpt-tree.is-live .kpt-tree__collapse.is-open {
|
|
8821
|
+
grid-template-rows: 0fr;
|
|
8822
|
+
}
|
|
8823
|
+
}
|
|
8824
|
+
.kpt-tree[data-motion=none] .kpt-tree__collapse,
|
|
8825
|
+
.kpt-tree[data-motion=none] .kpt-tree__chevron {
|
|
8826
|
+
transition: none;
|
|
8827
|
+
}
|
|
8828
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8829
|
+
transition: opacity calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard);
|
|
8830
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 24ms * var(--kpt-motion-scale, 1));
|
|
8831
|
+
}
|
|
8832
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse {
|
|
8833
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
8834
|
+
}
|
|
8835
|
+
.kpt-tree[data-motion=spring] .kpt-tree__chevron {
|
|
8836
|
+
transition: transform calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
8837
|
+
}
|
|
8838
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8839
|
+
transition: opacity calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 1.2) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), filter calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard);
|
|
8840
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 28ms * var(--kpt-motion-scale, 1));
|
|
8841
|
+
}
|
|
8842
|
+
@starting-style {
|
|
8843
|
+
.kpt-tree.is-live[data-motion=fade] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8844
|
+
opacity: 0;
|
|
8845
|
+
}
|
|
8846
|
+
}
|
|
8847
|
+
@starting-style {
|
|
8848
|
+
.kpt-tree.is-live[data-motion=spring] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8849
|
+
opacity: 0;
|
|
8850
|
+
translate: -0.5rem 0;
|
|
8851
|
+
filter: blur(3px);
|
|
8852
|
+
}
|
|
8853
|
+
}
|
|
8854
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node,
|
|
8855
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node {
|
|
8856
|
+
opacity: 0;
|
|
8857
|
+
transition-delay: 0s;
|
|
8858
|
+
}
|
|
8859
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8860
|
+
.kpt-tree__collapse,
|
|
8861
|
+
.kpt-tree__chevron,
|
|
8862
|
+
.kpt-tree[data-motion] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8863
|
+
transition: none;
|
|
8864
|
+
}
|
|
8865
|
+
}
|
|
7326
8866
|
.kpt-tree__icon {
|
|
7327
8867
|
color: var(--kpt-color-on-surface-muted);
|
|
7328
8868
|
}
|
|
@@ -7333,6 +8873,82 @@
|
|
|
7333
8873
|
}
|
|
7334
8874
|
}
|
|
7335
8875
|
|
|
8876
|
+
/* src/lib/update/update.component.scss */
|
|
8877
|
+
@layer kpt.components {
|
|
8878
|
+
.kpt-update-host {
|
|
8879
|
+
display: block;
|
|
8880
|
+
}
|
|
8881
|
+
.kpt-update {
|
|
8882
|
+
--_tile: var(--kpt-color-info);
|
|
8883
|
+
--_tile-on: var(--kpt-color-info-contrast);
|
|
8884
|
+
display: flex;
|
|
8885
|
+
align-items: center;
|
|
8886
|
+
gap: var(--kpt-space-4);
|
|
8887
|
+
min-width: 0;
|
|
8888
|
+
color: var(--kpt-color-text);
|
|
8889
|
+
}
|
|
8890
|
+
.kpt-update__ring {
|
|
8891
|
+
flex: none;
|
|
8892
|
+
}
|
|
8893
|
+
.kpt-update__icon {
|
|
8894
|
+
display: grid;
|
|
8895
|
+
place-items: center;
|
|
8896
|
+
width: 100%;
|
|
8897
|
+
height: 100%;
|
|
8898
|
+
overflow: hidden;
|
|
8899
|
+
border-radius: 28%;
|
|
8900
|
+
background: linear-gradient(140deg, var(--_tile), color-mix(in oklch, var(--_tile) 55%, var(--kpt-color-success)));
|
|
8901
|
+
color: var(--_tile-on);
|
|
8902
|
+
box-shadow: var(--kpt-shadow-sm);
|
|
8903
|
+
font-size: calc(var(--_size, 5rem) * 0.28);
|
|
8904
|
+
}
|
|
8905
|
+
.kpt-update__icon > img,
|
|
8906
|
+
.kpt-update__icon > svg {
|
|
8907
|
+
width: 100%;
|
|
8908
|
+
height: 100%;
|
|
8909
|
+
object-fit: cover;
|
|
8910
|
+
}
|
|
8911
|
+
.kpt-update__meta {
|
|
8912
|
+
display: grid;
|
|
8913
|
+
gap: var(--kpt-space-1);
|
|
8914
|
+
min-width: 0;
|
|
8915
|
+
}
|
|
8916
|
+
.kpt-update__name {
|
|
8917
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
8918
|
+
overflow: hidden;
|
|
8919
|
+
text-overflow: ellipsis;
|
|
8920
|
+
white-space: nowrap;
|
|
8921
|
+
}
|
|
8922
|
+
.kpt-update__line {
|
|
8923
|
+
font-size: var(--kpt-font-size-sm);
|
|
8924
|
+
color: var(--kpt-color-text-muted);
|
|
8925
|
+
font-variant-numeric: tabular-nums;
|
|
8926
|
+
}
|
|
8927
|
+
.kpt-update__swap {
|
|
8928
|
+
display: inline-grid;
|
|
8929
|
+
justify-items: start;
|
|
8930
|
+
}
|
|
8931
|
+
.kpt-update__swap > * {
|
|
8932
|
+
grid-area: 1/1;
|
|
8933
|
+
white-space: nowrap;
|
|
8934
|
+
}
|
|
8935
|
+
.kpt-update__action {
|
|
8936
|
+
justify-self: start;
|
|
8937
|
+
margin-block-start: var(--kpt-space-1);
|
|
8938
|
+
}
|
|
8939
|
+
.kpt-update__live {
|
|
8940
|
+
position: absolute;
|
|
8941
|
+
width: 1px;
|
|
8942
|
+
height: 1px;
|
|
8943
|
+
margin: -1px;
|
|
8944
|
+
padding: 0;
|
|
8945
|
+
overflow: hidden;
|
|
8946
|
+
clip-path: inset(50%);
|
|
8947
|
+
white-space: nowrap;
|
|
8948
|
+
border: 0;
|
|
8949
|
+
}
|
|
8950
|
+
}
|
|
8951
|
+
|
|
7336
8952
|
/* charts/src/lib/chart.component.scss */
|
|
7337
8953
|
@layer kpt.components {
|
|
7338
8954
|
.kpt-chart-host {
|
|
@@ -7648,6 +9264,17 @@
|
|
|
7648
9264
|
stroke-dashoffset: 0;
|
|
7649
9265
|
}
|
|
7650
9266
|
}
|
|
9267
|
+
.kpt-chart__sr {
|
|
9268
|
+
position: absolute;
|
|
9269
|
+
width: 1px;
|
|
9270
|
+
height: 1px;
|
|
9271
|
+
margin: -1px;
|
|
9272
|
+
padding: 0;
|
|
9273
|
+
overflow: hidden;
|
|
9274
|
+
clip-path: inset(50%);
|
|
9275
|
+
white-space: nowrap;
|
|
9276
|
+
border: 0;
|
|
9277
|
+
}
|
|
7651
9278
|
}
|
|
7652
9279
|
|
|
7653
9280
|
/* chat/src/lib/chat-composer.component.scss */
|
|
@@ -7679,7 +9306,7 @@
|
|
|
7679
9306
|
font: inherit;
|
|
7680
9307
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
7681
9308
|
line-height: 1.5;
|
|
7682
|
-
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem
|
|
9309
|
+
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem - wysokość liczy komponent. */
|
|
7683
9310
|
resize: none;
|
|
7684
9311
|
overflow-y: auto;
|
|
7685
9312
|
}
|
|
@@ -7694,6 +9321,12 @@
|
|
|
7694
9321
|
opacity: 0.6;
|
|
7695
9322
|
cursor: not-allowed;
|
|
7696
9323
|
}
|
|
9324
|
+
/* Mikrofon i jego fala nie oddają miejsca polu - kurczy się pole, nie przycisk. Wysokość
|
|
9325
|
+
przycisku wysyłki (2.5rem): mniejszy mikrofon i fala stoją na jego środku, nie przy dnie. */
|
|
9326
|
+
.kpt-chat-composer__speech {
|
|
9327
|
+
flex: none;
|
|
9328
|
+
min-block-size: 2.5rem;
|
|
9329
|
+
}
|
|
7697
9330
|
/* Pole pliku jest sterowane przyciskiem; natywny widget nie da się ostylować. */
|
|
7698
9331
|
.kpt-chat-composer__picker {
|
|
7699
9332
|
display: none;
|
|
@@ -7770,7 +9403,7 @@
|
|
|
7770
9403
|
pojawia się natychmiast. Ta sama sztuczka co w kpt-drawer. */
|
|
7771
9404
|
--_vis-delay: var(--kpt-motion-duration-base, 200ms);
|
|
7772
9405
|
position: fixed;
|
|
7773
|
-
/* 4,5rem to wysokość FAB-a plus prześwit
|
|
9406
|
+
/* 4,5rem to wysokość FAB-a plus prześwit - panel stoi nad przyciskiem. */
|
|
7774
9407
|
inset-block-end: calc(var(--_offset) + 4.5rem);
|
|
7775
9408
|
z-index: var(--kpt-z-overlay, 1000);
|
|
7776
9409
|
display: flex;
|
|
@@ -7786,7 +9419,7 @@
|
|
|
7786
9419
|
box-shadow: var(--kpt-elevation-3);
|
|
7787
9420
|
/* Stan zamknięty siedzi w regule bazowej, nie pod `[data-position]`: Angular ustawia
|
|
7788
9421
|
atrybuty o klatkę za późno, więc panel mrugnąłby otwarty przy pierwszym renderze.
|
|
7789
|
-
`visibility` zamiast `display: none`
|
|
9422
|
+
`visibility` zamiast `display: none` - przejścia nie da się zanimować z `none`. */
|
|
7790
9423
|
visibility: hidden;
|
|
7791
9424
|
opacity: 0;
|
|
7792
9425
|
transform: translateY(var(--kpt-space-4, 1rem)) scale(0.98);
|
|
@@ -7799,6 +9432,42 @@
|
|
|
7799
9432
|
transform: none;
|
|
7800
9433
|
transition-delay: 0s;
|
|
7801
9434
|
}
|
|
9435
|
+
/* Ruch otwarcia (`enterMotion`). `none` - bez przejścia. `spring` - okno wyrasta z przycisku:
|
|
9436
|
+
zamknięty panel jest zsunięty na wysokość FAB-a i przycięty do koła jego rozmiaru w rogu,
|
|
9437
|
+
więc kapsuła leży dokładnie na przycisku; otwarcie rozwija ją sprężyną w pełne okno.
|
|
9438
|
+
Zamykanie jest krótkie i bez odbicia - wraca do przycisku. */
|
|
9439
|
+
.kpt-chat-dock__panel[data-motion=none] {
|
|
9440
|
+
transition: none;
|
|
9441
|
+
}
|
|
9442
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9443
|
+
/* FAB 3,5rem; panel stoi 4,5rem nad dolną krawędzią przycisku (`--_lift`). */
|
|
9444
|
+
--_fab: 3.5rem;
|
|
9445
|
+
--_lift: 4.5rem;
|
|
9446
|
+
--_inset: 0rem;
|
|
9447
|
+
--_close: calc(0.28s * var(--kpt-motion-scale, 1));
|
|
9448
|
+
--_vis-delay: var(--_close);
|
|
9449
|
+
--_clip-x: calc(100% - var(--_fab) - var(--_inset));
|
|
9450
|
+
opacity: 0;
|
|
9451
|
+
transform: translateY(var(--_lift));
|
|
9452
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9453
|
+
transition: opacity calc(var(--_close) * 0.6) ease-in calc(var(--_close) * 0.4), transform var(--_close) var(--kpt-motion-easing-standard), clip-path var(--_close) var(--kpt-motion-easing-standard), visibility 0s linear var(--_vis-delay);
|
|
9454
|
+
}
|
|
9455
|
+
.kpt-chat-dock__panel[data-motion=spring][data-position=bottom-start] {
|
|
9456
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9457
|
+
}
|
|
9458
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9459
|
+
opacity: 1;
|
|
9460
|
+
transform: none;
|
|
9461
|
+
clip-path: inset(0 round var(--kpt-radius-lg, 0.75rem));
|
|
9462
|
+
transition: opacity calc(0.16s * var(--kpt-motion-scale, 1)) ease-out, transform calc(0.6s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), clip-path calc(0.6s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), visibility 0s;
|
|
9463
|
+
}
|
|
9464
|
+
/* RTL: `bottom-end` stoi po lewej - koło idzie do lewego rogu. */
|
|
9465
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open) {
|
|
9466
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9467
|
+
}
|
|
9468
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open)[data-position=bottom-start] {
|
|
9469
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9470
|
+
}
|
|
7802
9471
|
.kpt-chat-dock__header {
|
|
7803
9472
|
display: flex;
|
|
7804
9473
|
flex: 0 0 auto;
|
|
@@ -7817,7 +9486,7 @@
|
|
|
7817
9486
|
flex-direction: column;
|
|
7818
9487
|
min-height: 0;
|
|
7819
9488
|
}
|
|
7820
|
-
/* Pozycja pozioma
|
|
9489
|
+
/* Pozycja pozioma - logiczne własności, więc RTL odwraca róg bez osobnej reguły.
|
|
7821
9490
|
Odsunięcie od rogu jest wspólne dla obu osi i steruje nim input `offset`: aplikacja
|
|
7822
9491
|
z drugim widgetem w rogu (np. kpt-scroll-top) odsuwa dock, zamiast walczyć ze stylami. */
|
|
7823
9492
|
.kpt-chat-dock__trigger,
|
|
@@ -7830,19 +9499,19 @@
|
|
|
7830
9499
|
}
|
|
7831
9500
|
/*
|
|
7832
9501
|
* Współdzielony róg. `kpt-scroll-top` przykleja się dokładnie w to samo miejsce, z tym samym
|
|
7833
|
-
* `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości
|
|
9502
|
+
* `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości - wystaje sama
|
|
7834
9503
|
* plakietka nieprzeczytanych, a przycisku nie da się kliknąć.
|
|
7835
9504
|
*
|
|
7836
9505
|
* Ustępuje przycisk powrotu na górę, bo czat jest akcją główną i większym celem. Odsuwamy go
|
|
7837
9506
|
* W BOK, nie do góry: nad FAB-em stoi panel rozmowy, więc przesunięcie w pionie zamieniłoby
|
|
7838
|
-
* jedną kolizję na drugą, gorszą
|
|
9507
|
+
* jedną kolizję na drugą, gorszą - przycisk lądowałby na treści wiadomości.
|
|
7839
9508
|
*
|
|
7840
9509
|
* `:has()` na korzeniu dokumentu jest tu jedyną drogą: oba komponenty są `position: fixed`
|
|
7841
9510
|
* i nic ich nie łączy w drzewie DOM. Reguła stoi w arkuszu czatu, nie scroll-topu, bo zależność
|
|
7842
|
-
* ma iść w stronę grafu paczek
|
|
9511
|
+
* ma iść w stronę grafu paczek - subpath zna rdzeń, rdzeń nie zna subpathu.
|
|
7843
9512
|
*
|
|
7844
9513
|
* Dotyczy wyłącznie `bottom-end`: dock po lewej i tak nie koliduje. Gdy aplikacja przestawi
|
|
7845
|
-
* `offset`, sama odpowiada też za ustawienie scroll-topu
|
|
9514
|
+
* `offset`, sama odpowiada też za ustawienie scroll-topu - ta reguła liczy od wartości domyślnej.
|
|
7846
9515
|
*/
|
|
7847
9516
|
:root:has(.kpt-chat-dock__trigger[data-position=bottom-end]) .kpt-scroll-top {
|
|
7848
9517
|
/* 3,5rem to szerokość FAB-a, 0,75rem prześwit między przyciskami. */
|
|
@@ -7860,9 +9529,20 @@
|
|
|
7860
9529
|
border-radius: 0;
|
|
7861
9530
|
transform: translateY(var(--kpt-space-6, 1.5rem));
|
|
7862
9531
|
}
|
|
9532
|
+
/* Pełny ekran: panel już leży nad FAB-em, więc koło startuje w miejscu przycisku, bez zsuwania. */
|
|
9533
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9534
|
+
--_lift: 0rem;
|
|
9535
|
+
--_inset: var(--_offset);
|
|
9536
|
+
}
|
|
9537
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9538
|
+
clip-path: inset(0);
|
|
9539
|
+
}
|
|
7863
9540
|
}
|
|
7864
9541
|
@media (prefers-reduced-motion: reduce) {
|
|
7865
|
-
.kpt-chat-dock__panel
|
|
9542
|
+
.kpt-chat-dock__panel,
|
|
9543
|
+
.kpt-chat-dock__panel[data-motion=spring],
|
|
9544
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9545
|
+
clip-path: none;
|
|
7866
9546
|
transition: opacity var(--kpt-motion-duration-fast, 120ms) linear, visibility 0s linear var(--_vis-delay);
|
|
7867
9547
|
transform: none;
|
|
7868
9548
|
}
|
|
@@ -7875,7 +9555,7 @@
|
|
|
7875
9555
|
.kpt-chat-message-host {
|
|
7876
9556
|
display: block;
|
|
7877
9557
|
}
|
|
7878
|
-
/* Komunikat systemowy nie jest wypowiedzią
|
|
9558
|
+
/* Komunikat systemowy nie jest wypowiedzią - nie dostaje bąbla ani kolumny awatara. */
|
|
7879
9559
|
.kpt-chat-message__system {
|
|
7880
9560
|
margin: var(--kpt-space-2, 0.5rem) 0;
|
|
7881
9561
|
text-align: center;
|
|
@@ -7887,7 +9567,7 @@
|
|
|
7887
9567
|
align-items: flex-end;
|
|
7888
9568
|
gap: var(--kpt-space-2, 0.5rem);
|
|
7889
9569
|
/* Własna wiadomość: odwrócony kierunek dosuwa stos do prawej krawędzi, a kolumnę
|
|
7890
|
-
akcji (strzałka ponowienia) wypycha na zewnątrz bąbla
|
|
9570
|
+
akcji (strzałka ponowienia) wypycha na zewnątrz bąbla - po stronie treści. */
|
|
7891
9571
|
}
|
|
7892
9572
|
.kpt-chat-message__row[data-align=end] {
|
|
7893
9573
|
flex-direction: row-reverse;
|
|
@@ -7911,7 +9591,7 @@
|
|
|
7911
9591
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
7912
9592
|
}
|
|
7913
9593
|
.kpt-chat-message__bubble {
|
|
7914
|
-
/* Motyw jest monochromatyczny
|
|
9594
|
+
/* Motyw jest monochromatyczny - różnicę między bąblami robi jasność, nie odcień.
|
|
7915
9595
|
Wariant przychodzący siada na `muted`, bo `surface-variant` dzieli od tła listy
|
|
7916
9596
|
1,5% jasności i w jasnym motywie bąbel po prostu znika. */
|
|
7917
9597
|
--_bg: var(--kpt-color-muted);
|
|
@@ -7925,7 +9605,7 @@
|
|
|
7925
9605
|
color: var(--_fg);
|
|
7926
9606
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
7927
9607
|
line-height: var(--kpt-font-lineHeight-normal, 1.5);
|
|
7928
|
-
/* Cichszy wariant własnej wiadomości
|
|
9608
|
+
/* Cichszy wariant własnej wiadomości - dla rozmów, w których pełny kolor po prawej
|
|
7929
9609
|
stronie jest za mocny. */
|
|
7930
9610
|
}
|
|
7931
9611
|
.kpt-chat-message__bubble[data-variant=primary] {
|
|
@@ -7942,7 +9622,7 @@
|
|
|
7942
9622
|
padding-inline: 0;
|
|
7943
9623
|
}
|
|
7944
9624
|
.kpt-chat-message__bubble {
|
|
7945
|
-
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border`
|
|
9625
|
+
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border` - ramka przesunęłaby
|
|
7946
9626
|
treść o piksel w chwili, w której status się zmienia. */
|
|
7947
9627
|
}
|
|
7948
9628
|
.kpt-chat-message__bubble[data-status=failed] {
|
|
@@ -7977,7 +9657,7 @@
|
|
|
7977
9657
|
}
|
|
7978
9658
|
.kpt-chat-message__bubble {
|
|
7979
9659
|
/* Narożnik pod ogonkiem jest prosty. Zaokrąglony odsuwał się od ogonka łukiem i między
|
|
7980
|
-
nimi prześwitywało tło listy
|
|
9660
|
+
nimi prześwitywało tło listy - ogonek czytał się jak osobna strzałka doklejona obok
|
|
7981
9661
|
bąbla, a nie jak jego przedłużenie. Bramka na `[data-tail]`: bąble bez ogonka (środek
|
|
7982
9662
|
grupy, `ghost`, `system`, `[tail]="false"`) mają zostać zaokrąglone. */
|
|
7983
9663
|
}
|
|
@@ -8004,7 +9684,7 @@
|
|
|
8004
9684
|
inset-inline-end: -0.5rem;
|
|
8005
9685
|
}
|
|
8006
9686
|
.kpt-chat-message__bubble {
|
|
8007
|
-
/* Odbicie zamiast drugiej maski
|
|
9687
|
+
/* Odbicie zamiast drugiej maski - obraca się razem z `inset-inline`, więc RTL
|
|
8008
9688
|
nie wymaga osobnej reguły. */
|
|
8009
9689
|
}
|
|
8010
9690
|
.kpt-chat-message__bubble[data-tail][data-align=start]::after {
|
|
@@ -8047,7 +9727,7 @@
|
|
|
8047
9727
|
}
|
|
8048
9728
|
.kpt-chat-message__text {
|
|
8049
9729
|
margin: 0;
|
|
8050
|
-
/* Kompozytor łamie linie na Shift+Enter
|
|
9730
|
+
/* Kompozytor łamie linie na Shift+Enter - bez `pre-wrap` zlepiłyby się w akapit. */
|
|
8051
9731
|
white-space: pre-wrap;
|
|
8052
9732
|
overflow-wrap: anywhere;
|
|
8053
9733
|
}
|
|
@@ -8091,7 +9771,7 @@
|
|
|
8091
9771
|
opacity: 0.7;
|
|
8092
9772
|
}
|
|
8093
9773
|
.kpt-chat-message__status {
|
|
8094
|
-
/* Ikona ma 1em, a wiersz meta jest już zmniejszony
|
|
9774
|
+
/* Ikona ma 1em, a wiersz meta jest już zmniejszony - bez tego status ginie. */
|
|
8095
9775
|
font-size: 0.875rem;
|
|
8096
9776
|
}
|
|
8097
9777
|
/* Kolor statusu schodzi z `data-status` bąbla, a nie z drugiego takiego atrybutu na ikonie:
|
|
@@ -8100,7 +9780,7 @@
|
|
|
8100
9780
|
color: var(--kpt-color-primary);
|
|
8101
9781
|
opacity: 1;
|
|
8102
9782
|
}
|
|
8103
|
-
/* Na bąblu `solid` akcent jest kolorem TŁA, więc
|
|
9783
|
+
/* Na bąblu `solid` akcent jest kolorem TŁA, więc "przeczytano" zniknęłoby w nim
|
|
8104
9784
|
bez śladu. Tam wyróżnia je pełne krycie własnego koloru tekstu. */
|
|
8105
9785
|
.kpt-chat-message__bubble[data-variant=solid][data-status=read] .kpt-chat-message__status {
|
|
8106
9786
|
color: currentcolor;
|
|
@@ -8142,14 +9822,62 @@
|
|
|
8142
9822
|
background: var(--kpt-color-primary-subtle);
|
|
8143
9823
|
}
|
|
8144
9824
|
.kpt-chat-message__reaction-count {
|
|
9825
|
+
display: inline-block;
|
|
9826
|
+
overflow: clip;
|
|
9827
|
+
vertical-align: bottom;
|
|
8145
9828
|
opacity: 0.7;
|
|
8146
9829
|
}
|
|
9830
|
+
.kpt-chat-message__reaction-digit {
|
|
9831
|
+
display: inline-block;
|
|
9832
|
+
}
|
|
9833
|
+
/* Ruch pojawiania się (`enterMotion`), tylko po pierwszym renderze (`.is-live`): nowa
|
|
9834
|
+
reakcja wskakuje, nowa liczba wjeżdża od dołu jak na bębnie, nowa ikona statusu
|
|
9835
|
+
obraca się na miejsce. Każda zmiana to nowy element w DOM, więc wystarcza `@starting-style`. */
|
|
9836
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9837
|
+
transition: scale 0.42s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
9838
|
+
}
|
|
9839
|
+
@starting-style {
|
|
9840
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9841
|
+
scale: 0.4;
|
|
9842
|
+
}
|
|
9843
|
+
}
|
|
9844
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9845
|
+
transition: translate 0.36s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), opacity 0.18s ease-out;
|
|
9846
|
+
}
|
|
9847
|
+
@starting-style {
|
|
9848
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9849
|
+
translate: 0 0.7em;
|
|
9850
|
+
opacity: 0;
|
|
9851
|
+
}
|
|
9852
|
+
}
|
|
9853
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9854
|
+
transition: scale 0.4s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), rotate 0.4s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), opacity 0.18s ease-out;
|
|
9855
|
+
}
|
|
9856
|
+
@starting-style {
|
|
9857
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9858
|
+
scale: 0.3;
|
|
9859
|
+
rotate: -90deg;
|
|
9860
|
+
opacity: 0;
|
|
9861
|
+
}
|
|
9862
|
+
}
|
|
9863
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9864
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9865
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9866
|
+
transition: opacity 0.24s ease-out;
|
|
9867
|
+
}
|
|
9868
|
+
@starting-style {
|
|
9869
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9870
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9871
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9872
|
+
opacity: 0;
|
|
9873
|
+
}
|
|
9874
|
+
}
|
|
8147
9875
|
.kpt-chat-message__actions {
|
|
8148
9876
|
display: flex;
|
|
8149
9877
|
flex: 0 0 auto;
|
|
8150
9878
|
align-items: center;
|
|
8151
9879
|
gap: 0.125rem;
|
|
8152
|
-
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie
|
|
9880
|
+
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie - inaczej lista
|
|
8153
9881
|
wyglądałaby jak panel sterowania. Ponowienie jest wyjątkiem: musi być widoczne
|
|
8154
9882
|
zawsze, bo bez niego nieudana wiadomość nie ma czym o sobie powiedzieć. */
|
|
8155
9883
|
}
|
|
@@ -8166,7 +9894,7 @@
|
|
|
8166
9894
|
.kpt-chat-message__actions[data-open] .kpt-icon-button-host {
|
|
8167
9895
|
opacity: 1;
|
|
8168
9896
|
}
|
|
8169
|
-
/* Kotwica wybieraka
|
|
9897
|
+
/* Kotwica wybieraka - pozycjonuje go względem przycisku "zareaguj". */
|
|
8170
9898
|
.kpt-chat-message__react {
|
|
8171
9899
|
position: relative;
|
|
8172
9900
|
display: inline-flex;
|
|
@@ -8174,7 +9902,7 @@
|
|
|
8174
9902
|
/* Wybierak reakcji: rząd emoji nad przyciskiem. Rozwija się w stronę bąbla, nie od niego:
|
|
8175
9903
|
akcje stoją przy zewnętrznej krawędzi listy, więc wybierak wyśrodkowany na przycisku
|
|
8176
9904
|
wychodziłby poza viewport (a ten ma `overflow-y: auto`, czyli przycina też w poziomie)
|
|
8177
|
-
|
|
9905
|
+
- w wąskim docku ucięłoby połowę reakcji. */
|
|
8178
9906
|
.kpt-chat-message__picker {
|
|
8179
9907
|
position: absolute;
|
|
8180
9908
|
inset-block-end: calc(100% + var(--kpt-space-1, 0.25rem));
|
|
@@ -8188,7 +9916,7 @@
|
|
|
8188
9916
|
background: var(--kpt-color-surface-raised);
|
|
8189
9917
|
box-shadow: var(--kpt-elevation-2);
|
|
8190
9918
|
}
|
|
8191
|
-
/* Własna wiadomość ma odwrócony wiersz
|
|
9919
|
+
/* Własna wiadomość ma odwrócony wiersz - akcje lądują z lewej, więc wybierak idzie w prawo. */
|
|
8192
9920
|
.kpt-chat-message__row[data-align=end] .kpt-chat-message__picker {
|
|
8193
9921
|
inset-inline: 0 auto;
|
|
8194
9922
|
}
|
|
@@ -8224,7 +9952,10 @@
|
|
|
8224
9952
|
}
|
|
8225
9953
|
@media (prefers-reduced-motion: reduce) {
|
|
8226
9954
|
.kpt-chat-message__actions .kpt-icon-button-host,
|
|
8227
|
-
.kpt-chat-message__pick
|
|
9955
|
+
.kpt-chat-message__pick,
|
|
9956
|
+
.kpt-chat-message__reaction,
|
|
9957
|
+
.kpt-chat-message__reaction-digit,
|
|
9958
|
+
.kpt-chat-message__status {
|
|
8228
9959
|
transition: none;
|
|
8229
9960
|
}
|
|
8230
9961
|
.kpt-chat-message__pick:hover {
|
|
@@ -8243,7 +9974,7 @@
|
|
|
8243
9974
|
display: flex;
|
|
8244
9975
|
align-items: center;
|
|
8245
9976
|
gap: var(--kpt-space-2, 0.5rem);
|
|
8246
|
-
/* Wcięcie równe kolumnie awatara
|
|
9977
|
+
/* Wcięcie równe kolumnie awatara - wskaźnik staje tam, gdzie stanie bąbel. */
|
|
8247
9978
|
padding-inline-start: calc(2rem + var(--kpt-space-2, 0.5rem));
|
|
8248
9979
|
}
|
|
8249
9980
|
.kpt-chat-typing__bubble {
|
|
@@ -8290,8 +10021,14 @@
|
|
|
8290
10021
|
opacity: 1;
|
|
8291
10022
|
}
|
|
8292
10023
|
}
|
|
10024
|
+
/* Ruch wyłączony konfiguracją (`provideKptMotion({ enabled: false })`): kropki to wskaźnik
|
|
10025
|
+
stanu jak spinner - pulsują wolniej zamiast stanąć. */
|
|
10026
|
+
:root[data-kpt-motion=off] .kpt-chat-typing__dot {
|
|
10027
|
+
animation-name: kpt-chat-typing-pulse;
|
|
10028
|
+
animation-duration: 1.8s;
|
|
10029
|
+
}
|
|
8293
10030
|
/* Skok zamieniamy na pulsowanie, a nie wyłączamy animację: kropki są jedynym
|
|
8294
|
-
nośnikiem informacji
|
|
10031
|
+
nośnikiem informacji "ktoś pisze" i nieruchome nie odróżniają się od ozdoby. */
|
|
8295
10032
|
@media (prefers-reduced-motion: reduce) {
|
|
8296
10033
|
.kpt-chat-typing__dot {
|
|
8297
10034
|
animation-name: kpt-chat-typing-pulse;
|
|
@@ -8312,7 +10049,7 @@
|
|
|
8312
10049
|
background: var(--kpt-color-surface);
|
|
8313
10050
|
color: var(--kpt-color-text);
|
|
8314
10051
|
}
|
|
8315
|
-
/* Pasek offline. `role="status"` bez `aria-live="assertive"`
|
|
10052
|
+
/* Pasek offline. `role="status"` bez `aria-live="assertive"` - utrata sieci ma być
|
|
8316
10053
|
zauważona, ale nie przerywać czytania wiadomości w połowie zdania. */
|
|
8317
10054
|
.kpt-chat__offline {
|
|
8318
10055
|
display: flex;
|
|
@@ -8330,7 +10067,7 @@
|
|
|
8330
10067
|
color: var(--kpt-color-text-muted);
|
|
8331
10068
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
8332
10069
|
}
|
|
8333
|
-
/* Kontener pozycjonujący dla pigułki
|
|
10070
|
+
/* Kontener pozycjonujący dla pigułki "nowe wiadomości" - pigułka ma pływać nad listą,
|
|
8334
10071
|
a nie nad całą stroną, więc nie jest `fixed` jak kpt-scroll-top. */
|
|
8335
10072
|
.kpt-chat__body {
|
|
8336
10073
|
position: relative;
|
|
@@ -8379,21 +10116,21 @@
|
|
|
8379
10116
|
}
|
|
8380
10117
|
/* Separator jedzie z treścią i nie jest `sticky`: przyklejony zostawał na górze, więc przy
|
|
8381
10118
|
dłuższej rozmowie rósł tam stos ramek, a że pigułki różnią się szerokością, starsze
|
|
8382
|
-
wystawały zza najnowszej. Rolę
|
|
10119
|
+
wystawały zza najnowszej. Rolę "w jakim dniu jestem" przejęła jedna pływająca pigułka. */
|
|
8383
10120
|
.kpt-chat__date {
|
|
8384
10121
|
align-self: center;
|
|
8385
10122
|
margin: var(--kpt-space-4, 1rem) 0 var(--kpt-space-2, 0.5rem);
|
|
8386
10123
|
}
|
|
8387
10124
|
/* Pływająca pigułka dnia: jedna na całą listę, z tekstem podmienianym przy przewijaniu.
|
|
8388
|
-
Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body`
|
|
8389
|
-
pigułka
|
|
10125
|
+
Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body` - tak samo jak
|
|
10126
|
+
pigułka "nowe wiadomości" przy dolnej krawędzi. Gaśnie przez `visibility`, nie
|
|
8390
10127
|
`display: none`, bo skrypt musi móc zmierzyć jej pas także wtedy, gdy jej nie widać. */
|
|
8391
10128
|
.kpt-chat__day {
|
|
8392
10129
|
position: absolute;
|
|
8393
10130
|
inset-block-start: var(--kpt-space-2, 0.5rem);
|
|
8394
10131
|
/* Prawy odstęp kompensuje pasek przewijania: lista oddaje mu kawałek swojej szerokości,
|
|
8395
10132
|
więc pigułka wyśrodkowana względem całego pola stałaby odrobinę za bardzo w prawo
|
|
8396
|
-
względem samego tekstu. Logicznie, nie przez `right`
|
|
10133
|
+
względem samego tekstu. Logicznie, nie przez `right` - w RTL pasek jest po drugiej
|
|
8397
10134
|
stronie i przesunięcie musi iść za nim. */
|
|
8398
10135
|
inset-inline: 0 var(--kpt-space-3, 0.75rem);
|
|
8399
10136
|
z-index: var(--kpt-z-raised, 1);
|
|
@@ -8907,8 +10644,8 @@
|
|
|
8907
10644
|
color: var(--kpt-color-on-surface-muted);
|
|
8908
10645
|
}
|
|
8909
10646
|
/*
|
|
8910
|
-
* Pasek akcji przykleja się do dołu obszaru przewijania
|
|
8911
|
-
* i zdjęciem formularz ma kilkanaście pól i
|
|
10647
|
+
* Pasek akcji przykleja się do dołu obszaru przewijania - przy schemie z godzinami
|
|
10648
|
+
* i zdjęciem formularz ma kilkanaście pól i "Zapisz" uciekałby na sam dół.
|
|
8912
10649
|
*
|
|
8913
10650
|
* Slot `[kptDialogFooter]` odpada: projekcja treści widzi wyłącznie bezpośrednie dzieci
|
|
8914
10651
|
* `<kpt-dialog>`, a ten komponent trafia tam w całości jako jeden element.
|
|
@@ -8959,7 +10696,7 @@
|
|
|
8959
10696
|
padding: var(--kpt-space-1) 0;
|
|
8960
10697
|
}
|
|
8961
10698
|
.kpt-map-hours-field__day[data-locked] {
|
|
8962
|
-
/* Dzień przepisany z poniedziałku
|
|
10699
|
+
/* Dzień przepisany z poniedziałku - widoczny, ale nie do edycji. */
|
|
8963
10700
|
opacity: 0.6;
|
|
8964
10701
|
}
|
|
8965
10702
|
.kpt-map-hours-field__name {
|
|
@@ -8976,7 +10713,7 @@
|
|
|
8976
10713
|
display: flex;
|
|
8977
10714
|
gap: var(--kpt-space-1);
|
|
8978
10715
|
align-items: center;
|
|
8979
|
-
/* Obie godziny dzielą kolumnę po równo
|
|
10716
|
+
/* Obie godziny dzielą kolumnę po równo - `min-width: 0` pozwala im zejść poniżej treści. */
|
|
8980
10717
|
}
|
|
8981
10718
|
.kpt-map-hours-field__range .kpt-datepicker-host {
|
|
8982
10719
|
flex: 1 1 0;
|
|
@@ -9040,7 +10777,7 @@
|
|
|
9040
10777
|
.kpt-map-image-field__preview img {
|
|
9041
10778
|
display: block;
|
|
9042
10779
|
width: 100%;
|
|
9043
|
-
/* Ten sam kadr co w karcie miejsca
|
|
10780
|
+
/* Ten sam kadr co w karcie miejsca - podgląd ma pokazywać prawdę. */
|
|
9044
10781
|
aspect-ratio: 16/9;
|
|
9045
10782
|
object-fit: cover;
|
|
9046
10783
|
}
|
|
@@ -9102,7 +10839,7 @@
|
|
|
9102
10839
|
cursor: default;
|
|
9103
10840
|
}
|
|
9104
10841
|
.kpt-map-legend__item {
|
|
9105
|
-
/* Ukryta kategoria zostaje czytelna
|
|
10842
|
+
/* Ukryta kategoria zostaje czytelna - wygaszamy ją, nie chowamy. */
|
|
9106
10843
|
}
|
|
9107
10844
|
.kpt-map-legend__item.kpt-map-legend__item--off {
|
|
9108
10845
|
color: var(--kpt-color-on-surface-muted);
|
|
@@ -9188,7 +10925,7 @@
|
|
|
9188
10925
|
gap: 0 var(--kpt-space-2);
|
|
9189
10926
|
margin: var(--kpt-space-1) 0 0;
|
|
9190
10927
|
padding: 0 var(--kpt-space-4) var(--kpt-space-3);
|
|
9191
|
-
/* Kreska domyka nieruchomy nagłówek
|
|
10928
|
+
/* Kreska domyka nieruchomy nagłówek - bez niej ucięta treść czyta się jak błąd. */
|
|
9192
10929
|
border-bottom: var(--kpt-border-width-thin) solid var(--kpt-color-border);
|
|
9193
10930
|
}
|
|
9194
10931
|
.kpt-map-poi__distance {
|
|
@@ -9233,8 +10970,8 @@
|
|
|
9233
10970
|
min-width: 0;
|
|
9234
10971
|
}
|
|
9235
10972
|
/*
|
|
9236
|
-
Stan
|
|
9237
|
-
z `--_fg` przycisku, a `border-color` się nie dziedziczy
|
|
10973
|
+
Stan "w ulubionych" maluje przycisk, nie hosta: `color` z hosta i tak przegrywa
|
|
10974
|
+
z `--_fg` przycisku, a `border-color` się nie dziedziczy - reguła na samym `[data-on]`
|
|
9238
10975
|
nie zmieniała niczego widocznego.
|
|
9239
10976
|
*/
|
|
9240
10977
|
.kpt-map-poi__fav[data-on] .kpt-icon-button {
|
|
@@ -9350,7 +11087,7 @@
|
|
|
9350
11087
|
color: var(--kpt-color-on-surface-muted);
|
|
9351
11088
|
}
|
|
9352
11089
|
.kpt-map-poi__fact-label::after {
|
|
9353
|
-
content: "
|
|
11090
|
+
content: ", ";
|
|
9354
11091
|
}
|
|
9355
11092
|
.kpt-map-poi__row-actions {
|
|
9356
11093
|
display: flex;
|
|
@@ -9378,7 +11115,7 @@
|
|
|
9378
11115
|
}
|
|
9379
11116
|
/*
|
|
9380
11117
|
* Akcje odsłaniają się po najechaniu tylko tam, gdzie jest czym najechać.
|
|
9381
|
-
* Na dotyku zostają widoczne, a `:focus-within` odsłania je dla klawiatury
|
|
11118
|
+
* Na dotyku zostają widoczne, a `:focus-within` odsłania je dla klawiatury -
|
|
9382
11119
|
* elementy zostają w drzewie zawsze, więc kolejność tabulacji się nie zmienia.
|
|
9383
11120
|
*/
|
|
9384
11121
|
@media (hover: hover) and (pointer: fine) {
|
|
@@ -9391,7 +11128,7 @@
|
|
|
9391
11128
|
opacity: 1;
|
|
9392
11129
|
}
|
|
9393
11130
|
}
|
|
9394
|
-
/* Komunikat dla czytnika ekranu
|
|
11131
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9395
11132
|
.kpt-map-poi__live {
|
|
9396
11133
|
position: absolute;
|
|
9397
11134
|
width: 1px;
|
|
@@ -9453,6 +11190,10 @@
|
|
|
9453
11190
|
color: var(--kpt-color-on-surface-muted);
|
|
9454
11191
|
cursor: not-allowed;
|
|
9455
11192
|
}
|
|
11193
|
+
.kpt-map-search__speech {
|
|
11194
|
+
flex: none;
|
|
11195
|
+
gap: var(--kpt-space-1);
|
|
11196
|
+
}
|
|
9456
11197
|
.kpt-map-search__clear {
|
|
9457
11198
|
display: inline-flex;
|
|
9458
11199
|
flex: none;
|
|
@@ -9517,7 +11258,7 @@
|
|
|
9517
11258
|
padding: var(--kpt-space-3);
|
|
9518
11259
|
color: var(--kpt-color-on-surface-muted);
|
|
9519
11260
|
}
|
|
9520
|
-
/* Komunikat dla czytnika ekranu
|
|
11261
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9521
11262
|
.kpt-map-search__status {
|
|
9522
11263
|
position: absolute;
|
|
9523
11264
|
width: 1px;
|
|
@@ -9592,20 +11333,20 @@
|
|
|
9592
11333
|
opacity: 0.6;
|
|
9593
11334
|
}
|
|
9594
11335
|
/*
|
|
9595
|
-
* Wyszukiwarka stoi w prawym górnym rogu
|
|
11336
|
+
* Wyszukiwarka stoi w prawym górnym rogu - kontrolki zoomu zajmują lewy.
|
|
9596
11337
|
* `z-index: 5` to szczyt skali warstwy Angulara nad mapą (popup 3, menu 4): rozwinięty
|
|
9597
11338
|
* panel podpowiedzi ma zakrywać wszystko, w tym menu prawego przycisku.
|
|
9598
11339
|
*
|
|
9599
11340
|
* TO MUSI BYĆ OPAKOWANIE, nie klasa na samym `<kpt-map-search>`.
|
|
9600
11341
|
*
|
|
9601
|
-
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }`
|
|
11342
|
+
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }` -
|
|
9602
11343
|
* blok zawierający dla panelu podpowiedzi, potrzebny także wtedy, gdy komponent stoi
|
|
9603
11344
|
* poza mapą. Obie reguły trafiałyby wówczas na TEN SAM element z identyczną
|
|
9604
11345
|
* specyficznością (0,1,0) i w tej samej warstwie `kpt.components`, więc rozstrzygałaby
|
|
9605
|
-
* kolejność wstrzyknięcia stylów
|
|
11346
|
+
* kolejność wstrzyknięcia stylów - a Angular wstrzykuje style dziecka PO stylach
|
|
9606
11347
|
* rodzica. `relative` wygrywało, pole wypadało do normalnego przepływu za
|
|
9607
11348
|
* `.kpt-map__canvas` (`height: 100%`) i znikało przycięte przez `overflow: hidden`
|
|
9608
|
-
* widoku. Nie
|
|
11349
|
+
* widoku. Nie "stało krzywo" - nie było go wcale.
|
|
9609
11350
|
*
|
|
9610
11351
|
* Opakowanie rozdziela oba zestawy reguł na osobne elementy i wyjmuje rzecz
|
|
9611
11352
|
* z zależności od kolejności wstrzykiwania.
|
|
@@ -9706,7 +11447,7 @@
|
|
|
9706
11447
|
border-radius: var(--kpt-radius-full);
|
|
9707
11448
|
box-shadow: var(--kpt-elevation-2);
|
|
9708
11449
|
}
|
|
9709
|
-
/* Wielkość rośnie schodkowo
|
|
11450
|
+
/* Wielkość rośnie schodkowo - trzy stopnie wystarczą, żeby zobaczyć różnicę. */
|
|
9710
11451
|
.kpt-map__cluster--sm {
|
|
9711
11452
|
font-size: var(--kpt-font-size-xs);
|
|
9712
11453
|
scale: 0.78;
|
|
@@ -9768,7 +11509,7 @@
|
|
|
9768
11509
|
.kpt-map__popup {
|
|
9769
11510
|
/*
|
|
9770
11511
|
* Wariant `card`: całą treść rysuje komponent w środku, więc popup oddaje mu
|
|
9771
|
-
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy
|
|
11512
|
+
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy - karta
|
|
9772
11513
|
* miejsca bywa wyższa niż mapa, a auto-pan i tak mierzy realny element.
|
|
9773
11514
|
*/
|
|
9774
11515
|
}
|
|
@@ -9780,7 +11521,7 @@
|
|
|
9780
11521
|
display: flex;
|
|
9781
11522
|
flex-direction: column;
|
|
9782
11523
|
/*
|
|
9783
|
-
* Sam popup nie dostaje `overflow: hidden`
|
|
11524
|
+
* Sam popup nie dostaje `overflow: hidden` - strzałka `::after` wisi na `top: 100%`
|
|
9784
11525
|
* i schowałaby się razem z nadmiarem.
|
|
9785
11526
|
*
|
|
9786
11527
|
* Nie przewija też treści: oddaje wysokość komponentowi w środku, żeby ten mógł
|
|
@@ -9930,7 +11671,7 @@
|
|
|
9930
11671
|
/*
|
|
9931
11672
|
* Krąg dokładności przy silniku Google jest zwykłym elementem, a nie kółkiem SVG jak
|
|
9932
11673
|
* w Leaflecie: `google.maps.Circle` przyjmuje kolory w opcjach, a tu obowiązują tokeny.
|
|
9933
|
-
* Te same barwy co w regule SVG niżej
|
|
11674
|
+
* Te same barwy co w regule SVG niżej - tylko innymi właściwościami.
|
|
9934
11675
|
*/
|
|
9935
11676
|
.kpt-map[data-engine=google] .kpt-map__accuracy {
|
|
9936
11677
|
background: color-mix(in oklch, var(--kpt-color-info) 15%, transparent);
|
|
@@ -9938,13 +11679,13 @@
|
|
|
9938
11679
|
}
|
|
9939
11680
|
}
|
|
9940
11681
|
/*
|
|
9941
|
-
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO
|
|
11682
|
+
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO - jedyne takie miejsce w bibliotece.
|
|
9942
11683
|
*
|
|
9943
11684
|
* `leaflet.css` dostarcza aplikacja i nie jest warstwowany, a CSS spoza warstw wygrywa
|
|
9944
11685
|
* z KAŻDĄ regułą w `@layer` niezależnie od specyficzności. Nadpisania `.leaflet-*`
|
|
9945
11686
|
* umieszczone w `kpt.components` po prostu by nie zadziałały.
|
|
9946
11687
|
*
|
|
9947
|
-
* Nie przenosić tego do `@layer`
|
|
11688
|
+
* Nie przenosić tego do `@layer` "dla porządku".
|
|
9948
11689
|
*/
|
|
9949
11690
|
.kpt-map .leaflet-container {
|
|
9950
11691
|
font-family: var(--kpt-font-family-sans);
|
|
@@ -9953,9 +11694,9 @@
|
|
|
9953
11694
|
/*
|
|
9954
11695
|
* Zamyka skalę z-index Leafleta we WŁASNYM kontekście układania.
|
|
9955
11696
|
*
|
|
9956
|
-
* Bez tego panes (200
|
|
11697
|
+
* Bez tego panes (200-700) i kontrolki (800) konkurują bezpośrednio z warstwą Angulara
|
|
9957
11698
|
* rozpiętą nad mapą, bo `.leaflet-container` ma `z-index: auto` i kontekstu nie tworzy.
|
|
9958
|
-
* Popup, kontrolki zoomu i menu prawego przycisku były wtedy MALOWANE POD kaflami
|
|
11699
|
+
* Popup, kontrolki zoomu i menu prawego przycisku były wtedy MALOWANE POD kaflami -
|
|
9959
11700
|
* i nie dało się tego zobaczyć hit-testem, bo panes mają `pointer-events: none`,
|
|
9960
11701
|
* więc `elementFromPoint` zwracał popup jako element na wierzchu.
|
|
9961
11702
|
*
|
|
@@ -9964,7 +11705,7 @@
|
|
|
9964
11705
|
z-index: 0;
|
|
9965
11706
|
}
|
|
9966
11707
|
|
|
9967
|
-
/* Ikony znaczników niosą własne tło
|
|
11708
|
+
/* Ikony znaczników niosą własne tło - kontener Leafleta musi zejść z drogi. */
|
|
9968
11709
|
.kpt-map .leaflet-div-icon,
|
|
9969
11710
|
.kpt-map .kpt-map__icon {
|
|
9970
11711
|
background: transparent;
|
|
@@ -9990,6 +11731,6 @@
|
|
|
9990
11731
|
|
|
9991
11732
|
.kpt-map .leaflet-popup-content-wrapper,
|
|
9992
11733
|
.kpt-map .leaflet-popup-tip {
|
|
9993
|
-
/* Popupów Leafleta nie używamy
|
|
11734
|
+
/* Popupów Leafleta nie używamy - renderuje je warstwa Angulara. */
|
|
9994
11735
|
display: none;
|
|
9995
11736
|
}
|