@konce-pt/styles 0.12.0 → 0.15.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 +1870 -244
- package/index.css +3 -3
- package/package.json +3 -3
- package/src/index.scss +13 -13
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);
|
|
@@ -1571,7 +1686,19 @@
|
|
|
1571
1686
|
font-size: var(--_fs, 0.875rem);
|
|
1572
1687
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
1573
1688
|
cursor: pointer;
|
|
1574
|
-
|
|
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
|
+
}
|
|
1575
1702
|
}
|
|
1576
1703
|
.kpt-button-group__item:first-child {
|
|
1577
1704
|
border-inline-start: 0;
|
|
@@ -1579,10 +1706,21 @@
|
|
|
1579
1706
|
.kpt-button-group__item:hover:not(:disabled):not(.is-active) {
|
|
1580
1707
|
background: var(--kpt-color-muted);
|
|
1581
1708
|
}
|
|
1582
|
-
.kpt-button-group__item
|
|
1709
|
+
.kpt-button-group__item::before {
|
|
1710
|
+
content: "";
|
|
1711
|
+
position: absolute;
|
|
1712
|
+
inset: 0;
|
|
1713
|
+
z-index: -1;
|
|
1583
1714
|
background: var(--kpt-color-primary);
|
|
1715
|
+
opacity: 0;
|
|
1716
|
+
pointer-events: none;
|
|
1717
|
+
}
|
|
1718
|
+
.kpt-button-group__item.is-active {
|
|
1584
1719
|
color: var(--kpt-color-on-primary);
|
|
1585
1720
|
}
|
|
1721
|
+
.kpt-button-group__item.is-active::before {
|
|
1722
|
+
opacity: 1;
|
|
1723
|
+
}
|
|
1586
1724
|
.kpt-button-group__item:disabled {
|
|
1587
1725
|
opacity: 0.5;
|
|
1588
1726
|
cursor: not-allowed;
|
|
@@ -1612,6 +1750,11 @@
|
|
|
1612
1750
|
--_px: 0;
|
|
1613
1751
|
width: var(--_h);
|
|
1614
1752
|
}
|
|
1753
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1754
|
+
.kpt-button-group__item {
|
|
1755
|
+
transition: none;
|
|
1756
|
+
}
|
|
1757
|
+
}
|
|
1615
1758
|
}
|
|
1616
1759
|
|
|
1617
1760
|
/* src/lib/card/card.component.scss */
|
|
@@ -1867,6 +2010,30 @@
|
|
|
1867
2010
|
.kpt-checkbox__input[aria-invalid=true] + .kpt-checkbox__box {
|
|
1868
2011
|
border-color: var(--kpt-form-field-border-error);
|
|
1869
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
|
+
}
|
|
1870
2037
|
}
|
|
1871
2038
|
|
|
1872
2039
|
/* src/lib/chip/chip.component.scss */
|
|
@@ -1968,6 +2135,7 @@
|
|
|
1968
2135
|
display: block;
|
|
1969
2136
|
}
|
|
1970
2137
|
.kpt-chips-input {
|
|
2138
|
+
position: relative;
|
|
1971
2139
|
display: flex;
|
|
1972
2140
|
flex-wrap: wrap;
|
|
1973
2141
|
align-items: center;
|
|
@@ -2005,6 +2173,14 @@
|
|
|
2005
2173
|
.kpt-chips-input__field::placeholder {
|
|
2006
2174
|
color: var(--kpt-form-field-placeholder);
|
|
2007
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
|
+
}
|
|
2008
2184
|
}
|
|
2009
2185
|
|
|
2010
2186
|
/* src/lib/color-picker/color-picker.component.scss */
|
|
@@ -2070,6 +2246,14 @@
|
|
|
2070
2246
|
outline: 2px solid var(--kpt-color-focus-ring);
|
|
2071
2247
|
outline-offset: 1px;
|
|
2072
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
|
+
}
|
|
2073
2257
|
}
|
|
2074
2258
|
|
|
2075
2259
|
/* src/lib/confirm/confirm-container.component.scss */
|
|
@@ -2156,7 +2340,7 @@
|
|
|
2156
2340
|
.kpt-context-menu__item--danger {
|
|
2157
2341
|
color: var(--kpt-color-danger);
|
|
2158
2342
|
}
|
|
2159
|
-
/* Wiersz nagłówkowy
|
|
2343
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
2160
2344
|
.kpt-context-menu__header {
|
|
2161
2345
|
display: flex;
|
|
2162
2346
|
align-items: center;
|
|
@@ -2231,6 +2415,23 @@
|
|
|
2231
2415
|
border-color: var(--kpt-form-field-border-focus);
|
|
2232
2416
|
box-shadow: 0 0 0 2px color-mix(in oklch, var(--kpt-form-field-border-focus) 30%, transparent);
|
|
2233
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
|
+
}
|
|
2234
2435
|
.kpt-data-table__scroll {
|
|
2235
2436
|
overflow: auto;
|
|
2236
2437
|
}
|
|
@@ -2248,7 +2449,8 @@
|
|
|
2248
2449
|
}
|
|
2249
2450
|
.kpt-data-table__table {
|
|
2250
2451
|
width: 100%;
|
|
2251
|
-
border-collapse:
|
|
2452
|
+
border-collapse: separate;
|
|
2453
|
+
border-spacing: 0;
|
|
2252
2454
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
2253
2455
|
}
|
|
2254
2456
|
.kpt-data-table__table--frozen {
|
|
@@ -2294,23 +2496,33 @@
|
|
|
2294
2496
|
border-bottom: 0;
|
|
2295
2497
|
border-top: var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);
|
|
2296
2498
|
}
|
|
2297
|
-
.kpt-data-
|
|
2298
|
-
|
|
2499
|
+
.kpt-data-table__filter-row {
|
|
2500
|
+
--_filter-h: 2rem;
|
|
2299
2501
|
}
|
|
2300
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));
|
|
2301
2504
|
padding: var(--kpt-space-2, 0.5rem);
|
|
2302
2505
|
font-weight: var(--kpt-font-weight-normal, 400);
|
|
2303
2506
|
cursor: auto;
|
|
2304
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
|
+
}
|
|
2305
2515
|
.kpt-data-table__fcell {
|
|
2306
2516
|
width: 100%;
|
|
2307
|
-
height:
|
|
2517
|
+
height: var(--_filter-h);
|
|
2518
|
+
box-sizing: border-box;
|
|
2519
|
+
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
2308
2520
|
padding-inline: var(--kpt-space-2, 0.5rem);
|
|
2309
2521
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);
|
|
2310
2522
|
border-radius: var(--kpt-form-field-radius, 0.5rem);
|
|
2311
2523
|
background: var(--kpt-form-field-bg);
|
|
2312
2524
|
color: var(--kpt-form-field-text);
|
|
2313
|
-
font: inherit;
|
|
2525
|
+
font-family: inherit;
|
|
2314
2526
|
}
|
|
2315
2527
|
.kpt-data-table__fcell:focus-visible {
|
|
2316
2528
|
outline: none;
|
|
@@ -2358,11 +2570,15 @@
|
|
|
2358
2570
|
}
|
|
2359
2571
|
.kpt-data-table__caption {
|
|
2360
2572
|
caption-side: top;
|
|
2361
|
-
padding
|
|
2573
|
+
padding: var(--kpt-space-3, 0.75rem) var(--kpt-table-cell-padding, 0.75rem) var(--kpt-space-2, 0.5rem);
|
|
2362
2574
|
text-align: start;
|
|
2363
2575
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
2364
2576
|
color: var(--kpt-color-on-surface);
|
|
2365
2577
|
}
|
|
2578
|
+
.kpt-data-table__caption-text {
|
|
2579
|
+
position: sticky;
|
|
2580
|
+
inset-inline-start: var(--kpt-table-cell-padding, 0.75rem);
|
|
2581
|
+
}
|
|
2366
2582
|
.kpt-data-table__live {
|
|
2367
2583
|
position: absolute;
|
|
2368
2584
|
width: 1px;
|
|
@@ -2571,7 +2787,7 @@
|
|
|
2571
2787
|
position: sticky;
|
|
2572
2788
|
z-index: 1;
|
|
2573
2789
|
background: var(--kpt-table-bg);
|
|
2574
|
-
|
|
2790
|
+
box-shadow: inset calc(-1 * var(--kpt-border-width-thin, 1px)) 0 0 var(--kpt-table-border);
|
|
2575
2791
|
}
|
|
2576
2792
|
.kpt-data-table thead th.kpt-data-table__cell--frozen {
|
|
2577
2793
|
z-index: 3;
|
|
@@ -2604,6 +2820,31 @@
|
|
|
2604
2820
|
padding: 0 !important;
|
|
2605
2821
|
border: 0 !important;
|
|
2606
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
|
+
}
|
|
2607
2848
|
.kpt-data-table tbody tr:last-child td {
|
|
2608
2849
|
border-bottom: 0;
|
|
2609
2850
|
}
|
|
@@ -2681,6 +2922,37 @@
|
|
|
2681
2922
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
2682
2923
|
padding: var(--kpt-space-3, 0.75rem);
|
|
2683
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;
|
|
2684
2956
|
}
|
|
2685
2957
|
.kpt-data-view__empty {
|
|
2686
2958
|
padding: var(--kpt-space-6, 1.5rem);
|
|
@@ -2868,11 +3140,11 @@
|
|
|
2868
3140
|
max-width: calc(100vw - 2rem);
|
|
2869
3141
|
}
|
|
2870
3142
|
/*
|
|
2871
|
-
* 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ń
|
|
2872
3144
|
* skrajny ma jednocześnie pełną plamę zaznaczenia i pół-pasmo w stronę wnętrza zakresu.
|
|
2873
3145
|
* Plamę też przenosimy na `::after`, bo pełne tło komórki zasłoniłoby to pół-pasmo.
|
|
2874
3146
|
* Klasy `.kpt-calendar__*` są wspólne z `kpt-datepicker`, a jego globalna reguła
|
|
2875
|
-
* `--selected` ma `!important`
|
|
3147
|
+
* `--selected` ma `!important` - stąd jawne zdjęcie tła przy wyższej specyficzności.
|
|
2876
3148
|
*/
|
|
2877
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 {
|
|
2878
3150
|
content: "";
|
|
@@ -2933,6 +3205,14 @@
|
|
|
2933
3205
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
2934
3206
|
box-shadow: var(--kpt-elevation-1);
|
|
2935
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
|
+
}
|
|
2936
3216
|
}
|
|
2937
3217
|
|
|
2938
3218
|
/* src/lib/datepicker/clock.component.scss */
|
|
@@ -3305,6 +3585,14 @@
|
|
|
3305
3585
|
.kpt-calendar--clock {
|
|
3306
3586
|
width: 16rem;
|
|
3307
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
|
+
}
|
|
3308
3596
|
}
|
|
3309
3597
|
|
|
3310
3598
|
/* src/lib/dialog/dialog.component.scss */
|
|
@@ -3328,6 +3616,33 @@
|
|
|
3328
3616
|
.kpt-dialog[data-size=lg] {
|
|
3329
3617
|
--_width: 48rem;
|
|
3330
3618
|
}
|
|
3619
|
+
.kpt-dialog {
|
|
3620
|
+
/*
|
|
3621
|
+
* Cały ekran: bez ramki, zaokrągleń, cienia i marginesów. `max-width`/`max-height` zeruje też
|
|
3622
|
+
* limity z arkusza przeglądarki (natywny modal trzyma odstęp od krawędzi). `dvh`, nie `vh` -
|
|
3623
|
+
* na telefonie `100vh` sięga pod pasek adresu i stopka wypadłaby poza ekran.
|
|
3624
|
+
*/
|
|
3625
|
+
}
|
|
3626
|
+
.kpt-dialog[data-size=full] {
|
|
3627
|
+
width: 100vw;
|
|
3628
|
+
max-width: none;
|
|
3629
|
+
height: 100dvh;
|
|
3630
|
+
max-height: none;
|
|
3631
|
+
margin: 0;
|
|
3632
|
+
border: 0;
|
|
3633
|
+
border-radius: 0;
|
|
3634
|
+
box-shadow: none;
|
|
3635
|
+
}
|
|
3636
|
+
.kpt-dialog[data-size=full] .kpt-dialog__header {
|
|
3637
|
+
padding-top: max(var(--kpt-space-5, 1.25rem), env(safe-area-inset-top));
|
|
3638
|
+
}
|
|
3639
|
+
.kpt-dialog[data-size=full] .kpt-dialog__body {
|
|
3640
|
+
flex: 1 1 auto;
|
|
3641
|
+
padding-bottom: max(var(--kpt-space-6, 1.5rem), env(safe-area-inset-bottom));
|
|
3642
|
+
}
|
|
3643
|
+
.kpt-dialog[data-size=full] [kptDialogFooter] {
|
|
3644
|
+
padding-bottom: max(var(--kpt-space-4, 1rem), env(safe-area-inset-bottom));
|
|
3645
|
+
}
|
|
3331
3646
|
.kpt-dialog::backdrop {
|
|
3332
3647
|
background: var(--kpt-color-overlay-scrim);
|
|
3333
3648
|
}
|
|
@@ -3336,7 +3651,7 @@
|
|
|
3336
3651
|
* Kolumna flex: nagłówek i stopka stoją, przewija się wyłącznie treść.
|
|
3337
3652
|
*
|
|
3338
3653
|
* Scoping `[open]` jest obowiązkowy. Regułę `dialog:not([open]) { display: none }`
|
|
3339
|
-
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije
|
|
3654
|
+
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije - także z `@layer`.
|
|
3340
3655
|
* Niescopowane `display: flex` zostawiłoby zamknięte okna widoczne.
|
|
3341
3656
|
*/
|
|
3342
3657
|
}
|
|
@@ -3387,7 +3702,7 @@
|
|
|
3387
3702
|
display: flex;
|
|
3388
3703
|
/*
|
|
3389
3704
|
* Zawijanie jest obowiązkowe, nie kosmetyczne. `<dialog>` dostaje z arkusza przeglądarki
|
|
3390
|
-
* `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje
|
|
3705
|
+
* `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje -
|
|
3391
3706
|
* zostaje **ucięta**. Cztery przyciski w oknie `sm` wystarczą, żeby pierwszy z nich
|
|
3392
3707
|
* przestał być czytelny, a użytkownik nie ma jak się do niego dostać.
|
|
3393
3708
|
*/
|
|
@@ -3437,7 +3752,7 @@
|
|
|
3437
3752
|
background: var(--kpt-color-overlay-scrim);
|
|
3438
3753
|
opacity: 0;
|
|
3439
3754
|
visibility: hidden;
|
|
3440
|
-
transition: opacity 0.2s, visibility 0.2s;
|
|
3755
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1));
|
|
3441
3756
|
}
|
|
3442
3757
|
.kpt-drawer__backdrop.is-open {
|
|
3443
3758
|
opacity: 1;
|
|
@@ -3456,8 +3771,8 @@
|
|
|
3456
3771
|
width: min(20rem, 90vw);
|
|
3457
3772
|
transform: translateX(-100%);
|
|
3458
3773
|
visibility: hidden;
|
|
3459
|
-
--_kpt-drawer-vis-delay: 0.25s;
|
|
3460
|
-
transition: transform 0.25s ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3774
|
+
--_kpt-drawer-vis-delay: calc(0.25s * var(--kpt-motion-scale, 1));
|
|
3775
|
+
transition: transform calc(0.25s * var(--kpt-motion-scale, 1)) ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3461
3776
|
}
|
|
3462
3777
|
.kpt-drawer__panel[data-position=right] {
|
|
3463
3778
|
inset: 0 0 0 auto;
|
|
@@ -3583,7 +3898,17 @@
|
|
|
3583
3898
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
3584
3899
|
position: relative;
|
|
3585
3900
|
isolation: isolate;
|
|
3586
|
-
transition: box-shadow var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
3901
|
+
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));
|
|
3902
|
+
}
|
|
3903
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3904
|
+
--_press-t: 0.08s;
|
|
3905
|
+
--_press-e: ease-out;
|
|
3906
|
+
scale: 0.92;
|
|
3907
|
+
}
|
|
3908
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3909
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3910
|
+
scale: none;
|
|
3911
|
+
}
|
|
3587
3912
|
}
|
|
3588
3913
|
.kpt-fab::after {
|
|
3589
3914
|
content: "";
|
|
@@ -3640,14 +3965,22 @@
|
|
|
3640
3965
|
display: block;
|
|
3641
3966
|
}
|
|
3642
3967
|
.kpt-fieldset {
|
|
3968
|
+
--_bg: transparent;
|
|
3969
|
+
background: var(--_bg);
|
|
3643
3970
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
3644
3971
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
3645
3972
|
padding: var(--kpt-space-4, 1rem);
|
|
3646
3973
|
margin: 0;
|
|
3647
3974
|
min-inline-size: 0;
|
|
3975
|
+
block-size: 100%;
|
|
3976
|
+
}
|
|
3977
|
+
.kpt-fieldset-host[data-variant=filled] .kpt-fieldset {
|
|
3978
|
+
--_bg: var(--kpt-color-surface);
|
|
3648
3979
|
}
|
|
3649
3980
|
.kpt-fieldset__legend {
|
|
3650
|
-
padding
|
|
3981
|
+
padding: calc(var(--kpt-space-1, 0.25rem) / 2) var(--kpt-space-2, 0.5rem);
|
|
3982
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
3983
|
+
background: var(--_bg);
|
|
3651
3984
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3652
3985
|
color: var(--kpt-color-on-surface);
|
|
3653
3986
|
}
|
|
@@ -3663,10 +3996,16 @@
|
|
|
3663
3996
|
font: inherit;
|
|
3664
3997
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3665
3998
|
}
|
|
3999
|
+
.kpt-fieldset__body {
|
|
4000
|
+
padding-top: var(--kpt-space-2, 0.5rem);
|
|
4001
|
+
}
|
|
4002
|
+
.kpt-fieldset {
|
|
4003
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
4004
|
+
}
|
|
3666
4005
|
.kpt-fieldset__collapse {
|
|
3667
4006
|
display: grid;
|
|
3668
4007
|
grid-template-rows: 0fr;
|
|
3669
|
-
transition: grid-template-rows var(--
|
|
4008
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
3670
4009
|
}
|
|
3671
4010
|
.kpt-fieldset__collapse.is-open {
|
|
3672
4011
|
grid-template-rows: 1fr;
|
|
@@ -3675,12 +4014,58 @@
|
|
|
3675
4014
|
overflow: hidden;
|
|
3676
4015
|
min-height: 0;
|
|
3677
4016
|
}
|
|
3678
|
-
.kpt-
|
|
3679
|
-
|
|
4017
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4018
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
4019
|
+
}
|
|
4020
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron.is-open {
|
|
4021
|
+
transform: rotate(180deg);
|
|
4022
|
+
}
|
|
4023
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__collapse {
|
|
4024
|
+
transition: none;
|
|
4025
|
+
}
|
|
4026
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4027
|
+
transition: none;
|
|
4028
|
+
}
|
|
4029
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4030
|
+
opacity: 0;
|
|
4031
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
4032
|
+
}
|
|
4033
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4034
|
+
opacity: 1;
|
|
4035
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
4036
|
+
}
|
|
4037
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse {
|
|
4038
|
+
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);
|
|
4039
|
+
}
|
|
4040
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse:not(.is-open) {
|
|
4041
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
4042
|
+
}
|
|
4043
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4044
|
+
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);
|
|
4045
|
+
}
|
|
4046
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4047
|
+
opacity: 0;
|
|
4048
|
+
translate: 0 -0.5rem;
|
|
4049
|
+
filter: blur(4px);
|
|
4050
|
+
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);
|
|
4051
|
+
}
|
|
4052
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4053
|
+
opacity: 1;
|
|
4054
|
+
translate: none;
|
|
4055
|
+
filter: none;
|
|
4056
|
+
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);
|
|
3680
4057
|
}
|
|
3681
4058
|
@media (prefers-reduced-motion: reduce) {
|
|
3682
|
-
.kpt-fieldset__collapse
|
|
4059
|
+
.kpt-fieldset__collapse,
|
|
4060
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4061
|
+
transition: none;
|
|
4062
|
+
}
|
|
4063
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body,
|
|
4064
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
3683
4065
|
transition: none;
|
|
4066
|
+
opacity: 1;
|
|
4067
|
+
translate: none;
|
|
4068
|
+
filter: none;
|
|
3684
4069
|
}
|
|
3685
4070
|
}
|
|
3686
4071
|
}
|
|
@@ -3858,17 +4243,43 @@
|
|
|
3858
4243
|
background: var(--kpt-form-field-bg);
|
|
3859
4244
|
transform: translateY(calc(-50% - 1.25rem)) scale(0.85);
|
|
3860
4245
|
}
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
4246
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4247
|
+
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);
|
|
4248
|
+
}
|
|
4249
|
+
@starting-style {
|
|
4250
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4251
|
+
opacity: 0;
|
|
4252
|
+
translate: 0 -0.35rem;
|
|
4253
|
+
filter: blur(3px);
|
|
3864
4254
|
}
|
|
3865
4255
|
}
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
@
|
|
3870
|
-
|
|
3871
|
-
|
|
4256
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4257
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4258
|
+
}
|
|
4259
|
+
@starting-style {
|
|
4260
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4261
|
+
opacity: 0;
|
|
4262
|
+
}
|
|
4263
|
+
}
|
|
4264
|
+
.kpt-form-field--float[data-motion=spring] .kpt-form-field__label {
|
|
4265
|
+
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);
|
|
4266
|
+
}
|
|
4267
|
+
.kpt-form-field--float[data-motion=none] .kpt-form-field__label {
|
|
4268
|
+
transition: none;
|
|
4269
|
+
}
|
|
4270
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4271
|
+
.kpt-form-field--float .kpt-form-field__label,
|
|
4272
|
+
.kpt-form-field--float[data-motion] .kpt-form-field__label,
|
|
4273
|
+
.kpt-form-field[data-live][data-motion] .kpt-form-field__message {
|
|
4274
|
+
transition: none;
|
|
4275
|
+
}
|
|
4276
|
+
}
|
|
4277
|
+
}
|
|
4278
|
+
|
|
4279
|
+
/* src/lib/galleria/galleria.component.scss */
|
|
4280
|
+
@layer kpt.components {
|
|
4281
|
+
.kpt-galleria-host {
|
|
4282
|
+
display: block;
|
|
3872
4283
|
}
|
|
3873
4284
|
.kpt-galleria__stage {
|
|
3874
4285
|
position: relative;
|
|
@@ -3931,7 +4342,7 @@
|
|
|
3931
4342
|
background: none;
|
|
3932
4343
|
cursor: pointer;
|
|
3933
4344
|
opacity: 0.6;
|
|
3934
|
-
transition: opacity 0.15s, border-color 0.15s;
|
|
4345
|
+
transition: opacity calc(0.15s * var(--kpt-motion-scale, 1)), border-color calc(0.15s * var(--kpt-motion-scale, 1));
|
|
3935
4346
|
}
|
|
3936
4347
|
.kpt-galleria__thumb img {
|
|
3937
4348
|
width: 100%;
|
|
@@ -3999,6 +4410,17 @@
|
|
|
3999
4410
|
color: var(--_fg);
|
|
4000
4411
|
cursor: pointer;
|
|
4001
4412
|
font-size: 1.25rem;
|
|
4413
|
+
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));
|
|
4414
|
+
}
|
|
4415
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4416
|
+
--_press-t: 0.08s;
|
|
4417
|
+
--_press-e: ease-out;
|
|
4418
|
+
scale: 0.9;
|
|
4419
|
+
}
|
|
4420
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4421
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4422
|
+
scale: none;
|
|
4423
|
+
}
|
|
4002
4424
|
}
|
|
4003
4425
|
.kpt-icon-button::after {
|
|
4004
4426
|
content: "";
|
|
@@ -4061,6 +4483,15 @@
|
|
|
4061
4483
|
border-right-color: transparent;
|
|
4062
4484
|
border-radius: 50%;
|
|
4063
4485
|
animation: kpt-spinner-rotate 0.6s linear infinite;
|
|
4486
|
+
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);
|
|
4487
|
+
}
|
|
4488
|
+
@starting-style {
|
|
4489
|
+
.kpt-icon-button__spinner {
|
|
4490
|
+
scale: 0.3;
|
|
4491
|
+
}
|
|
4492
|
+
}
|
|
4493
|
+
:root[data-kpt-motion=off] .kpt-icon-button__spinner {
|
|
4494
|
+
animation-duration: 1.4s;
|
|
4064
4495
|
}
|
|
4065
4496
|
}
|
|
4066
4497
|
|
|
@@ -4098,7 +4529,7 @@
|
|
|
4098
4529
|
font-size: 1.25rem;
|
|
4099
4530
|
background: var(--kpt-color-overlay-scrim);
|
|
4100
4531
|
opacity: 0;
|
|
4101
|
-
transition: opacity 0.2s;
|
|
4532
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1));
|
|
4102
4533
|
}
|
|
4103
4534
|
.kpt-image__mask .kpt-icon-host {
|
|
4104
4535
|
width: 2.5rem;
|
|
@@ -4199,6 +4630,22 @@
|
|
|
4199
4630
|
opacity: 0.6;
|
|
4200
4631
|
background-color: var(--kpt-color-surface-variant);
|
|
4201
4632
|
}
|
|
4633
|
+
.kpt-input-host[data-speech] {
|
|
4634
|
+
position: relative;
|
|
4635
|
+
}
|
|
4636
|
+
.kpt-input-host[data-speech] .kpt-input__field {
|
|
4637
|
+
padding-inline-end: 2.5rem;
|
|
4638
|
+
transition-property: border-color, box-shadow, padding-inline-end;
|
|
4639
|
+
}
|
|
4640
|
+
.kpt-input-host[data-speech=listening] .kpt-input__field {
|
|
4641
|
+
padding-inline-end: 4.5rem;
|
|
4642
|
+
}
|
|
4643
|
+
.kpt-input__speech {
|
|
4644
|
+
position: absolute;
|
|
4645
|
+
inset-block: 0;
|
|
4646
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
4647
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
4648
|
+
}
|
|
4202
4649
|
}
|
|
4203
4650
|
|
|
4204
4651
|
/* src/lib/input-mask/input-mask.component.scss */
|
|
@@ -4233,6 +4680,14 @@
|
|
|
4233
4680
|
.kpt-input-mask--invalid {
|
|
4234
4681
|
border-color: var(--kpt-form-field-border-error);
|
|
4235
4682
|
}
|
|
4683
|
+
.kpt-input-mask__input {
|
|
4684
|
+
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);
|
|
4685
|
+
}
|
|
4686
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4687
|
+
.kpt-input-mask__input {
|
|
4688
|
+
transition: none;
|
|
4689
|
+
}
|
|
4690
|
+
}
|
|
4236
4691
|
}
|
|
4237
4692
|
|
|
4238
4693
|
/* src/lib/input-number/input-number.component.scss */
|
|
@@ -4298,6 +4753,14 @@
|
|
|
4298
4753
|
cursor: not-allowed;
|
|
4299
4754
|
opacity: 0.5;
|
|
4300
4755
|
}
|
|
4756
|
+
.kpt-input-number {
|
|
4757
|
+
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);
|
|
4758
|
+
}
|
|
4759
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4760
|
+
.kpt-input-number {
|
|
4761
|
+
transition: none;
|
|
4762
|
+
}
|
|
4763
|
+
}
|
|
4301
4764
|
}
|
|
4302
4765
|
|
|
4303
4766
|
/* src/lib/input-otp/input-otp.component.scss */
|
|
@@ -4339,6 +4802,14 @@
|
|
|
4339
4802
|
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4340
4803
|
user-select: none;
|
|
4341
4804
|
}
|
|
4805
|
+
.kpt-input-otp__cell {
|
|
4806
|
+
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);
|
|
4807
|
+
}
|
|
4808
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4809
|
+
.kpt-input-otp__cell {
|
|
4810
|
+
transition: none;
|
|
4811
|
+
}
|
|
4812
|
+
}
|
|
4342
4813
|
}
|
|
4343
4814
|
|
|
4344
4815
|
/* src/lib/knob/knob.component.scss */
|
|
@@ -4368,12 +4839,45 @@
|
|
|
4368
4839
|
.kpt-knob__value {
|
|
4369
4840
|
stroke: var(--kpt-color-primary);
|
|
4370
4841
|
}
|
|
4842
|
+
.kpt-knob svg {
|
|
4843
|
+
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);
|
|
4844
|
+
}
|
|
4845
|
+
.kpt-knob__value {
|
|
4846
|
+
transition: filter var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4847
|
+
}
|
|
4848
|
+
.kpt-knob__text {
|
|
4849
|
+
transform-box: fill-box;
|
|
4850
|
+
transform-origin: center;
|
|
4851
|
+
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);
|
|
4852
|
+
}
|
|
4853
|
+
.kpt-knob:hover:not([aria-disabled=true]) .kpt-knob__value {
|
|
4854
|
+
filter: drop-shadow(0 0 3px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent));
|
|
4855
|
+
}
|
|
4856
|
+
.kpt-knob.is-grabbing {
|
|
4857
|
+
cursor: grabbing;
|
|
4858
|
+
}
|
|
4859
|
+
.kpt-knob.is-grabbing svg {
|
|
4860
|
+
scale: 1.04;
|
|
4861
|
+
}
|
|
4862
|
+
.kpt-knob.is-grabbing .kpt-knob__value {
|
|
4863
|
+
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--kpt-color-primary) 60%, transparent));
|
|
4864
|
+
}
|
|
4865
|
+
.kpt-knob.is-grabbing .kpt-knob__text {
|
|
4866
|
+
scale: 1.1;
|
|
4867
|
+
}
|
|
4371
4868
|
.kpt-knob__text {
|
|
4372
4869
|
fill: var(--kpt-color-on-surface);
|
|
4373
4870
|
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4374
4871
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
4375
4872
|
font-variant-numeric: tabular-nums;
|
|
4376
4873
|
}
|
|
4874
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4875
|
+
.kpt-knob svg,
|
|
4876
|
+
.kpt-knob__value,
|
|
4877
|
+
.kpt-knob__text {
|
|
4878
|
+
transition: none;
|
|
4879
|
+
}
|
|
4880
|
+
}
|
|
4377
4881
|
}
|
|
4378
4882
|
|
|
4379
4883
|
/* src/lib/listbox/listbox.component.scss */
|
|
@@ -4459,6 +4963,105 @@
|
|
|
4459
4963
|
color: var(--kpt-color-on-surface-muted);
|
|
4460
4964
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
4461
4965
|
}
|
|
4966
|
+
.kpt-listbox {
|
|
4967
|
+
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);
|
|
4968
|
+
}
|
|
4969
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4970
|
+
.kpt-listbox {
|
|
4971
|
+
transition: none;
|
|
4972
|
+
}
|
|
4973
|
+
}
|
|
4974
|
+
}
|
|
4975
|
+
|
|
4976
|
+
/* src/lib/loader/loader.component.scss */
|
|
4977
|
+
@layer kpt.components {
|
|
4978
|
+
.kpt-loader-host {
|
|
4979
|
+
display: inline-flex;
|
|
4980
|
+
vertical-align: middle;
|
|
4981
|
+
}
|
|
4982
|
+
.kpt-loader {
|
|
4983
|
+
--_size: 5rem;
|
|
4984
|
+
position: relative;
|
|
4985
|
+
display: inline-grid;
|
|
4986
|
+
place-items: center;
|
|
4987
|
+
color: var(--kpt-color-text);
|
|
4988
|
+
}
|
|
4989
|
+
.kpt-loader__stage,
|
|
4990
|
+
.kpt-loader__content {
|
|
4991
|
+
grid-area: 1/1;
|
|
4992
|
+
}
|
|
4993
|
+
.kpt-loader__stage {
|
|
4994
|
+
display: block;
|
|
4995
|
+
line-height: 0;
|
|
4996
|
+
}
|
|
4997
|
+
.kpt-loader__svg {
|
|
4998
|
+
display: block;
|
|
4999
|
+
overflow: visible;
|
|
5000
|
+
width: calc(var(--_size) * var(--_vw, 100) / 100);
|
|
5001
|
+
height: calc(var(--_size) * var(--_vh, 100) / 100);
|
|
5002
|
+
}
|
|
5003
|
+
.kpt-loader__content {
|
|
5004
|
+
display: grid;
|
|
5005
|
+
place-items: center;
|
|
5006
|
+
width: calc(var(--_size) * 0.64);
|
|
5007
|
+
aspect-ratio: 1;
|
|
5008
|
+
transform-origin: 50% 50%;
|
|
5009
|
+
font-size: calc(var(--_size) * 0.3);
|
|
5010
|
+
}
|
|
5011
|
+
.kpt-loader__content:empty,
|
|
5012
|
+
.kpt-loader:not([data-variant=ring]) .kpt-loader__content {
|
|
5013
|
+
display: none;
|
|
5014
|
+
}
|
|
5015
|
+
.kpt-loader__blob {
|
|
5016
|
+
transition: fill calc(0.35s * var(--kpt-motion-scale, 1)) ease;
|
|
5017
|
+
}
|
|
5018
|
+
.kpt-loader__shadow {
|
|
5019
|
+
fill: var(--kpt-color-overlay-scrim);
|
|
5020
|
+
}
|
|
5021
|
+
.kpt-loader__mark path {
|
|
5022
|
+
fill: none;
|
|
5023
|
+
stroke: currentColor;
|
|
5024
|
+
stroke-width: 2.6;
|
|
5025
|
+
stroke-linecap: round;
|
|
5026
|
+
stroke-linejoin: round;
|
|
5027
|
+
}
|
|
5028
|
+
.kpt-loader__halo {
|
|
5029
|
+
fill: none;
|
|
5030
|
+
stroke: currentColor;
|
|
5031
|
+
}
|
|
5032
|
+
.kpt-loader__track,
|
|
5033
|
+
.kpt-loader__arc,
|
|
5034
|
+
.kpt-loader__line {
|
|
5035
|
+
fill: none;
|
|
5036
|
+
stroke-linecap: round;
|
|
5037
|
+
stroke-linejoin: round;
|
|
5038
|
+
transition: stroke calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
5039
|
+
}
|
|
5040
|
+
.kpt-loader__track {
|
|
5041
|
+
stroke: var(--kpt-color-border);
|
|
5042
|
+
}
|
|
5043
|
+
.kpt-loader__track,
|
|
5044
|
+
.kpt-loader__arc {
|
|
5045
|
+
stroke-width: 3.6;
|
|
5046
|
+
}
|
|
5047
|
+
.kpt-loader__line {
|
|
5048
|
+
stroke-width: 4;
|
|
5049
|
+
}
|
|
5050
|
+
.kpt-loader__text {
|
|
5051
|
+
font-family: var(--kpt-font-family-sans);
|
|
5052
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
5053
|
+
}
|
|
5054
|
+
.kpt-loader__label {
|
|
5055
|
+
position: absolute;
|
|
5056
|
+
width: 1px;
|
|
5057
|
+
height: 1px;
|
|
5058
|
+
margin: -1px;
|
|
5059
|
+
padding: 0;
|
|
5060
|
+
overflow: hidden;
|
|
5061
|
+
clip-path: inset(50%);
|
|
5062
|
+
white-space: nowrap;
|
|
5063
|
+
border: 0;
|
|
5064
|
+
}
|
|
4462
5065
|
}
|
|
4463
5066
|
|
|
4464
5067
|
/* src/lib/megamenu/megamenu.component.scss */
|
|
@@ -4545,7 +5148,7 @@
|
|
|
4545
5148
|
/* src/lib/mention/mention.component.scss */
|
|
4546
5149
|
@charset "UTF-8";
|
|
4547
5150
|
@layer kpt.components {
|
|
4548
|
-
/* Wzmianka żyje w zdaniu, więc host jest `inline`
|
|
5151
|
+
/* Wzmianka żyje w zdaniu, więc host jest `inline` - `inline-block` nie łamałby się razem
|
|
4549
5152
|
z wierszem i długi akapit rozjeżdżałby się na wąskim ekranie. */
|
|
4550
5153
|
.kpt-mention-host,
|
|
4551
5154
|
.kpt-mentions-host,
|
|
@@ -4563,7 +5166,7 @@
|
|
|
4563
5166
|
background: transparent;
|
|
4564
5167
|
color: var(--kpt-color-primary);
|
|
4565
5168
|
font: inherit;
|
|
4566
|
-
/* Kropkowana linia mówi
|
|
5169
|
+
/* Kropkowana linia mówi "tu coś jest do podejrzenia", zanim ktokolwiek najedzie - ciągłe
|
|
4567
5170
|
podkreślenie znaczyłoby link, a wzmianka zwykle nigdzie nie prowadzi, tylko otwiera kartę.
|
|
4568
5171
|
W spoczynku jest jasna, żeby nie rozbijała akapitu; pod kursorem i przy otwartej karcie
|
|
4569
5172
|
ciemnieje do koloru samej wzmianki. */
|
|
@@ -4586,7 +5189,7 @@
|
|
|
4586
5189
|
}
|
|
4587
5190
|
}
|
|
4588
5191
|
.kpt-mention {
|
|
4589
|
-
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje
|
|
5192
|
+
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje - więc także
|
|
4590
5193
|
bez kropkowanej linii, która tę obietnicę składa. */
|
|
4591
5194
|
}
|
|
4592
5195
|
.kpt-mention[data-plain] {
|
|
@@ -4646,7 +5249,7 @@
|
|
|
4646
5249
|
.kpt-menu__item--danger .kpt-icon-host {
|
|
4647
5250
|
color: var(--kpt-color-danger);
|
|
4648
5251
|
}
|
|
4649
|
-
/* Wiersz nagłówkowy
|
|
5252
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
4650
5253
|
.kpt-menu__header {
|
|
4651
5254
|
display: flex;
|
|
4652
5255
|
align-items: center;
|
|
@@ -4782,7 +5385,7 @@
|
|
|
4782
5385
|
}
|
|
4783
5386
|
.kpt-meter-group__segment {
|
|
4784
5387
|
height: 100%;
|
|
4785
|
-
transition: width 0.3s ease;
|
|
5388
|
+
transition: width calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
4786
5389
|
}
|
|
4787
5390
|
.kpt-meter-group__legend {
|
|
4788
5391
|
display: flex;
|
|
@@ -4894,6 +5497,28 @@
|
|
|
4894
5497
|
.kpt-order-list__item.is-dragging {
|
|
4895
5498
|
opacity: 0.5;
|
|
4896
5499
|
}
|
|
5500
|
+
.kpt-order-list__item--moving {
|
|
5501
|
+
position: relative;
|
|
5502
|
+
z-index: 1;
|
|
5503
|
+
}
|
|
5504
|
+
.kpt-order-list__item--moving.is-selected {
|
|
5505
|
+
background: linear-gradient(color-mix(in oklch, var(--kpt-color-primary) 16%, transparent) 0 0) var(--kpt-color-surface-raised);
|
|
5506
|
+
}
|
|
5507
|
+
::view-transition-group(.kpt-order-list-morph) {
|
|
5508
|
+
animation-duration: 0.5s;
|
|
5509
|
+
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);
|
|
5510
|
+
}
|
|
5511
|
+
::view-transition-image-pair(.kpt-order-list-morph) {
|
|
5512
|
+
overflow: clip;
|
|
5513
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5514
|
+
}
|
|
5515
|
+
::view-transition-old(.kpt-order-list-morph),
|
|
5516
|
+
::view-transition-new(.kpt-order-list-morph) {
|
|
5517
|
+
width: 100%;
|
|
5518
|
+
height: 100%;
|
|
5519
|
+
object-fit: none;
|
|
5520
|
+
object-position: 0 0;
|
|
5521
|
+
}
|
|
4897
5522
|
}
|
|
4898
5523
|
|
|
4899
5524
|
/* src/lib/paginator/paginator.component.scss */
|
|
@@ -4969,10 +5594,16 @@
|
|
|
4969
5594
|
.kpt-panel__toggle:hover {
|
|
4970
5595
|
color: var(--kpt-color-on-surface);
|
|
4971
5596
|
}
|
|
5597
|
+
.kpt-panel__body {
|
|
5598
|
+
padding: var(--kpt-space-4, 1rem);
|
|
5599
|
+
}
|
|
5600
|
+
.kpt-panel {
|
|
5601
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
5602
|
+
}
|
|
4972
5603
|
.kpt-panel__collapse {
|
|
4973
5604
|
display: grid;
|
|
4974
5605
|
grid-template-rows: 0fr;
|
|
4975
|
-
transition: grid-template-rows var(--
|
|
5606
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
4976
5607
|
}
|
|
4977
5608
|
.kpt-panel__collapse.is-open {
|
|
4978
5609
|
grid-template-rows: 1fr;
|
|
@@ -4981,12 +5612,58 @@
|
|
|
4981
5612
|
overflow: hidden;
|
|
4982
5613
|
min-height: 0;
|
|
4983
5614
|
}
|
|
4984
|
-
.kpt-
|
|
4985
|
-
|
|
5615
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5616
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
5617
|
+
}
|
|
5618
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron.is-open {
|
|
5619
|
+
transform: rotate(180deg);
|
|
5620
|
+
}
|
|
5621
|
+
.kpt-panel[data-motion=none] > .kpt-panel__collapse {
|
|
5622
|
+
transition: none;
|
|
5623
|
+
}
|
|
5624
|
+
.kpt-panel[data-motion=none] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5625
|
+
transition: none;
|
|
5626
|
+
}
|
|
5627
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5628
|
+
opacity: 0;
|
|
5629
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
5630
|
+
}
|
|
5631
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5632
|
+
opacity: 1;
|
|
5633
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
5634
|
+
}
|
|
5635
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse {
|
|
5636
|
+
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);
|
|
5637
|
+
}
|
|
5638
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse:not(.is-open) {
|
|
5639
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
5640
|
+
}
|
|
5641
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5642
|
+
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);
|
|
5643
|
+
}
|
|
5644
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5645
|
+
opacity: 0;
|
|
5646
|
+
translate: 0 -0.5rem;
|
|
5647
|
+
filter: blur(4px);
|
|
5648
|
+
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);
|
|
5649
|
+
}
|
|
5650
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5651
|
+
opacity: 1;
|
|
5652
|
+
translate: none;
|
|
5653
|
+
filter: none;
|
|
5654
|
+
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);
|
|
4986
5655
|
}
|
|
4987
5656
|
@media (prefers-reduced-motion: reduce) {
|
|
4988
|
-
.kpt-panel__collapse
|
|
5657
|
+
.kpt-panel__collapse,
|
|
5658
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5659
|
+
transition: none;
|
|
5660
|
+
}
|
|
5661
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body,
|
|
5662
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
4989
5663
|
transition: none;
|
|
5664
|
+
opacity: 1;
|
|
5665
|
+
translate: none;
|
|
5666
|
+
filter: none;
|
|
4990
5667
|
}
|
|
4991
5668
|
}
|
|
4992
5669
|
}
|
|
@@ -5056,27 +5733,84 @@
|
|
|
5056
5733
|
flex: 1;
|
|
5057
5734
|
}
|
|
5058
5735
|
.kpt-password__bar {
|
|
5736
|
+
position: relative;
|
|
5059
5737
|
height: 4px;
|
|
5060
5738
|
flex: 1;
|
|
5739
|
+
overflow: hidden;
|
|
5061
5740
|
border-radius: 2px;
|
|
5062
5741
|
background: var(--kpt-color-border);
|
|
5063
|
-
|
|
5742
|
+
}
|
|
5743
|
+
.kpt-password__bar::after {
|
|
5744
|
+
content: "";
|
|
5745
|
+
position: absolute;
|
|
5746
|
+
inset: 0;
|
|
5747
|
+
border-radius: inherit;
|
|
5748
|
+
background: var(--_bar-color, transparent);
|
|
5749
|
+
scale: 0 1;
|
|
5750
|
+
transform-origin: left center;
|
|
5751
|
+
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);
|
|
5752
|
+
}
|
|
5753
|
+
.kpt-password__bar:dir(rtl)::after {
|
|
5754
|
+
transform-origin: right center;
|
|
5755
|
+
}
|
|
5756
|
+
.kpt-password__bar.is-on::after {
|
|
5757
|
+
scale: 1 1;
|
|
5758
|
+
transition-delay: calc(var(--_i, 0) * 0.04s * var(--kpt-motion-scale, 1)), 0s;
|
|
5064
5759
|
}
|
|
5065
5760
|
.kpt-password__hint {
|
|
5066
5761
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
5067
5762
|
color: var(--kpt-color-on-surface-muted);
|
|
5068
5763
|
}
|
|
5069
|
-
.kpt-password__meter[data-score="1"]
|
|
5070
|
-
|
|
5764
|
+
.kpt-password__meter[data-score="1"] {
|
|
5765
|
+
--_bar-color: var(--kpt-color-danger);
|
|
5071
5766
|
}
|
|
5072
|
-
.kpt-password__meter[data-score="2"]
|
|
5073
|
-
|
|
5767
|
+
.kpt-password__meter[data-score="2"] {
|
|
5768
|
+
--_bar-color: var(--kpt-color-warning);
|
|
5074
5769
|
}
|
|
5075
|
-
.kpt-password__meter[data-score="3"]
|
|
5076
|
-
|
|
5770
|
+
.kpt-password__meter[data-score="3"] {
|
|
5771
|
+
--_bar-color: var(--kpt-color-info);
|
|
5772
|
+
}
|
|
5773
|
+
.kpt-password__meter[data-score="4"] {
|
|
5774
|
+
--_bar-color: var(--kpt-color-success);
|
|
5077
5775
|
}
|
|
5078
|
-
.kpt-
|
|
5079
|
-
|
|
5776
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5777
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5778
|
+
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);
|
|
5779
|
+
}
|
|
5780
|
+
@starting-style {
|
|
5781
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5782
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5783
|
+
opacity: 0;
|
|
5784
|
+
}
|
|
5785
|
+
}
|
|
5786
|
+
@starting-style {
|
|
5787
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__meter {
|
|
5788
|
+
translate: 0 -0.25rem;
|
|
5789
|
+
}
|
|
5790
|
+
}
|
|
5791
|
+
@starting-style {
|
|
5792
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__hint {
|
|
5793
|
+
translate: 0 0.35rem;
|
|
5794
|
+
filter: blur(3px);
|
|
5795
|
+
}
|
|
5796
|
+
}
|
|
5797
|
+
.kpt-password-host[data-motion=none] .kpt-password__bar::after {
|
|
5798
|
+
transition: none;
|
|
5799
|
+
}
|
|
5800
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5801
|
+
.kpt-password__bar::after,
|
|
5802
|
+
.kpt-password-host[data-live] .kpt-password__meter,
|
|
5803
|
+
.kpt-password-host[data-live] .kpt-password__hint {
|
|
5804
|
+
transition: none;
|
|
5805
|
+
}
|
|
5806
|
+
}
|
|
5807
|
+
.kpt-password {
|
|
5808
|
+
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);
|
|
5809
|
+
}
|
|
5810
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5811
|
+
.kpt-password {
|
|
5812
|
+
transition: none;
|
|
5813
|
+
}
|
|
5080
5814
|
}
|
|
5081
5815
|
}
|
|
5082
5816
|
|
|
@@ -5098,7 +5832,7 @@
|
|
|
5098
5832
|
color: var(--kpt-color-on-surface);
|
|
5099
5833
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
5100
5834
|
box-shadow: var(--kpt-elevation-3);
|
|
5101
|
-
/* Karta otwarta hoverem nie pokazuje obwódki fokusu
|
|
5835
|
+
/* Karta otwarta hoverem nie pokazuje obwódki fokusu - dostaje ją dopiero przypięta, bo wtedy
|
|
5102
5836
|
naprawdę trzyma fokus i użytkownik musi wiedzieć, gdzie jest. */
|
|
5103
5837
|
}
|
|
5104
5838
|
.kpt-peek__panel:focus {
|
|
@@ -5116,10 +5850,39 @@
|
|
|
5116
5850
|
display: block;
|
|
5117
5851
|
}
|
|
5118
5852
|
.kpt-pick-list {
|
|
5853
|
+
position: relative;
|
|
5119
5854
|
display: flex;
|
|
5120
5855
|
align-items: stretch;
|
|
5121
5856
|
gap: var(--kpt-space-3, 0.75rem);
|
|
5122
5857
|
}
|
|
5858
|
+
.kpt-pick-list__ghost {
|
|
5859
|
+
z-index: 2;
|
|
5860
|
+
list-style: none;
|
|
5861
|
+
background: var(--kpt-color-surface-raised);
|
|
5862
|
+
box-shadow: 0 4px 14px -6px var(--kpt-color-overlay-scrim);
|
|
5863
|
+
}
|
|
5864
|
+
.kpt-pick-list__item--waiting {
|
|
5865
|
+
visibility: hidden;
|
|
5866
|
+
}
|
|
5867
|
+
.kpt-pick-list__item--moving {
|
|
5868
|
+
position: relative;
|
|
5869
|
+
z-index: 1;
|
|
5870
|
+
}
|
|
5871
|
+
::view-transition-group(.kpt-pick-list-morph) {
|
|
5872
|
+
animation-duration: 0.5s;
|
|
5873
|
+
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);
|
|
5874
|
+
}
|
|
5875
|
+
::view-transition-image-pair(.kpt-pick-list-morph) {
|
|
5876
|
+
overflow: clip;
|
|
5877
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5878
|
+
}
|
|
5879
|
+
::view-transition-old(.kpt-pick-list-morph),
|
|
5880
|
+
::view-transition-new(.kpt-pick-list-morph) {
|
|
5881
|
+
width: 100%;
|
|
5882
|
+
height: 100%;
|
|
5883
|
+
object-fit: none;
|
|
5884
|
+
object-position: 0 0;
|
|
5885
|
+
}
|
|
5123
5886
|
.kpt-pick-list__col {
|
|
5124
5887
|
flex: 1;
|
|
5125
5888
|
min-width: 0;
|
|
@@ -5392,6 +6155,11 @@
|
|
|
5392
6155
|
stroke-dashoffset: -99;
|
|
5393
6156
|
}
|
|
5394
6157
|
}
|
|
6158
|
+
:root[data-kpt-motion=off] .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
6159
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate,
|
|
6160
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
|
|
6161
|
+
animation-duration: 3.2s;
|
|
6162
|
+
}
|
|
5395
6163
|
@media (prefers-reduced-motion: reduce) {
|
|
5396
6164
|
.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
5397
6165
|
.kpt-progress__circular.kpt-progress--indeterminate,
|
|
@@ -5469,6 +6237,22 @@
|
|
|
5469
6237
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
5470
6238
|
outline-offset: 2px;
|
|
5471
6239
|
}
|
|
6240
|
+
.kpt-radio-group[data-motion=spring] .kpt-radio__dot::after {
|
|
6241
|
+
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);
|
|
6242
|
+
}
|
|
6243
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot {
|
|
6244
|
+
transition: none;
|
|
6245
|
+
}
|
|
6246
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot::after {
|
|
6247
|
+
transition: none;
|
|
6248
|
+
}
|
|
6249
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6250
|
+
.kpt-radio__dot,
|
|
6251
|
+
.kpt-radio__dot::after,
|
|
6252
|
+
.kpt-radio-group[data-motion] .kpt-radio__dot::after {
|
|
6253
|
+
transition: none;
|
|
6254
|
+
}
|
|
6255
|
+
}
|
|
5472
6256
|
}
|
|
5473
6257
|
|
|
5474
6258
|
/* src/lib/rating/rating.component.scss */
|
|
@@ -5480,6 +6264,15 @@
|
|
|
5480
6264
|
display: inline-flex;
|
|
5481
6265
|
gap: 0.15rem;
|
|
5482
6266
|
font-size: 1.4rem;
|
|
6267
|
+
touch-action: pan-y;
|
|
6268
|
+
user-select: none;
|
|
6269
|
+
-webkit-user-select: none;
|
|
6270
|
+
}
|
|
6271
|
+
.kpt-rating.is-dragging {
|
|
6272
|
+
cursor: grabbing;
|
|
6273
|
+
}
|
|
6274
|
+
.kpt-rating.is-dragging .kpt-rating__hit {
|
|
6275
|
+
cursor: grabbing;
|
|
5483
6276
|
}
|
|
5484
6277
|
.kpt-rating__star {
|
|
5485
6278
|
position: relative;
|
|
@@ -5950,7 +6743,7 @@
|
|
|
5950
6743
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
5951
6744
|
color: var(--kpt-color-on-surface-muted);
|
|
5952
6745
|
}
|
|
5953
|
-
/* Lista podpowiedzi wzmianek
|
|
6746
|
+
/* Lista podpowiedzi wzmianek - ten sam wygląd co menu kontekstowe tabeli, bo obie wychodzą
|
|
5954
6747
|
spod kursora w środku treści i mają się czytać jak jedna rodzina. */
|
|
5955
6748
|
.kpt-rt-mentions {
|
|
5956
6749
|
min-inline-size: 12rem;
|
|
@@ -6086,6 +6879,14 @@
|
|
|
6086
6879
|
.kpt-rt-border__widths button:hover {
|
|
6087
6880
|
background: var(--kpt-color-muted);
|
|
6088
6881
|
}
|
|
6882
|
+
.kpt-rich-text {
|
|
6883
|
+
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);
|
|
6884
|
+
}
|
|
6885
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6886
|
+
.kpt-rich-text {
|
|
6887
|
+
transition: none;
|
|
6888
|
+
}
|
|
6889
|
+
}
|
|
6089
6890
|
}
|
|
6090
6891
|
|
|
6091
6892
|
/* src/lib/scroll-top/scroll-top.component.scss */
|
|
@@ -6112,7 +6913,7 @@
|
|
|
6112
6913
|
opacity: 0;
|
|
6113
6914
|
visibility: hidden;
|
|
6114
6915
|
transform: translateY(0.5rem);
|
|
6115
|
-
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
|
|
6916
|
+
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));
|
|
6116
6917
|
}
|
|
6117
6918
|
.kpt-scroll-top.is-visible {
|
|
6118
6919
|
opacity: 1;
|
|
@@ -6170,6 +6971,7 @@
|
|
|
6170
6971
|
background: var(--kpt-color-surface-variant);
|
|
6171
6972
|
}
|
|
6172
6973
|
.kpt-select__value {
|
|
6974
|
+
position: relative;
|
|
6173
6975
|
flex: 1;
|
|
6174
6976
|
min-width: 0;
|
|
6175
6977
|
display: flex;
|
|
@@ -6308,6 +7110,14 @@
|
|
|
6308
7110
|
color: var(--kpt-color-on-surface-muted);
|
|
6309
7111
|
text-align: center;
|
|
6310
7112
|
}
|
|
7113
|
+
.kpt-select {
|
|
7114
|
+
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);
|
|
7115
|
+
}
|
|
7116
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7117
|
+
.kpt-select {
|
|
7118
|
+
transition: none;
|
|
7119
|
+
}
|
|
7120
|
+
}
|
|
6311
7121
|
}
|
|
6312
7122
|
|
|
6313
7123
|
/* src/lib/sidenav/sidenav.component.scss */
|
|
@@ -6323,7 +7133,7 @@
|
|
|
6323
7133
|
color: var(--kpt-sidenav-fg);
|
|
6324
7134
|
border-inline-end: var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border);
|
|
6325
7135
|
}
|
|
6326
|
-
/* Przewija się tylko nawigacja
|
|
7136
|
+
/* Przewija się tylko nawigacja - stopka stoi poza tym obszarem. */
|
|
6327
7137
|
.kpt-sidenav__scroll {
|
|
6328
7138
|
display: flex;
|
|
6329
7139
|
flex-direction: column;
|
|
@@ -6386,6 +7196,9 @@
|
|
|
6386
7196
|
background-position: -200% 0;
|
|
6387
7197
|
}
|
|
6388
7198
|
}
|
|
7199
|
+
:root[data-kpt-motion=off] .kpt-skeleton {
|
|
7200
|
+
animation-duration: 2.8s;
|
|
7201
|
+
}
|
|
6389
7202
|
@media (prefers-reduced-motion: reduce) {
|
|
6390
7203
|
.kpt-skeleton {
|
|
6391
7204
|
animation: none;
|
|
@@ -6400,58 +7213,114 @@
|
|
|
6400
7213
|
align-items: center;
|
|
6401
7214
|
gap: var(--kpt-space-3, 0.75rem);
|
|
6402
7215
|
}
|
|
6403
|
-
.kpt-
|
|
6404
|
-
--
|
|
7216
|
+
.kpt-slider__track {
|
|
7217
|
+
--_p: 0;
|
|
7218
|
+
--_thumb: 1.1rem;
|
|
7219
|
+
--_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);
|
|
7220
|
+
position: relative;
|
|
6405
7221
|
flex: 1;
|
|
6406
7222
|
height: 1.25rem;
|
|
7223
|
+
}
|
|
7224
|
+
.kpt-slider__track[data-dragging] {
|
|
7225
|
+
--_glide: 0s linear;
|
|
7226
|
+
}
|
|
7227
|
+
.kpt-slider__input,
|
|
7228
|
+
.kpt-slider__thumb {
|
|
7229
|
+
position: absolute;
|
|
7230
|
+
inset: 0;
|
|
7231
|
+
width: 100%;
|
|
7232
|
+
height: 100%;
|
|
7233
|
+
margin: 0;
|
|
6407
7234
|
appearance: none;
|
|
6408
7235
|
background: none;
|
|
6409
7236
|
cursor: pointer;
|
|
6410
7237
|
}
|
|
6411
|
-
.kpt-slider__input::-webkit-slider-runnable-track
|
|
7238
|
+
.kpt-slider__input::-webkit-slider-runnable-track,
|
|
7239
|
+
.kpt-slider__thumb::-webkit-slider-runnable-track {
|
|
6412
7240
|
height: 0.4rem;
|
|
6413
|
-
|
|
6414
|
-
background: linear-gradient(to right, var(--kpt-color-primary) var(--_pct), var(--kpt-color-surface-variant) var(--_pct));
|
|
7241
|
+
background: none;
|
|
6415
7242
|
}
|
|
6416
|
-
.kpt-slider__input::-moz-range-track
|
|
7243
|
+
.kpt-slider__input::-moz-range-track,
|
|
7244
|
+
.kpt-slider__thumb::-moz-range-track {
|
|
6417
7245
|
height: 0.4rem;
|
|
6418
|
-
|
|
6419
|
-
background: var(--kpt-color-surface-variant);
|
|
7246
|
+
background: none;
|
|
6420
7247
|
}
|
|
6421
|
-
.kpt-slider__input::-moz-range-progress
|
|
6422
|
-
|
|
6423
|
-
|
|
6424
|
-
background: var(--kpt-color-primary);
|
|
7248
|
+
.kpt-slider__input::-moz-range-progress,
|
|
7249
|
+
.kpt-slider__thumb::-moz-range-progress {
|
|
7250
|
+
background: none;
|
|
6425
7251
|
}
|
|
6426
|
-
.kpt-slider__input::-webkit-slider-thumb
|
|
7252
|
+
.kpt-slider__input::-webkit-slider-thumb,
|
|
7253
|
+
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6427
7254
|
appearance: none;
|
|
6428
|
-
width:
|
|
6429
|
-
height:
|
|
7255
|
+
width: var(--_thumb);
|
|
7256
|
+
height: var(--_thumb);
|
|
6430
7257
|
margin-top: -0.35rem;
|
|
6431
7258
|
border-radius: 50%;
|
|
6432
|
-
background:
|
|
6433
|
-
box-shadow: var(--kpt-elevation-1);
|
|
7259
|
+
background: transparent;
|
|
6434
7260
|
}
|
|
6435
|
-
.kpt-slider__input::-moz-range-thumb
|
|
6436
|
-
|
|
6437
|
-
|
|
7261
|
+
.kpt-slider__input::-moz-range-thumb,
|
|
7262
|
+
.kpt-slider__thumb::-moz-range-thumb {
|
|
7263
|
+
width: var(--_thumb);
|
|
7264
|
+
height: var(--_thumb);
|
|
6438
7265
|
border: 0;
|
|
6439
7266
|
border-radius: 50%;
|
|
7267
|
+
background: transparent;
|
|
7268
|
+
}
|
|
7269
|
+
.kpt-slider__input:focus-visible,
|
|
7270
|
+
.kpt-slider__thumb:focus-visible {
|
|
7271
|
+
outline: none;
|
|
7272
|
+
}
|
|
7273
|
+
.kpt-slider__input:disabled,
|
|
7274
|
+
.kpt-slider__thumb:disabled {
|
|
7275
|
+
cursor: not-allowed;
|
|
7276
|
+
}
|
|
7277
|
+
.kpt-slider__bar {
|
|
7278
|
+
position: absolute;
|
|
7279
|
+
inset-inline: 0;
|
|
7280
|
+
top: 50%;
|
|
7281
|
+
translate: 0 -50%;
|
|
7282
|
+
height: 0.4rem;
|
|
7283
|
+
overflow: hidden;
|
|
7284
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7285
|
+
background: var(--kpt-color-surface-variant);
|
|
7286
|
+
pointer-events: none;
|
|
7287
|
+
}
|
|
7288
|
+
.kpt-slider__bar-fill {
|
|
7289
|
+
display: block;
|
|
7290
|
+
width: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_p));
|
|
7291
|
+
height: 100%;
|
|
7292
|
+
border-radius: inherit;
|
|
7293
|
+
background: var(--kpt-color-primary);
|
|
7294
|
+
transition: width var(--_glide);
|
|
7295
|
+
}
|
|
7296
|
+
.kpt-slider__knob {
|
|
7297
|
+
position: absolute;
|
|
7298
|
+
top: 50%;
|
|
7299
|
+
inset-inline-start: calc((100% - var(--_thumb)) * var(--_p));
|
|
7300
|
+
width: var(--_thumb);
|
|
7301
|
+
height: var(--_thumb);
|
|
7302
|
+
margin-top: calc(var(--_thumb) / -2);
|
|
7303
|
+
border-radius: 50%;
|
|
6440
7304
|
background: var(--kpt-color-primary);
|
|
6441
7305
|
box-shadow: var(--kpt-elevation-1);
|
|
7306
|
+
pointer-events: none;
|
|
7307
|
+
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);
|
|
6442
7308
|
}
|
|
6443
|
-
.kpt-slider__input:
|
|
6444
|
-
|
|
7309
|
+
.kpt-slider__input:hover:not(:disabled) ~ .kpt-slider__knob {
|
|
7310
|
+
scale: 1.15;
|
|
6445
7311
|
}
|
|
6446
|
-
.kpt-slider__input:
|
|
6447
|
-
|
|
7312
|
+
.kpt-slider__input:active:not(:disabled) {
|
|
7313
|
+
cursor: grabbing;
|
|
7314
|
+
}
|
|
7315
|
+
.kpt-slider__input:active:not(:disabled) ~ .kpt-slider__knob {
|
|
7316
|
+
scale: 1.3;
|
|
7317
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
6448
7318
|
}
|
|
6449
|
-
.kpt-slider__input:focus-visible
|
|
7319
|
+
.kpt-slider__input:focus-visible ~ .kpt-slider__knob {
|
|
6450
7320
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6451
7321
|
}
|
|
6452
|
-
.kpt-slider__input:disabled {
|
|
7322
|
+
.kpt-slider__input:disabled ~ * {
|
|
6453
7323
|
opacity: 0.5;
|
|
6454
|
-
cursor: not-allowed;
|
|
6455
7324
|
}
|
|
6456
7325
|
.kpt-slider__sr {
|
|
6457
7326
|
position: absolute;
|
|
@@ -6471,81 +7340,243 @@
|
|
|
6471
7340
|
font-variant-numeric: tabular-nums;
|
|
6472
7341
|
color: var(--kpt-color-on-surface);
|
|
6473
7342
|
}
|
|
6474
|
-
.kpt-
|
|
6475
|
-
|
|
6476
|
-
|
|
6477
|
-
|
|
6478
|
-
|
|
6479
|
-
align-items: center;
|
|
7343
|
+
.kpt-slider__track--range {
|
|
7344
|
+
--_lo: 0;
|
|
7345
|
+
--_hi: 1;
|
|
7346
|
+
cursor: pointer;
|
|
7347
|
+
touch-action: pan-y;
|
|
6480
7348
|
}
|
|
6481
|
-
.kpt-
|
|
6482
|
-
|
|
6483
|
-
|
|
6484
|
-
|
|
6485
|
-
border-radius: var(--kpt-radius-full, 9999px);
|
|
6486
|
-
background: var(--kpt-color-surface-variant);
|
|
7349
|
+
.kpt-slider__track--range .kpt-slider__bar-fill {
|
|
7350
|
+
width: calc((100% - var(--_thumb)) * (var(--_hi) - var(--_lo)));
|
|
7351
|
+
margin-inline-start: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_lo));
|
|
7352
|
+
transition: width var(--_glide), margin-inline-start var(--_glide);
|
|
6487
7353
|
}
|
|
6488
|
-
.kpt-
|
|
6489
|
-
|
|
6490
|
-
|
|
6491
|
-
|
|
6492
|
-
|
|
7354
|
+
.kpt-slider__knob--low {
|
|
7355
|
+
--_p: var(--_lo);
|
|
7356
|
+
}
|
|
7357
|
+
.kpt-slider__knob--high {
|
|
7358
|
+
--_p: var(--_hi);
|
|
6493
7359
|
}
|
|
6494
7360
|
.kpt-slider__thumb {
|
|
6495
|
-
position: absolute;
|
|
6496
|
-
inset-inline: 0;
|
|
6497
|
-
width: 100%;
|
|
6498
|
-
height: 1.25rem;
|
|
6499
|
-
margin: 0;
|
|
6500
|
-
appearance: none;
|
|
6501
|
-
background: none;
|
|
6502
7361
|
pointer-events: none;
|
|
6503
7362
|
}
|
|
6504
|
-
.kpt-slider__thumb::-webkit-slider-runnable-track {
|
|
6505
|
-
height: 0.4rem;
|
|
6506
|
-
background: none;
|
|
6507
|
-
}
|
|
6508
|
-
.kpt-slider__thumb::-moz-range-track {
|
|
6509
|
-
height: 0.4rem;
|
|
6510
|
-
background: none;
|
|
6511
|
-
}
|
|
6512
7363
|
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6513
7364
|
pointer-events: auto;
|
|
6514
|
-
appearance: none;
|
|
6515
|
-
width: 1.1rem;
|
|
6516
|
-
height: 1.1rem;
|
|
6517
|
-
margin-top: -0.35rem;
|
|
6518
|
-
border-radius: 50%;
|
|
6519
|
-
background: var(--kpt-color-primary);
|
|
6520
|
-
box-shadow: var(--kpt-elevation-1);
|
|
6521
|
-
cursor: pointer;
|
|
6522
7365
|
}
|
|
6523
7366
|
.kpt-slider__thumb::-moz-range-thumb {
|
|
6524
7367
|
pointer-events: auto;
|
|
6525
|
-
width: 1.1rem;
|
|
6526
|
-
height: 1.1rem;
|
|
6527
|
-
border: 0;
|
|
6528
|
-
border-radius: 50%;
|
|
6529
|
-
background: var(--kpt-color-primary);
|
|
6530
|
-
box-shadow: var(--kpt-elevation-1);
|
|
6531
|
-
cursor: pointer;
|
|
6532
7368
|
}
|
|
6533
|
-
.kpt-slider__thumb
|
|
6534
|
-
|
|
7369
|
+
.kpt-slider__thumb--high {
|
|
7370
|
+
z-index: 1;
|
|
7371
|
+
}
|
|
7372
|
+
.kpt-slider__track[data-low-top] .kpt-slider__thumb--low {
|
|
7373
|
+
z-index: 2;
|
|
6535
7374
|
}
|
|
6536
|
-
.kpt-slider__thumb:
|
|
7375
|
+
.kpt-slider__thumb--low:hover:not(:disabled) ~ .kpt-slider__knob--low {
|
|
7376
|
+
scale: 1.15;
|
|
7377
|
+
}
|
|
7378
|
+
.kpt-slider__thumb--low:active:not(:disabled) ~ .kpt-slider__knob--low,
|
|
7379
|
+
.kpt-slider__track[data-pressed=low] .kpt-slider__knob--low {
|
|
7380
|
+
scale: 1.3;
|
|
7381
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
7382
|
+
}
|
|
7383
|
+
.kpt-slider__thumb--low:focus-visible ~ .kpt-slider__knob--low {
|
|
6537
7384
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6538
7385
|
}
|
|
6539
|
-
.kpt-slider__thumb:
|
|
7386
|
+
.kpt-slider__thumb--high:hover:not(:disabled) ~ .kpt-slider__knob--high {
|
|
7387
|
+
scale: 1.15;
|
|
7388
|
+
}
|
|
7389
|
+
.kpt-slider__thumb--high:active:not(:disabled) ~ .kpt-slider__knob--high,
|
|
7390
|
+
.kpt-slider__track[data-pressed=high] .kpt-slider__knob--high {
|
|
7391
|
+
scale: 1.3;
|
|
7392
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
7393
|
+
}
|
|
7394
|
+
.kpt-slider__thumb--high:focus-visible ~ .kpt-slider__knob--high {
|
|
6540
7395
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6541
7396
|
}
|
|
6542
|
-
.kpt-slider__thumb
|
|
6543
|
-
|
|
7397
|
+
.kpt-slider__thumb:active:not(:disabled),
|
|
7398
|
+
.kpt-slider__track[data-pressed] {
|
|
7399
|
+
cursor: grabbing;
|
|
6544
7400
|
}
|
|
6545
|
-
.kpt-slider__thumb:disabled {
|
|
6546
|
-
opacity: 0.5;
|
|
7401
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) {
|
|
6547
7402
|
cursor: not-allowed;
|
|
6548
7403
|
}
|
|
7404
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) > :not(input) {
|
|
7405
|
+
opacity: 0.5;
|
|
7406
|
+
}
|
|
7407
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7408
|
+
.kpt-slider__bar-fill,
|
|
7409
|
+
.kpt-slider__knob {
|
|
7410
|
+
transition: none;
|
|
7411
|
+
}
|
|
7412
|
+
}
|
|
7413
|
+
}
|
|
7414
|
+
|
|
7415
|
+
/* src/lib/speech/speech-button.component.scss */
|
|
7416
|
+
@charset "UTF-8";
|
|
7417
|
+
@layer kpt.components {
|
|
7418
|
+
/* Kolor nasłuchu: "stop" i fala. Domyślnie kolor motywu; `listeningColor` wybiera inną rolę,
|
|
7419
|
+
a `--kpt-speech-color` / `--kpt-speech-on-color` dowolną barwę - obie dziedziczą, więc da się je
|
|
7420
|
+
ustawić na polu z wbudowanym mikrofonem albo globalnie w `:root`. */
|
|
7421
|
+
.kpt-speech-button-host {
|
|
7422
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-primary));
|
|
7423
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-primary));
|
|
7424
|
+
}
|
|
7425
|
+
.kpt-speech-button-host[data-color=danger] {
|
|
7426
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-danger));
|
|
7427
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-danger));
|
|
7428
|
+
}
|
|
7429
|
+
.kpt-speech-button-host[data-color=success] {
|
|
7430
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-success-bg));
|
|
7431
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-success-fg));
|
|
7432
|
+
}
|
|
7433
|
+
.kpt-speech-button-host[data-color=warning] {
|
|
7434
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-warning-bg));
|
|
7435
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-warning-fg));
|
|
7436
|
+
}
|
|
7437
|
+
.kpt-speech-button-host[data-color=info] {
|
|
7438
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-info-bg));
|
|
7439
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-info-fg));
|
|
7440
|
+
}
|
|
7441
|
+
.kpt-speech-button-host {
|
|
7442
|
+
display: inline-flex;
|
|
7443
|
+
align-items: center;
|
|
7444
|
+
gap: var(--kpt-space-2, 0.5rem);
|
|
7445
|
+
vertical-align: middle;
|
|
7446
|
+
}
|
|
7447
|
+
.kpt-speech-button-host[hidden] {
|
|
7448
|
+
display: none;
|
|
7449
|
+
}
|
|
7450
|
+
/* Fala stoi przed przyciskiem (domyślnie) albo za nim - kolejność wizualna, DOM bez zmian. */
|
|
7451
|
+
.kpt-speech-button-host .kpt-speech-button__wave {
|
|
7452
|
+
order: -1;
|
|
7453
|
+
/* Fala w kolorze "stop"; `--kpt-speech-wave-color` wciąż ma pierwszeństwo. */
|
|
7454
|
+
--_color: var(--kpt-speech-wave-color, var(--_accent));
|
|
7455
|
+
animation: kpt-speech-button-wave-in var(--kpt-motion-duration-base, 0.2s) ease-out;
|
|
7456
|
+
}
|
|
7457
|
+
.kpt-speech-button-host[data-wave-position=end] .kpt-speech-button__wave {
|
|
7458
|
+
order: 1;
|
|
7459
|
+
}
|
|
7460
|
+
/* "Stop" w trakcie nasłuchu - wypełniony kolorem nasłuchu zamiast wariantu `filled`. */
|
|
7461
|
+
.kpt-speech-button-host .kpt-icon-button[aria-pressed=true] {
|
|
7462
|
+
--_bg: var(--_accent);
|
|
7463
|
+
--_fg: var(--_on-accent);
|
|
7464
|
+
--_bg-hover: color-mix(in oklab, var(--_accent) 88%, black);
|
|
7465
|
+
}
|
|
7466
|
+
@keyframes kpt-speech-button-wave-in {
|
|
7467
|
+
from {
|
|
7468
|
+
opacity: 0;
|
|
7469
|
+
transform: scaleX(0.4);
|
|
7470
|
+
}
|
|
7471
|
+
}
|
|
7472
|
+
/* Region statusu: odczytywany, niewidoczny. Własna reguła, bo komponent nie może zakładać,
|
|
7473
|
+
że aplikacja wczytała `@konce-pt/styles` z `.kpt-visually-hidden`. */
|
|
7474
|
+
.kpt-speech-button__status {
|
|
7475
|
+
position: absolute;
|
|
7476
|
+
width: 1px;
|
|
7477
|
+
height: 1px;
|
|
7478
|
+
margin: -1px;
|
|
7479
|
+
padding: 0;
|
|
7480
|
+
overflow: hidden;
|
|
7481
|
+
clip-path: inset(50%);
|
|
7482
|
+
white-space: nowrap;
|
|
7483
|
+
border: 0;
|
|
7484
|
+
}
|
|
7485
|
+
/* Tekst tymczasowy w celach spoza pól tekstowych (`@konce-pt/speech`): nakładka przy kursorze
|
|
7486
|
+
w contenteditable i końcówka podglądu w zwykłym elemencie. Klasy stawia rdzeń, nie szablon,
|
|
7487
|
+
więc reguły są globalne - nakładka wisi w `<body>`. */
|
|
7488
|
+
.kpt-speech-ghost {
|
|
7489
|
+
color: var(--kpt-color-text-muted);
|
|
7490
|
+
font-style: italic;
|
|
7491
|
+
background: var(--kpt-color-surface, transparent);
|
|
7492
|
+
}
|
|
7493
|
+
.kpt-speech-interim {
|
|
7494
|
+
color: var(--kpt-color-text-muted);
|
|
7495
|
+
font-style: italic;
|
|
7496
|
+
}
|
|
7497
|
+
}
|
|
7498
|
+
|
|
7499
|
+
/* src/lib/speech/speech-wave.component.scss */
|
|
7500
|
+
@charset "UTF-8";
|
|
7501
|
+
@layer kpt.components {
|
|
7502
|
+
.kpt-speech-wave-host {
|
|
7503
|
+
--_height: 1.25rem;
|
|
7504
|
+
--_bar: 0.1875rem;
|
|
7505
|
+
--_color: var(--kpt-speech-wave-color, var(--kpt-color-primary));
|
|
7506
|
+
display: inline-flex;
|
|
7507
|
+
align-items: center;
|
|
7508
|
+
gap: 0.125rem;
|
|
7509
|
+
block-size: var(--_height);
|
|
7510
|
+
color: var(--_color);
|
|
7511
|
+
}
|
|
7512
|
+
.kpt-speech-wave__bar {
|
|
7513
|
+
/* Każdy słupek ma własny szczyt fali syntetycznej - środek najwyżej, boki niżej. */
|
|
7514
|
+
--_peak: 0.7;
|
|
7515
|
+
inline-size: var(--_bar);
|
|
7516
|
+
block-size: 100%;
|
|
7517
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7518
|
+
background: currentColor;
|
|
7519
|
+
transform-origin: center;
|
|
7520
|
+
transform: scaleY(0.18);
|
|
7521
|
+
}
|
|
7522
|
+
.kpt-speech-wave__bar:nth-child(5n+2), .kpt-speech-wave__bar:nth-child(5n+4) {
|
|
7523
|
+
--_peak: 0.85;
|
|
7524
|
+
}
|
|
7525
|
+
.kpt-speech-wave__bar:nth-child(5n+3) {
|
|
7526
|
+
--_peak: 1;
|
|
7527
|
+
}
|
|
7528
|
+
/* Na żywo: wysokość z miernika. Krótkie przejście wygładza 60 klatek na sekundę w ruch,
|
|
7529
|
+
a nie w skoki; nigdy poniżej kreski, żeby cisza nie znikała z ekranu. */
|
|
7530
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7531
|
+
transform: scaleY(max(0.18, var(--_level, 0)));
|
|
7532
|
+
transition: transform calc(0.08s * var(--kpt-motion-scale, 1)) linear;
|
|
7533
|
+
}
|
|
7534
|
+
/* Syntetycznie: każdy słupek oscyluje do swojego szczytu z przesunięciem fazy. Bez głosu
|
|
7535
|
+
(`data-active` nieobecne) amplituda maleje, ale fala nie staje - widać, że mikrofon słucha. */
|
|
7536
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7537
|
+
--_gain: 0.35;
|
|
7538
|
+
animation: kpt-speech-wave-bounce 0.9s ease-in-out infinite alternate;
|
|
7539
|
+
animation-delay: calc(var(--_i, 0) * -0.23s);
|
|
7540
|
+
}
|
|
7541
|
+
.kpt-speech-wave-host[data-mode=synthetic][data-active] .kpt-speech-wave__bar {
|
|
7542
|
+
--_gain: 1;
|
|
7543
|
+
animation-duration: 0.55s;
|
|
7544
|
+
}
|
|
7545
|
+
@keyframes kpt-speech-wave-bounce {
|
|
7546
|
+
from {
|
|
7547
|
+
transform: scaleY(0.18);
|
|
7548
|
+
}
|
|
7549
|
+
to {
|
|
7550
|
+
transform: scaleY(max(0.18, var(--_peak) * var(--_gain)));
|
|
7551
|
+
}
|
|
7552
|
+
}
|
|
7553
|
+
@keyframes kpt-speech-wave-pulse {
|
|
7554
|
+
0%, 100% {
|
|
7555
|
+
opacity: 0.45;
|
|
7556
|
+
}
|
|
7557
|
+
50% {
|
|
7558
|
+
opacity: 1;
|
|
7559
|
+
}
|
|
7560
|
+
}
|
|
7561
|
+
/* Fala syntetyczna to wskaźnik stanu jak kropki pisania: przy wyłączonym ruchu nie staje,
|
|
7562
|
+
tylko zamienia skakanie na spokojne pulsowanie - nieruchome słupki wyglądałyby jak ozdoba,
|
|
7563
|
+
nie jak nasłuch. Fala na żywo niesie informację (głośność), więc zostaje - traci tylko
|
|
7564
|
+
wygładzające przejście (to robi już mnożnik `--kpt-motion-scale`). */
|
|
7565
|
+
:root[data-kpt-motion=off] .kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7566
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7567
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7568
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7569
|
+
}
|
|
7570
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7571
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7572
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7573
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7574
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7575
|
+
}
|
|
7576
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7577
|
+
transition: none;
|
|
7578
|
+
}
|
|
7579
|
+
}
|
|
6549
7580
|
}
|
|
6550
7581
|
|
|
6551
7582
|
/* src/lib/speed-dial/speed-dial.component.scss */
|
|
@@ -6560,7 +7591,7 @@
|
|
|
6560
7591
|
}
|
|
6561
7592
|
.kpt-speed-dial__trigger-icon {
|
|
6562
7593
|
display: inline-flex;
|
|
6563
|
-
transition: transform 0.
|
|
7594
|
+
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);
|
|
6564
7595
|
}
|
|
6565
7596
|
.kpt-speed-dial.is-open .kpt-speed-dial__trigger-icon {
|
|
6566
7597
|
transform: rotate(45deg);
|
|
@@ -6569,16 +7600,14 @@
|
|
|
6569
7600
|
position: absolute;
|
|
6570
7601
|
display: flex;
|
|
6571
7602
|
gap: var(--kpt-space-2, 0.5rem);
|
|
6572
|
-
opacity: 0;
|
|
6573
7603
|
pointer-events: none;
|
|
6574
7604
|
visibility: hidden;
|
|
6575
|
-
transition:
|
|
7605
|
+
transition: visibility 0s linear calc(0.4s * var(--kpt-motion-scale, 1));
|
|
6576
7606
|
}
|
|
6577
7607
|
.kpt-speed-dial.is-open .kpt-speed-dial__actions {
|
|
6578
|
-
opacity: 1;
|
|
6579
7608
|
pointer-events: auto;
|
|
6580
7609
|
visibility: visible;
|
|
6581
|
-
transition:
|
|
7610
|
+
transition: visibility 0s;
|
|
6582
7611
|
}
|
|
6583
7612
|
.kpt-speed-dial[data-direction=up] .kpt-speed-dial__actions {
|
|
6584
7613
|
flex-direction: column-reverse;
|
|
@@ -6604,7 +7633,71 @@
|
|
|
6604
7633
|
top: 50%;
|
|
6605
7634
|
transform: translateY(-50%);
|
|
6606
7635
|
}
|
|
7636
|
+
.kpt-speed-dial[data-direction=up] {
|
|
7637
|
+
--_from: 0 0.75rem;
|
|
7638
|
+
}
|
|
7639
|
+
.kpt-speed-dial[data-direction=down] {
|
|
7640
|
+
--_from: 0 -0.75rem;
|
|
7641
|
+
}
|
|
7642
|
+
.kpt-speed-dial[data-direction=left] {
|
|
7643
|
+
--_from: 0.75rem 0;
|
|
7644
|
+
}
|
|
7645
|
+
.kpt-speed-dial[data-direction=right] {
|
|
7646
|
+
--_from: -0.75rem 0;
|
|
7647
|
+
}
|
|
7648
|
+
.kpt-speed-dial__action:nth-child(1) {
|
|
7649
|
+
--_i: 0;
|
|
7650
|
+
}
|
|
7651
|
+
.kpt-speed-dial__action:nth-last-child(1) {
|
|
7652
|
+
--_r: 0;
|
|
7653
|
+
}
|
|
7654
|
+
.kpt-speed-dial__action:nth-child(2) {
|
|
7655
|
+
--_i: 1;
|
|
7656
|
+
}
|
|
7657
|
+
.kpt-speed-dial__action:nth-last-child(2) {
|
|
7658
|
+
--_r: 1;
|
|
7659
|
+
}
|
|
7660
|
+
.kpt-speed-dial__action:nth-child(3) {
|
|
7661
|
+
--_i: 2;
|
|
7662
|
+
}
|
|
7663
|
+
.kpt-speed-dial__action:nth-last-child(3) {
|
|
7664
|
+
--_r: 2;
|
|
7665
|
+
}
|
|
7666
|
+
.kpt-speed-dial__action:nth-child(4) {
|
|
7667
|
+
--_i: 3;
|
|
7668
|
+
}
|
|
7669
|
+
.kpt-speed-dial__action:nth-last-child(4) {
|
|
7670
|
+
--_r: 3;
|
|
7671
|
+
}
|
|
7672
|
+
.kpt-speed-dial__action:nth-child(5) {
|
|
7673
|
+
--_i: 4;
|
|
7674
|
+
}
|
|
7675
|
+
.kpt-speed-dial__action:nth-last-child(5) {
|
|
7676
|
+
--_r: 4;
|
|
7677
|
+
}
|
|
7678
|
+
.kpt-speed-dial__action:nth-child(6) {
|
|
7679
|
+
--_i: 5;
|
|
7680
|
+
}
|
|
7681
|
+
.kpt-speed-dial__action:nth-last-child(6) {
|
|
7682
|
+
--_r: 5;
|
|
7683
|
+
}
|
|
7684
|
+
.kpt-speed-dial__action:nth-child(7) {
|
|
7685
|
+
--_i: 6;
|
|
7686
|
+
}
|
|
7687
|
+
.kpt-speed-dial__action:nth-last-child(7) {
|
|
7688
|
+
--_r: 6;
|
|
7689
|
+
}
|
|
7690
|
+
.kpt-speed-dial__action:nth-child(8) {
|
|
7691
|
+
--_i: 7;
|
|
7692
|
+
}
|
|
7693
|
+
.kpt-speed-dial__action:nth-last-child(8) {
|
|
7694
|
+
--_r: 7;
|
|
7695
|
+
}
|
|
6607
7696
|
.kpt-speed-dial__action {
|
|
7697
|
+
opacity: 0;
|
|
7698
|
+
transform: scale(0.5);
|
|
7699
|
+
translate: var(--_from, 0 0.75rem);
|
|
7700
|
+
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));
|
|
6608
7701
|
display: inline-flex;
|
|
6609
7702
|
align-items: center;
|
|
6610
7703
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6628,11 +7721,37 @@
|
|
|
6628
7721
|
.kpt-speed-dial__label {
|
|
6629
7722
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6630
7723
|
}
|
|
7724
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action {
|
|
7725
|
+
opacity: 1;
|
|
7726
|
+
transform: none;
|
|
7727
|
+
translate: 0 0;
|
|
7728
|
+
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));
|
|
7729
|
+
}
|
|
7730
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7731
|
+
--_press-t: 0.08s;
|
|
7732
|
+
--_press-e: ease-out;
|
|
7733
|
+
scale: 0.94;
|
|
7734
|
+
}
|
|
7735
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7736
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7737
|
+
scale: none;
|
|
7738
|
+
}
|
|
7739
|
+
}
|
|
7740
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:disabled {
|
|
7741
|
+
opacity: 0.5;
|
|
7742
|
+
}
|
|
6631
7743
|
.kpt-speed-dial__backdrop {
|
|
6632
7744
|
position: fixed;
|
|
6633
7745
|
inset: 0;
|
|
6634
7746
|
z-index: var(--kpt-z-overlay, 1000);
|
|
6635
7747
|
}
|
|
7748
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7749
|
+
.kpt-speed-dial__action,
|
|
7750
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action,
|
|
7751
|
+
.kpt-speed-dial__trigger-icon {
|
|
7752
|
+
transition: none;
|
|
7753
|
+
}
|
|
7754
|
+
}
|
|
6636
7755
|
}
|
|
6637
7756
|
|
|
6638
7757
|
/* src/lib/spinner/spinner.component.scss */
|
|
@@ -6659,6 +7778,9 @@
|
|
|
6659
7778
|
animation-duration: 1.4s;
|
|
6660
7779
|
}
|
|
6661
7780
|
}
|
|
7781
|
+
:root[data-kpt-motion=off] .kpt-spinner {
|
|
7782
|
+
animation-duration: 1.4s;
|
|
7783
|
+
}
|
|
6662
7784
|
.kpt-spinner__label {
|
|
6663
7785
|
position: absolute;
|
|
6664
7786
|
width: 1px;
|
|
@@ -6685,6 +7807,17 @@
|
|
|
6685
7807
|
display: inline-flex;
|
|
6686
7808
|
border-radius: var(--kpt-button-radius, 0.5rem);
|
|
6687
7809
|
overflow: hidden;
|
|
7810
|
+
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));
|
|
7811
|
+
}
|
|
7812
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7813
|
+
--_press-t: 0.08s;
|
|
7814
|
+
--_press-e: ease-out;
|
|
7815
|
+
scale: 0.97;
|
|
7816
|
+
}
|
|
7817
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7818
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7819
|
+
scale: none;
|
|
7820
|
+
}
|
|
6688
7821
|
}
|
|
6689
7822
|
.kpt-split-button[data-variant=tonal] {
|
|
6690
7823
|
--_bg: var(--kpt-color-muted);
|
|
@@ -6751,6 +7884,23 @@
|
|
|
6751
7884
|
width: 2.25rem;
|
|
6752
7885
|
border-inline-start: 1px solid var(--_divider, color-mix(in oklch, var(--_fg) 25%, transparent));
|
|
6753
7886
|
}
|
|
7887
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7888
|
+
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);
|
|
7889
|
+
}
|
|
7890
|
+
.kpt-split-button__toggle[aria-expanded=true] .kpt-icon-host {
|
|
7891
|
+
rotate: 180deg;
|
|
7892
|
+
}
|
|
7893
|
+
.kpt-split-button__panel {
|
|
7894
|
+
transform-origin: top;
|
|
7895
|
+
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);
|
|
7896
|
+
}
|
|
7897
|
+
@starting-style {
|
|
7898
|
+
.kpt-split-button__panel {
|
|
7899
|
+
opacity: 0;
|
|
7900
|
+
scale: 1 0.92;
|
|
7901
|
+
translate: 0 -0.25rem;
|
|
7902
|
+
}
|
|
7903
|
+
}
|
|
6754
7904
|
.kpt-split-button__panel {
|
|
6755
7905
|
min-width: 11rem;
|
|
6756
7906
|
padding: 0.25rem;
|
|
@@ -6788,7 +7938,7 @@
|
|
|
6788
7938
|
color: var(--kpt-color-on-surface-muted);
|
|
6789
7939
|
}
|
|
6790
7940
|
.kpt-split-button {
|
|
6791
|
-
/* Wiersz nagłówkowy
|
|
7941
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
6792
7942
|
}
|
|
6793
7943
|
.kpt-split-button__header {
|
|
6794
7944
|
display: flex;
|
|
@@ -6826,6 +7976,14 @@
|
|
|
6826
7976
|
margin: 0.25rem 0;
|
|
6827
7977
|
background: var(--kpt-color-border);
|
|
6828
7978
|
}
|
|
7979
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7980
|
+
.kpt-split-button__panel {
|
|
7981
|
+
transition: none;
|
|
7982
|
+
}
|
|
7983
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7984
|
+
transition: none;
|
|
7985
|
+
}
|
|
7986
|
+
}
|
|
6829
7987
|
}
|
|
6830
7988
|
|
|
6831
7989
|
/* src/lib/splitter/splitter.component.scss */
|
|
@@ -6855,7 +8013,7 @@
|
|
|
6855
8013
|
.kpt-splitter__gutter {
|
|
6856
8014
|
flex: none;
|
|
6857
8015
|
background: var(--kpt-color-border);
|
|
6858
|
-
transition: background 0.15s;
|
|
8016
|
+
transition: background calc(0.15s * var(--kpt-motion-scale, 1));
|
|
6859
8017
|
}
|
|
6860
8018
|
.kpt-splitter__gutter:hover, .kpt-splitter__gutter:focus-visible {
|
|
6861
8019
|
background: var(--kpt-color-primary);
|
|
@@ -6875,6 +8033,7 @@
|
|
|
6875
8033
|
@layer kpt.components {
|
|
6876
8034
|
.kpt-stepper-host {
|
|
6877
8035
|
display: block;
|
|
8036
|
+
position: relative;
|
|
6878
8037
|
}
|
|
6879
8038
|
.kpt-stepper__header {
|
|
6880
8039
|
display: flex;
|
|
@@ -6884,6 +8043,7 @@
|
|
|
6884
8043
|
padding: 0;
|
|
6885
8044
|
}
|
|
6886
8045
|
.kpt-stepper__step {
|
|
8046
|
+
--_mark-delay: calc(var(--kpt-stepper-mark-delay, 0ms) * var(--kpt-motion-scale, 1));
|
|
6887
8047
|
display: flex;
|
|
6888
8048
|
align-items: center;
|
|
6889
8049
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6893,6 +8053,8 @@
|
|
|
6893
8053
|
flex: 0 0 auto;
|
|
6894
8054
|
}
|
|
6895
8055
|
.kpt-stepper__marker {
|
|
8056
|
+
position: relative;
|
|
8057
|
+
isolation: isolate;
|
|
6896
8058
|
display: inline-flex;
|
|
6897
8059
|
align-items: center;
|
|
6898
8060
|
justify-content: center;
|
|
@@ -6906,21 +8068,82 @@
|
|
|
6906
8068
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6907
8069
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
6908
8070
|
cursor: pointer;
|
|
8071
|
+
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);
|
|
8072
|
+
}
|
|
8073
|
+
.kpt-stepper__marker::after {
|
|
8074
|
+
content: "";
|
|
8075
|
+
position: absolute;
|
|
8076
|
+
inset: 0;
|
|
8077
|
+
z-index: -1;
|
|
8078
|
+
border-radius: inherit;
|
|
8079
|
+
background: var(--kpt-color-primary);
|
|
8080
|
+
clip-path: circle(0% at 50% 50%);
|
|
8081
|
+
transition: clip-path calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
8082
|
+
}
|
|
8083
|
+
.kpt-stepper__marker::before {
|
|
8084
|
+
content: "";
|
|
8085
|
+
position: absolute;
|
|
8086
|
+
inset: calc(-1 * var(--kpt-border-width-medium, 2px));
|
|
8087
|
+
border-radius: inherit;
|
|
8088
|
+
border: var(--kpt-border-width-medium, 2px) solid color-mix(in oklch, var(--kpt-color-primary) 55%, transparent);
|
|
8089
|
+
opacity: 0;
|
|
8090
|
+
pointer-events: none;
|
|
8091
|
+
}
|
|
8092
|
+
.kpt-stepper__num {
|
|
8093
|
+
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);
|
|
8094
|
+
}
|
|
8095
|
+
.kpt-stepper__check {
|
|
8096
|
+
position: absolute;
|
|
8097
|
+
color: var(--kpt-color-on-primary);
|
|
8098
|
+
opacity: 0;
|
|
8099
|
+
scale: 0.4;
|
|
8100
|
+
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);
|
|
6909
8101
|
}
|
|
6910
8102
|
.kpt-stepper__label {
|
|
6911
8103
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6912
8104
|
color: var(--kpt-color-on-surface-muted);
|
|
6913
8105
|
white-space: nowrap;
|
|
8106
|
+
transition: color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
6914
8107
|
}
|
|
6915
8108
|
.kpt-stepper__connector {
|
|
8109
|
+
position: relative;
|
|
8110
|
+
overflow: hidden;
|
|
6916
8111
|
flex: 1;
|
|
6917
8112
|
height: 2px;
|
|
6918
8113
|
margin-inline: var(--kpt-space-2, 0.5rem);
|
|
8114
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
6919
8115
|
background: var(--kpt-color-border);
|
|
6920
8116
|
}
|
|
8117
|
+
.kpt-stepper__connector::after {
|
|
8118
|
+
content: "";
|
|
8119
|
+
position: absolute;
|
|
8120
|
+
inset: 0;
|
|
8121
|
+
border-radius: inherit;
|
|
8122
|
+
background: var(--kpt-color-primary);
|
|
8123
|
+
transform: scaleX(0);
|
|
8124
|
+
transform-origin: left center;
|
|
8125
|
+
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));
|
|
8126
|
+
}
|
|
8127
|
+
.kpt-stepper__connector:dir(rtl)::after {
|
|
8128
|
+
transform-origin: right center;
|
|
8129
|
+
}
|
|
8130
|
+
.kpt-stepper__comet {
|
|
8131
|
+
position: absolute;
|
|
8132
|
+
top: 0;
|
|
8133
|
+
left: 0;
|
|
8134
|
+
width: 0.625rem;
|
|
8135
|
+
height: 0.625rem;
|
|
8136
|
+
margin: -0.3125rem 0 0 -0.3125rem;
|
|
8137
|
+
border-radius: 50%;
|
|
8138
|
+
background: var(--kpt-color-surface-raised);
|
|
8139
|
+
box-shadow: 0 0 0 2px var(--kpt-color-primary), 0 0 12px 4px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent);
|
|
8140
|
+
opacity: 0;
|
|
8141
|
+
pointer-events: none;
|
|
8142
|
+
}
|
|
6921
8143
|
.kpt-stepper__step.is-active .kpt-stepper__marker {
|
|
6922
8144
|
border-color: var(--kpt-color-primary);
|
|
6923
8145
|
color: var(--kpt-color-primary);
|
|
8146
|
+
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-primary) 14%, transparent);
|
|
6924
8147
|
}
|
|
6925
8148
|
.kpt-stepper__step.is-active .kpt-stepper__label {
|
|
6926
8149
|
color: var(--kpt-color-on-surface);
|
|
@@ -6928,33 +8151,56 @@
|
|
|
6928
8151
|
}
|
|
6929
8152
|
.kpt-stepper__step.is-done .kpt-stepper__marker {
|
|
6930
8153
|
border-color: var(--kpt-color-primary);
|
|
6931
|
-
background: var(--kpt-color-primary);
|
|
6932
8154
|
color: var(--kpt-color-on-primary);
|
|
6933
8155
|
}
|
|
6934
|
-
.kpt-stepper__step.is-done .kpt-
|
|
6935
|
-
|
|
8156
|
+
.kpt-stepper__step.is-done .kpt-stepper__marker::after {
|
|
8157
|
+
clip-path: circle(75% at 50% 50%);
|
|
8158
|
+
}
|
|
8159
|
+
.kpt-stepper__step.is-done .kpt-stepper__num {
|
|
8160
|
+
opacity: 0;
|
|
8161
|
+
scale: 0.4;
|
|
8162
|
+
}
|
|
8163
|
+
.kpt-stepper__step.is-done .kpt-stepper__check {
|
|
8164
|
+
opacity: 1;
|
|
8165
|
+
scale: 1;
|
|
8166
|
+
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));
|
|
8167
|
+
}
|
|
8168
|
+
.kpt-stepper__step.is-done .kpt-stepper__connector::after {
|
|
8169
|
+
transform: none;
|
|
6936
8170
|
}
|
|
6937
8171
|
.kpt-stepper__body {
|
|
8172
|
+
position: relative;
|
|
6938
8173
|
padding-block: var(--kpt-space-5, 1.25rem);
|
|
6939
8174
|
overflow-x: clip;
|
|
6940
8175
|
}
|
|
6941
8176
|
@keyframes kpt-stepper-enter {
|
|
6942
8177
|
from {
|
|
6943
8178
|
opacity: 0;
|
|
6944
|
-
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.
|
|
8179
|
+
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.125rem));
|
|
8180
|
+
filter: blur(4px);
|
|
6945
8181
|
}
|
|
6946
8182
|
to {
|
|
6947
8183
|
opacity: 1;
|
|
6948
8184
|
transform: none;
|
|
8185
|
+
filter: none;
|
|
6949
8186
|
}
|
|
6950
8187
|
}
|
|
6951
8188
|
.kpt-stepper__panel {
|
|
6952
|
-
animation: kpt-stepper-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-
|
|
8189
|
+
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;
|
|
6953
8190
|
}
|
|
6954
8191
|
@media (prefers-reduced-motion: reduce) {
|
|
6955
8192
|
.kpt-stepper__panel {
|
|
6956
8193
|
animation: none;
|
|
6957
8194
|
}
|
|
8195
|
+
.kpt-stepper__marker,
|
|
8196
|
+
.kpt-stepper__marker::after,
|
|
8197
|
+
.kpt-stepper__num,
|
|
8198
|
+
.kpt-stepper__check,
|
|
8199
|
+
.kpt-stepper__step.is-done .kpt-stepper__check,
|
|
8200
|
+
.kpt-stepper__label,
|
|
8201
|
+
.kpt-stepper__connector::after {
|
|
8202
|
+
transition: none;
|
|
8203
|
+
}
|
|
6958
8204
|
}
|
|
6959
8205
|
}
|
|
6960
8206
|
|
|
@@ -7020,9 +8266,18 @@
|
|
|
7020
8266
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
7021
8267
|
outline-offset: 2px;
|
|
7022
8268
|
}
|
|
8269
|
+
.kpt-switch[data-motion=spring] .kpt-switch__thumb {
|
|
8270
|
+
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);
|
|
8271
|
+
}
|
|
8272
|
+
.kpt-switch[data-motion=none] .kpt-switch__thumb,
|
|
8273
|
+
.kpt-switch[data-motion=none] .kpt-switch__track,
|
|
8274
|
+
.kpt-switch[data-motion=none] .kpt-switch__state {
|
|
8275
|
+
transition: none;
|
|
8276
|
+
}
|
|
7023
8277
|
@media (prefers-reduced-motion: reduce) {
|
|
7024
8278
|
.kpt-switch__thumb,
|
|
7025
|
-
.kpt-switch__track
|
|
8279
|
+
.kpt-switch__track,
|
|
8280
|
+
.kpt-switch[data-motion] .kpt-switch__thumb {
|
|
7026
8281
|
transition: none;
|
|
7027
8282
|
}
|
|
7028
8283
|
}
|
|
@@ -7082,7 +8337,7 @@
|
|
|
7082
8337
|
height: 2px;
|
|
7083
8338
|
background: var(--kpt-color-primary);
|
|
7084
8339
|
pointer-events: none;
|
|
7085
|
-
transition: transform var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard), width var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard);
|
|
8340
|
+
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);
|
|
7086
8341
|
}
|
|
7087
8342
|
.kpt-tabs__body {
|
|
7088
8343
|
padding-block: var(--kpt-space-4, 1rem);
|
|
@@ -7099,7 +8354,7 @@
|
|
|
7099
8354
|
}
|
|
7100
8355
|
}
|
|
7101
8356
|
.kpt-tabs__panel {
|
|
7102
|
-
animation: kpt-tabs-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard);
|
|
8357
|
+
animation: kpt-tabs-enter calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
7103
8358
|
}
|
|
7104
8359
|
@media (prefers-reduced-motion: reduce) {
|
|
7105
8360
|
.kpt-tabs__panel {
|
|
@@ -7158,6 +8413,30 @@
|
|
|
7158
8413
|
font-variant-numeric: tabular-nums;
|
|
7159
8414
|
color: var(--kpt-color-on-surface-muted);
|
|
7160
8415
|
}
|
|
8416
|
+
.kpt-textarea__field {
|
|
8417
|
+
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);
|
|
8418
|
+
}
|
|
8419
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8420
|
+
.kpt-textarea__field {
|
|
8421
|
+
transition: none;
|
|
8422
|
+
}
|
|
8423
|
+
}
|
|
8424
|
+
.kpt-textarea__box {
|
|
8425
|
+
position: relative;
|
|
8426
|
+
display: block;
|
|
8427
|
+
}
|
|
8428
|
+
.kpt-textarea-host[data-speech] .kpt-textarea__field {
|
|
8429
|
+
padding-inline-end: 2.75rem;
|
|
8430
|
+
}
|
|
8431
|
+
.kpt-textarea-host[data-speech=listening] .kpt-textarea__field {
|
|
8432
|
+
padding-inline-end: 4.75rem;
|
|
8433
|
+
}
|
|
8434
|
+
.kpt-textarea__speech {
|
|
8435
|
+
position: absolute;
|
|
8436
|
+
inset-block-start: var(--kpt-space-1, 0.25rem);
|
|
8437
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
8438
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
8439
|
+
}
|
|
7161
8440
|
}
|
|
7162
8441
|
|
|
7163
8442
|
/* src/lib/timeline/timeline.component.scss */
|
|
@@ -7249,23 +8528,51 @@
|
|
|
7249
8528
|
/* src/lib/toast/toast-container.component.scss */
|
|
7250
8529
|
@layer kpt.components {
|
|
7251
8530
|
.kpt-toast-container {
|
|
8531
|
+
--_offset: var(--kpt-toast-offset, var(--kpt-space-4, 1rem));
|
|
8532
|
+
--_enter: 0.5rem;
|
|
7252
8533
|
position: fixed;
|
|
7253
|
-
inset-block-end: var(--kpt-space-4, 1rem);
|
|
7254
|
-
inset-inline-end: var(--kpt-space-4, 1rem);
|
|
7255
8534
|
z-index: var(--kpt-z-toast, 1300);
|
|
7256
8535
|
display: flex;
|
|
7257
8536
|
flex-direction: column;
|
|
7258
8537
|
gap: var(--kpt-space-2, 0.5rem);
|
|
7259
|
-
|
|
8538
|
+
width: min(24rem, 100vw - 2 * var(--_offset));
|
|
7260
8539
|
pointer-events: none;
|
|
7261
8540
|
}
|
|
8541
|
+
.kpt-toast-container[data-position^=bottom] {
|
|
8542
|
+
inset-block-end: calc(var(--_offset) + env(safe-area-inset-bottom, 0px));
|
|
8543
|
+
}
|
|
8544
|
+
.kpt-toast-container[data-position^=top] {
|
|
8545
|
+
--_enter: -0.5rem;
|
|
8546
|
+
inset-block-start: calc(var(--_offset) + env(safe-area-inset-top, 0px));
|
|
8547
|
+
flex-direction: column-reverse;
|
|
8548
|
+
}
|
|
8549
|
+
.kpt-toast-container[data-position$=-start] {
|
|
8550
|
+
inset-inline-start: calc(var(--_offset) + env(safe-area-inset-left, 0px));
|
|
8551
|
+
}
|
|
8552
|
+
.kpt-toast-container[data-position$=-end] {
|
|
8553
|
+
inset-inline-end: calc(var(--_offset) + env(safe-area-inset-right, 0px));
|
|
8554
|
+
}
|
|
8555
|
+
.kpt-toast-container[data-position$=-center] {
|
|
8556
|
+
inset-inline: 0;
|
|
8557
|
+
margin-inline: auto;
|
|
8558
|
+
}
|
|
8559
|
+
@media (max-width: 40rem) {
|
|
8560
|
+
.kpt-toast-container[data-position] {
|
|
8561
|
+
inset-inline: var(--_offset);
|
|
8562
|
+
width: auto;
|
|
8563
|
+
margin-inline: 0;
|
|
8564
|
+
}
|
|
8565
|
+
}
|
|
7262
8566
|
.kpt-toast {
|
|
7263
8567
|
--_accent: var(--kpt-color-info);
|
|
8568
|
+
--_on: var(--kpt-color-info-contrast);
|
|
8569
|
+
position: relative;
|
|
8570
|
+
overflow: hidden;
|
|
7264
8571
|
pointer-events: auto;
|
|
7265
8572
|
display: flex;
|
|
7266
|
-
align-items:
|
|
8573
|
+
align-items: center;
|
|
7267
8574
|
gap: var(--kpt-space-3, 0.75rem);
|
|
7268
|
-
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
8575
|
+
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
7269
8576
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
7270
8577
|
border-inline-start: 3px solid var(--_accent);
|
|
7271
8578
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
@@ -7277,16 +8584,22 @@
|
|
|
7277
8584
|
}
|
|
7278
8585
|
.kpt-toast[data-variant=success] {
|
|
7279
8586
|
--_accent: var(--kpt-color-success);
|
|
8587
|
+
--_on: var(--kpt-color-success-contrast);
|
|
7280
8588
|
}
|
|
7281
8589
|
.kpt-toast[data-variant=warning] {
|
|
7282
8590
|
--_accent: var(--kpt-color-warning);
|
|
8591
|
+
--_on: var(--kpt-color-warning-contrast);
|
|
7283
8592
|
}
|
|
7284
8593
|
.kpt-toast[data-variant=danger] {
|
|
7285
8594
|
--_accent: var(--kpt-color-danger);
|
|
8595
|
+
--_on: var(--kpt-color-danger-contrast);
|
|
7286
8596
|
}
|
|
7287
8597
|
.kpt-toast__icon {
|
|
8598
|
+
flex: none;
|
|
8599
|
+
display: inline-grid;
|
|
8600
|
+
place-items: center;
|
|
7288
8601
|
color: var(--_accent);
|
|
7289
|
-
font-
|
|
8602
|
+
font-size: 1.15em;
|
|
7290
8603
|
}
|
|
7291
8604
|
.kpt-toast__content {
|
|
7292
8605
|
flex: 1;
|
|
@@ -7298,7 +8611,7 @@
|
|
|
7298
8611
|
}
|
|
7299
8612
|
.kpt-toast__action {
|
|
7300
8613
|
flex: none;
|
|
7301
|
-
|
|
8614
|
+
min-block-size: 1.75rem;
|
|
7302
8615
|
padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
|
|
7303
8616
|
border: 0;
|
|
7304
8617
|
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
@@ -7312,16 +8625,69 @@
|
|
|
7312
8625
|
background: var(--kpt-color-muted);
|
|
7313
8626
|
}
|
|
7314
8627
|
.kpt-toast__close {
|
|
7315
|
-
|
|
8628
|
+
flex: none;
|
|
8629
|
+
display: inline-grid;
|
|
8630
|
+
place-items: center;
|
|
8631
|
+
inline-size: 1.75rem;
|
|
8632
|
+
block-size: 1.75rem;
|
|
8633
|
+
padding: 0;
|
|
7316
8634
|
border: 0;
|
|
8635
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
8636
|
+
background: none;
|
|
7317
8637
|
cursor: pointer;
|
|
7318
8638
|
color: var(--kpt-color-on-surface-muted);
|
|
7319
8639
|
font-size: 1.15rem;
|
|
7320
8640
|
line-height: 1;
|
|
7321
|
-
padding: 0;
|
|
7322
8641
|
}
|
|
7323
8642
|
.kpt-toast__close:hover {
|
|
7324
8643
|
color: var(--kpt-color-on-surface);
|
|
8644
|
+
background: var(--kpt-color-muted);
|
|
8645
|
+
}
|
|
8646
|
+
.kpt-toast__action:focus-visible, .kpt-toast__close:focus-visible {
|
|
8647
|
+
outline: 2px solid var(--kpt-color-focus-ring);
|
|
8648
|
+
outline-offset: 1px;
|
|
8649
|
+
}
|
|
8650
|
+
.kpt-toast__timer {
|
|
8651
|
+
position: absolute;
|
|
8652
|
+
inset-inline: 0;
|
|
8653
|
+
inset-block-end: 0;
|
|
8654
|
+
block-size: 3px;
|
|
8655
|
+
background: var(--_accent);
|
|
8656
|
+
transform-origin: left center;
|
|
8657
|
+
animation: kpt-toast-timer var(--_duration, 4s) linear forwards;
|
|
8658
|
+
}
|
|
8659
|
+
.kpt-toast__timer:dir(rtl) {
|
|
8660
|
+
transform-origin: right center;
|
|
8661
|
+
}
|
|
8662
|
+
.kpt-toast[data-appearance=filled] {
|
|
8663
|
+
border-color: transparent;
|
|
8664
|
+
border-inline-start-width: var(--kpt-border-width-thin, 1px);
|
|
8665
|
+
background: var(--_accent);
|
|
8666
|
+
color: var(--_on);
|
|
8667
|
+
}
|
|
8668
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__icon,
|
|
8669
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action,
|
|
8670
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close {
|
|
8671
|
+
color: inherit;
|
|
8672
|
+
}
|
|
8673
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action {
|
|
8674
|
+
text-decoration: underline;
|
|
8675
|
+
text-underline-offset: 0.2em;
|
|
8676
|
+
}
|
|
8677
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:hover,
|
|
8678
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:hover {
|
|
8679
|
+
background: color-mix(in oklch, currentColor 14%, transparent);
|
|
8680
|
+
}
|
|
8681
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:focus-visible,
|
|
8682
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:focus-visible {
|
|
8683
|
+
outline-color: currentColor;
|
|
8684
|
+
}
|
|
8685
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__timer {
|
|
8686
|
+
background: currentColor;
|
|
8687
|
+
opacity: 0.45;
|
|
8688
|
+
}
|
|
8689
|
+
.kpt-toast-container[data-paused] .kpt-toast__timer {
|
|
8690
|
+
animation-play-state: paused;
|
|
7325
8691
|
}
|
|
7326
8692
|
.kpt-toast-container__live {
|
|
7327
8693
|
position: fixed;
|
|
@@ -7339,13 +8705,21 @@
|
|
|
7339
8705
|
@keyframes kpt-toast-in {
|
|
7340
8706
|
from {
|
|
7341
8707
|
opacity: 0;
|
|
7342
|
-
transform: translateY(0.5rem);
|
|
8708
|
+
transform: translateY(var(--_enter, 0.5rem));
|
|
7343
8709
|
}
|
|
7344
8710
|
to {
|
|
7345
8711
|
opacity: 1;
|
|
7346
8712
|
transform: translateY(0);
|
|
7347
8713
|
}
|
|
7348
8714
|
}
|
|
8715
|
+
@keyframes kpt-toast-timer {
|
|
8716
|
+
from {
|
|
8717
|
+
transform: scaleX(1);
|
|
8718
|
+
}
|
|
8719
|
+
to {
|
|
8720
|
+
transform: scaleX(0);
|
|
8721
|
+
}
|
|
8722
|
+
}
|
|
7349
8723
|
@media (prefers-reduced-motion: reduce) {
|
|
7350
8724
|
.kpt-toast {
|
|
7351
8725
|
animation: none;
|
|
@@ -7454,6 +8828,68 @@
|
|
|
7454
8828
|
.kpt-tree__chevron.is-open {
|
|
7455
8829
|
transform: rotate(90deg);
|
|
7456
8830
|
}
|
|
8831
|
+
.kpt-tree {
|
|
8832
|
+
--_d: calc(var(--kpt-motion-duration-slow, 320ms) * var(--kpt-motion-scale, 1));
|
|
8833
|
+
}
|
|
8834
|
+
.kpt-tree__collapse {
|
|
8835
|
+
display: grid;
|
|
8836
|
+
grid-template-rows: 0fr;
|
|
8837
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
8838
|
+
}
|
|
8839
|
+
.kpt-tree__collapse.is-open {
|
|
8840
|
+
grid-template-rows: 1fr;
|
|
8841
|
+
}
|
|
8842
|
+
.kpt-tree__collapse > .kpt-tree__group {
|
|
8843
|
+
overflow: hidden;
|
|
8844
|
+
min-height: 0;
|
|
8845
|
+
}
|
|
8846
|
+
@starting-style {
|
|
8847
|
+
.kpt-tree.is-live .kpt-tree__collapse.is-open {
|
|
8848
|
+
grid-template-rows: 0fr;
|
|
8849
|
+
}
|
|
8850
|
+
}
|
|
8851
|
+
.kpt-tree[data-motion=none] .kpt-tree__collapse,
|
|
8852
|
+
.kpt-tree[data-motion=none] .kpt-tree__chevron {
|
|
8853
|
+
transition: none;
|
|
8854
|
+
}
|
|
8855
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8856
|
+
transition: opacity calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard);
|
|
8857
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 24ms * var(--kpt-motion-scale, 1));
|
|
8858
|
+
}
|
|
8859
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse {
|
|
8860
|
+
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);
|
|
8861
|
+
}
|
|
8862
|
+
.kpt-tree[data-motion=spring] .kpt-tree__chevron {
|
|
8863
|
+
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);
|
|
8864
|
+
}
|
|
8865
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8866
|
+
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);
|
|
8867
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 28ms * var(--kpt-motion-scale, 1));
|
|
8868
|
+
}
|
|
8869
|
+
@starting-style {
|
|
8870
|
+
.kpt-tree.is-live[data-motion=fade] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8871
|
+
opacity: 0;
|
|
8872
|
+
}
|
|
8873
|
+
}
|
|
8874
|
+
@starting-style {
|
|
8875
|
+
.kpt-tree.is-live[data-motion=spring] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8876
|
+
opacity: 0;
|
|
8877
|
+
translate: -0.5rem 0;
|
|
8878
|
+
filter: blur(3px);
|
|
8879
|
+
}
|
|
8880
|
+
}
|
|
8881
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node,
|
|
8882
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node {
|
|
8883
|
+
opacity: 0;
|
|
8884
|
+
transition-delay: 0s;
|
|
8885
|
+
}
|
|
8886
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8887
|
+
.kpt-tree__collapse,
|
|
8888
|
+
.kpt-tree__chevron,
|
|
8889
|
+
.kpt-tree[data-motion] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8890
|
+
transition: none;
|
|
8891
|
+
}
|
|
8892
|
+
}
|
|
7457
8893
|
.kpt-tree__icon {
|
|
7458
8894
|
color: var(--kpt-color-on-surface-muted);
|
|
7459
8895
|
}
|
|
@@ -7464,6 +8900,82 @@
|
|
|
7464
8900
|
}
|
|
7465
8901
|
}
|
|
7466
8902
|
|
|
8903
|
+
/* src/lib/update/update.component.scss */
|
|
8904
|
+
@layer kpt.components {
|
|
8905
|
+
.kpt-update-host {
|
|
8906
|
+
display: block;
|
|
8907
|
+
}
|
|
8908
|
+
.kpt-update {
|
|
8909
|
+
--_tile: var(--kpt-color-info);
|
|
8910
|
+
--_tile-on: var(--kpt-color-info-contrast);
|
|
8911
|
+
display: flex;
|
|
8912
|
+
align-items: center;
|
|
8913
|
+
gap: var(--kpt-space-4);
|
|
8914
|
+
min-width: 0;
|
|
8915
|
+
color: var(--kpt-color-text);
|
|
8916
|
+
}
|
|
8917
|
+
.kpt-update__ring {
|
|
8918
|
+
flex: none;
|
|
8919
|
+
}
|
|
8920
|
+
.kpt-update__icon {
|
|
8921
|
+
display: grid;
|
|
8922
|
+
place-items: center;
|
|
8923
|
+
width: 100%;
|
|
8924
|
+
height: 100%;
|
|
8925
|
+
overflow: hidden;
|
|
8926
|
+
border-radius: 28%;
|
|
8927
|
+
background: linear-gradient(140deg, var(--_tile), color-mix(in oklch, var(--_tile) 55%, var(--kpt-color-success)));
|
|
8928
|
+
color: var(--_tile-on);
|
|
8929
|
+
box-shadow: var(--kpt-shadow-sm);
|
|
8930
|
+
font-size: calc(var(--_size, 5rem) * 0.28);
|
|
8931
|
+
}
|
|
8932
|
+
.kpt-update__icon > img,
|
|
8933
|
+
.kpt-update__icon > svg {
|
|
8934
|
+
width: 100%;
|
|
8935
|
+
height: 100%;
|
|
8936
|
+
object-fit: cover;
|
|
8937
|
+
}
|
|
8938
|
+
.kpt-update__meta {
|
|
8939
|
+
display: grid;
|
|
8940
|
+
gap: var(--kpt-space-1);
|
|
8941
|
+
min-width: 0;
|
|
8942
|
+
}
|
|
8943
|
+
.kpt-update__name {
|
|
8944
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
8945
|
+
overflow: hidden;
|
|
8946
|
+
text-overflow: ellipsis;
|
|
8947
|
+
white-space: nowrap;
|
|
8948
|
+
}
|
|
8949
|
+
.kpt-update__line {
|
|
8950
|
+
font-size: var(--kpt-font-size-sm);
|
|
8951
|
+
color: var(--kpt-color-text-muted);
|
|
8952
|
+
font-variant-numeric: tabular-nums;
|
|
8953
|
+
}
|
|
8954
|
+
.kpt-update__swap {
|
|
8955
|
+
display: inline-grid;
|
|
8956
|
+
justify-items: start;
|
|
8957
|
+
}
|
|
8958
|
+
.kpt-update__swap > * {
|
|
8959
|
+
grid-area: 1/1;
|
|
8960
|
+
white-space: nowrap;
|
|
8961
|
+
}
|
|
8962
|
+
.kpt-update__action {
|
|
8963
|
+
justify-self: start;
|
|
8964
|
+
margin-block-start: var(--kpt-space-1);
|
|
8965
|
+
}
|
|
8966
|
+
.kpt-update__live {
|
|
8967
|
+
position: absolute;
|
|
8968
|
+
width: 1px;
|
|
8969
|
+
height: 1px;
|
|
8970
|
+
margin: -1px;
|
|
8971
|
+
padding: 0;
|
|
8972
|
+
overflow: hidden;
|
|
8973
|
+
clip-path: inset(50%);
|
|
8974
|
+
white-space: nowrap;
|
|
8975
|
+
border: 0;
|
|
8976
|
+
}
|
|
8977
|
+
}
|
|
8978
|
+
|
|
7467
8979
|
/* charts/src/lib/chart.component.scss */
|
|
7468
8980
|
@layer kpt.components {
|
|
7469
8981
|
.kpt-chart-host {
|
|
@@ -7821,7 +9333,7 @@
|
|
|
7821
9333
|
font: inherit;
|
|
7822
9334
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
7823
9335
|
line-height: 1.5;
|
|
7824
|
-
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem
|
|
9336
|
+
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem - wysokość liczy komponent. */
|
|
7825
9337
|
resize: none;
|
|
7826
9338
|
overflow-y: auto;
|
|
7827
9339
|
}
|
|
@@ -7836,6 +9348,12 @@
|
|
|
7836
9348
|
opacity: 0.6;
|
|
7837
9349
|
cursor: not-allowed;
|
|
7838
9350
|
}
|
|
9351
|
+
/* Mikrofon i jego fala nie oddają miejsca polu - kurczy się pole, nie przycisk. Wysokość
|
|
9352
|
+
przycisku wysyłki (2.5rem): mniejszy mikrofon i fala stoją na jego środku, nie przy dnie. */
|
|
9353
|
+
.kpt-chat-composer__speech {
|
|
9354
|
+
flex: none;
|
|
9355
|
+
min-block-size: 2.5rem;
|
|
9356
|
+
}
|
|
7839
9357
|
/* Pole pliku jest sterowane przyciskiem; natywny widget nie da się ostylować. */
|
|
7840
9358
|
.kpt-chat-composer__picker {
|
|
7841
9359
|
display: none;
|
|
@@ -7912,7 +9430,7 @@
|
|
|
7912
9430
|
pojawia się natychmiast. Ta sama sztuczka co w kpt-drawer. */
|
|
7913
9431
|
--_vis-delay: var(--kpt-motion-duration-base, 200ms);
|
|
7914
9432
|
position: fixed;
|
|
7915
|
-
/* 4,5rem to wysokość FAB-a plus prześwit
|
|
9433
|
+
/* 4,5rem to wysokość FAB-a plus prześwit - panel stoi nad przyciskiem. */
|
|
7916
9434
|
inset-block-end: calc(var(--_offset) + 4.5rem);
|
|
7917
9435
|
z-index: var(--kpt-z-overlay, 1000);
|
|
7918
9436
|
display: flex;
|
|
@@ -7928,7 +9446,7 @@
|
|
|
7928
9446
|
box-shadow: var(--kpt-elevation-3);
|
|
7929
9447
|
/* Stan zamknięty siedzi w regule bazowej, nie pod `[data-position]`: Angular ustawia
|
|
7930
9448
|
atrybuty o klatkę za późno, więc panel mrugnąłby otwarty przy pierwszym renderze.
|
|
7931
|
-
`visibility` zamiast `display: none`
|
|
9449
|
+
`visibility` zamiast `display: none` - przejścia nie da się zanimować z `none`. */
|
|
7932
9450
|
visibility: hidden;
|
|
7933
9451
|
opacity: 0;
|
|
7934
9452
|
transform: translateY(var(--kpt-space-4, 1rem)) scale(0.98);
|
|
@@ -7941,6 +9459,42 @@
|
|
|
7941
9459
|
transform: none;
|
|
7942
9460
|
transition-delay: 0s;
|
|
7943
9461
|
}
|
|
9462
|
+
/* Ruch otwarcia (`enterMotion`). `none` - bez przejścia. `spring` - okno wyrasta z przycisku:
|
|
9463
|
+
zamknięty panel jest zsunięty na wysokość FAB-a i przycięty do koła jego rozmiaru w rogu,
|
|
9464
|
+
więc kapsuła leży dokładnie na przycisku; otwarcie rozwija ją sprężyną w pełne okno.
|
|
9465
|
+
Zamykanie jest krótkie i bez odbicia - wraca do przycisku. */
|
|
9466
|
+
.kpt-chat-dock__panel[data-motion=none] {
|
|
9467
|
+
transition: none;
|
|
9468
|
+
}
|
|
9469
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9470
|
+
/* FAB 3,5rem; panel stoi 4,5rem nad dolną krawędzią przycisku (`--_lift`). */
|
|
9471
|
+
--_fab: 3.5rem;
|
|
9472
|
+
--_lift: 4.5rem;
|
|
9473
|
+
--_inset: 0rem;
|
|
9474
|
+
--_close: calc(0.28s * var(--kpt-motion-scale, 1));
|
|
9475
|
+
--_vis-delay: var(--_close);
|
|
9476
|
+
--_clip-x: calc(100% - var(--_fab) - var(--_inset));
|
|
9477
|
+
opacity: 0;
|
|
9478
|
+
transform: translateY(var(--_lift));
|
|
9479
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9480
|
+
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);
|
|
9481
|
+
}
|
|
9482
|
+
.kpt-chat-dock__panel[data-motion=spring][data-position=bottom-start] {
|
|
9483
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9484
|
+
}
|
|
9485
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9486
|
+
opacity: 1;
|
|
9487
|
+
transform: none;
|
|
9488
|
+
clip-path: inset(0 round var(--kpt-radius-lg, 0.75rem));
|
|
9489
|
+
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;
|
|
9490
|
+
}
|
|
9491
|
+
/* RTL: `bottom-end` stoi po lewej - koło idzie do lewego rogu. */
|
|
9492
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open) {
|
|
9493
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9494
|
+
}
|
|
9495
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open)[data-position=bottom-start] {
|
|
9496
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9497
|
+
}
|
|
7944
9498
|
.kpt-chat-dock__header {
|
|
7945
9499
|
display: flex;
|
|
7946
9500
|
flex: 0 0 auto;
|
|
@@ -7959,7 +9513,7 @@
|
|
|
7959
9513
|
flex-direction: column;
|
|
7960
9514
|
min-height: 0;
|
|
7961
9515
|
}
|
|
7962
|
-
/* Pozycja pozioma
|
|
9516
|
+
/* Pozycja pozioma - logiczne własności, więc RTL odwraca róg bez osobnej reguły.
|
|
7963
9517
|
Odsunięcie od rogu jest wspólne dla obu osi i steruje nim input `offset`: aplikacja
|
|
7964
9518
|
z drugim widgetem w rogu (np. kpt-scroll-top) odsuwa dock, zamiast walczyć ze stylami. */
|
|
7965
9519
|
.kpt-chat-dock__trigger,
|
|
@@ -7972,19 +9526,19 @@
|
|
|
7972
9526
|
}
|
|
7973
9527
|
/*
|
|
7974
9528
|
* Współdzielony róg. `kpt-scroll-top` przykleja się dokładnie w to samo miejsce, z tym samym
|
|
7975
|
-
* `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości
|
|
9529
|
+
* `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości - wystaje sama
|
|
7976
9530
|
* plakietka nieprzeczytanych, a przycisku nie da się kliknąć.
|
|
7977
9531
|
*
|
|
7978
9532
|
* Ustępuje przycisk powrotu na górę, bo czat jest akcją główną i większym celem. Odsuwamy go
|
|
7979
9533
|
* W BOK, nie do góry: nad FAB-em stoi panel rozmowy, więc przesunięcie w pionie zamieniłoby
|
|
7980
|
-
* jedną kolizję na drugą, gorszą
|
|
9534
|
+
* jedną kolizję na drugą, gorszą - przycisk lądowałby na treści wiadomości.
|
|
7981
9535
|
*
|
|
7982
9536
|
* `:has()` na korzeniu dokumentu jest tu jedyną drogą: oba komponenty są `position: fixed`
|
|
7983
9537
|
* i nic ich nie łączy w drzewie DOM. Reguła stoi w arkuszu czatu, nie scroll-topu, bo zależność
|
|
7984
|
-
* ma iść w stronę grafu paczek
|
|
9538
|
+
* ma iść w stronę grafu paczek - subpath zna rdzeń, rdzeń nie zna subpathu.
|
|
7985
9539
|
*
|
|
7986
9540
|
* Dotyczy wyłącznie `bottom-end`: dock po lewej i tak nie koliduje. Gdy aplikacja przestawi
|
|
7987
|
-
* `offset`, sama odpowiada też za ustawienie scroll-topu
|
|
9541
|
+
* `offset`, sama odpowiada też za ustawienie scroll-topu - ta reguła liczy od wartości domyślnej.
|
|
7988
9542
|
*/
|
|
7989
9543
|
:root:has(.kpt-chat-dock__trigger[data-position=bottom-end]) .kpt-scroll-top {
|
|
7990
9544
|
/* 3,5rem to szerokość FAB-a, 0,75rem prześwit między przyciskami. */
|
|
@@ -8002,9 +9556,20 @@
|
|
|
8002
9556
|
border-radius: 0;
|
|
8003
9557
|
transform: translateY(var(--kpt-space-6, 1.5rem));
|
|
8004
9558
|
}
|
|
9559
|
+
/* Pełny ekran: panel już leży nad FAB-em, więc koło startuje w miejscu przycisku, bez zsuwania. */
|
|
9560
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9561
|
+
--_lift: 0rem;
|
|
9562
|
+
--_inset: var(--_offset);
|
|
9563
|
+
}
|
|
9564
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9565
|
+
clip-path: inset(0);
|
|
9566
|
+
}
|
|
8005
9567
|
}
|
|
8006
9568
|
@media (prefers-reduced-motion: reduce) {
|
|
8007
|
-
.kpt-chat-dock__panel
|
|
9569
|
+
.kpt-chat-dock__panel,
|
|
9570
|
+
.kpt-chat-dock__panel[data-motion=spring],
|
|
9571
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9572
|
+
clip-path: none;
|
|
8008
9573
|
transition: opacity var(--kpt-motion-duration-fast, 120ms) linear, visibility 0s linear var(--_vis-delay);
|
|
8009
9574
|
transform: none;
|
|
8010
9575
|
}
|
|
@@ -8017,7 +9582,7 @@
|
|
|
8017
9582
|
.kpt-chat-message-host {
|
|
8018
9583
|
display: block;
|
|
8019
9584
|
}
|
|
8020
|
-
/* Komunikat systemowy nie jest wypowiedzią
|
|
9585
|
+
/* Komunikat systemowy nie jest wypowiedzią - nie dostaje bąbla ani kolumny awatara. */
|
|
8021
9586
|
.kpt-chat-message__system {
|
|
8022
9587
|
margin: var(--kpt-space-2, 0.5rem) 0;
|
|
8023
9588
|
text-align: center;
|
|
@@ -8029,7 +9594,7 @@
|
|
|
8029
9594
|
align-items: flex-end;
|
|
8030
9595
|
gap: var(--kpt-space-2, 0.5rem);
|
|
8031
9596
|
/* Własna wiadomość: odwrócony kierunek dosuwa stos do prawej krawędzi, a kolumnę
|
|
8032
|
-
akcji (strzałka ponowienia) wypycha na zewnątrz bąbla
|
|
9597
|
+
akcji (strzałka ponowienia) wypycha na zewnątrz bąbla - po stronie treści. */
|
|
8033
9598
|
}
|
|
8034
9599
|
.kpt-chat-message__row[data-align=end] {
|
|
8035
9600
|
flex-direction: row-reverse;
|
|
@@ -8053,7 +9618,7 @@
|
|
|
8053
9618
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
8054
9619
|
}
|
|
8055
9620
|
.kpt-chat-message__bubble {
|
|
8056
|
-
/* Motyw jest monochromatyczny
|
|
9621
|
+
/* Motyw jest monochromatyczny - różnicę między bąblami robi jasność, nie odcień.
|
|
8057
9622
|
Wariant przychodzący siada na `muted`, bo `surface-variant` dzieli od tła listy
|
|
8058
9623
|
1,5% jasności i w jasnym motywie bąbel po prostu znika. */
|
|
8059
9624
|
--_bg: var(--kpt-color-muted);
|
|
@@ -8067,7 +9632,7 @@
|
|
|
8067
9632
|
color: var(--_fg);
|
|
8068
9633
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
8069
9634
|
line-height: var(--kpt-font-lineHeight-normal, 1.5);
|
|
8070
|
-
/* Cichszy wariant własnej wiadomości
|
|
9635
|
+
/* Cichszy wariant własnej wiadomości - dla rozmów, w których pełny kolor po prawej
|
|
8071
9636
|
stronie jest za mocny. */
|
|
8072
9637
|
}
|
|
8073
9638
|
.kpt-chat-message__bubble[data-variant=primary] {
|
|
@@ -8084,7 +9649,7 @@
|
|
|
8084
9649
|
padding-inline: 0;
|
|
8085
9650
|
}
|
|
8086
9651
|
.kpt-chat-message__bubble {
|
|
8087
|
-
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border`
|
|
9652
|
+
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border` - ramka przesunęłaby
|
|
8088
9653
|
treść o piksel w chwili, w której status się zmienia. */
|
|
8089
9654
|
}
|
|
8090
9655
|
.kpt-chat-message__bubble[data-status=failed] {
|
|
@@ -8119,7 +9684,7 @@
|
|
|
8119
9684
|
}
|
|
8120
9685
|
.kpt-chat-message__bubble {
|
|
8121
9686
|
/* Narożnik pod ogonkiem jest prosty. Zaokrąglony odsuwał się od ogonka łukiem i między
|
|
8122
|
-
nimi prześwitywało tło listy
|
|
9687
|
+
nimi prześwitywało tło listy - ogonek czytał się jak osobna strzałka doklejona obok
|
|
8123
9688
|
bąbla, a nie jak jego przedłużenie. Bramka na `[data-tail]`: bąble bez ogonka (środek
|
|
8124
9689
|
grupy, `ghost`, `system`, `[tail]="false"`) mają zostać zaokrąglone. */
|
|
8125
9690
|
}
|
|
@@ -8146,7 +9711,7 @@
|
|
|
8146
9711
|
inset-inline-end: -0.5rem;
|
|
8147
9712
|
}
|
|
8148
9713
|
.kpt-chat-message__bubble {
|
|
8149
|
-
/* Odbicie zamiast drugiej maski
|
|
9714
|
+
/* Odbicie zamiast drugiej maski - obraca się razem z `inset-inline`, więc RTL
|
|
8150
9715
|
nie wymaga osobnej reguły. */
|
|
8151
9716
|
}
|
|
8152
9717
|
.kpt-chat-message__bubble[data-tail][data-align=start]::after {
|
|
@@ -8189,7 +9754,7 @@
|
|
|
8189
9754
|
}
|
|
8190
9755
|
.kpt-chat-message__text {
|
|
8191
9756
|
margin: 0;
|
|
8192
|
-
/* Kompozytor łamie linie na Shift+Enter
|
|
9757
|
+
/* Kompozytor łamie linie na Shift+Enter - bez `pre-wrap` zlepiłyby się w akapit. */
|
|
8193
9758
|
white-space: pre-wrap;
|
|
8194
9759
|
overflow-wrap: anywhere;
|
|
8195
9760
|
}
|
|
@@ -8233,7 +9798,7 @@
|
|
|
8233
9798
|
opacity: 0.7;
|
|
8234
9799
|
}
|
|
8235
9800
|
.kpt-chat-message__status {
|
|
8236
|
-
/* Ikona ma 1em, a wiersz meta jest już zmniejszony
|
|
9801
|
+
/* Ikona ma 1em, a wiersz meta jest już zmniejszony - bez tego status ginie. */
|
|
8237
9802
|
font-size: 0.875rem;
|
|
8238
9803
|
}
|
|
8239
9804
|
/* Kolor statusu schodzi z `data-status` bąbla, a nie z drugiego takiego atrybutu na ikonie:
|
|
@@ -8242,7 +9807,7 @@
|
|
|
8242
9807
|
color: var(--kpt-color-primary);
|
|
8243
9808
|
opacity: 1;
|
|
8244
9809
|
}
|
|
8245
|
-
/* Na bąblu `solid` akcent jest kolorem TŁA, więc
|
|
9810
|
+
/* Na bąblu `solid` akcent jest kolorem TŁA, więc "przeczytano" zniknęłoby w nim
|
|
8246
9811
|
bez śladu. Tam wyróżnia je pełne krycie własnego koloru tekstu. */
|
|
8247
9812
|
.kpt-chat-message__bubble[data-variant=solid][data-status=read] .kpt-chat-message__status {
|
|
8248
9813
|
color: currentcolor;
|
|
@@ -8284,14 +9849,62 @@
|
|
|
8284
9849
|
background: var(--kpt-color-primary-subtle);
|
|
8285
9850
|
}
|
|
8286
9851
|
.kpt-chat-message__reaction-count {
|
|
9852
|
+
display: inline-block;
|
|
9853
|
+
overflow: clip;
|
|
9854
|
+
vertical-align: bottom;
|
|
8287
9855
|
opacity: 0.7;
|
|
8288
9856
|
}
|
|
9857
|
+
.kpt-chat-message__reaction-digit {
|
|
9858
|
+
display: inline-block;
|
|
9859
|
+
}
|
|
9860
|
+
/* Ruch pojawiania się (`enterMotion`), tylko po pierwszym renderze (`.is-live`): nowa
|
|
9861
|
+
reakcja wskakuje, nowa liczba wjeżdża od dołu jak na bębnie, nowa ikona statusu
|
|
9862
|
+
obraca się na miejsce. Każda zmiana to nowy element w DOM, więc wystarcza `@starting-style`. */
|
|
9863
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9864
|
+
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);
|
|
9865
|
+
}
|
|
9866
|
+
@starting-style {
|
|
9867
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9868
|
+
scale: 0.4;
|
|
9869
|
+
}
|
|
9870
|
+
}
|
|
9871
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9872
|
+
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;
|
|
9873
|
+
}
|
|
9874
|
+
@starting-style {
|
|
9875
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9876
|
+
translate: 0 0.7em;
|
|
9877
|
+
opacity: 0;
|
|
9878
|
+
}
|
|
9879
|
+
}
|
|
9880
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9881
|
+
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;
|
|
9882
|
+
}
|
|
9883
|
+
@starting-style {
|
|
9884
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9885
|
+
scale: 0.3;
|
|
9886
|
+
rotate: -90deg;
|
|
9887
|
+
opacity: 0;
|
|
9888
|
+
}
|
|
9889
|
+
}
|
|
9890
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9891
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9892
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9893
|
+
transition: opacity 0.24s ease-out;
|
|
9894
|
+
}
|
|
9895
|
+
@starting-style {
|
|
9896
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9897
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9898
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9899
|
+
opacity: 0;
|
|
9900
|
+
}
|
|
9901
|
+
}
|
|
8289
9902
|
.kpt-chat-message__actions {
|
|
8290
9903
|
display: flex;
|
|
8291
9904
|
flex: 0 0 auto;
|
|
8292
9905
|
align-items: center;
|
|
8293
9906
|
gap: 0.125rem;
|
|
8294
|
-
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie
|
|
9907
|
+
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie - inaczej lista
|
|
8295
9908
|
wyglądałaby jak panel sterowania. Ponowienie jest wyjątkiem: musi być widoczne
|
|
8296
9909
|
zawsze, bo bez niego nieudana wiadomość nie ma czym o sobie powiedzieć. */
|
|
8297
9910
|
}
|
|
@@ -8308,7 +9921,7 @@
|
|
|
8308
9921
|
.kpt-chat-message__actions[data-open] .kpt-icon-button-host {
|
|
8309
9922
|
opacity: 1;
|
|
8310
9923
|
}
|
|
8311
|
-
/* Kotwica wybieraka
|
|
9924
|
+
/* Kotwica wybieraka - pozycjonuje go względem przycisku "zareaguj". */
|
|
8312
9925
|
.kpt-chat-message__react {
|
|
8313
9926
|
position: relative;
|
|
8314
9927
|
display: inline-flex;
|
|
@@ -8316,7 +9929,7 @@
|
|
|
8316
9929
|
/* Wybierak reakcji: rząd emoji nad przyciskiem. Rozwija się w stronę bąbla, nie od niego:
|
|
8317
9930
|
akcje stoją przy zewnętrznej krawędzi listy, więc wybierak wyśrodkowany na przycisku
|
|
8318
9931
|
wychodziłby poza viewport (a ten ma `overflow-y: auto`, czyli przycina też w poziomie)
|
|
8319
|
-
|
|
9932
|
+
- w wąskim docku ucięłoby połowę reakcji. */
|
|
8320
9933
|
.kpt-chat-message__picker {
|
|
8321
9934
|
position: absolute;
|
|
8322
9935
|
inset-block-end: calc(100% + var(--kpt-space-1, 0.25rem));
|
|
@@ -8330,7 +9943,7 @@
|
|
|
8330
9943
|
background: var(--kpt-color-surface-raised);
|
|
8331
9944
|
box-shadow: var(--kpt-elevation-2);
|
|
8332
9945
|
}
|
|
8333
|
-
/* Własna wiadomość ma odwrócony wiersz
|
|
9946
|
+
/* Własna wiadomość ma odwrócony wiersz - akcje lądują z lewej, więc wybierak idzie w prawo. */
|
|
8334
9947
|
.kpt-chat-message__row[data-align=end] .kpt-chat-message__picker {
|
|
8335
9948
|
inset-inline: 0 auto;
|
|
8336
9949
|
}
|
|
@@ -8366,7 +9979,10 @@
|
|
|
8366
9979
|
}
|
|
8367
9980
|
@media (prefers-reduced-motion: reduce) {
|
|
8368
9981
|
.kpt-chat-message__actions .kpt-icon-button-host,
|
|
8369
|
-
.kpt-chat-message__pick
|
|
9982
|
+
.kpt-chat-message__pick,
|
|
9983
|
+
.kpt-chat-message__reaction,
|
|
9984
|
+
.kpt-chat-message__reaction-digit,
|
|
9985
|
+
.kpt-chat-message__status {
|
|
8370
9986
|
transition: none;
|
|
8371
9987
|
}
|
|
8372
9988
|
.kpt-chat-message__pick:hover {
|
|
@@ -8385,7 +10001,7 @@
|
|
|
8385
10001
|
display: flex;
|
|
8386
10002
|
align-items: center;
|
|
8387
10003
|
gap: var(--kpt-space-2, 0.5rem);
|
|
8388
|
-
/* Wcięcie równe kolumnie awatara
|
|
10004
|
+
/* Wcięcie równe kolumnie awatara - wskaźnik staje tam, gdzie stanie bąbel. */
|
|
8389
10005
|
padding-inline-start: calc(2rem + var(--kpt-space-2, 0.5rem));
|
|
8390
10006
|
}
|
|
8391
10007
|
.kpt-chat-typing__bubble {
|
|
@@ -8432,8 +10048,14 @@
|
|
|
8432
10048
|
opacity: 1;
|
|
8433
10049
|
}
|
|
8434
10050
|
}
|
|
10051
|
+
/* Ruch wyłączony konfiguracją (`provideKptMotion({ enabled: false })`): kropki to wskaźnik
|
|
10052
|
+
stanu jak spinner - pulsują wolniej zamiast stanąć. */
|
|
10053
|
+
:root[data-kpt-motion=off] .kpt-chat-typing__dot {
|
|
10054
|
+
animation-name: kpt-chat-typing-pulse;
|
|
10055
|
+
animation-duration: 1.8s;
|
|
10056
|
+
}
|
|
8435
10057
|
/* Skok zamieniamy na pulsowanie, a nie wyłączamy animację: kropki są jedynym
|
|
8436
|
-
nośnikiem informacji
|
|
10058
|
+
nośnikiem informacji "ktoś pisze" i nieruchome nie odróżniają się od ozdoby. */
|
|
8437
10059
|
@media (prefers-reduced-motion: reduce) {
|
|
8438
10060
|
.kpt-chat-typing__dot {
|
|
8439
10061
|
animation-name: kpt-chat-typing-pulse;
|
|
@@ -8454,7 +10076,7 @@
|
|
|
8454
10076
|
background: var(--kpt-color-surface);
|
|
8455
10077
|
color: var(--kpt-color-text);
|
|
8456
10078
|
}
|
|
8457
|
-
/* Pasek offline. `role="status"` bez `aria-live="assertive"`
|
|
10079
|
+
/* Pasek offline. `role="status"` bez `aria-live="assertive"` - utrata sieci ma być
|
|
8458
10080
|
zauważona, ale nie przerywać czytania wiadomości w połowie zdania. */
|
|
8459
10081
|
.kpt-chat__offline {
|
|
8460
10082
|
display: flex;
|
|
@@ -8472,7 +10094,7 @@
|
|
|
8472
10094
|
color: var(--kpt-color-text-muted);
|
|
8473
10095
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
8474
10096
|
}
|
|
8475
|
-
/* Kontener pozycjonujący dla pigułki
|
|
10097
|
+
/* Kontener pozycjonujący dla pigułki "nowe wiadomości" - pigułka ma pływać nad listą,
|
|
8476
10098
|
a nie nad całą stroną, więc nie jest `fixed` jak kpt-scroll-top. */
|
|
8477
10099
|
.kpt-chat__body {
|
|
8478
10100
|
position: relative;
|
|
@@ -8521,21 +10143,21 @@
|
|
|
8521
10143
|
}
|
|
8522
10144
|
/* Separator jedzie z treścią i nie jest `sticky`: przyklejony zostawał na górze, więc przy
|
|
8523
10145
|
dłuższej rozmowie rósł tam stos ramek, a że pigułki różnią się szerokością, starsze
|
|
8524
|
-
wystawały zza najnowszej. Rolę
|
|
10146
|
+
wystawały zza najnowszej. Rolę "w jakim dniu jestem" przejęła jedna pływająca pigułka. */
|
|
8525
10147
|
.kpt-chat__date {
|
|
8526
10148
|
align-self: center;
|
|
8527
10149
|
margin: var(--kpt-space-4, 1rem) 0 var(--kpt-space-2, 0.5rem);
|
|
8528
10150
|
}
|
|
8529
10151
|
/* Pływająca pigułka dnia: jedna na całą listę, z tekstem podmienianym przy przewijaniu.
|
|
8530
|
-
Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body`
|
|
8531
|
-
pigułka
|
|
10152
|
+
Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body` - tak samo jak
|
|
10153
|
+
pigułka "nowe wiadomości" przy dolnej krawędzi. Gaśnie przez `visibility`, nie
|
|
8532
10154
|
`display: none`, bo skrypt musi móc zmierzyć jej pas także wtedy, gdy jej nie widać. */
|
|
8533
10155
|
.kpt-chat__day {
|
|
8534
10156
|
position: absolute;
|
|
8535
10157
|
inset-block-start: var(--kpt-space-2, 0.5rem);
|
|
8536
10158
|
/* Prawy odstęp kompensuje pasek przewijania: lista oddaje mu kawałek swojej szerokości,
|
|
8537
10159
|
więc pigułka wyśrodkowana względem całego pola stałaby odrobinę za bardzo w prawo
|
|
8538
|
-
względem samego tekstu. Logicznie, nie przez `right`
|
|
10160
|
+
względem samego tekstu. Logicznie, nie przez `right` - w RTL pasek jest po drugiej
|
|
8539
10161
|
stronie i przesunięcie musi iść za nim. */
|
|
8540
10162
|
inset-inline: 0 var(--kpt-space-3, 0.75rem);
|
|
8541
10163
|
z-index: var(--kpt-z-raised, 1);
|
|
@@ -9049,8 +10671,8 @@
|
|
|
9049
10671
|
color: var(--kpt-color-on-surface-muted);
|
|
9050
10672
|
}
|
|
9051
10673
|
/*
|
|
9052
|
-
* Pasek akcji przykleja się do dołu obszaru przewijania
|
|
9053
|
-
* i zdjęciem formularz ma kilkanaście pól i
|
|
10674
|
+
* Pasek akcji przykleja się do dołu obszaru przewijania - przy schemie z godzinami
|
|
10675
|
+
* i zdjęciem formularz ma kilkanaście pól i "Zapisz" uciekałby na sam dół.
|
|
9054
10676
|
*
|
|
9055
10677
|
* Slot `[kptDialogFooter]` odpada: projekcja treści widzi wyłącznie bezpośrednie dzieci
|
|
9056
10678
|
* `<kpt-dialog>`, a ten komponent trafia tam w całości jako jeden element.
|
|
@@ -9101,7 +10723,7 @@
|
|
|
9101
10723
|
padding: var(--kpt-space-1) 0;
|
|
9102
10724
|
}
|
|
9103
10725
|
.kpt-map-hours-field__day[data-locked] {
|
|
9104
|
-
/* Dzień przepisany z poniedziałku
|
|
10726
|
+
/* Dzień przepisany z poniedziałku - widoczny, ale nie do edycji. */
|
|
9105
10727
|
opacity: 0.6;
|
|
9106
10728
|
}
|
|
9107
10729
|
.kpt-map-hours-field__name {
|
|
@@ -9118,7 +10740,7 @@
|
|
|
9118
10740
|
display: flex;
|
|
9119
10741
|
gap: var(--kpt-space-1);
|
|
9120
10742
|
align-items: center;
|
|
9121
|
-
/* Obie godziny dzielą kolumnę po równo
|
|
10743
|
+
/* Obie godziny dzielą kolumnę po równo - `min-width: 0` pozwala im zejść poniżej treści. */
|
|
9122
10744
|
}
|
|
9123
10745
|
.kpt-map-hours-field__range .kpt-datepicker-host {
|
|
9124
10746
|
flex: 1 1 0;
|
|
@@ -9182,7 +10804,7 @@
|
|
|
9182
10804
|
.kpt-map-image-field__preview img {
|
|
9183
10805
|
display: block;
|
|
9184
10806
|
width: 100%;
|
|
9185
|
-
/* Ten sam kadr co w karcie miejsca
|
|
10807
|
+
/* Ten sam kadr co w karcie miejsca - podgląd ma pokazywać prawdę. */
|
|
9186
10808
|
aspect-ratio: 16/9;
|
|
9187
10809
|
object-fit: cover;
|
|
9188
10810
|
}
|
|
@@ -9244,7 +10866,7 @@
|
|
|
9244
10866
|
cursor: default;
|
|
9245
10867
|
}
|
|
9246
10868
|
.kpt-map-legend__item {
|
|
9247
|
-
/* Ukryta kategoria zostaje czytelna
|
|
10869
|
+
/* Ukryta kategoria zostaje czytelna - wygaszamy ją, nie chowamy. */
|
|
9248
10870
|
}
|
|
9249
10871
|
.kpt-map-legend__item.kpt-map-legend__item--off {
|
|
9250
10872
|
color: var(--kpt-color-on-surface-muted);
|
|
@@ -9330,7 +10952,7 @@
|
|
|
9330
10952
|
gap: 0 var(--kpt-space-2);
|
|
9331
10953
|
margin: var(--kpt-space-1) 0 0;
|
|
9332
10954
|
padding: 0 var(--kpt-space-4) var(--kpt-space-3);
|
|
9333
|
-
/* Kreska domyka nieruchomy nagłówek
|
|
10955
|
+
/* Kreska domyka nieruchomy nagłówek - bez niej ucięta treść czyta się jak błąd. */
|
|
9334
10956
|
border-bottom: var(--kpt-border-width-thin) solid var(--kpt-color-border);
|
|
9335
10957
|
}
|
|
9336
10958
|
.kpt-map-poi__distance {
|
|
@@ -9375,8 +10997,8 @@
|
|
|
9375
10997
|
min-width: 0;
|
|
9376
10998
|
}
|
|
9377
10999
|
/*
|
|
9378
|
-
Stan
|
|
9379
|
-
z `--_fg` przycisku, a `border-color` się nie dziedziczy
|
|
11000
|
+
Stan "w ulubionych" maluje przycisk, nie hosta: `color` z hosta i tak przegrywa
|
|
11001
|
+
z `--_fg` przycisku, a `border-color` się nie dziedziczy - reguła na samym `[data-on]`
|
|
9380
11002
|
nie zmieniała niczego widocznego.
|
|
9381
11003
|
*/
|
|
9382
11004
|
.kpt-map-poi__fav[data-on] .kpt-icon-button {
|
|
@@ -9492,7 +11114,7 @@
|
|
|
9492
11114
|
color: var(--kpt-color-on-surface-muted);
|
|
9493
11115
|
}
|
|
9494
11116
|
.kpt-map-poi__fact-label::after {
|
|
9495
|
-
content: "
|
|
11117
|
+
content: ", ";
|
|
9496
11118
|
}
|
|
9497
11119
|
.kpt-map-poi__row-actions {
|
|
9498
11120
|
display: flex;
|
|
@@ -9520,7 +11142,7 @@
|
|
|
9520
11142
|
}
|
|
9521
11143
|
/*
|
|
9522
11144
|
* Akcje odsłaniają się po najechaniu tylko tam, gdzie jest czym najechać.
|
|
9523
|
-
* Na dotyku zostają widoczne, a `:focus-within` odsłania je dla klawiatury
|
|
11145
|
+
* Na dotyku zostają widoczne, a `:focus-within` odsłania je dla klawiatury -
|
|
9524
11146
|
* elementy zostają w drzewie zawsze, więc kolejność tabulacji się nie zmienia.
|
|
9525
11147
|
*/
|
|
9526
11148
|
@media (hover: hover) and (pointer: fine) {
|
|
@@ -9533,7 +11155,7 @@
|
|
|
9533
11155
|
opacity: 1;
|
|
9534
11156
|
}
|
|
9535
11157
|
}
|
|
9536
|
-
/* Komunikat dla czytnika ekranu
|
|
11158
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9537
11159
|
.kpt-map-poi__live {
|
|
9538
11160
|
position: absolute;
|
|
9539
11161
|
width: 1px;
|
|
@@ -9595,6 +11217,10 @@
|
|
|
9595
11217
|
color: var(--kpt-color-on-surface-muted);
|
|
9596
11218
|
cursor: not-allowed;
|
|
9597
11219
|
}
|
|
11220
|
+
.kpt-map-search__speech {
|
|
11221
|
+
flex: none;
|
|
11222
|
+
gap: var(--kpt-space-1);
|
|
11223
|
+
}
|
|
9598
11224
|
.kpt-map-search__clear {
|
|
9599
11225
|
display: inline-flex;
|
|
9600
11226
|
flex: none;
|
|
@@ -9659,7 +11285,7 @@
|
|
|
9659
11285
|
padding: var(--kpt-space-3);
|
|
9660
11286
|
color: var(--kpt-color-on-surface-muted);
|
|
9661
11287
|
}
|
|
9662
|
-
/* Komunikat dla czytnika ekranu
|
|
11288
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9663
11289
|
.kpt-map-search__status {
|
|
9664
11290
|
position: absolute;
|
|
9665
11291
|
width: 1px;
|
|
@@ -9734,20 +11360,20 @@
|
|
|
9734
11360
|
opacity: 0.6;
|
|
9735
11361
|
}
|
|
9736
11362
|
/*
|
|
9737
|
-
* Wyszukiwarka stoi w prawym górnym rogu
|
|
11363
|
+
* Wyszukiwarka stoi w prawym górnym rogu - kontrolki zoomu zajmują lewy.
|
|
9738
11364
|
* `z-index: 5` to szczyt skali warstwy Angulara nad mapą (popup 3, menu 4): rozwinięty
|
|
9739
11365
|
* panel podpowiedzi ma zakrywać wszystko, w tym menu prawego przycisku.
|
|
9740
11366
|
*
|
|
9741
11367
|
* TO MUSI BYĆ OPAKOWANIE, nie klasa na samym `<kpt-map-search>`.
|
|
9742
11368
|
*
|
|
9743
|
-
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }`
|
|
11369
|
+
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }` -
|
|
9744
11370
|
* blok zawierający dla panelu podpowiedzi, potrzebny także wtedy, gdy komponent stoi
|
|
9745
11371
|
* poza mapą. Obie reguły trafiałyby wówczas na TEN SAM element z identyczną
|
|
9746
11372
|
* specyficznością (0,1,0) i w tej samej warstwie `kpt.components`, więc rozstrzygałaby
|
|
9747
|
-
* kolejność wstrzyknięcia stylów
|
|
11373
|
+
* kolejność wstrzyknięcia stylów - a Angular wstrzykuje style dziecka PO stylach
|
|
9748
11374
|
* rodzica. `relative` wygrywało, pole wypadało do normalnego przepływu za
|
|
9749
11375
|
* `.kpt-map__canvas` (`height: 100%`) i znikało przycięte przez `overflow: hidden`
|
|
9750
|
-
* widoku. Nie
|
|
11376
|
+
* widoku. Nie "stało krzywo" - nie było go wcale.
|
|
9751
11377
|
*
|
|
9752
11378
|
* Opakowanie rozdziela oba zestawy reguł na osobne elementy i wyjmuje rzecz
|
|
9753
11379
|
* z zależności od kolejności wstrzykiwania.
|
|
@@ -9848,7 +11474,7 @@
|
|
|
9848
11474
|
border-radius: var(--kpt-radius-full);
|
|
9849
11475
|
box-shadow: var(--kpt-elevation-2);
|
|
9850
11476
|
}
|
|
9851
|
-
/* Wielkość rośnie schodkowo
|
|
11477
|
+
/* Wielkość rośnie schodkowo - trzy stopnie wystarczą, żeby zobaczyć różnicę. */
|
|
9852
11478
|
.kpt-map__cluster--sm {
|
|
9853
11479
|
font-size: var(--kpt-font-size-xs);
|
|
9854
11480
|
scale: 0.78;
|
|
@@ -9910,7 +11536,7 @@
|
|
|
9910
11536
|
.kpt-map__popup {
|
|
9911
11537
|
/*
|
|
9912
11538
|
* Wariant `card`: całą treść rysuje komponent w środku, więc popup oddaje mu
|
|
9913
|
-
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy
|
|
11539
|
+
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy - karta
|
|
9914
11540
|
* miejsca bywa wyższa niż mapa, a auto-pan i tak mierzy realny element.
|
|
9915
11541
|
*/
|
|
9916
11542
|
}
|
|
@@ -9922,7 +11548,7 @@
|
|
|
9922
11548
|
display: flex;
|
|
9923
11549
|
flex-direction: column;
|
|
9924
11550
|
/*
|
|
9925
|
-
* Sam popup nie dostaje `overflow: hidden`
|
|
11551
|
+
* Sam popup nie dostaje `overflow: hidden` - strzałka `::after` wisi na `top: 100%`
|
|
9926
11552
|
* i schowałaby się razem z nadmiarem.
|
|
9927
11553
|
*
|
|
9928
11554
|
* Nie przewija też treści: oddaje wysokość komponentowi w środku, żeby ten mógł
|
|
@@ -10072,7 +11698,7 @@
|
|
|
10072
11698
|
/*
|
|
10073
11699
|
* Krąg dokładności przy silniku Google jest zwykłym elementem, a nie kółkiem SVG jak
|
|
10074
11700
|
* w Leaflecie: `google.maps.Circle` przyjmuje kolory w opcjach, a tu obowiązują tokeny.
|
|
10075
|
-
* Te same barwy co w regule SVG niżej
|
|
11701
|
+
* Te same barwy co w regule SVG niżej - tylko innymi właściwościami.
|
|
10076
11702
|
*/
|
|
10077
11703
|
.kpt-map[data-engine=google] .kpt-map__accuracy {
|
|
10078
11704
|
background: color-mix(in oklch, var(--kpt-color-info) 15%, transparent);
|
|
@@ -10080,13 +11706,13 @@
|
|
|
10080
11706
|
}
|
|
10081
11707
|
}
|
|
10082
11708
|
/*
|
|
10083
|
-
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO
|
|
11709
|
+
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO - jedyne takie miejsce w bibliotece.
|
|
10084
11710
|
*
|
|
10085
11711
|
* `leaflet.css` dostarcza aplikacja i nie jest warstwowany, a CSS spoza warstw wygrywa
|
|
10086
11712
|
* z KAŻDĄ regułą w `@layer` niezależnie od specyficzności. Nadpisania `.leaflet-*`
|
|
10087
11713
|
* umieszczone w `kpt.components` po prostu by nie zadziałały.
|
|
10088
11714
|
*
|
|
10089
|
-
* Nie przenosić tego do `@layer`
|
|
11715
|
+
* Nie przenosić tego do `@layer` "dla porządku".
|
|
10090
11716
|
*/
|
|
10091
11717
|
.kpt-map .leaflet-container {
|
|
10092
11718
|
font-family: var(--kpt-font-family-sans);
|
|
@@ -10095,9 +11721,9 @@
|
|
|
10095
11721
|
/*
|
|
10096
11722
|
* Zamyka skalę z-index Leafleta we WŁASNYM kontekście układania.
|
|
10097
11723
|
*
|
|
10098
|
-
* Bez tego panes (200
|
|
11724
|
+
* Bez tego panes (200-700) i kontrolki (800) konkurują bezpośrednio z warstwą Angulara
|
|
10099
11725
|
* rozpiętą nad mapą, bo `.leaflet-container` ma `z-index: auto` i kontekstu nie tworzy.
|
|
10100
|
-
* Popup, kontrolki zoomu i menu prawego przycisku były wtedy MALOWANE POD kaflami
|
|
11726
|
+
* Popup, kontrolki zoomu i menu prawego przycisku były wtedy MALOWANE POD kaflami -
|
|
10101
11727
|
* i nie dało się tego zobaczyć hit-testem, bo panes mają `pointer-events: none`,
|
|
10102
11728
|
* więc `elementFromPoint` zwracał popup jako element na wierzchu.
|
|
10103
11729
|
*
|
|
@@ -10106,7 +11732,7 @@
|
|
|
10106
11732
|
z-index: 0;
|
|
10107
11733
|
}
|
|
10108
11734
|
|
|
10109
|
-
/* Ikony znaczników niosą własne tło
|
|
11735
|
+
/* Ikony znaczników niosą własne tło - kontener Leafleta musi zejść z drogi. */
|
|
10110
11736
|
.kpt-map .leaflet-div-icon,
|
|
10111
11737
|
.kpt-map .kpt-map__icon {
|
|
10112
11738
|
background: transparent;
|
|
@@ -10132,6 +11758,6 @@
|
|
|
10132
11758
|
|
|
10133
11759
|
.kpt-map .leaflet-popup-content-wrapper,
|
|
10134
11760
|
.kpt-map .leaflet-popup-tip {
|
|
10135
|
-
/* Popupów Leafleta nie używamy
|
|
11761
|
+
/* Popupów Leafleta nie używamy - renderuje je warstwa Angulara. */
|
|
10136
11762
|
display: none;
|
|
10137
11763
|
}
|