@konce-pt/styles 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/components.css +1840 -241
- 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 */
|
|
@@ -3336,7 +3624,7 @@
|
|
|
3336
3624
|
* Kolumna flex: nagłówek i stopka stoją, przewija się wyłącznie treść.
|
|
3337
3625
|
*
|
|
3338
3626
|
* Scoping `[open]` jest obowiązkowy. Regułę `dialog:not([open]) { display: none }`
|
|
3339
|
-
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije
|
|
3627
|
+
* daje arkusz przeglądarki, a każda deklaracja autorska ją bije - także z `@layer`.
|
|
3340
3628
|
* Niescopowane `display: flex` zostawiłoby zamknięte okna widoczne.
|
|
3341
3629
|
*/
|
|
3342
3630
|
}
|
|
@@ -3387,7 +3675,7 @@
|
|
|
3387
3675
|
display: flex;
|
|
3388
3676
|
/*
|
|
3389
3677
|
* 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
|
|
3678
|
+
* `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje -
|
|
3391
3679
|
* zostaje **ucięta**. Cztery przyciski w oknie `sm` wystarczą, żeby pierwszy z nich
|
|
3392
3680
|
* przestał być czytelny, a użytkownik nie ma jak się do niego dostać.
|
|
3393
3681
|
*/
|
|
@@ -3437,7 +3725,7 @@
|
|
|
3437
3725
|
background: var(--kpt-color-overlay-scrim);
|
|
3438
3726
|
opacity: 0;
|
|
3439
3727
|
visibility: hidden;
|
|
3440
|
-
transition: opacity 0.2s, visibility 0.2s;
|
|
3728
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1));
|
|
3441
3729
|
}
|
|
3442
3730
|
.kpt-drawer__backdrop.is-open {
|
|
3443
3731
|
opacity: 1;
|
|
@@ -3456,8 +3744,8 @@
|
|
|
3456
3744
|
width: min(20rem, 90vw);
|
|
3457
3745
|
transform: translateX(-100%);
|
|
3458
3746
|
visibility: hidden;
|
|
3459
|
-
--_kpt-drawer-vis-delay: 0.25s;
|
|
3460
|
-
transition: transform 0.25s ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3747
|
+
--_kpt-drawer-vis-delay: calc(0.25s * var(--kpt-motion-scale, 1));
|
|
3748
|
+
transition: transform calc(0.25s * var(--kpt-motion-scale, 1)) ease, visibility 0s linear var(--_kpt-drawer-vis-delay, 0s);
|
|
3461
3749
|
}
|
|
3462
3750
|
.kpt-drawer__panel[data-position=right] {
|
|
3463
3751
|
inset: 0 0 0 auto;
|
|
@@ -3583,7 +3871,17 @@
|
|
|
3583
3871
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
3584
3872
|
position: relative;
|
|
3585
3873
|
isolation: isolate;
|
|
3586
|
-
transition: box-shadow var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
3874
|
+
transition: box-shadow var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
3875
|
+
}
|
|
3876
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3877
|
+
--_press-t: 0.08s;
|
|
3878
|
+
--_press-e: ease-out;
|
|
3879
|
+
scale: 0.92;
|
|
3880
|
+
}
|
|
3881
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3882
|
+
.kpt-fab:active:not(:disabled):not([aria-disabled=true]) {
|
|
3883
|
+
scale: none;
|
|
3884
|
+
}
|
|
3587
3885
|
}
|
|
3588
3886
|
.kpt-fab::after {
|
|
3589
3887
|
content: "";
|
|
@@ -3640,14 +3938,22 @@
|
|
|
3640
3938
|
display: block;
|
|
3641
3939
|
}
|
|
3642
3940
|
.kpt-fieldset {
|
|
3941
|
+
--_bg: transparent;
|
|
3942
|
+
background: var(--_bg);
|
|
3643
3943
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
3644
3944
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
3645
3945
|
padding: var(--kpt-space-4, 1rem);
|
|
3646
3946
|
margin: 0;
|
|
3647
3947
|
min-inline-size: 0;
|
|
3948
|
+
block-size: 100%;
|
|
3949
|
+
}
|
|
3950
|
+
.kpt-fieldset-host[data-variant=filled] .kpt-fieldset {
|
|
3951
|
+
--_bg: var(--kpt-color-surface);
|
|
3648
3952
|
}
|
|
3649
3953
|
.kpt-fieldset__legend {
|
|
3650
|
-
padding
|
|
3954
|
+
padding: calc(var(--kpt-space-1, 0.25rem) / 2) var(--kpt-space-2, 0.5rem);
|
|
3955
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
3956
|
+
background: var(--_bg);
|
|
3651
3957
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3652
3958
|
color: var(--kpt-color-on-surface);
|
|
3653
3959
|
}
|
|
@@ -3663,10 +3969,16 @@
|
|
|
3663
3969
|
font: inherit;
|
|
3664
3970
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
3665
3971
|
}
|
|
3972
|
+
.kpt-fieldset__body {
|
|
3973
|
+
padding-top: var(--kpt-space-2, 0.5rem);
|
|
3974
|
+
}
|
|
3975
|
+
.kpt-fieldset {
|
|
3976
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
3977
|
+
}
|
|
3666
3978
|
.kpt-fieldset__collapse {
|
|
3667
3979
|
display: grid;
|
|
3668
3980
|
grid-template-rows: 0fr;
|
|
3669
|
-
transition: grid-template-rows var(--
|
|
3981
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
3670
3982
|
}
|
|
3671
3983
|
.kpt-fieldset__collapse.is-open {
|
|
3672
3984
|
grid-template-rows: 1fr;
|
|
@@ -3675,13 +3987,59 @@
|
|
|
3675
3987
|
overflow: hidden;
|
|
3676
3988
|
min-height: 0;
|
|
3677
3989
|
}
|
|
3678
|
-
.kpt-
|
|
3679
|
-
|
|
3990
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
3991
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
3992
|
+
}
|
|
3993
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron.is-open {
|
|
3994
|
+
transform: rotate(180deg);
|
|
3995
|
+
}
|
|
3996
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__collapse {
|
|
3997
|
+
transition: none;
|
|
3998
|
+
}
|
|
3999
|
+
.kpt-fieldset[data-motion=none] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4000
|
+
transition: none;
|
|
4001
|
+
}
|
|
4002
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4003
|
+
opacity: 0;
|
|
4004
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
4005
|
+
}
|
|
4006
|
+
.kpt-fieldset[data-motion=fade] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4007
|
+
opacity: 1;
|
|
4008
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
4009
|
+
}
|
|
4010
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse {
|
|
4011
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
4012
|
+
}
|
|
4013
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse:not(.is-open) {
|
|
4014
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
4015
|
+
}
|
|
4016
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
4017
|
+
transition: transform calc(var(--_d) * 0.7) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4018
|
+
}
|
|
4019
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4020
|
+
opacity: 0;
|
|
4021
|
+
translate: 0 -0.5rem;
|
|
4022
|
+
filter: blur(4px);
|
|
4023
|
+
transition: opacity calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), filter calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard);
|
|
4024
|
+
}
|
|
4025
|
+
.kpt-fieldset[data-motion=spring] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4026
|
+
opacity: 1;
|
|
4027
|
+
translate: none;
|
|
4028
|
+
filter: none;
|
|
4029
|
+
transition: opacity calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12), translate calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_d) * 0.08), filter calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12);
|
|
3680
4030
|
}
|
|
3681
4031
|
@media (prefers-reduced-motion: reduce) {
|
|
3682
|
-
.kpt-fieldset__collapse
|
|
4032
|
+
.kpt-fieldset__collapse,
|
|
4033
|
+
.kpt-fieldset > .kpt-fieldset__legend > .kpt-fieldset__toggle > .kpt-fieldset__chevron {
|
|
3683
4034
|
transition: none;
|
|
3684
4035
|
}
|
|
4036
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse > .kpt-fieldset__collapse-inner > .kpt-fieldset__body,
|
|
4037
|
+
.kpt-fieldset[data-motion] > .kpt-fieldset__collapse.is-open > .kpt-fieldset__collapse-inner > .kpt-fieldset__body {
|
|
4038
|
+
transition: none;
|
|
4039
|
+
opacity: 1;
|
|
4040
|
+
translate: none;
|
|
4041
|
+
filter: none;
|
|
4042
|
+
}
|
|
3685
4043
|
}
|
|
3686
4044
|
}
|
|
3687
4045
|
|
|
@@ -3858,8 +4216,34 @@
|
|
|
3858
4216
|
background: var(--kpt-form-field-bg);
|
|
3859
4217
|
transform: translateY(calc(-50% - 1.25rem)) scale(0.85);
|
|
3860
4218
|
}
|
|
4219
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4220
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), translate var(--kpt-motion-duration-slow, 320ms) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), filter var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4221
|
+
}
|
|
4222
|
+
@starting-style {
|
|
4223
|
+
.kpt-form-field[data-live][data-motion=spring] .kpt-form-field__message {
|
|
4224
|
+
opacity: 0;
|
|
4225
|
+
translate: 0 -0.35rem;
|
|
4226
|
+
filter: blur(3px);
|
|
4227
|
+
}
|
|
4228
|
+
}
|
|
4229
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4230
|
+
transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4231
|
+
}
|
|
4232
|
+
@starting-style {
|
|
4233
|
+
.kpt-form-field[data-live][data-motion=fade] .kpt-form-field__message {
|
|
4234
|
+
opacity: 0;
|
|
4235
|
+
}
|
|
4236
|
+
}
|
|
4237
|
+
.kpt-form-field--float[data-motion=spring] .kpt-form-field__label {
|
|
4238
|
+
transition: transform calc(var(--kpt-motion-duration-slow, 320ms) * 1.1) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
4239
|
+
}
|
|
4240
|
+
.kpt-form-field--float[data-motion=none] .kpt-form-field__label {
|
|
4241
|
+
transition: none;
|
|
4242
|
+
}
|
|
3861
4243
|
@media (prefers-reduced-motion: reduce) {
|
|
3862
|
-
.kpt-form-field--float .kpt-form-field__label
|
|
4244
|
+
.kpt-form-field--float .kpt-form-field__label,
|
|
4245
|
+
.kpt-form-field--float[data-motion] .kpt-form-field__label,
|
|
4246
|
+
.kpt-form-field[data-live][data-motion] .kpt-form-field__message {
|
|
3863
4247
|
transition: none;
|
|
3864
4248
|
}
|
|
3865
4249
|
}
|
|
@@ -3931,7 +4315,7 @@
|
|
|
3931
4315
|
background: none;
|
|
3932
4316
|
cursor: pointer;
|
|
3933
4317
|
opacity: 0.6;
|
|
3934
|
-
transition: opacity 0.15s, border-color 0.15s;
|
|
4318
|
+
transition: opacity calc(0.15s * var(--kpt-motion-scale, 1)), border-color calc(0.15s * var(--kpt-motion-scale, 1));
|
|
3935
4319
|
}
|
|
3936
4320
|
.kpt-galleria__thumb img {
|
|
3937
4321
|
width: 100%;
|
|
@@ -3999,6 +4383,17 @@
|
|
|
3999
4383
|
color: var(--_fg);
|
|
4000
4384
|
cursor: pointer;
|
|
4001
4385
|
font-size: 1.25rem;
|
|
4386
|
+
transition: scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
4387
|
+
}
|
|
4388
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4389
|
+
--_press-t: 0.08s;
|
|
4390
|
+
--_press-e: ease-out;
|
|
4391
|
+
scale: 0.9;
|
|
4392
|
+
}
|
|
4393
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4394
|
+
.kpt-icon-button:active:not(:disabled):not([aria-disabled=true]) {
|
|
4395
|
+
scale: none;
|
|
4396
|
+
}
|
|
4002
4397
|
}
|
|
4003
4398
|
.kpt-icon-button::after {
|
|
4004
4399
|
content: "";
|
|
@@ -4061,6 +4456,15 @@
|
|
|
4061
4456
|
border-right-color: transparent;
|
|
4062
4457
|
border-radius: 50%;
|
|
4063
4458
|
animation: kpt-spinner-rotate 0.6s linear infinite;
|
|
4459
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4460
|
+
}
|
|
4461
|
+
@starting-style {
|
|
4462
|
+
.kpt-icon-button__spinner {
|
|
4463
|
+
scale: 0.3;
|
|
4464
|
+
}
|
|
4465
|
+
}
|
|
4466
|
+
:root[data-kpt-motion=off] .kpt-icon-button__spinner {
|
|
4467
|
+
animation-duration: 1.4s;
|
|
4064
4468
|
}
|
|
4065
4469
|
}
|
|
4066
4470
|
|
|
@@ -4098,7 +4502,7 @@
|
|
|
4098
4502
|
font-size: 1.25rem;
|
|
4099
4503
|
background: var(--kpt-color-overlay-scrim);
|
|
4100
4504
|
opacity: 0;
|
|
4101
|
-
transition: opacity 0.2s;
|
|
4505
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1));
|
|
4102
4506
|
}
|
|
4103
4507
|
.kpt-image__mask .kpt-icon-host {
|
|
4104
4508
|
width: 2.5rem;
|
|
@@ -4199,11 +4603,27 @@
|
|
|
4199
4603
|
opacity: 0.6;
|
|
4200
4604
|
background-color: var(--kpt-color-surface-variant);
|
|
4201
4605
|
}
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4606
|
+
.kpt-input-host[data-speech] {
|
|
4607
|
+
position: relative;
|
|
4608
|
+
}
|
|
4609
|
+
.kpt-input-host[data-speech] .kpt-input__field {
|
|
4610
|
+
padding-inline-end: 2.5rem;
|
|
4611
|
+
transition-property: border-color, box-shadow, padding-inline-end;
|
|
4612
|
+
}
|
|
4613
|
+
.kpt-input-host[data-speech=listening] .kpt-input__field {
|
|
4614
|
+
padding-inline-end: 4.5rem;
|
|
4615
|
+
}
|
|
4616
|
+
.kpt-input__speech {
|
|
4617
|
+
position: absolute;
|
|
4618
|
+
inset-block: 0;
|
|
4619
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
4620
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
4621
|
+
}
|
|
4622
|
+
}
|
|
4623
|
+
|
|
4624
|
+
/* src/lib/input-mask/input-mask.component.scss */
|
|
4625
|
+
@layer kpt.components {
|
|
4626
|
+
.kpt-input-mask-host {
|
|
4207
4627
|
display: block;
|
|
4208
4628
|
}
|
|
4209
4629
|
.kpt-input-mask__input {
|
|
@@ -4233,6 +4653,14 @@
|
|
|
4233
4653
|
.kpt-input-mask--invalid {
|
|
4234
4654
|
border-color: var(--kpt-form-field-border-error);
|
|
4235
4655
|
}
|
|
4656
|
+
.kpt-input-mask__input {
|
|
4657
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4658
|
+
}
|
|
4659
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4660
|
+
.kpt-input-mask__input {
|
|
4661
|
+
transition: none;
|
|
4662
|
+
}
|
|
4663
|
+
}
|
|
4236
4664
|
}
|
|
4237
4665
|
|
|
4238
4666
|
/* src/lib/input-number/input-number.component.scss */
|
|
@@ -4298,6 +4726,14 @@
|
|
|
4298
4726
|
cursor: not-allowed;
|
|
4299
4727
|
opacity: 0.5;
|
|
4300
4728
|
}
|
|
4729
|
+
.kpt-input-number {
|
|
4730
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4731
|
+
}
|
|
4732
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4733
|
+
.kpt-input-number {
|
|
4734
|
+
transition: none;
|
|
4735
|
+
}
|
|
4736
|
+
}
|
|
4301
4737
|
}
|
|
4302
4738
|
|
|
4303
4739
|
/* src/lib/input-otp/input-otp.component.scss */
|
|
@@ -4339,6 +4775,14 @@
|
|
|
4339
4775
|
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4340
4776
|
user-select: none;
|
|
4341
4777
|
}
|
|
4778
|
+
.kpt-input-otp__cell {
|
|
4779
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4780
|
+
}
|
|
4781
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4782
|
+
.kpt-input-otp__cell {
|
|
4783
|
+
transition: none;
|
|
4784
|
+
}
|
|
4785
|
+
}
|
|
4342
4786
|
}
|
|
4343
4787
|
|
|
4344
4788
|
/* src/lib/knob/knob.component.scss */
|
|
@@ -4368,12 +4812,45 @@
|
|
|
4368
4812
|
.kpt-knob__value {
|
|
4369
4813
|
stroke: var(--kpt-color-primary);
|
|
4370
4814
|
}
|
|
4815
|
+
.kpt-knob svg {
|
|
4816
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4817
|
+
}
|
|
4818
|
+
.kpt-knob__value {
|
|
4819
|
+
transition: filter var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4820
|
+
}
|
|
4821
|
+
.kpt-knob__text {
|
|
4822
|
+
transform-box: fill-box;
|
|
4823
|
+
transform-origin: center;
|
|
4824
|
+
transition: scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
4825
|
+
}
|
|
4826
|
+
.kpt-knob:hover:not([aria-disabled=true]) .kpt-knob__value {
|
|
4827
|
+
filter: drop-shadow(0 0 3px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent));
|
|
4828
|
+
}
|
|
4829
|
+
.kpt-knob.is-grabbing {
|
|
4830
|
+
cursor: grabbing;
|
|
4831
|
+
}
|
|
4832
|
+
.kpt-knob.is-grabbing svg {
|
|
4833
|
+
scale: 1.04;
|
|
4834
|
+
}
|
|
4835
|
+
.kpt-knob.is-grabbing .kpt-knob__value {
|
|
4836
|
+
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--kpt-color-primary) 60%, transparent));
|
|
4837
|
+
}
|
|
4838
|
+
.kpt-knob.is-grabbing .kpt-knob__text {
|
|
4839
|
+
scale: 1.1;
|
|
4840
|
+
}
|
|
4371
4841
|
.kpt-knob__text {
|
|
4372
4842
|
fill: var(--kpt-color-on-surface);
|
|
4373
4843
|
font-size: var(--kpt-font-size-lg, 1.125rem);
|
|
4374
4844
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
4375
4845
|
font-variant-numeric: tabular-nums;
|
|
4376
4846
|
}
|
|
4847
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4848
|
+
.kpt-knob svg,
|
|
4849
|
+
.kpt-knob__value,
|
|
4850
|
+
.kpt-knob__text {
|
|
4851
|
+
transition: none;
|
|
4852
|
+
}
|
|
4853
|
+
}
|
|
4377
4854
|
}
|
|
4378
4855
|
|
|
4379
4856
|
/* src/lib/listbox/listbox.component.scss */
|
|
@@ -4459,6 +4936,105 @@
|
|
|
4459
4936
|
color: var(--kpt-color-on-surface-muted);
|
|
4460
4937
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
4461
4938
|
}
|
|
4939
|
+
.kpt-listbox {
|
|
4940
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
4941
|
+
}
|
|
4942
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4943
|
+
.kpt-listbox {
|
|
4944
|
+
transition: none;
|
|
4945
|
+
}
|
|
4946
|
+
}
|
|
4947
|
+
}
|
|
4948
|
+
|
|
4949
|
+
/* src/lib/loader/loader.component.scss */
|
|
4950
|
+
@layer kpt.components {
|
|
4951
|
+
.kpt-loader-host {
|
|
4952
|
+
display: inline-flex;
|
|
4953
|
+
vertical-align: middle;
|
|
4954
|
+
}
|
|
4955
|
+
.kpt-loader {
|
|
4956
|
+
--_size: 5rem;
|
|
4957
|
+
position: relative;
|
|
4958
|
+
display: inline-grid;
|
|
4959
|
+
place-items: center;
|
|
4960
|
+
color: var(--kpt-color-text);
|
|
4961
|
+
}
|
|
4962
|
+
.kpt-loader__stage,
|
|
4963
|
+
.kpt-loader__content {
|
|
4964
|
+
grid-area: 1/1;
|
|
4965
|
+
}
|
|
4966
|
+
.kpt-loader__stage {
|
|
4967
|
+
display: block;
|
|
4968
|
+
line-height: 0;
|
|
4969
|
+
}
|
|
4970
|
+
.kpt-loader__svg {
|
|
4971
|
+
display: block;
|
|
4972
|
+
overflow: visible;
|
|
4973
|
+
width: calc(var(--_size) * var(--_vw, 100) / 100);
|
|
4974
|
+
height: calc(var(--_size) * var(--_vh, 100) / 100);
|
|
4975
|
+
}
|
|
4976
|
+
.kpt-loader__content {
|
|
4977
|
+
display: grid;
|
|
4978
|
+
place-items: center;
|
|
4979
|
+
width: calc(var(--_size) * 0.64);
|
|
4980
|
+
aspect-ratio: 1;
|
|
4981
|
+
transform-origin: 50% 50%;
|
|
4982
|
+
font-size: calc(var(--_size) * 0.3);
|
|
4983
|
+
}
|
|
4984
|
+
.kpt-loader__content:empty,
|
|
4985
|
+
.kpt-loader:not([data-variant=ring]) .kpt-loader__content {
|
|
4986
|
+
display: none;
|
|
4987
|
+
}
|
|
4988
|
+
.kpt-loader__blob {
|
|
4989
|
+
transition: fill calc(0.35s * var(--kpt-motion-scale, 1)) ease;
|
|
4990
|
+
}
|
|
4991
|
+
.kpt-loader__shadow {
|
|
4992
|
+
fill: var(--kpt-color-overlay-scrim);
|
|
4993
|
+
}
|
|
4994
|
+
.kpt-loader__mark path {
|
|
4995
|
+
fill: none;
|
|
4996
|
+
stroke: currentColor;
|
|
4997
|
+
stroke-width: 2.6;
|
|
4998
|
+
stroke-linecap: round;
|
|
4999
|
+
stroke-linejoin: round;
|
|
5000
|
+
}
|
|
5001
|
+
.kpt-loader__halo {
|
|
5002
|
+
fill: none;
|
|
5003
|
+
stroke: currentColor;
|
|
5004
|
+
}
|
|
5005
|
+
.kpt-loader__track,
|
|
5006
|
+
.kpt-loader__arc,
|
|
5007
|
+
.kpt-loader__line {
|
|
5008
|
+
fill: none;
|
|
5009
|
+
stroke-linecap: round;
|
|
5010
|
+
stroke-linejoin: round;
|
|
5011
|
+
transition: stroke calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
5012
|
+
}
|
|
5013
|
+
.kpt-loader__track {
|
|
5014
|
+
stroke: var(--kpt-color-border);
|
|
5015
|
+
}
|
|
5016
|
+
.kpt-loader__track,
|
|
5017
|
+
.kpt-loader__arc {
|
|
5018
|
+
stroke-width: 3.6;
|
|
5019
|
+
}
|
|
5020
|
+
.kpt-loader__line {
|
|
5021
|
+
stroke-width: 4;
|
|
5022
|
+
}
|
|
5023
|
+
.kpt-loader__text {
|
|
5024
|
+
font-family: var(--kpt-font-family-sans);
|
|
5025
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
5026
|
+
}
|
|
5027
|
+
.kpt-loader__label {
|
|
5028
|
+
position: absolute;
|
|
5029
|
+
width: 1px;
|
|
5030
|
+
height: 1px;
|
|
5031
|
+
margin: -1px;
|
|
5032
|
+
padding: 0;
|
|
5033
|
+
overflow: hidden;
|
|
5034
|
+
clip-path: inset(50%);
|
|
5035
|
+
white-space: nowrap;
|
|
5036
|
+
border: 0;
|
|
5037
|
+
}
|
|
4462
5038
|
}
|
|
4463
5039
|
|
|
4464
5040
|
/* src/lib/megamenu/megamenu.component.scss */
|
|
@@ -4545,7 +5121,7 @@
|
|
|
4545
5121
|
/* src/lib/mention/mention.component.scss */
|
|
4546
5122
|
@charset "UTF-8";
|
|
4547
5123
|
@layer kpt.components {
|
|
4548
|
-
/* Wzmianka żyje w zdaniu, więc host jest `inline`
|
|
5124
|
+
/* Wzmianka żyje w zdaniu, więc host jest `inline` - `inline-block` nie łamałby się razem
|
|
4549
5125
|
z wierszem i długi akapit rozjeżdżałby się na wąskim ekranie. */
|
|
4550
5126
|
.kpt-mention-host,
|
|
4551
5127
|
.kpt-mentions-host,
|
|
@@ -4563,7 +5139,7 @@
|
|
|
4563
5139
|
background: transparent;
|
|
4564
5140
|
color: var(--kpt-color-primary);
|
|
4565
5141
|
font: inherit;
|
|
4566
|
-
/* Kropkowana linia mówi
|
|
5142
|
+
/* Kropkowana linia mówi "tu coś jest do podejrzenia", zanim ktokolwiek najedzie - ciągłe
|
|
4567
5143
|
podkreślenie znaczyłoby link, a wzmianka zwykle nigdzie nie prowadzi, tylko otwiera kartę.
|
|
4568
5144
|
W spoczynku jest jasna, żeby nie rozbijała akapitu; pod kursorem i przy otwartej karcie
|
|
4569
5145
|
ciemnieje do koloru samej wzmianki. */
|
|
@@ -4586,7 +5162,7 @@
|
|
|
4586
5162
|
}
|
|
4587
5163
|
}
|
|
4588
5164
|
.kpt-mention {
|
|
4589
|
-
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje
|
|
5165
|
+
/* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje - więc także
|
|
4590
5166
|
bez kropkowanej linii, która tę obietnicę składa. */
|
|
4591
5167
|
}
|
|
4592
5168
|
.kpt-mention[data-plain] {
|
|
@@ -4646,7 +5222,7 @@
|
|
|
4646
5222
|
.kpt-menu__item--danger .kpt-icon-host {
|
|
4647
5223
|
color: var(--kpt-color-danger);
|
|
4648
5224
|
}
|
|
4649
|
-
/* Wiersz nagłówkowy
|
|
5225
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
4650
5226
|
.kpt-menu__header {
|
|
4651
5227
|
display: flex;
|
|
4652
5228
|
align-items: center;
|
|
@@ -4782,7 +5358,7 @@
|
|
|
4782
5358
|
}
|
|
4783
5359
|
.kpt-meter-group__segment {
|
|
4784
5360
|
height: 100%;
|
|
4785
|
-
transition: width 0.3s ease;
|
|
5361
|
+
transition: width calc(0.3s * var(--kpt-motion-scale, 1)) ease;
|
|
4786
5362
|
}
|
|
4787
5363
|
.kpt-meter-group__legend {
|
|
4788
5364
|
display: flex;
|
|
@@ -4894,6 +5470,28 @@
|
|
|
4894
5470
|
.kpt-order-list__item.is-dragging {
|
|
4895
5471
|
opacity: 0.5;
|
|
4896
5472
|
}
|
|
5473
|
+
.kpt-order-list__item--moving {
|
|
5474
|
+
position: relative;
|
|
5475
|
+
z-index: 1;
|
|
5476
|
+
}
|
|
5477
|
+
.kpt-order-list__item--moving.is-selected {
|
|
5478
|
+
background: linear-gradient(color-mix(in oklch, var(--kpt-color-primary) 16%, transparent) 0 0) var(--kpt-color-surface-raised);
|
|
5479
|
+
}
|
|
5480
|
+
::view-transition-group(.kpt-order-list-morph) {
|
|
5481
|
+
animation-duration: 0.5s;
|
|
5482
|
+
animation-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5483
|
+
}
|
|
5484
|
+
::view-transition-image-pair(.kpt-order-list-morph) {
|
|
5485
|
+
overflow: clip;
|
|
5486
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5487
|
+
}
|
|
5488
|
+
::view-transition-old(.kpt-order-list-morph),
|
|
5489
|
+
::view-transition-new(.kpt-order-list-morph) {
|
|
5490
|
+
width: 100%;
|
|
5491
|
+
height: 100%;
|
|
5492
|
+
object-fit: none;
|
|
5493
|
+
object-position: 0 0;
|
|
5494
|
+
}
|
|
4897
5495
|
}
|
|
4898
5496
|
|
|
4899
5497
|
/* src/lib/paginator/paginator.component.scss */
|
|
@@ -4969,10 +5567,16 @@
|
|
|
4969
5567
|
.kpt-panel__toggle:hover {
|
|
4970
5568
|
color: var(--kpt-color-on-surface);
|
|
4971
5569
|
}
|
|
5570
|
+
.kpt-panel__body {
|
|
5571
|
+
padding: var(--kpt-space-4, 1rem);
|
|
5572
|
+
}
|
|
5573
|
+
.kpt-panel {
|
|
5574
|
+
--_d: calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1));
|
|
5575
|
+
}
|
|
4972
5576
|
.kpt-panel__collapse {
|
|
4973
5577
|
display: grid;
|
|
4974
5578
|
grid-template-rows: 0fr;
|
|
4975
|
-
transition: grid-template-rows var(--
|
|
5579
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
4976
5580
|
}
|
|
4977
5581
|
.kpt-panel__collapse.is-open {
|
|
4978
5582
|
grid-template-rows: 1fr;
|
|
@@ -4981,13 +5585,59 @@
|
|
|
4981
5585
|
overflow: hidden;
|
|
4982
5586
|
min-height: 0;
|
|
4983
5587
|
}
|
|
4984
|
-
.kpt-
|
|
4985
|
-
|
|
5588
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5589
|
+
transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
|
|
5590
|
+
}
|
|
5591
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron.is-open {
|
|
5592
|
+
transform: rotate(180deg);
|
|
5593
|
+
}
|
|
5594
|
+
.kpt-panel[data-motion=none] > .kpt-panel__collapse {
|
|
5595
|
+
transition: none;
|
|
5596
|
+
}
|
|
5597
|
+
.kpt-panel[data-motion=none] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5598
|
+
transition: none;
|
|
5599
|
+
}
|
|
5600
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5601
|
+
opacity: 0;
|
|
5602
|
+
transition: opacity calc(var(--_d) * 0.4) var(--kpt-motion-easing-standard);
|
|
5603
|
+
}
|
|
5604
|
+
.kpt-panel[data-motion=fade] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5605
|
+
opacity: 1;
|
|
5606
|
+
transition-delay: calc(var(--_d) * 0.3);
|
|
5607
|
+
}
|
|
5608
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse {
|
|
5609
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5610
|
+
}
|
|
5611
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse:not(.is-open) {
|
|
5612
|
+
transition-delay: calc(var(--_d) * 0.15);
|
|
5613
|
+
}
|
|
5614
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
5615
|
+
transition: transform calc(var(--_d) * 0.7) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
5616
|
+
}
|
|
5617
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5618
|
+
opacity: 0;
|
|
5619
|
+
translate: 0 -0.5rem;
|
|
5620
|
+
filter: blur(4px);
|
|
5621
|
+
transition: opacity calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard), filter calc(var(--_d) * 0.3) var(--kpt-motion-easing-standard);
|
|
5622
|
+
}
|
|
5623
|
+
.kpt-panel[data-motion=spring] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5624
|
+
opacity: 1;
|
|
5625
|
+
translate: none;
|
|
5626
|
+
filter: none;
|
|
5627
|
+
transition: opacity calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12), translate calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_d) * 0.08), filter calc(var(--_d) * 0.5) var(--kpt-motion-easing-standard) calc(var(--_d) * 0.12);
|
|
4986
5628
|
}
|
|
4987
5629
|
@media (prefers-reduced-motion: reduce) {
|
|
4988
|
-
.kpt-panel__collapse
|
|
5630
|
+
.kpt-panel__collapse,
|
|
5631
|
+
.kpt-panel > .kpt-panel__header > .kpt-panel__toggle > .kpt-panel__chevron {
|
|
4989
5632
|
transition: none;
|
|
4990
5633
|
}
|
|
5634
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse > .kpt-panel__collapse-inner > .kpt-panel__body,
|
|
5635
|
+
.kpt-panel[data-motion] > .kpt-panel__collapse.is-open > .kpt-panel__collapse-inner > .kpt-panel__body {
|
|
5636
|
+
transition: none;
|
|
5637
|
+
opacity: 1;
|
|
5638
|
+
translate: none;
|
|
5639
|
+
filter: none;
|
|
5640
|
+
}
|
|
4991
5641
|
}
|
|
4992
5642
|
}
|
|
4993
5643
|
|
|
@@ -5056,27 +5706,84 @@
|
|
|
5056
5706
|
flex: 1;
|
|
5057
5707
|
}
|
|
5058
5708
|
.kpt-password__bar {
|
|
5709
|
+
position: relative;
|
|
5059
5710
|
height: 4px;
|
|
5060
5711
|
flex: 1;
|
|
5712
|
+
overflow: hidden;
|
|
5061
5713
|
border-radius: 2px;
|
|
5062
5714
|
background: var(--kpt-color-border);
|
|
5063
|
-
|
|
5715
|
+
}
|
|
5716
|
+
.kpt-password__bar::after {
|
|
5717
|
+
content: "";
|
|
5718
|
+
position: absolute;
|
|
5719
|
+
inset: 0;
|
|
5720
|
+
border-radius: inherit;
|
|
5721
|
+
background: var(--_bar-color, transparent);
|
|
5722
|
+
scale: 0 1;
|
|
5723
|
+
transform-origin: left center;
|
|
5724
|
+
transition: scale calc(0.32s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-emphasized, ease-out) calc((3 - var(--_i, 0)) * 0.04s * var(--kpt-motion-scale, 1)), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
5725
|
+
}
|
|
5726
|
+
.kpt-password__bar:dir(rtl)::after {
|
|
5727
|
+
transform-origin: right center;
|
|
5728
|
+
}
|
|
5729
|
+
.kpt-password__bar.is-on::after {
|
|
5730
|
+
scale: 1 1;
|
|
5731
|
+
transition-delay: calc(var(--_i, 0) * 0.04s * var(--kpt-motion-scale, 1)), 0s;
|
|
5064
5732
|
}
|
|
5065
5733
|
.kpt-password__hint {
|
|
5066
5734
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
5067
5735
|
color: var(--kpt-color-on-surface-muted);
|
|
5068
5736
|
}
|
|
5069
|
-
.kpt-password__meter[data-score="1"]
|
|
5070
|
-
|
|
5737
|
+
.kpt-password__meter[data-score="1"] {
|
|
5738
|
+
--_bar-color: var(--kpt-color-danger);
|
|
5071
5739
|
}
|
|
5072
|
-
.kpt-password__meter[data-score="2"]
|
|
5073
|
-
|
|
5740
|
+
.kpt-password__meter[data-score="2"] {
|
|
5741
|
+
--_bar-color: var(--kpt-color-warning);
|
|
5074
5742
|
}
|
|
5075
|
-
.kpt-password__meter[data-score="3"]
|
|
5076
|
-
|
|
5743
|
+
.kpt-password__meter[data-score="3"] {
|
|
5744
|
+
--_bar-color: var(--kpt-color-info);
|
|
5077
5745
|
}
|
|
5078
|
-
.kpt-password__meter[data-score="4"]
|
|
5079
|
-
|
|
5746
|
+
.kpt-password__meter[data-score="4"] {
|
|
5747
|
+
--_bar-color: var(--kpt-color-success);
|
|
5748
|
+
}
|
|
5749
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5750
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5751
|
+
transition: opacity calc(0.24s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), translate calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1), filter calc(0.24s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
5752
|
+
}
|
|
5753
|
+
@starting-style {
|
|
5754
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__meter,
|
|
5755
|
+
.kpt-password-host[data-live]:not([data-motion=none]) .kpt-password__hint {
|
|
5756
|
+
opacity: 0;
|
|
5757
|
+
}
|
|
5758
|
+
}
|
|
5759
|
+
@starting-style {
|
|
5760
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__meter {
|
|
5761
|
+
translate: 0 -0.25rem;
|
|
5762
|
+
}
|
|
5763
|
+
}
|
|
5764
|
+
@starting-style {
|
|
5765
|
+
.kpt-password-host[data-live][data-motion=spring] .kpt-password__hint {
|
|
5766
|
+
translate: 0 0.35rem;
|
|
5767
|
+
filter: blur(3px);
|
|
5768
|
+
}
|
|
5769
|
+
}
|
|
5770
|
+
.kpt-password-host[data-motion=none] .kpt-password__bar::after {
|
|
5771
|
+
transition: none;
|
|
5772
|
+
}
|
|
5773
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5774
|
+
.kpt-password__bar::after,
|
|
5775
|
+
.kpt-password-host[data-live] .kpt-password__meter,
|
|
5776
|
+
.kpt-password-host[data-live] .kpt-password__hint {
|
|
5777
|
+
transition: none;
|
|
5778
|
+
}
|
|
5779
|
+
}
|
|
5780
|
+
.kpt-password {
|
|
5781
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
5782
|
+
}
|
|
5783
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5784
|
+
.kpt-password {
|
|
5785
|
+
transition: none;
|
|
5786
|
+
}
|
|
5080
5787
|
}
|
|
5081
5788
|
}
|
|
5082
5789
|
|
|
@@ -5098,7 +5805,7 @@
|
|
|
5098
5805
|
color: var(--kpt-color-on-surface);
|
|
5099
5806
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
5100
5807
|
box-shadow: var(--kpt-elevation-3);
|
|
5101
|
-
/* Karta otwarta hoverem nie pokazuje obwódki fokusu
|
|
5808
|
+
/* Karta otwarta hoverem nie pokazuje obwódki fokusu - dostaje ją dopiero przypięta, bo wtedy
|
|
5102
5809
|
naprawdę trzyma fokus i użytkownik musi wiedzieć, gdzie jest. */
|
|
5103
5810
|
}
|
|
5104
5811
|
.kpt-peek__panel:focus {
|
|
@@ -5116,10 +5823,39 @@
|
|
|
5116
5823
|
display: block;
|
|
5117
5824
|
}
|
|
5118
5825
|
.kpt-pick-list {
|
|
5826
|
+
position: relative;
|
|
5119
5827
|
display: flex;
|
|
5120
5828
|
align-items: stretch;
|
|
5121
5829
|
gap: var(--kpt-space-3, 0.75rem);
|
|
5122
5830
|
}
|
|
5831
|
+
.kpt-pick-list__ghost {
|
|
5832
|
+
z-index: 2;
|
|
5833
|
+
list-style: none;
|
|
5834
|
+
background: var(--kpt-color-surface-raised);
|
|
5835
|
+
box-shadow: 0 4px 14px -6px var(--kpt-color-overlay-scrim);
|
|
5836
|
+
}
|
|
5837
|
+
.kpt-pick-list__item--waiting {
|
|
5838
|
+
visibility: hidden;
|
|
5839
|
+
}
|
|
5840
|
+
.kpt-pick-list__item--moving {
|
|
5841
|
+
position: relative;
|
|
5842
|
+
z-index: 1;
|
|
5843
|
+
}
|
|
5844
|
+
::view-transition-group(.kpt-pick-list-morph) {
|
|
5845
|
+
animation-duration: 0.5s;
|
|
5846
|
+
animation-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
5847
|
+
}
|
|
5848
|
+
::view-transition-image-pair(.kpt-pick-list-morph) {
|
|
5849
|
+
overflow: clip;
|
|
5850
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
5851
|
+
}
|
|
5852
|
+
::view-transition-old(.kpt-pick-list-morph),
|
|
5853
|
+
::view-transition-new(.kpt-pick-list-morph) {
|
|
5854
|
+
width: 100%;
|
|
5855
|
+
height: 100%;
|
|
5856
|
+
object-fit: none;
|
|
5857
|
+
object-position: 0 0;
|
|
5858
|
+
}
|
|
5123
5859
|
.kpt-pick-list__col {
|
|
5124
5860
|
flex: 1;
|
|
5125
5861
|
min-width: 0;
|
|
@@ -5392,6 +6128,11 @@
|
|
|
5392
6128
|
stroke-dashoffset: -99;
|
|
5393
6129
|
}
|
|
5394
6130
|
}
|
|
6131
|
+
:root[data-kpt-motion=off] .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
6132
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate,
|
|
6133
|
+
:root[data-kpt-motion=off] .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
|
|
6134
|
+
animation-duration: 3.2s;
|
|
6135
|
+
}
|
|
5395
6136
|
@media (prefers-reduced-motion: reduce) {
|
|
5396
6137
|
.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
|
|
5397
6138
|
.kpt-progress__circular.kpt-progress--indeterminate,
|
|
@@ -5469,6 +6210,22 @@
|
|
|
5469
6210
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
5470
6211
|
outline-offset: 2px;
|
|
5471
6212
|
}
|
|
6213
|
+
.kpt-radio-group[data-motion=spring] .kpt-radio__dot::after {
|
|
6214
|
+
transition: transform calc(0.42s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
6215
|
+
}
|
|
6216
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot {
|
|
6217
|
+
transition: none;
|
|
6218
|
+
}
|
|
6219
|
+
.kpt-radio-group[data-motion=none] .kpt-radio__dot::after {
|
|
6220
|
+
transition: none;
|
|
6221
|
+
}
|
|
6222
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6223
|
+
.kpt-radio__dot,
|
|
6224
|
+
.kpt-radio__dot::after,
|
|
6225
|
+
.kpt-radio-group[data-motion] .kpt-radio__dot::after {
|
|
6226
|
+
transition: none;
|
|
6227
|
+
}
|
|
6228
|
+
}
|
|
5472
6229
|
}
|
|
5473
6230
|
|
|
5474
6231
|
/* src/lib/rating/rating.component.scss */
|
|
@@ -5480,6 +6237,15 @@
|
|
|
5480
6237
|
display: inline-flex;
|
|
5481
6238
|
gap: 0.15rem;
|
|
5482
6239
|
font-size: 1.4rem;
|
|
6240
|
+
touch-action: pan-y;
|
|
6241
|
+
user-select: none;
|
|
6242
|
+
-webkit-user-select: none;
|
|
6243
|
+
}
|
|
6244
|
+
.kpt-rating.is-dragging {
|
|
6245
|
+
cursor: grabbing;
|
|
6246
|
+
}
|
|
6247
|
+
.kpt-rating.is-dragging .kpt-rating__hit {
|
|
6248
|
+
cursor: grabbing;
|
|
5483
6249
|
}
|
|
5484
6250
|
.kpt-rating__star {
|
|
5485
6251
|
position: relative;
|
|
@@ -5950,7 +6716,7 @@
|
|
|
5950
6716
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
5951
6717
|
color: var(--kpt-color-on-surface-muted);
|
|
5952
6718
|
}
|
|
5953
|
-
/* Lista podpowiedzi wzmianek
|
|
6719
|
+
/* Lista podpowiedzi wzmianek - ten sam wygląd co menu kontekstowe tabeli, bo obie wychodzą
|
|
5954
6720
|
spod kursora w środku treści i mają się czytać jak jedna rodzina. */
|
|
5955
6721
|
.kpt-rt-mentions {
|
|
5956
6722
|
min-inline-size: 12rem;
|
|
@@ -6086,6 +6852,14 @@
|
|
|
6086
6852
|
.kpt-rt-border__widths button:hover {
|
|
6087
6853
|
background: var(--kpt-color-muted);
|
|
6088
6854
|
}
|
|
6855
|
+
.kpt-rich-text {
|
|
6856
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
6857
|
+
}
|
|
6858
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6859
|
+
.kpt-rich-text {
|
|
6860
|
+
transition: none;
|
|
6861
|
+
}
|
|
6862
|
+
}
|
|
6089
6863
|
}
|
|
6090
6864
|
|
|
6091
6865
|
/* src/lib/scroll-top/scroll-top.component.scss */
|
|
@@ -6112,7 +6886,7 @@
|
|
|
6112
6886
|
opacity: 0;
|
|
6113
6887
|
visibility: hidden;
|
|
6114
6888
|
transform: translateY(0.5rem);
|
|
6115
|
-
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
|
|
6889
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)), visibility calc(0.2s * var(--kpt-motion-scale, 1)), transform calc(0.2s * var(--kpt-motion-scale, 1));
|
|
6116
6890
|
}
|
|
6117
6891
|
.kpt-scroll-top.is-visible {
|
|
6118
6892
|
opacity: 1;
|
|
@@ -6170,6 +6944,7 @@
|
|
|
6170
6944
|
background: var(--kpt-color-surface-variant);
|
|
6171
6945
|
}
|
|
6172
6946
|
.kpt-select__value {
|
|
6947
|
+
position: relative;
|
|
6173
6948
|
flex: 1;
|
|
6174
6949
|
min-width: 0;
|
|
6175
6950
|
display: flex;
|
|
@@ -6308,6 +7083,14 @@
|
|
|
6308
7083
|
color: var(--kpt-color-on-surface-muted);
|
|
6309
7084
|
text-align: center;
|
|
6310
7085
|
}
|
|
7086
|
+
.kpt-select {
|
|
7087
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
7088
|
+
}
|
|
7089
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7090
|
+
.kpt-select {
|
|
7091
|
+
transition: none;
|
|
7092
|
+
}
|
|
7093
|
+
}
|
|
6311
7094
|
}
|
|
6312
7095
|
|
|
6313
7096
|
/* src/lib/sidenav/sidenav.component.scss */
|
|
@@ -6323,7 +7106,7 @@
|
|
|
6323
7106
|
color: var(--kpt-sidenav-fg);
|
|
6324
7107
|
border-inline-end: var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border);
|
|
6325
7108
|
}
|
|
6326
|
-
/* Przewija się tylko nawigacja
|
|
7109
|
+
/* Przewija się tylko nawigacja - stopka stoi poza tym obszarem. */
|
|
6327
7110
|
.kpt-sidenav__scroll {
|
|
6328
7111
|
display: flex;
|
|
6329
7112
|
flex-direction: column;
|
|
@@ -6386,6 +7169,9 @@
|
|
|
6386
7169
|
background-position: -200% 0;
|
|
6387
7170
|
}
|
|
6388
7171
|
}
|
|
7172
|
+
:root[data-kpt-motion=off] .kpt-skeleton {
|
|
7173
|
+
animation-duration: 2.8s;
|
|
7174
|
+
}
|
|
6389
7175
|
@media (prefers-reduced-motion: reduce) {
|
|
6390
7176
|
.kpt-skeleton {
|
|
6391
7177
|
animation: none;
|
|
@@ -6400,58 +7186,114 @@
|
|
|
6400
7186
|
align-items: center;
|
|
6401
7187
|
gap: var(--kpt-space-3, 0.75rem);
|
|
6402
7188
|
}
|
|
6403
|
-
.kpt-
|
|
6404
|
-
--
|
|
7189
|
+
.kpt-slider__track {
|
|
7190
|
+
--_p: 0;
|
|
7191
|
+
--_thumb: 1.1rem;
|
|
7192
|
+
--_glide: calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
7193
|
+
position: relative;
|
|
6405
7194
|
flex: 1;
|
|
6406
7195
|
height: 1.25rem;
|
|
7196
|
+
}
|
|
7197
|
+
.kpt-slider__track[data-dragging] {
|
|
7198
|
+
--_glide: 0s linear;
|
|
7199
|
+
}
|
|
7200
|
+
.kpt-slider__input,
|
|
7201
|
+
.kpt-slider__thumb {
|
|
7202
|
+
position: absolute;
|
|
7203
|
+
inset: 0;
|
|
7204
|
+
width: 100%;
|
|
7205
|
+
height: 100%;
|
|
7206
|
+
margin: 0;
|
|
6407
7207
|
appearance: none;
|
|
6408
7208
|
background: none;
|
|
6409
7209
|
cursor: pointer;
|
|
6410
7210
|
}
|
|
6411
|
-
.kpt-slider__input::-webkit-slider-runnable-track
|
|
7211
|
+
.kpt-slider__input::-webkit-slider-runnable-track,
|
|
7212
|
+
.kpt-slider__thumb::-webkit-slider-runnable-track {
|
|
6412
7213
|
height: 0.4rem;
|
|
6413
|
-
|
|
6414
|
-
background: linear-gradient(to right, var(--kpt-color-primary) var(--_pct), var(--kpt-color-surface-variant) var(--_pct));
|
|
7214
|
+
background: none;
|
|
6415
7215
|
}
|
|
6416
|
-
.kpt-slider__input::-moz-range-track
|
|
7216
|
+
.kpt-slider__input::-moz-range-track,
|
|
7217
|
+
.kpt-slider__thumb::-moz-range-track {
|
|
6417
7218
|
height: 0.4rem;
|
|
6418
|
-
|
|
6419
|
-
background: var(--kpt-color-surface-variant);
|
|
7219
|
+
background: none;
|
|
6420
7220
|
}
|
|
6421
|
-
.kpt-slider__input::-moz-range-progress
|
|
6422
|
-
|
|
6423
|
-
|
|
6424
|
-
background: var(--kpt-color-primary);
|
|
7221
|
+
.kpt-slider__input::-moz-range-progress,
|
|
7222
|
+
.kpt-slider__thumb::-moz-range-progress {
|
|
7223
|
+
background: none;
|
|
6425
7224
|
}
|
|
6426
|
-
.kpt-slider__input::-webkit-slider-thumb
|
|
7225
|
+
.kpt-slider__input::-webkit-slider-thumb,
|
|
7226
|
+
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6427
7227
|
appearance: none;
|
|
6428
|
-
width:
|
|
6429
|
-
height:
|
|
7228
|
+
width: var(--_thumb);
|
|
7229
|
+
height: var(--_thumb);
|
|
6430
7230
|
margin-top: -0.35rem;
|
|
6431
7231
|
border-radius: 50%;
|
|
6432
|
-
background:
|
|
6433
|
-
box-shadow: var(--kpt-elevation-1);
|
|
7232
|
+
background: transparent;
|
|
6434
7233
|
}
|
|
6435
|
-
.kpt-slider__input::-moz-range-thumb
|
|
6436
|
-
|
|
6437
|
-
|
|
7234
|
+
.kpt-slider__input::-moz-range-thumb,
|
|
7235
|
+
.kpt-slider__thumb::-moz-range-thumb {
|
|
7236
|
+
width: var(--_thumb);
|
|
7237
|
+
height: var(--_thumb);
|
|
6438
7238
|
border: 0;
|
|
6439
7239
|
border-radius: 50%;
|
|
7240
|
+
background: transparent;
|
|
7241
|
+
}
|
|
7242
|
+
.kpt-slider__input:focus-visible,
|
|
7243
|
+
.kpt-slider__thumb:focus-visible {
|
|
7244
|
+
outline: none;
|
|
7245
|
+
}
|
|
7246
|
+
.kpt-slider__input:disabled,
|
|
7247
|
+
.kpt-slider__thumb:disabled {
|
|
7248
|
+
cursor: not-allowed;
|
|
7249
|
+
}
|
|
7250
|
+
.kpt-slider__bar {
|
|
7251
|
+
position: absolute;
|
|
7252
|
+
inset-inline: 0;
|
|
7253
|
+
top: 50%;
|
|
7254
|
+
translate: 0 -50%;
|
|
7255
|
+
height: 0.4rem;
|
|
7256
|
+
overflow: hidden;
|
|
7257
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7258
|
+
background: var(--kpt-color-surface-variant);
|
|
7259
|
+
pointer-events: none;
|
|
7260
|
+
}
|
|
7261
|
+
.kpt-slider__bar-fill {
|
|
7262
|
+
display: block;
|
|
7263
|
+
width: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_p));
|
|
7264
|
+
height: 100%;
|
|
7265
|
+
border-radius: inherit;
|
|
7266
|
+
background: var(--kpt-color-primary);
|
|
7267
|
+
transition: width var(--_glide);
|
|
7268
|
+
}
|
|
7269
|
+
.kpt-slider__knob {
|
|
7270
|
+
position: absolute;
|
|
7271
|
+
top: 50%;
|
|
7272
|
+
inset-inline-start: calc((100% - var(--_thumb)) * var(--_p));
|
|
7273
|
+
width: var(--_thumb);
|
|
7274
|
+
height: var(--_thumb);
|
|
7275
|
+
margin-top: calc(var(--_thumb) / -2);
|
|
7276
|
+
border-radius: 50%;
|
|
6440
7277
|
background: var(--kpt-color-primary);
|
|
6441
7278
|
box-shadow: var(--kpt-elevation-1);
|
|
7279
|
+
pointer-events: none;
|
|
7280
|
+
transition: inset-inline-start var(--_glide), scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
6442
7281
|
}
|
|
6443
|
-
.kpt-slider__input:
|
|
6444
|
-
|
|
7282
|
+
.kpt-slider__input:hover:not(:disabled) ~ .kpt-slider__knob {
|
|
7283
|
+
scale: 1.15;
|
|
6445
7284
|
}
|
|
6446
|
-
.kpt-slider__input:
|
|
6447
|
-
|
|
7285
|
+
.kpt-slider__input:active:not(:disabled) {
|
|
7286
|
+
cursor: grabbing;
|
|
7287
|
+
}
|
|
7288
|
+
.kpt-slider__input:active:not(:disabled) ~ .kpt-slider__knob {
|
|
7289
|
+
scale: 1.3;
|
|
7290
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
6448
7291
|
}
|
|
6449
|
-
.kpt-slider__input:focus-visible
|
|
7292
|
+
.kpt-slider__input:focus-visible ~ .kpt-slider__knob {
|
|
6450
7293
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6451
7294
|
}
|
|
6452
|
-
.kpt-slider__input:disabled {
|
|
7295
|
+
.kpt-slider__input:disabled ~ * {
|
|
6453
7296
|
opacity: 0.5;
|
|
6454
|
-
cursor: not-allowed;
|
|
6455
7297
|
}
|
|
6456
7298
|
.kpt-slider__sr {
|
|
6457
7299
|
position: absolute;
|
|
@@ -6471,81 +7313,243 @@
|
|
|
6471
7313
|
font-variant-numeric: tabular-nums;
|
|
6472
7314
|
color: var(--kpt-color-on-surface);
|
|
6473
7315
|
}
|
|
6474
|
-
.kpt-
|
|
6475
|
-
|
|
6476
|
-
|
|
6477
|
-
|
|
6478
|
-
|
|
6479
|
-
align-items: center;
|
|
7316
|
+
.kpt-slider__track--range {
|
|
7317
|
+
--_lo: 0;
|
|
7318
|
+
--_hi: 1;
|
|
7319
|
+
cursor: pointer;
|
|
7320
|
+
touch-action: pan-y;
|
|
6480
7321
|
}
|
|
6481
|
-
.kpt-
|
|
6482
|
-
|
|
6483
|
-
|
|
6484
|
-
|
|
6485
|
-
border-radius: var(--kpt-radius-full, 9999px);
|
|
6486
|
-
background: var(--kpt-color-surface-variant);
|
|
7322
|
+
.kpt-slider__track--range .kpt-slider__bar-fill {
|
|
7323
|
+
width: calc((100% - var(--_thumb)) * (var(--_hi) - var(--_lo)));
|
|
7324
|
+
margin-inline-start: calc(var(--_thumb) / 2 + (100% - var(--_thumb)) * var(--_lo));
|
|
7325
|
+
transition: width var(--_glide), margin-inline-start var(--_glide);
|
|
6487
7326
|
}
|
|
6488
|
-
.kpt-
|
|
6489
|
-
|
|
6490
|
-
|
|
6491
|
-
|
|
6492
|
-
|
|
7327
|
+
.kpt-slider__knob--low {
|
|
7328
|
+
--_p: var(--_lo);
|
|
7329
|
+
}
|
|
7330
|
+
.kpt-slider__knob--high {
|
|
7331
|
+
--_p: var(--_hi);
|
|
6493
7332
|
}
|
|
6494
7333
|
.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
7334
|
pointer-events: none;
|
|
6503
7335
|
}
|
|
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
7336
|
.kpt-slider__thumb::-webkit-slider-thumb {
|
|
6513
7337
|
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
7338
|
}
|
|
6523
7339
|
.kpt-slider__thumb::-moz-range-thumb {
|
|
6524
7340
|
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
7341
|
}
|
|
6533
|
-
.kpt-slider__thumb
|
|
6534
|
-
|
|
7342
|
+
.kpt-slider__thumb--high {
|
|
7343
|
+
z-index: 1;
|
|
7344
|
+
}
|
|
7345
|
+
.kpt-slider__track[data-low-top] .kpt-slider__thumb--low {
|
|
7346
|
+
z-index: 2;
|
|
7347
|
+
}
|
|
7348
|
+
.kpt-slider__thumb--low:hover:not(:disabled) ~ .kpt-slider__knob--low {
|
|
7349
|
+
scale: 1.15;
|
|
7350
|
+
}
|
|
7351
|
+
.kpt-slider__thumb--low:active:not(:disabled) ~ .kpt-slider__knob--low,
|
|
7352
|
+
.kpt-slider__track[data-pressed=low] .kpt-slider__knob--low {
|
|
7353
|
+
scale: 1.3;
|
|
7354
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
6535
7355
|
}
|
|
6536
|
-
.kpt-slider__thumb:focus-visible
|
|
7356
|
+
.kpt-slider__thumb--low:focus-visible ~ .kpt-slider__knob--low {
|
|
6537
7357
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6538
7358
|
}
|
|
6539
|
-
.kpt-slider__thumb:
|
|
7359
|
+
.kpt-slider__thumb--high:hover:not(:disabled) ~ .kpt-slider__knob--high {
|
|
7360
|
+
scale: 1.15;
|
|
7361
|
+
}
|
|
7362
|
+
.kpt-slider__thumb--high:active:not(:disabled) ~ .kpt-slider__knob--high,
|
|
7363
|
+
.kpt-slider__track[data-pressed=high] .kpt-slider__knob--high {
|
|
7364
|
+
scale: 1.3;
|
|
7365
|
+
box-shadow: 0 0 0 6px color-mix(in oklch, var(--kpt-color-primary) 22%, transparent);
|
|
7366
|
+
}
|
|
7367
|
+
.kpt-slider__thumb--high:focus-visible ~ .kpt-slider__knob--high {
|
|
6540
7368
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-focus-ring) 30%, transparent);
|
|
6541
7369
|
}
|
|
6542
|
-
.kpt-slider__thumb
|
|
6543
|
-
|
|
7370
|
+
.kpt-slider__thumb:active:not(:disabled),
|
|
7371
|
+
.kpt-slider__track[data-pressed] {
|
|
7372
|
+
cursor: grabbing;
|
|
6544
7373
|
}
|
|
6545
|
-
.kpt-slider__thumb:disabled {
|
|
6546
|
-
opacity: 0.5;
|
|
7374
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) {
|
|
6547
7375
|
cursor: not-allowed;
|
|
6548
7376
|
}
|
|
7377
|
+
.kpt-slider__track--range:has(.kpt-slider__thumb:disabled) > :not(input) {
|
|
7378
|
+
opacity: 0.5;
|
|
7379
|
+
}
|
|
7380
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7381
|
+
.kpt-slider__bar-fill,
|
|
7382
|
+
.kpt-slider__knob {
|
|
7383
|
+
transition: none;
|
|
7384
|
+
}
|
|
7385
|
+
}
|
|
7386
|
+
}
|
|
7387
|
+
|
|
7388
|
+
/* src/lib/speech/speech-button.component.scss */
|
|
7389
|
+
@charset "UTF-8";
|
|
7390
|
+
@layer kpt.components {
|
|
7391
|
+
/* Kolor nasłuchu: "stop" i fala. Domyślnie kolor motywu; `listeningColor` wybiera inną rolę,
|
|
7392
|
+
a `--kpt-speech-color` / `--kpt-speech-on-color` dowolną barwę - obie dziedziczą, więc da się je
|
|
7393
|
+
ustawić na polu z wbudowanym mikrofonem albo globalnie w `:root`. */
|
|
7394
|
+
.kpt-speech-button-host {
|
|
7395
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-primary));
|
|
7396
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-primary));
|
|
7397
|
+
}
|
|
7398
|
+
.kpt-speech-button-host[data-color=danger] {
|
|
7399
|
+
--_accent: var(--kpt-speech-color, var(--kpt-color-danger));
|
|
7400
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-color-on-danger));
|
|
7401
|
+
}
|
|
7402
|
+
.kpt-speech-button-host[data-color=success] {
|
|
7403
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-success-bg));
|
|
7404
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-success-fg));
|
|
7405
|
+
}
|
|
7406
|
+
.kpt-speech-button-host[data-color=warning] {
|
|
7407
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-warning-bg));
|
|
7408
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-warning-fg));
|
|
7409
|
+
}
|
|
7410
|
+
.kpt-speech-button-host[data-color=info] {
|
|
7411
|
+
--_accent: var(--kpt-speech-color, var(--kpt-button-info-bg));
|
|
7412
|
+
--_on-accent: var(--kpt-speech-on-color, var(--kpt-button-info-fg));
|
|
7413
|
+
}
|
|
7414
|
+
.kpt-speech-button-host {
|
|
7415
|
+
display: inline-flex;
|
|
7416
|
+
align-items: center;
|
|
7417
|
+
gap: var(--kpt-space-2, 0.5rem);
|
|
7418
|
+
vertical-align: middle;
|
|
7419
|
+
}
|
|
7420
|
+
.kpt-speech-button-host[hidden] {
|
|
7421
|
+
display: none;
|
|
7422
|
+
}
|
|
7423
|
+
/* Fala stoi przed przyciskiem (domyślnie) albo za nim - kolejność wizualna, DOM bez zmian. */
|
|
7424
|
+
.kpt-speech-button-host .kpt-speech-button__wave {
|
|
7425
|
+
order: -1;
|
|
7426
|
+
/* Fala w kolorze "stop"; `--kpt-speech-wave-color` wciąż ma pierwszeństwo. */
|
|
7427
|
+
--_color: var(--kpt-speech-wave-color, var(--_accent));
|
|
7428
|
+
animation: kpt-speech-button-wave-in var(--kpt-motion-duration-base, 0.2s) ease-out;
|
|
7429
|
+
}
|
|
7430
|
+
.kpt-speech-button-host[data-wave-position=end] .kpt-speech-button__wave {
|
|
7431
|
+
order: 1;
|
|
7432
|
+
}
|
|
7433
|
+
/* "Stop" w trakcie nasłuchu - wypełniony kolorem nasłuchu zamiast wariantu `filled`. */
|
|
7434
|
+
.kpt-speech-button-host .kpt-icon-button[aria-pressed=true] {
|
|
7435
|
+
--_bg: var(--_accent);
|
|
7436
|
+
--_fg: var(--_on-accent);
|
|
7437
|
+
--_bg-hover: color-mix(in oklab, var(--_accent) 88%, black);
|
|
7438
|
+
}
|
|
7439
|
+
@keyframes kpt-speech-button-wave-in {
|
|
7440
|
+
from {
|
|
7441
|
+
opacity: 0;
|
|
7442
|
+
transform: scaleX(0.4);
|
|
7443
|
+
}
|
|
7444
|
+
}
|
|
7445
|
+
/* Region statusu: odczytywany, niewidoczny. Własna reguła, bo komponent nie może zakładać,
|
|
7446
|
+
że aplikacja wczytała `@konce-pt/styles` z `.kpt-visually-hidden`. */
|
|
7447
|
+
.kpt-speech-button__status {
|
|
7448
|
+
position: absolute;
|
|
7449
|
+
width: 1px;
|
|
7450
|
+
height: 1px;
|
|
7451
|
+
margin: -1px;
|
|
7452
|
+
padding: 0;
|
|
7453
|
+
overflow: hidden;
|
|
7454
|
+
clip-path: inset(50%);
|
|
7455
|
+
white-space: nowrap;
|
|
7456
|
+
border: 0;
|
|
7457
|
+
}
|
|
7458
|
+
/* Tekst tymczasowy w celach spoza pól tekstowych (`@konce-pt/speech`): nakładka przy kursorze
|
|
7459
|
+
w contenteditable i końcówka podglądu w zwykłym elemencie. Klasy stawia rdzeń, nie szablon,
|
|
7460
|
+
więc reguły są globalne - nakładka wisi w `<body>`. */
|
|
7461
|
+
.kpt-speech-ghost {
|
|
7462
|
+
color: var(--kpt-color-text-muted);
|
|
7463
|
+
font-style: italic;
|
|
7464
|
+
background: var(--kpt-color-surface, transparent);
|
|
7465
|
+
}
|
|
7466
|
+
.kpt-speech-interim {
|
|
7467
|
+
color: var(--kpt-color-text-muted);
|
|
7468
|
+
font-style: italic;
|
|
7469
|
+
}
|
|
7470
|
+
}
|
|
7471
|
+
|
|
7472
|
+
/* src/lib/speech/speech-wave.component.scss */
|
|
7473
|
+
@charset "UTF-8";
|
|
7474
|
+
@layer kpt.components {
|
|
7475
|
+
.kpt-speech-wave-host {
|
|
7476
|
+
--_height: 1.25rem;
|
|
7477
|
+
--_bar: 0.1875rem;
|
|
7478
|
+
--_color: var(--kpt-speech-wave-color, var(--kpt-color-primary));
|
|
7479
|
+
display: inline-flex;
|
|
7480
|
+
align-items: center;
|
|
7481
|
+
gap: 0.125rem;
|
|
7482
|
+
block-size: var(--_height);
|
|
7483
|
+
color: var(--_color);
|
|
7484
|
+
}
|
|
7485
|
+
.kpt-speech-wave__bar {
|
|
7486
|
+
/* Każdy słupek ma własny szczyt fali syntetycznej - środek najwyżej, boki niżej. */
|
|
7487
|
+
--_peak: 0.7;
|
|
7488
|
+
inline-size: var(--_bar);
|
|
7489
|
+
block-size: 100%;
|
|
7490
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
7491
|
+
background: currentColor;
|
|
7492
|
+
transform-origin: center;
|
|
7493
|
+
transform: scaleY(0.18);
|
|
7494
|
+
}
|
|
7495
|
+
.kpt-speech-wave__bar:nth-child(5n+2), .kpt-speech-wave__bar:nth-child(5n+4) {
|
|
7496
|
+
--_peak: 0.85;
|
|
7497
|
+
}
|
|
7498
|
+
.kpt-speech-wave__bar:nth-child(5n+3) {
|
|
7499
|
+
--_peak: 1;
|
|
7500
|
+
}
|
|
7501
|
+
/* Na żywo: wysokość z miernika. Krótkie przejście wygładza 60 klatek na sekundę w ruch,
|
|
7502
|
+
a nie w skoki; nigdy poniżej kreski, żeby cisza nie znikała z ekranu. */
|
|
7503
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7504
|
+
transform: scaleY(max(0.18, var(--_level, 0)));
|
|
7505
|
+
transition: transform calc(0.08s * var(--kpt-motion-scale, 1)) linear;
|
|
7506
|
+
}
|
|
7507
|
+
/* Syntetycznie: każdy słupek oscyluje do swojego szczytu z przesunięciem fazy. Bez głosu
|
|
7508
|
+
(`data-active` nieobecne) amplituda maleje, ale fala nie staje - widać, że mikrofon słucha. */
|
|
7509
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7510
|
+
--_gain: 0.35;
|
|
7511
|
+
animation: kpt-speech-wave-bounce 0.9s ease-in-out infinite alternate;
|
|
7512
|
+
animation-delay: calc(var(--_i, 0) * -0.23s);
|
|
7513
|
+
}
|
|
7514
|
+
.kpt-speech-wave-host[data-mode=synthetic][data-active] .kpt-speech-wave__bar {
|
|
7515
|
+
--_gain: 1;
|
|
7516
|
+
animation-duration: 0.55s;
|
|
7517
|
+
}
|
|
7518
|
+
@keyframes kpt-speech-wave-bounce {
|
|
7519
|
+
from {
|
|
7520
|
+
transform: scaleY(0.18);
|
|
7521
|
+
}
|
|
7522
|
+
to {
|
|
7523
|
+
transform: scaleY(max(0.18, var(--_peak) * var(--_gain)));
|
|
7524
|
+
}
|
|
7525
|
+
}
|
|
7526
|
+
@keyframes kpt-speech-wave-pulse {
|
|
7527
|
+
0%, 100% {
|
|
7528
|
+
opacity: 0.45;
|
|
7529
|
+
}
|
|
7530
|
+
50% {
|
|
7531
|
+
opacity: 1;
|
|
7532
|
+
}
|
|
7533
|
+
}
|
|
7534
|
+
/* Fala syntetyczna to wskaźnik stanu jak kropki pisania: przy wyłączonym ruchu nie staje,
|
|
7535
|
+
tylko zamienia skakanie na spokojne pulsowanie - nieruchome słupki wyglądałyby jak ozdoba,
|
|
7536
|
+
nie jak nasłuch. Fala na żywo niesie informację (głośność), więc zostaje - traci tylko
|
|
7537
|
+
wygładzające przejście (to robi już mnożnik `--kpt-motion-scale`). */
|
|
7538
|
+
:root[data-kpt-motion=off] .kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7539
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7540
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7541
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7542
|
+
}
|
|
7543
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7544
|
+
.kpt-speech-wave-host[data-mode=synthetic] .kpt-speech-wave__bar {
|
|
7545
|
+
transform: scaleY(calc(var(--_peak) * 0.6));
|
|
7546
|
+
animation: kpt-speech-wave-pulse 1.8s ease-in-out infinite;
|
|
7547
|
+
animation-delay: calc(var(--_i, 0) * -0.3s);
|
|
7548
|
+
}
|
|
7549
|
+
.kpt-speech-wave-host[data-mode=live] .kpt-speech-wave__bar {
|
|
7550
|
+
transition: none;
|
|
7551
|
+
}
|
|
7552
|
+
}
|
|
6549
7553
|
}
|
|
6550
7554
|
|
|
6551
7555
|
/* src/lib/speed-dial/speed-dial.component.scss */
|
|
@@ -6560,7 +7564,7 @@
|
|
|
6560
7564
|
}
|
|
6561
7565
|
.kpt-speed-dial__trigger-icon {
|
|
6562
7566
|
display: inline-flex;
|
|
6563
|
-
transition: transform 0.
|
|
7567
|
+
transition: transform calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
6564
7568
|
}
|
|
6565
7569
|
.kpt-speed-dial.is-open .kpt-speed-dial__trigger-icon {
|
|
6566
7570
|
transform: rotate(45deg);
|
|
@@ -6569,16 +7573,14 @@
|
|
|
6569
7573
|
position: absolute;
|
|
6570
7574
|
display: flex;
|
|
6571
7575
|
gap: var(--kpt-space-2, 0.5rem);
|
|
6572
|
-
opacity: 0;
|
|
6573
7576
|
pointer-events: none;
|
|
6574
7577
|
visibility: hidden;
|
|
6575
|
-
transition:
|
|
7578
|
+
transition: visibility 0s linear calc(0.4s * var(--kpt-motion-scale, 1));
|
|
6576
7579
|
}
|
|
6577
7580
|
.kpt-speed-dial.is-open .kpt-speed-dial__actions {
|
|
6578
|
-
opacity: 1;
|
|
6579
7581
|
pointer-events: auto;
|
|
6580
7582
|
visibility: visible;
|
|
6581
|
-
transition:
|
|
7583
|
+
transition: visibility 0s;
|
|
6582
7584
|
}
|
|
6583
7585
|
.kpt-speed-dial[data-direction=up] .kpt-speed-dial__actions {
|
|
6584
7586
|
flex-direction: column-reverse;
|
|
@@ -6604,7 +7606,71 @@
|
|
|
6604
7606
|
top: 50%;
|
|
6605
7607
|
transform: translateY(-50%);
|
|
6606
7608
|
}
|
|
7609
|
+
.kpt-speed-dial[data-direction=up] {
|
|
7610
|
+
--_from: 0 0.75rem;
|
|
7611
|
+
}
|
|
7612
|
+
.kpt-speed-dial[data-direction=down] {
|
|
7613
|
+
--_from: 0 -0.75rem;
|
|
7614
|
+
}
|
|
7615
|
+
.kpt-speed-dial[data-direction=left] {
|
|
7616
|
+
--_from: 0.75rem 0;
|
|
7617
|
+
}
|
|
7618
|
+
.kpt-speed-dial[data-direction=right] {
|
|
7619
|
+
--_from: -0.75rem 0;
|
|
7620
|
+
}
|
|
7621
|
+
.kpt-speed-dial__action:nth-child(1) {
|
|
7622
|
+
--_i: 0;
|
|
7623
|
+
}
|
|
7624
|
+
.kpt-speed-dial__action:nth-last-child(1) {
|
|
7625
|
+
--_r: 0;
|
|
7626
|
+
}
|
|
7627
|
+
.kpt-speed-dial__action:nth-child(2) {
|
|
7628
|
+
--_i: 1;
|
|
7629
|
+
}
|
|
7630
|
+
.kpt-speed-dial__action:nth-last-child(2) {
|
|
7631
|
+
--_r: 1;
|
|
7632
|
+
}
|
|
7633
|
+
.kpt-speed-dial__action:nth-child(3) {
|
|
7634
|
+
--_i: 2;
|
|
7635
|
+
}
|
|
7636
|
+
.kpt-speed-dial__action:nth-last-child(3) {
|
|
7637
|
+
--_r: 2;
|
|
7638
|
+
}
|
|
7639
|
+
.kpt-speed-dial__action:nth-child(4) {
|
|
7640
|
+
--_i: 3;
|
|
7641
|
+
}
|
|
7642
|
+
.kpt-speed-dial__action:nth-last-child(4) {
|
|
7643
|
+
--_r: 3;
|
|
7644
|
+
}
|
|
7645
|
+
.kpt-speed-dial__action:nth-child(5) {
|
|
7646
|
+
--_i: 4;
|
|
7647
|
+
}
|
|
7648
|
+
.kpt-speed-dial__action:nth-last-child(5) {
|
|
7649
|
+
--_r: 4;
|
|
7650
|
+
}
|
|
7651
|
+
.kpt-speed-dial__action:nth-child(6) {
|
|
7652
|
+
--_i: 5;
|
|
7653
|
+
}
|
|
7654
|
+
.kpt-speed-dial__action:nth-last-child(6) {
|
|
7655
|
+
--_r: 5;
|
|
7656
|
+
}
|
|
7657
|
+
.kpt-speed-dial__action:nth-child(7) {
|
|
7658
|
+
--_i: 6;
|
|
7659
|
+
}
|
|
7660
|
+
.kpt-speed-dial__action:nth-last-child(7) {
|
|
7661
|
+
--_r: 6;
|
|
7662
|
+
}
|
|
7663
|
+
.kpt-speed-dial__action:nth-child(8) {
|
|
7664
|
+
--_i: 7;
|
|
7665
|
+
}
|
|
7666
|
+
.kpt-speed-dial__action:nth-last-child(8) {
|
|
7667
|
+
--_r: 7;
|
|
7668
|
+
}
|
|
6607
7669
|
.kpt-speed-dial__action {
|
|
7670
|
+
opacity: 0;
|
|
7671
|
+
transform: scale(0.5);
|
|
7672
|
+
translate: var(--_from, 0 0.75rem);
|
|
7673
|
+
transition: opacity calc(0.14s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), transform calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), translate calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_r, 0) * 0.03s * var(--kpt-motion-scale, 1)), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
6608
7674
|
display: inline-flex;
|
|
6609
7675
|
align-items: center;
|
|
6610
7676
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6628,11 +7694,37 @@
|
|
|
6628
7694
|
.kpt-speed-dial__label {
|
|
6629
7695
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6630
7696
|
}
|
|
7697
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action {
|
|
7698
|
+
opacity: 1;
|
|
7699
|
+
transform: none;
|
|
7700
|
+
translate: 0 0;
|
|
7701
|
+
transition: opacity calc(0.2s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), transform calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), translate calc(0.5s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_i, 0) * 0.045s * var(--kpt-motion-scale, 1)), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
7702
|
+
}
|
|
7703
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7704
|
+
--_press-t: 0.08s;
|
|
7705
|
+
--_press-e: ease-out;
|
|
7706
|
+
scale: 0.94;
|
|
7707
|
+
}
|
|
7708
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7709
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:active:not(:disabled):not([aria-disabled=true]) {
|
|
7710
|
+
scale: none;
|
|
7711
|
+
}
|
|
7712
|
+
}
|
|
7713
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action:disabled {
|
|
7714
|
+
opacity: 0.5;
|
|
7715
|
+
}
|
|
6631
7716
|
.kpt-speed-dial__backdrop {
|
|
6632
7717
|
position: fixed;
|
|
6633
7718
|
inset: 0;
|
|
6634
7719
|
z-index: var(--kpt-z-overlay, 1000);
|
|
6635
7720
|
}
|
|
7721
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7722
|
+
.kpt-speed-dial__action,
|
|
7723
|
+
.kpt-speed-dial.is-open .kpt-speed-dial__action,
|
|
7724
|
+
.kpt-speed-dial__trigger-icon {
|
|
7725
|
+
transition: none;
|
|
7726
|
+
}
|
|
7727
|
+
}
|
|
6636
7728
|
}
|
|
6637
7729
|
|
|
6638
7730
|
/* src/lib/spinner/spinner.component.scss */
|
|
@@ -6659,6 +7751,9 @@
|
|
|
6659
7751
|
animation-duration: 1.4s;
|
|
6660
7752
|
}
|
|
6661
7753
|
}
|
|
7754
|
+
:root[data-kpt-motion=off] .kpt-spinner {
|
|
7755
|
+
animation-duration: 1.4s;
|
|
7756
|
+
}
|
|
6662
7757
|
.kpt-spinner__label {
|
|
6663
7758
|
position: absolute;
|
|
6664
7759
|
width: 1px;
|
|
@@ -6685,6 +7780,17 @@
|
|
|
6685
7780
|
display: inline-flex;
|
|
6686
7781
|
border-radius: var(--kpt-button-radius, 0.5rem);
|
|
6687
7782
|
overflow: hidden;
|
|
7783
|
+
transition: scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
|
|
7784
|
+
}
|
|
7785
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7786
|
+
--_press-t: 0.08s;
|
|
7787
|
+
--_press-e: ease-out;
|
|
7788
|
+
scale: 0.97;
|
|
7789
|
+
}
|
|
7790
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7791
|
+
.kpt-split-button:has(> :active:not(:disabled)) {
|
|
7792
|
+
scale: none;
|
|
7793
|
+
}
|
|
6688
7794
|
}
|
|
6689
7795
|
.kpt-split-button[data-variant=tonal] {
|
|
6690
7796
|
--_bg: var(--kpt-color-muted);
|
|
@@ -6751,6 +7857,23 @@
|
|
|
6751
7857
|
width: 2.25rem;
|
|
6752
7858
|
border-inline-start: 1px solid var(--_divider, color-mix(in oklch, var(--_fg) 25%, transparent));
|
|
6753
7859
|
}
|
|
7860
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7861
|
+
transition: rotate calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
7862
|
+
}
|
|
7863
|
+
.kpt-split-button__toggle[aria-expanded=true] .kpt-icon-host {
|
|
7864
|
+
rotate: 180deg;
|
|
7865
|
+
}
|
|
7866
|
+
.kpt-split-button__panel {
|
|
7867
|
+
transform-origin: top;
|
|
7868
|
+
transition: opacity calc(0.16s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), scale calc(0.36s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1), translate calc(0.36s * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
7869
|
+
}
|
|
7870
|
+
@starting-style {
|
|
7871
|
+
.kpt-split-button__panel {
|
|
7872
|
+
opacity: 0;
|
|
7873
|
+
scale: 1 0.92;
|
|
7874
|
+
translate: 0 -0.25rem;
|
|
7875
|
+
}
|
|
7876
|
+
}
|
|
6754
7877
|
.kpt-split-button__panel {
|
|
6755
7878
|
min-width: 11rem;
|
|
6756
7879
|
padding: 0.25rem;
|
|
@@ -6788,7 +7911,7 @@
|
|
|
6788
7911
|
color: var(--kpt-color-on-surface-muted);
|
|
6789
7912
|
}
|
|
6790
7913
|
.kpt-split-button {
|
|
6791
|
-
/* Wiersz nagłówkowy
|
|
7914
|
+
/* Wiersz nagłówkowy - dane zalogowanego użytkownika lub opis menu. */
|
|
6792
7915
|
}
|
|
6793
7916
|
.kpt-split-button__header {
|
|
6794
7917
|
display: flex;
|
|
@@ -6826,6 +7949,14 @@
|
|
|
6826
7949
|
margin: 0.25rem 0;
|
|
6827
7950
|
background: var(--kpt-color-border);
|
|
6828
7951
|
}
|
|
7952
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7953
|
+
.kpt-split-button__panel {
|
|
7954
|
+
transition: none;
|
|
7955
|
+
}
|
|
7956
|
+
.kpt-split-button__toggle .kpt-icon-host {
|
|
7957
|
+
transition: none;
|
|
7958
|
+
}
|
|
7959
|
+
}
|
|
6829
7960
|
}
|
|
6830
7961
|
|
|
6831
7962
|
/* src/lib/splitter/splitter.component.scss */
|
|
@@ -6855,7 +7986,7 @@
|
|
|
6855
7986
|
.kpt-splitter__gutter {
|
|
6856
7987
|
flex: none;
|
|
6857
7988
|
background: var(--kpt-color-border);
|
|
6858
|
-
transition: background 0.15s;
|
|
7989
|
+
transition: background calc(0.15s * var(--kpt-motion-scale, 1));
|
|
6859
7990
|
}
|
|
6860
7991
|
.kpt-splitter__gutter:hover, .kpt-splitter__gutter:focus-visible {
|
|
6861
7992
|
background: var(--kpt-color-primary);
|
|
@@ -6875,6 +8006,7 @@
|
|
|
6875
8006
|
@layer kpt.components {
|
|
6876
8007
|
.kpt-stepper-host {
|
|
6877
8008
|
display: block;
|
|
8009
|
+
position: relative;
|
|
6878
8010
|
}
|
|
6879
8011
|
.kpt-stepper__header {
|
|
6880
8012
|
display: flex;
|
|
@@ -6884,6 +8016,7 @@
|
|
|
6884
8016
|
padding: 0;
|
|
6885
8017
|
}
|
|
6886
8018
|
.kpt-stepper__step {
|
|
8019
|
+
--_mark-delay: calc(var(--kpt-stepper-mark-delay, 0ms) * var(--kpt-motion-scale, 1));
|
|
6887
8020
|
display: flex;
|
|
6888
8021
|
align-items: center;
|
|
6889
8022
|
gap: var(--kpt-space-2, 0.5rem);
|
|
@@ -6893,6 +8026,8 @@
|
|
|
6893
8026
|
flex: 0 0 auto;
|
|
6894
8027
|
}
|
|
6895
8028
|
.kpt-stepper__marker {
|
|
8029
|
+
position: relative;
|
|
8030
|
+
isolation: isolate;
|
|
6896
8031
|
display: inline-flex;
|
|
6897
8032
|
align-items: center;
|
|
6898
8033
|
justify-content: center;
|
|
@@ -6906,21 +8041,82 @@
|
|
|
6906
8041
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6907
8042
|
font-weight: var(--kpt-font-weight-semibold, 600);
|
|
6908
8043
|
cursor: pointer;
|
|
8044
|
+
transition: border-color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), box-shadow calc(0.4s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
8045
|
+
}
|
|
8046
|
+
.kpt-stepper__marker::after {
|
|
8047
|
+
content: "";
|
|
8048
|
+
position: absolute;
|
|
8049
|
+
inset: 0;
|
|
8050
|
+
z-index: -1;
|
|
8051
|
+
border-radius: inherit;
|
|
8052
|
+
background: var(--kpt-color-primary);
|
|
8053
|
+
clip-path: circle(0% at 50% 50%);
|
|
8054
|
+
transition: clip-path calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
8055
|
+
}
|
|
8056
|
+
.kpt-stepper__marker::before {
|
|
8057
|
+
content: "";
|
|
8058
|
+
position: absolute;
|
|
8059
|
+
inset: calc(-1 * var(--kpt-border-width-medium, 2px));
|
|
8060
|
+
border-radius: inherit;
|
|
8061
|
+
border: var(--kpt-border-width-medium, 2px) solid color-mix(in oklch, var(--kpt-color-primary) 55%, transparent);
|
|
8062
|
+
opacity: 0;
|
|
8063
|
+
pointer-events: none;
|
|
8064
|
+
}
|
|
8065
|
+
.kpt-stepper__num {
|
|
8066
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), scale calc(0.3s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) var(--_mark-delay);
|
|
8067
|
+
}
|
|
8068
|
+
.kpt-stepper__check {
|
|
8069
|
+
position: absolute;
|
|
8070
|
+
color: var(--kpt-color-on-primary);
|
|
8071
|
+
opacity: 0;
|
|
8072
|
+
scale: 0.4;
|
|
8073
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay), scale calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
6909
8074
|
}
|
|
6910
8075
|
.kpt-stepper__label {
|
|
6911
8076
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
6912
8077
|
color: var(--kpt-color-on-surface-muted);
|
|
6913
8078
|
white-space: nowrap;
|
|
8079
|
+
transition: color calc(0.28s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) var(--_mark-delay);
|
|
6914
8080
|
}
|
|
6915
8081
|
.kpt-stepper__connector {
|
|
8082
|
+
position: relative;
|
|
8083
|
+
overflow: hidden;
|
|
6916
8084
|
flex: 1;
|
|
6917
8085
|
height: 2px;
|
|
6918
8086
|
margin-inline: var(--kpt-space-2, 0.5rem);
|
|
8087
|
+
border-radius: var(--kpt-radius-full, 9999px);
|
|
6919
8088
|
background: var(--kpt-color-border);
|
|
6920
8089
|
}
|
|
8090
|
+
.kpt-stepper__connector::after {
|
|
8091
|
+
content: "";
|
|
8092
|
+
position: absolute;
|
|
8093
|
+
inset: 0;
|
|
8094
|
+
border-radius: inherit;
|
|
8095
|
+
background: var(--kpt-color-primary);
|
|
8096
|
+
transform: scaleX(0);
|
|
8097
|
+
transform-origin: left center;
|
|
8098
|
+
transition: transform calc(var(--kpt-stepper-line-dur, 0ms) * var(--kpt-motion-scale, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(var(--kpt-stepper-line-delay, 0ms) * var(--kpt-motion-scale, 1));
|
|
8099
|
+
}
|
|
8100
|
+
.kpt-stepper__connector:dir(rtl)::after {
|
|
8101
|
+
transform-origin: right center;
|
|
8102
|
+
}
|
|
8103
|
+
.kpt-stepper__comet {
|
|
8104
|
+
position: absolute;
|
|
8105
|
+
top: 0;
|
|
8106
|
+
left: 0;
|
|
8107
|
+
width: 0.625rem;
|
|
8108
|
+
height: 0.625rem;
|
|
8109
|
+
margin: -0.3125rem 0 0 -0.3125rem;
|
|
8110
|
+
border-radius: 50%;
|
|
8111
|
+
background: var(--kpt-color-surface-raised);
|
|
8112
|
+
box-shadow: 0 0 0 2px var(--kpt-color-primary), 0 0 12px 4px color-mix(in oklch, var(--kpt-color-primary) 45%, transparent);
|
|
8113
|
+
opacity: 0;
|
|
8114
|
+
pointer-events: none;
|
|
8115
|
+
}
|
|
6921
8116
|
.kpt-stepper__step.is-active .kpt-stepper__marker {
|
|
6922
8117
|
border-color: var(--kpt-color-primary);
|
|
6923
8118
|
color: var(--kpt-color-primary);
|
|
8119
|
+
box-shadow: 0 0 0 4px color-mix(in oklch, var(--kpt-color-primary) 14%, transparent);
|
|
6924
8120
|
}
|
|
6925
8121
|
.kpt-stepper__step.is-active .kpt-stepper__label {
|
|
6926
8122
|
color: var(--kpt-color-on-surface);
|
|
@@ -6928,33 +8124,56 @@
|
|
|
6928
8124
|
}
|
|
6929
8125
|
.kpt-stepper__step.is-done .kpt-stepper__marker {
|
|
6930
8126
|
border-color: var(--kpt-color-primary);
|
|
6931
|
-
background: var(--kpt-color-primary);
|
|
6932
8127
|
color: var(--kpt-color-on-primary);
|
|
6933
8128
|
}
|
|
6934
|
-
.kpt-stepper__step.is-done .kpt-
|
|
6935
|
-
|
|
8129
|
+
.kpt-stepper__step.is-done .kpt-stepper__marker::after {
|
|
8130
|
+
clip-path: circle(75% at 50% 50%);
|
|
8131
|
+
}
|
|
8132
|
+
.kpt-stepper__step.is-done .kpt-stepper__num {
|
|
8133
|
+
opacity: 0;
|
|
8134
|
+
scale: 0.4;
|
|
8135
|
+
}
|
|
8136
|
+
.kpt-stepper__step.is-done .kpt-stepper__check {
|
|
8137
|
+
opacity: 1;
|
|
8138
|
+
scale: 1;
|
|
8139
|
+
transition: opacity calc(0.18s * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard) calc(var(--_mark-delay) + 0.1s * var(--kpt-motion-scale, 1)), scale calc(0.4s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1) calc(var(--_mark-delay) + 0.1s * var(--kpt-motion-scale, 1));
|
|
8140
|
+
}
|
|
8141
|
+
.kpt-stepper__step.is-done .kpt-stepper__connector::after {
|
|
8142
|
+
transform: none;
|
|
6936
8143
|
}
|
|
6937
8144
|
.kpt-stepper__body {
|
|
8145
|
+
position: relative;
|
|
6938
8146
|
padding-block: var(--kpt-space-5, 1.25rem);
|
|
6939
8147
|
overflow-x: clip;
|
|
6940
8148
|
}
|
|
6941
8149
|
@keyframes kpt-stepper-enter {
|
|
6942
8150
|
from {
|
|
6943
8151
|
opacity: 0;
|
|
6944
|
-
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.
|
|
8152
|
+
transform: translateX(calc(var(--kpt-anim-dir, 1) * 1.125rem));
|
|
8153
|
+
filter: blur(4px);
|
|
6945
8154
|
}
|
|
6946
8155
|
to {
|
|
6947
8156
|
opacity: 1;
|
|
6948
8157
|
transform: none;
|
|
8158
|
+
filter: none;
|
|
6949
8159
|
}
|
|
6950
8160
|
}
|
|
6951
8161
|
.kpt-stepper__panel {
|
|
6952
|
-
animation: kpt-stepper-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-
|
|
8162
|
+
animation: kpt-stepper-enter calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1) calc(0.08s * var(--kpt-motion-scale, 1)) backwards;
|
|
6953
8163
|
}
|
|
6954
8164
|
@media (prefers-reduced-motion: reduce) {
|
|
6955
8165
|
.kpt-stepper__panel {
|
|
6956
8166
|
animation: none;
|
|
6957
8167
|
}
|
|
8168
|
+
.kpt-stepper__marker,
|
|
8169
|
+
.kpt-stepper__marker::after,
|
|
8170
|
+
.kpt-stepper__num,
|
|
8171
|
+
.kpt-stepper__check,
|
|
8172
|
+
.kpt-stepper__step.is-done .kpt-stepper__check,
|
|
8173
|
+
.kpt-stepper__label,
|
|
8174
|
+
.kpt-stepper__connector::after {
|
|
8175
|
+
transition: none;
|
|
8176
|
+
}
|
|
6958
8177
|
}
|
|
6959
8178
|
}
|
|
6960
8179
|
|
|
@@ -7020,9 +8239,18 @@
|
|
|
7020
8239
|
outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
|
|
7021
8240
|
outline-offset: 2px;
|
|
7022
8241
|
}
|
|
8242
|
+
.kpt-switch[data-motion=spring] .kpt-switch__thumb {
|
|
8243
|
+
transition: transform calc(0.45s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
8244
|
+
}
|
|
8245
|
+
.kpt-switch[data-motion=none] .kpt-switch__thumb,
|
|
8246
|
+
.kpt-switch[data-motion=none] .kpt-switch__track,
|
|
8247
|
+
.kpt-switch[data-motion=none] .kpt-switch__state {
|
|
8248
|
+
transition: none;
|
|
8249
|
+
}
|
|
7023
8250
|
@media (prefers-reduced-motion: reduce) {
|
|
7024
8251
|
.kpt-switch__thumb,
|
|
7025
|
-
.kpt-switch__track
|
|
8252
|
+
.kpt-switch__track,
|
|
8253
|
+
.kpt-switch[data-motion] .kpt-switch__thumb {
|
|
7026
8254
|
transition: none;
|
|
7027
8255
|
}
|
|
7028
8256
|
}
|
|
@@ -7082,7 +8310,7 @@
|
|
|
7082
8310
|
height: 2px;
|
|
7083
8311
|
background: var(--kpt-color-primary);
|
|
7084
8312
|
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);
|
|
8313
|
+
transition: transform calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard), width calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
7086
8314
|
}
|
|
7087
8315
|
.kpt-tabs__body {
|
|
7088
8316
|
padding-block: var(--kpt-space-4, 1rem);
|
|
@@ -7099,7 +8327,7 @@
|
|
|
7099
8327
|
}
|
|
7100
8328
|
}
|
|
7101
8329
|
.kpt-tabs__panel {
|
|
7102
|
-
animation: kpt-tabs-enter var(--kpt-anim-duration, 500ms) var(--kpt-motion-easing-standard);
|
|
8330
|
+
animation: kpt-tabs-enter calc(var(--kpt-anim-duration, 500ms) * var(--kpt-motion-scale, 1)) var(--kpt-motion-easing-standard);
|
|
7103
8331
|
}
|
|
7104
8332
|
@media (prefers-reduced-motion: reduce) {
|
|
7105
8333
|
.kpt-tabs__panel {
|
|
@@ -7158,6 +8386,30 @@
|
|
|
7158
8386
|
font-variant-numeric: tabular-nums;
|
|
7159
8387
|
color: var(--kpt-color-on-surface-muted);
|
|
7160
8388
|
}
|
|
8389
|
+
.kpt-textarea__field {
|
|
8390
|
+
transition: border-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), box-shadow var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
|
|
8391
|
+
}
|
|
8392
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8393
|
+
.kpt-textarea__field {
|
|
8394
|
+
transition: none;
|
|
8395
|
+
}
|
|
8396
|
+
}
|
|
8397
|
+
.kpt-textarea__box {
|
|
8398
|
+
position: relative;
|
|
8399
|
+
display: block;
|
|
8400
|
+
}
|
|
8401
|
+
.kpt-textarea-host[data-speech] .kpt-textarea__field {
|
|
8402
|
+
padding-inline-end: 2.75rem;
|
|
8403
|
+
}
|
|
8404
|
+
.kpt-textarea-host[data-speech=listening] .kpt-textarea__field {
|
|
8405
|
+
padding-inline-end: 4.75rem;
|
|
8406
|
+
}
|
|
8407
|
+
.kpt-textarea__speech {
|
|
8408
|
+
position: absolute;
|
|
8409
|
+
inset-block-start: var(--kpt-space-1, 0.25rem);
|
|
8410
|
+
inset-inline-end: var(--kpt-space-1, 0.25rem);
|
|
8411
|
+
gap: var(--kpt-space-1, 0.25rem);
|
|
8412
|
+
}
|
|
7161
8413
|
}
|
|
7162
8414
|
|
|
7163
8415
|
/* src/lib/timeline/timeline.component.scss */
|
|
@@ -7249,23 +8501,51 @@
|
|
|
7249
8501
|
/* src/lib/toast/toast-container.component.scss */
|
|
7250
8502
|
@layer kpt.components {
|
|
7251
8503
|
.kpt-toast-container {
|
|
8504
|
+
--_offset: var(--kpt-toast-offset, var(--kpt-space-4, 1rem));
|
|
8505
|
+
--_enter: 0.5rem;
|
|
7252
8506
|
position: fixed;
|
|
7253
|
-
inset-block-end: var(--kpt-space-4, 1rem);
|
|
7254
|
-
inset-inline-end: var(--kpt-space-4, 1rem);
|
|
7255
8507
|
z-index: var(--kpt-z-toast, 1300);
|
|
7256
8508
|
display: flex;
|
|
7257
8509
|
flex-direction: column;
|
|
7258
8510
|
gap: var(--kpt-space-2, 0.5rem);
|
|
7259
|
-
|
|
8511
|
+
width: min(24rem, 100vw - 2 * var(--_offset));
|
|
7260
8512
|
pointer-events: none;
|
|
7261
8513
|
}
|
|
8514
|
+
.kpt-toast-container[data-position^=bottom] {
|
|
8515
|
+
inset-block-end: calc(var(--_offset) + env(safe-area-inset-bottom, 0px));
|
|
8516
|
+
}
|
|
8517
|
+
.kpt-toast-container[data-position^=top] {
|
|
8518
|
+
--_enter: -0.5rem;
|
|
8519
|
+
inset-block-start: calc(var(--_offset) + env(safe-area-inset-top, 0px));
|
|
8520
|
+
flex-direction: column-reverse;
|
|
8521
|
+
}
|
|
8522
|
+
.kpt-toast-container[data-position$=-start] {
|
|
8523
|
+
inset-inline-start: calc(var(--_offset) + env(safe-area-inset-left, 0px));
|
|
8524
|
+
}
|
|
8525
|
+
.kpt-toast-container[data-position$=-end] {
|
|
8526
|
+
inset-inline-end: calc(var(--_offset) + env(safe-area-inset-right, 0px));
|
|
8527
|
+
}
|
|
8528
|
+
.kpt-toast-container[data-position$=-center] {
|
|
8529
|
+
inset-inline: 0;
|
|
8530
|
+
margin-inline: auto;
|
|
8531
|
+
}
|
|
8532
|
+
@media (max-width: 40rem) {
|
|
8533
|
+
.kpt-toast-container[data-position] {
|
|
8534
|
+
inset-inline: var(--_offset);
|
|
8535
|
+
width: auto;
|
|
8536
|
+
margin-inline: 0;
|
|
8537
|
+
}
|
|
8538
|
+
}
|
|
7262
8539
|
.kpt-toast {
|
|
7263
8540
|
--_accent: var(--kpt-color-info);
|
|
8541
|
+
--_on: var(--kpt-color-info-contrast);
|
|
8542
|
+
position: relative;
|
|
8543
|
+
overflow: hidden;
|
|
7264
8544
|
pointer-events: auto;
|
|
7265
8545
|
display: flex;
|
|
7266
|
-
align-items:
|
|
8546
|
+
align-items: center;
|
|
7267
8547
|
gap: var(--kpt-space-3, 0.75rem);
|
|
7268
|
-
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
8548
|
+
padding: var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-3, 0.75rem) var(--kpt-space-4, 1rem);
|
|
7269
8549
|
border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
|
|
7270
8550
|
border-inline-start: 3px solid var(--_accent);
|
|
7271
8551
|
border-radius: var(--kpt-radius-md, 0.5rem);
|
|
@@ -7277,16 +8557,22 @@
|
|
|
7277
8557
|
}
|
|
7278
8558
|
.kpt-toast[data-variant=success] {
|
|
7279
8559
|
--_accent: var(--kpt-color-success);
|
|
8560
|
+
--_on: var(--kpt-color-success-contrast);
|
|
7280
8561
|
}
|
|
7281
8562
|
.kpt-toast[data-variant=warning] {
|
|
7282
8563
|
--_accent: var(--kpt-color-warning);
|
|
8564
|
+
--_on: var(--kpt-color-warning-contrast);
|
|
7283
8565
|
}
|
|
7284
8566
|
.kpt-toast[data-variant=danger] {
|
|
7285
8567
|
--_accent: var(--kpt-color-danger);
|
|
8568
|
+
--_on: var(--kpt-color-danger-contrast);
|
|
7286
8569
|
}
|
|
7287
8570
|
.kpt-toast__icon {
|
|
8571
|
+
flex: none;
|
|
8572
|
+
display: inline-grid;
|
|
8573
|
+
place-items: center;
|
|
7288
8574
|
color: var(--_accent);
|
|
7289
|
-
font-
|
|
8575
|
+
font-size: 1.15em;
|
|
7290
8576
|
}
|
|
7291
8577
|
.kpt-toast__content {
|
|
7292
8578
|
flex: 1;
|
|
@@ -7298,7 +8584,7 @@
|
|
|
7298
8584
|
}
|
|
7299
8585
|
.kpt-toast__action {
|
|
7300
8586
|
flex: none;
|
|
7301
|
-
|
|
8587
|
+
min-block-size: 1.75rem;
|
|
7302
8588
|
padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
|
|
7303
8589
|
border: 0;
|
|
7304
8590
|
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
@@ -7312,16 +8598,69 @@
|
|
|
7312
8598
|
background: var(--kpt-color-muted);
|
|
7313
8599
|
}
|
|
7314
8600
|
.kpt-toast__close {
|
|
7315
|
-
|
|
8601
|
+
flex: none;
|
|
8602
|
+
display: inline-grid;
|
|
8603
|
+
place-items: center;
|
|
8604
|
+
inline-size: 1.75rem;
|
|
8605
|
+
block-size: 1.75rem;
|
|
8606
|
+
padding: 0;
|
|
7316
8607
|
border: 0;
|
|
8608
|
+
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
8609
|
+
background: none;
|
|
7317
8610
|
cursor: pointer;
|
|
7318
8611
|
color: var(--kpt-color-on-surface-muted);
|
|
7319
8612
|
font-size: 1.15rem;
|
|
7320
8613
|
line-height: 1;
|
|
7321
|
-
padding: 0;
|
|
7322
8614
|
}
|
|
7323
8615
|
.kpt-toast__close:hover {
|
|
7324
8616
|
color: var(--kpt-color-on-surface);
|
|
8617
|
+
background: var(--kpt-color-muted);
|
|
8618
|
+
}
|
|
8619
|
+
.kpt-toast__action:focus-visible, .kpt-toast__close:focus-visible {
|
|
8620
|
+
outline: 2px solid var(--kpt-color-focus-ring);
|
|
8621
|
+
outline-offset: 1px;
|
|
8622
|
+
}
|
|
8623
|
+
.kpt-toast__timer {
|
|
8624
|
+
position: absolute;
|
|
8625
|
+
inset-inline: 0;
|
|
8626
|
+
inset-block-end: 0;
|
|
8627
|
+
block-size: 3px;
|
|
8628
|
+
background: var(--_accent);
|
|
8629
|
+
transform-origin: left center;
|
|
8630
|
+
animation: kpt-toast-timer var(--_duration, 4s) linear forwards;
|
|
8631
|
+
}
|
|
8632
|
+
.kpt-toast__timer:dir(rtl) {
|
|
8633
|
+
transform-origin: right center;
|
|
8634
|
+
}
|
|
8635
|
+
.kpt-toast[data-appearance=filled] {
|
|
8636
|
+
border-color: transparent;
|
|
8637
|
+
border-inline-start-width: var(--kpt-border-width-thin, 1px);
|
|
8638
|
+
background: var(--_accent);
|
|
8639
|
+
color: var(--_on);
|
|
8640
|
+
}
|
|
8641
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__icon,
|
|
8642
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action,
|
|
8643
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close {
|
|
8644
|
+
color: inherit;
|
|
8645
|
+
}
|
|
8646
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action {
|
|
8647
|
+
text-decoration: underline;
|
|
8648
|
+
text-underline-offset: 0.2em;
|
|
8649
|
+
}
|
|
8650
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:hover,
|
|
8651
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:hover {
|
|
8652
|
+
background: color-mix(in oklch, currentColor 14%, transparent);
|
|
8653
|
+
}
|
|
8654
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__action:focus-visible,
|
|
8655
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__close:focus-visible {
|
|
8656
|
+
outline-color: currentColor;
|
|
8657
|
+
}
|
|
8658
|
+
.kpt-toast[data-appearance=filled] .kpt-toast__timer {
|
|
8659
|
+
background: currentColor;
|
|
8660
|
+
opacity: 0.45;
|
|
8661
|
+
}
|
|
8662
|
+
.kpt-toast-container[data-paused] .kpt-toast__timer {
|
|
8663
|
+
animation-play-state: paused;
|
|
7325
8664
|
}
|
|
7326
8665
|
.kpt-toast-container__live {
|
|
7327
8666
|
position: fixed;
|
|
@@ -7339,13 +8678,21 @@
|
|
|
7339
8678
|
@keyframes kpt-toast-in {
|
|
7340
8679
|
from {
|
|
7341
8680
|
opacity: 0;
|
|
7342
|
-
transform: translateY(0.5rem);
|
|
8681
|
+
transform: translateY(var(--_enter, 0.5rem));
|
|
7343
8682
|
}
|
|
7344
8683
|
to {
|
|
7345
8684
|
opacity: 1;
|
|
7346
8685
|
transform: translateY(0);
|
|
7347
8686
|
}
|
|
7348
8687
|
}
|
|
8688
|
+
@keyframes kpt-toast-timer {
|
|
8689
|
+
from {
|
|
8690
|
+
transform: scaleX(1);
|
|
8691
|
+
}
|
|
8692
|
+
to {
|
|
8693
|
+
transform: scaleX(0);
|
|
8694
|
+
}
|
|
8695
|
+
}
|
|
7349
8696
|
@media (prefers-reduced-motion: reduce) {
|
|
7350
8697
|
.kpt-toast {
|
|
7351
8698
|
animation: none;
|
|
@@ -7454,6 +8801,68 @@
|
|
|
7454
8801
|
.kpt-tree__chevron.is-open {
|
|
7455
8802
|
transform: rotate(90deg);
|
|
7456
8803
|
}
|
|
8804
|
+
.kpt-tree {
|
|
8805
|
+
--_d: calc(var(--kpt-motion-duration-slow, 320ms) * var(--kpt-motion-scale, 1));
|
|
8806
|
+
}
|
|
8807
|
+
.kpt-tree__collapse {
|
|
8808
|
+
display: grid;
|
|
8809
|
+
grid-template-rows: 0fr;
|
|
8810
|
+
transition: grid-template-rows var(--_d) var(--kpt-motion-easing-standard);
|
|
8811
|
+
}
|
|
8812
|
+
.kpt-tree__collapse.is-open {
|
|
8813
|
+
grid-template-rows: 1fr;
|
|
8814
|
+
}
|
|
8815
|
+
.kpt-tree__collapse > .kpt-tree__group {
|
|
8816
|
+
overflow: hidden;
|
|
8817
|
+
min-height: 0;
|
|
8818
|
+
}
|
|
8819
|
+
@starting-style {
|
|
8820
|
+
.kpt-tree.is-live .kpt-tree__collapse.is-open {
|
|
8821
|
+
grid-template-rows: 0fr;
|
|
8822
|
+
}
|
|
8823
|
+
}
|
|
8824
|
+
.kpt-tree[data-motion=none] .kpt-tree__collapse,
|
|
8825
|
+
.kpt-tree[data-motion=none] .kpt-tree__chevron {
|
|
8826
|
+
transition: none;
|
|
8827
|
+
}
|
|
8828
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8829
|
+
transition: opacity calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard);
|
|
8830
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 24ms * var(--kpt-motion-scale, 1));
|
|
8831
|
+
}
|
|
8832
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse {
|
|
8833
|
+
transition-timing-function: linear(0, 0.051, 0.168, 0.3112, 0.4557, 0.5876, 0.7, 0.7911, 0.8617, 0.9142, 0.9517, 0.9772, 0.9937, 1.0035, 1.0087, 1.0108, 1.011, 1.0101, 1.0086, 1.007, 1.0054, 1.0041, 1.0029, 1.002, 1.0013, 1.0008, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
8834
|
+
}
|
|
8835
|
+
.kpt-tree[data-motion=spring] .kpt-tree__chevron {
|
|
8836
|
+
transition: transform calc(var(--_d) * 0.9) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
8837
|
+
}
|
|
8838
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8839
|
+
transition: opacity calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard), translate calc(var(--_d) * 1.2) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), filter calc(var(--_d) * 0.6) var(--kpt-motion-easing-standard);
|
|
8840
|
+
transition-delay: calc(min(var(--_i, 0), 8) * 28ms * var(--kpt-motion-scale, 1));
|
|
8841
|
+
}
|
|
8842
|
+
@starting-style {
|
|
8843
|
+
.kpt-tree.is-live[data-motion=fade] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8844
|
+
opacity: 0;
|
|
8845
|
+
}
|
|
8846
|
+
}
|
|
8847
|
+
@starting-style {
|
|
8848
|
+
.kpt-tree.is-live[data-motion=spring] .kpt-tree__collapse.is-open > .kpt-tree__group > .kpt-tree__node {
|
|
8849
|
+
opacity: 0;
|
|
8850
|
+
translate: -0.5rem 0;
|
|
8851
|
+
filter: blur(3px);
|
|
8852
|
+
}
|
|
8853
|
+
}
|
|
8854
|
+
.kpt-tree[data-motion=fade] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node,
|
|
8855
|
+
.kpt-tree[data-motion=spring] .kpt-tree__collapse:not(.is-open) > .kpt-tree__group > .kpt-tree__node {
|
|
8856
|
+
opacity: 0;
|
|
8857
|
+
transition-delay: 0s;
|
|
8858
|
+
}
|
|
8859
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8860
|
+
.kpt-tree__collapse,
|
|
8861
|
+
.kpt-tree__chevron,
|
|
8862
|
+
.kpt-tree[data-motion] .kpt-tree__collapse > .kpt-tree__group > .kpt-tree__node {
|
|
8863
|
+
transition: none;
|
|
8864
|
+
}
|
|
8865
|
+
}
|
|
7457
8866
|
.kpt-tree__icon {
|
|
7458
8867
|
color: var(--kpt-color-on-surface-muted);
|
|
7459
8868
|
}
|
|
@@ -7464,6 +8873,82 @@
|
|
|
7464
8873
|
}
|
|
7465
8874
|
}
|
|
7466
8875
|
|
|
8876
|
+
/* src/lib/update/update.component.scss */
|
|
8877
|
+
@layer kpt.components {
|
|
8878
|
+
.kpt-update-host {
|
|
8879
|
+
display: block;
|
|
8880
|
+
}
|
|
8881
|
+
.kpt-update {
|
|
8882
|
+
--_tile: var(--kpt-color-info);
|
|
8883
|
+
--_tile-on: var(--kpt-color-info-contrast);
|
|
8884
|
+
display: flex;
|
|
8885
|
+
align-items: center;
|
|
8886
|
+
gap: var(--kpt-space-4);
|
|
8887
|
+
min-width: 0;
|
|
8888
|
+
color: var(--kpt-color-text);
|
|
8889
|
+
}
|
|
8890
|
+
.kpt-update__ring {
|
|
8891
|
+
flex: none;
|
|
8892
|
+
}
|
|
8893
|
+
.kpt-update__icon {
|
|
8894
|
+
display: grid;
|
|
8895
|
+
place-items: center;
|
|
8896
|
+
width: 100%;
|
|
8897
|
+
height: 100%;
|
|
8898
|
+
overflow: hidden;
|
|
8899
|
+
border-radius: 28%;
|
|
8900
|
+
background: linear-gradient(140deg, var(--_tile), color-mix(in oklch, var(--_tile) 55%, var(--kpt-color-success)));
|
|
8901
|
+
color: var(--_tile-on);
|
|
8902
|
+
box-shadow: var(--kpt-shadow-sm);
|
|
8903
|
+
font-size: calc(var(--_size, 5rem) * 0.28);
|
|
8904
|
+
}
|
|
8905
|
+
.kpt-update__icon > img,
|
|
8906
|
+
.kpt-update__icon > svg {
|
|
8907
|
+
width: 100%;
|
|
8908
|
+
height: 100%;
|
|
8909
|
+
object-fit: cover;
|
|
8910
|
+
}
|
|
8911
|
+
.kpt-update__meta {
|
|
8912
|
+
display: grid;
|
|
8913
|
+
gap: var(--kpt-space-1);
|
|
8914
|
+
min-width: 0;
|
|
8915
|
+
}
|
|
8916
|
+
.kpt-update__name {
|
|
8917
|
+
font-weight: var(--kpt-font-weight-semibold);
|
|
8918
|
+
overflow: hidden;
|
|
8919
|
+
text-overflow: ellipsis;
|
|
8920
|
+
white-space: nowrap;
|
|
8921
|
+
}
|
|
8922
|
+
.kpt-update__line {
|
|
8923
|
+
font-size: var(--kpt-font-size-sm);
|
|
8924
|
+
color: var(--kpt-color-text-muted);
|
|
8925
|
+
font-variant-numeric: tabular-nums;
|
|
8926
|
+
}
|
|
8927
|
+
.kpt-update__swap {
|
|
8928
|
+
display: inline-grid;
|
|
8929
|
+
justify-items: start;
|
|
8930
|
+
}
|
|
8931
|
+
.kpt-update__swap > * {
|
|
8932
|
+
grid-area: 1/1;
|
|
8933
|
+
white-space: nowrap;
|
|
8934
|
+
}
|
|
8935
|
+
.kpt-update__action {
|
|
8936
|
+
justify-self: start;
|
|
8937
|
+
margin-block-start: var(--kpt-space-1);
|
|
8938
|
+
}
|
|
8939
|
+
.kpt-update__live {
|
|
8940
|
+
position: absolute;
|
|
8941
|
+
width: 1px;
|
|
8942
|
+
height: 1px;
|
|
8943
|
+
margin: -1px;
|
|
8944
|
+
padding: 0;
|
|
8945
|
+
overflow: hidden;
|
|
8946
|
+
clip-path: inset(50%);
|
|
8947
|
+
white-space: nowrap;
|
|
8948
|
+
border: 0;
|
|
8949
|
+
}
|
|
8950
|
+
}
|
|
8951
|
+
|
|
7467
8952
|
/* charts/src/lib/chart.component.scss */
|
|
7468
8953
|
@layer kpt.components {
|
|
7469
8954
|
.kpt-chart-host {
|
|
@@ -7821,7 +9306,7 @@
|
|
|
7821
9306
|
font: inherit;
|
|
7822
9307
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
7823
9308
|
line-height: 1.5;
|
|
7824
|
-
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem
|
|
9309
|
+
/* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem - wysokość liczy komponent. */
|
|
7825
9310
|
resize: none;
|
|
7826
9311
|
overflow-y: auto;
|
|
7827
9312
|
}
|
|
@@ -7836,6 +9321,12 @@
|
|
|
7836
9321
|
opacity: 0.6;
|
|
7837
9322
|
cursor: not-allowed;
|
|
7838
9323
|
}
|
|
9324
|
+
/* Mikrofon i jego fala nie oddają miejsca polu - kurczy się pole, nie przycisk. Wysokość
|
|
9325
|
+
przycisku wysyłki (2.5rem): mniejszy mikrofon i fala stoją na jego środku, nie przy dnie. */
|
|
9326
|
+
.kpt-chat-composer__speech {
|
|
9327
|
+
flex: none;
|
|
9328
|
+
min-block-size: 2.5rem;
|
|
9329
|
+
}
|
|
7839
9330
|
/* Pole pliku jest sterowane przyciskiem; natywny widget nie da się ostylować. */
|
|
7840
9331
|
.kpt-chat-composer__picker {
|
|
7841
9332
|
display: none;
|
|
@@ -7912,7 +9403,7 @@
|
|
|
7912
9403
|
pojawia się natychmiast. Ta sama sztuczka co w kpt-drawer. */
|
|
7913
9404
|
--_vis-delay: var(--kpt-motion-duration-base, 200ms);
|
|
7914
9405
|
position: fixed;
|
|
7915
|
-
/* 4,5rem to wysokość FAB-a plus prześwit
|
|
9406
|
+
/* 4,5rem to wysokość FAB-a plus prześwit - panel stoi nad przyciskiem. */
|
|
7916
9407
|
inset-block-end: calc(var(--_offset) + 4.5rem);
|
|
7917
9408
|
z-index: var(--kpt-z-overlay, 1000);
|
|
7918
9409
|
display: flex;
|
|
@@ -7928,7 +9419,7 @@
|
|
|
7928
9419
|
box-shadow: var(--kpt-elevation-3);
|
|
7929
9420
|
/* Stan zamknięty siedzi w regule bazowej, nie pod `[data-position]`: Angular ustawia
|
|
7930
9421
|
atrybuty o klatkę za późno, więc panel mrugnąłby otwarty przy pierwszym renderze.
|
|
7931
|
-
`visibility` zamiast `display: none`
|
|
9422
|
+
`visibility` zamiast `display: none` - przejścia nie da się zanimować z `none`. */
|
|
7932
9423
|
visibility: hidden;
|
|
7933
9424
|
opacity: 0;
|
|
7934
9425
|
transform: translateY(var(--kpt-space-4, 1rem)) scale(0.98);
|
|
@@ -7941,6 +9432,42 @@
|
|
|
7941
9432
|
transform: none;
|
|
7942
9433
|
transition-delay: 0s;
|
|
7943
9434
|
}
|
|
9435
|
+
/* Ruch otwarcia (`enterMotion`). `none` - bez przejścia. `spring` - okno wyrasta z przycisku:
|
|
9436
|
+
zamknięty panel jest zsunięty na wysokość FAB-a i przycięty do koła jego rozmiaru w rogu,
|
|
9437
|
+
więc kapsuła leży dokładnie na przycisku; otwarcie rozwija ją sprężyną w pełne okno.
|
|
9438
|
+
Zamykanie jest krótkie i bez odbicia - wraca do przycisku. */
|
|
9439
|
+
.kpt-chat-dock__panel[data-motion=none] {
|
|
9440
|
+
transition: none;
|
|
9441
|
+
}
|
|
9442
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9443
|
+
/* FAB 3,5rem; panel stoi 4,5rem nad dolną krawędzią przycisku (`--_lift`). */
|
|
9444
|
+
--_fab: 3.5rem;
|
|
9445
|
+
--_lift: 4.5rem;
|
|
9446
|
+
--_inset: 0rem;
|
|
9447
|
+
--_close: calc(0.28s * var(--kpt-motion-scale, 1));
|
|
9448
|
+
--_vis-delay: var(--_close);
|
|
9449
|
+
--_clip-x: calc(100% - var(--_fab) - var(--_inset));
|
|
9450
|
+
opacity: 0;
|
|
9451
|
+
transform: translateY(var(--_lift));
|
|
9452
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9453
|
+
transition: opacity calc(var(--_close) * 0.6) ease-in calc(var(--_close) * 0.4), transform var(--_close) var(--kpt-motion-easing-standard), clip-path var(--_close) var(--kpt-motion-easing-standard), visibility 0s linear var(--_vis-delay);
|
|
9454
|
+
}
|
|
9455
|
+
.kpt-chat-dock__panel[data-motion=spring][data-position=bottom-start] {
|
|
9456
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9457
|
+
}
|
|
9458
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9459
|
+
opacity: 1;
|
|
9460
|
+
transform: none;
|
|
9461
|
+
clip-path: inset(0 round var(--kpt-radius-lg, 0.75rem));
|
|
9462
|
+
transition: opacity calc(0.16s * var(--kpt-motion-scale, 1)) ease-out, transform calc(0.6s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), clip-path calc(0.6s * var(--kpt-motion-scale, 1)) linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), visibility 0s;
|
|
9463
|
+
}
|
|
9464
|
+
/* RTL: `bottom-end` stoi po lewej - koło idzie do lewego rogu. */
|
|
9465
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open) {
|
|
9466
|
+
clip-path: inset(var(--_clip-x) var(--_clip-x) var(--_inset) var(--_inset) round calc(var(--_fab) / 2));
|
|
9467
|
+
}
|
|
9468
|
+
.kpt-chat-dock__panel[data-motion=spring]:dir(rtl):not(.is-open)[data-position=bottom-start] {
|
|
9469
|
+
clip-path: inset(var(--_clip-x) var(--_inset) var(--_inset) var(--_clip-x) round calc(var(--_fab) / 2));
|
|
9470
|
+
}
|
|
7944
9471
|
.kpt-chat-dock__header {
|
|
7945
9472
|
display: flex;
|
|
7946
9473
|
flex: 0 0 auto;
|
|
@@ -7959,7 +9486,7 @@
|
|
|
7959
9486
|
flex-direction: column;
|
|
7960
9487
|
min-height: 0;
|
|
7961
9488
|
}
|
|
7962
|
-
/* Pozycja pozioma
|
|
9489
|
+
/* Pozycja pozioma - logiczne własności, więc RTL odwraca róg bez osobnej reguły.
|
|
7963
9490
|
Odsunięcie od rogu jest wspólne dla obu osi i steruje nim input `offset`: aplikacja
|
|
7964
9491
|
z drugim widgetem w rogu (np. kpt-scroll-top) odsuwa dock, zamiast walczyć ze stylami. */
|
|
7965
9492
|
.kpt-chat-dock__trigger,
|
|
@@ -7972,19 +9499,19 @@
|
|
|
7972
9499
|
}
|
|
7973
9500
|
/*
|
|
7974
9501
|
* 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
|
|
9502
|
+
* `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości - wystaje sama
|
|
7976
9503
|
* plakietka nieprzeczytanych, a przycisku nie da się kliknąć.
|
|
7977
9504
|
*
|
|
7978
9505
|
* Ustępuje przycisk powrotu na górę, bo czat jest akcją główną i większym celem. Odsuwamy go
|
|
7979
9506
|
* 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ą
|
|
9507
|
+
* jedną kolizję na drugą, gorszą - przycisk lądowałby na treści wiadomości.
|
|
7981
9508
|
*
|
|
7982
9509
|
* `:has()` na korzeniu dokumentu jest tu jedyną drogą: oba komponenty są `position: fixed`
|
|
7983
9510
|
* 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
|
|
9511
|
+
* ma iść w stronę grafu paczek - subpath zna rdzeń, rdzeń nie zna subpathu.
|
|
7985
9512
|
*
|
|
7986
9513
|
* Dotyczy wyłącznie `bottom-end`: dock po lewej i tak nie koliduje. Gdy aplikacja przestawi
|
|
7987
|
-
* `offset`, sama odpowiada też za ustawienie scroll-topu
|
|
9514
|
+
* `offset`, sama odpowiada też za ustawienie scroll-topu - ta reguła liczy od wartości domyślnej.
|
|
7988
9515
|
*/
|
|
7989
9516
|
:root:has(.kpt-chat-dock__trigger[data-position=bottom-end]) .kpt-scroll-top {
|
|
7990
9517
|
/* 3,5rem to szerokość FAB-a, 0,75rem prześwit między przyciskami. */
|
|
@@ -8002,9 +9529,20 @@
|
|
|
8002
9529
|
border-radius: 0;
|
|
8003
9530
|
transform: translateY(var(--kpt-space-6, 1.5rem));
|
|
8004
9531
|
}
|
|
9532
|
+
/* Pełny ekran: panel już leży nad FAB-em, więc koło startuje w miejscu przycisku, bez zsuwania. */
|
|
9533
|
+
.kpt-chat-dock__panel[data-motion=spring] {
|
|
9534
|
+
--_lift: 0rem;
|
|
9535
|
+
--_inset: var(--_offset);
|
|
9536
|
+
}
|
|
9537
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9538
|
+
clip-path: inset(0);
|
|
9539
|
+
}
|
|
8005
9540
|
}
|
|
8006
9541
|
@media (prefers-reduced-motion: reduce) {
|
|
8007
|
-
.kpt-chat-dock__panel
|
|
9542
|
+
.kpt-chat-dock__panel,
|
|
9543
|
+
.kpt-chat-dock__panel[data-motion=spring],
|
|
9544
|
+
.kpt-chat-dock__panel[data-motion=spring].is-open {
|
|
9545
|
+
clip-path: none;
|
|
8008
9546
|
transition: opacity var(--kpt-motion-duration-fast, 120ms) linear, visibility 0s linear var(--_vis-delay);
|
|
8009
9547
|
transform: none;
|
|
8010
9548
|
}
|
|
@@ -8017,7 +9555,7 @@
|
|
|
8017
9555
|
.kpt-chat-message-host {
|
|
8018
9556
|
display: block;
|
|
8019
9557
|
}
|
|
8020
|
-
/* Komunikat systemowy nie jest wypowiedzią
|
|
9558
|
+
/* Komunikat systemowy nie jest wypowiedzią - nie dostaje bąbla ani kolumny awatara. */
|
|
8021
9559
|
.kpt-chat-message__system {
|
|
8022
9560
|
margin: var(--kpt-space-2, 0.5rem) 0;
|
|
8023
9561
|
text-align: center;
|
|
@@ -8029,7 +9567,7 @@
|
|
|
8029
9567
|
align-items: flex-end;
|
|
8030
9568
|
gap: var(--kpt-space-2, 0.5rem);
|
|
8031
9569
|
/* 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
|
|
9570
|
+
akcji (strzałka ponowienia) wypycha na zewnątrz bąbla - po stronie treści. */
|
|
8033
9571
|
}
|
|
8034
9572
|
.kpt-chat-message__row[data-align=end] {
|
|
8035
9573
|
flex-direction: row-reverse;
|
|
@@ -8053,7 +9591,7 @@
|
|
|
8053
9591
|
font-weight: var(--kpt-font-weight-medium, 500);
|
|
8054
9592
|
}
|
|
8055
9593
|
.kpt-chat-message__bubble {
|
|
8056
|
-
/* Motyw jest monochromatyczny
|
|
9594
|
+
/* Motyw jest monochromatyczny - różnicę między bąblami robi jasność, nie odcień.
|
|
8057
9595
|
Wariant przychodzący siada na `muted`, bo `surface-variant` dzieli od tła listy
|
|
8058
9596
|
1,5% jasności i w jasnym motywie bąbel po prostu znika. */
|
|
8059
9597
|
--_bg: var(--kpt-color-muted);
|
|
@@ -8067,7 +9605,7 @@
|
|
|
8067
9605
|
color: var(--_fg);
|
|
8068
9606
|
font-size: var(--kpt-font-size-sm, 0.875rem);
|
|
8069
9607
|
line-height: var(--kpt-font-lineHeight-normal, 1.5);
|
|
8070
|
-
/* Cichszy wariant własnej wiadomości
|
|
9608
|
+
/* Cichszy wariant własnej wiadomości - dla rozmów, w których pełny kolor po prawej
|
|
8071
9609
|
stronie jest za mocny. */
|
|
8072
9610
|
}
|
|
8073
9611
|
.kpt-chat-message__bubble[data-variant=primary] {
|
|
@@ -8084,7 +9622,7 @@
|
|
|
8084
9622
|
padding-inline: 0;
|
|
8085
9623
|
}
|
|
8086
9624
|
.kpt-chat-message__bubble {
|
|
8087
|
-
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border`
|
|
9625
|
+
/* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border` - ramka przesunęłaby
|
|
8088
9626
|
treść o piksel w chwili, w której status się zmienia. */
|
|
8089
9627
|
}
|
|
8090
9628
|
.kpt-chat-message__bubble[data-status=failed] {
|
|
@@ -8119,7 +9657,7 @@
|
|
|
8119
9657
|
}
|
|
8120
9658
|
.kpt-chat-message__bubble {
|
|
8121
9659
|
/* Narożnik pod ogonkiem jest prosty. Zaokrąglony odsuwał się od ogonka łukiem i między
|
|
8122
|
-
nimi prześwitywało tło listy
|
|
9660
|
+
nimi prześwitywało tło listy - ogonek czytał się jak osobna strzałka doklejona obok
|
|
8123
9661
|
bąbla, a nie jak jego przedłużenie. Bramka na `[data-tail]`: bąble bez ogonka (środek
|
|
8124
9662
|
grupy, `ghost`, `system`, `[tail]="false"`) mają zostać zaokrąglone. */
|
|
8125
9663
|
}
|
|
@@ -8146,7 +9684,7 @@
|
|
|
8146
9684
|
inset-inline-end: -0.5rem;
|
|
8147
9685
|
}
|
|
8148
9686
|
.kpt-chat-message__bubble {
|
|
8149
|
-
/* Odbicie zamiast drugiej maski
|
|
9687
|
+
/* Odbicie zamiast drugiej maski - obraca się razem z `inset-inline`, więc RTL
|
|
8150
9688
|
nie wymaga osobnej reguły. */
|
|
8151
9689
|
}
|
|
8152
9690
|
.kpt-chat-message__bubble[data-tail][data-align=start]::after {
|
|
@@ -8189,7 +9727,7 @@
|
|
|
8189
9727
|
}
|
|
8190
9728
|
.kpt-chat-message__text {
|
|
8191
9729
|
margin: 0;
|
|
8192
|
-
/* Kompozytor łamie linie na Shift+Enter
|
|
9730
|
+
/* Kompozytor łamie linie na Shift+Enter - bez `pre-wrap` zlepiłyby się w akapit. */
|
|
8193
9731
|
white-space: pre-wrap;
|
|
8194
9732
|
overflow-wrap: anywhere;
|
|
8195
9733
|
}
|
|
@@ -8233,7 +9771,7 @@
|
|
|
8233
9771
|
opacity: 0.7;
|
|
8234
9772
|
}
|
|
8235
9773
|
.kpt-chat-message__status {
|
|
8236
|
-
/* Ikona ma 1em, a wiersz meta jest już zmniejszony
|
|
9774
|
+
/* Ikona ma 1em, a wiersz meta jest już zmniejszony - bez tego status ginie. */
|
|
8237
9775
|
font-size: 0.875rem;
|
|
8238
9776
|
}
|
|
8239
9777
|
/* Kolor statusu schodzi z `data-status` bąbla, a nie z drugiego takiego atrybutu na ikonie:
|
|
@@ -8242,7 +9780,7 @@
|
|
|
8242
9780
|
color: var(--kpt-color-primary);
|
|
8243
9781
|
opacity: 1;
|
|
8244
9782
|
}
|
|
8245
|
-
/* Na bąblu `solid` akcent jest kolorem TŁA, więc
|
|
9783
|
+
/* Na bąblu `solid` akcent jest kolorem TŁA, więc "przeczytano" zniknęłoby w nim
|
|
8246
9784
|
bez śladu. Tam wyróżnia je pełne krycie własnego koloru tekstu. */
|
|
8247
9785
|
.kpt-chat-message__bubble[data-variant=solid][data-status=read] .kpt-chat-message__status {
|
|
8248
9786
|
color: currentcolor;
|
|
@@ -8284,14 +9822,62 @@
|
|
|
8284
9822
|
background: var(--kpt-color-primary-subtle);
|
|
8285
9823
|
}
|
|
8286
9824
|
.kpt-chat-message__reaction-count {
|
|
9825
|
+
display: inline-block;
|
|
9826
|
+
overflow: clip;
|
|
9827
|
+
vertical-align: bottom;
|
|
8287
9828
|
opacity: 0.7;
|
|
8288
9829
|
}
|
|
9830
|
+
.kpt-chat-message__reaction-digit {
|
|
9831
|
+
display: inline-block;
|
|
9832
|
+
}
|
|
9833
|
+
/* Ruch pojawiania się (`enterMotion`), tylko po pierwszym renderze (`.is-live`): nowa
|
|
9834
|
+
reakcja wskakuje, nowa liczba wjeżdża od dołu jak na bębnie, nowa ikona statusu
|
|
9835
|
+
obraca się na miejsce. Każda zmiana to nowy element w DOM, więc wystarcza `@starting-style`. */
|
|
9836
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9837
|
+
transition: scale 0.42s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1);
|
|
9838
|
+
}
|
|
9839
|
+
@starting-style {
|
|
9840
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction {
|
|
9841
|
+
scale: 0.4;
|
|
9842
|
+
}
|
|
9843
|
+
}
|
|
9844
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9845
|
+
transition: translate 0.36s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), opacity 0.18s ease-out;
|
|
9846
|
+
}
|
|
9847
|
+
@starting-style {
|
|
9848
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__reaction-digit {
|
|
9849
|
+
translate: 0 0.7em;
|
|
9850
|
+
opacity: 0;
|
|
9851
|
+
}
|
|
9852
|
+
}
|
|
9853
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9854
|
+
transition: scale 0.4s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), rotate 0.4s linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1), opacity 0.18s ease-out;
|
|
9855
|
+
}
|
|
9856
|
+
@starting-style {
|
|
9857
|
+
.kpt-chat-message-host.is-live[data-motion=spring] .kpt-chat-message__status {
|
|
9858
|
+
scale: 0.3;
|
|
9859
|
+
rotate: -90deg;
|
|
9860
|
+
opacity: 0;
|
|
9861
|
+
}
|
|
9862
|
+
}
|
|
9863
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9864
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9865
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9866
|
+
transition: opacity 0.24s ease-out;
|
|
9867
|
+
}
|
|
9868
|
+
@starting-style {
|
|
9869
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction,
|
|
9870
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__reaction-digit,
|
|
9871
|
+
.kpt-chat-message-host.is-live[data-motion=fade] .kpt-chat-message__status {
|
|
9872
|
+
opacity: 0;
|
|
9873
|
+
}
|
|
9874
|
+
}
|
|
8289
9875
|
.kpt-chat-message__actions {
|
|
8290
9876
|
display: flex;
|
|
8291
9877
|
flex: 0 0 auto;
|
|
8292
9878
|
align-items: center;
|
|
8293
9879
|
gap: 0.125rem;
|
|
8294
|
-
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie
|
|
9880
|
+
/* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie - inaczej lista
|
|
8295
9881
|
wyglądałaby jak panel sterowania. Ponowienie jest wyjątkiem: musi być widoczne
|
|
8296
9882
|
zawsze, bo bez niego nieudana wiadomość nie ma czym o sobie powiedzieć. */
|
|
8297
9883
|
}
|
|
@@ -8308,7 +9894,7 @@
|
|
|
8308
9894
|
.kpt-chat-message__actions[data-open] .kpt-icon-button-host {
|
|
8309
9895
|
opacity: 1;
|
|
8310
9896
|
}
|
|
8311
|
-
/* Kotwica wybieraka
|
|
9897
|
+
/* Kotwica wybieraka - pozycjonuje go względem przycisku "zareaguj". */
|
|
8312
9898
|
.kpt-chat-message__react {
|
|
8313
9899
|
position: relative;
|
|
8314
9900
|
display: inline-flex;
|
|
@@ -8316,7 +9902,7 @@
|
|
|
8316
9902
|
/* Wybierak reakcji: rząd emoji nad przyciskiem. Rozwija się w stronę bąbla, nie od niego:
|
|
8317
9903
|
akcje stoją przy zewnętrznej krawędzi listy, więc wybierak wyśrodkowany na przycisku
|
|
8318
9904
|
wychodziłby poza viewport (a ten ma `overflow-y: auto`, czyli przycina też w poziomie)
|
|
8319
|
-
|
|
9905
|
+
- w wąskim docku ucięłoby połowę reakcji. */
|
|
8320
9906
|
.kpt-chat-message__picker {
|
|
8321
9907
|
position: absolute;
|
|
8322
9908
|
inset-block-end: calc(100% + var(--kpt-space-1, 0.25rem));
|
|
@@ -8330,7 +9916,7 @@
|
|
|
8330
9916
|
background: var(--kpt-color-surface-raised);
|
|
8331
9917
|
box-shadow: var(--kpt-elevation-2);
|
|
8332
9918
|
}
|
|
8333
|
-
/* Własna wiadomość ma odwrócony wiersz
|
|
9919
|
+
/* Własna wiadomość ma odwrócony wiersz - akcje lądują z lewej, więc wybierak idzie w prawo. */
|
|
8334
9920
|
.kpt-chat-message__row[data-align=end] .kpt-chat-message__picker {
|
|
8335
9921
|
inset-inline: 0 auto;
|
|
8336
9922
|
}
|
|
@@ -8366,7 +9952,10 @@
|
|
|
8366
9952
|
}
|
|
8367
9953
|
@media (prefers-reduced-motion: reduce) {
|
|
8368
9954
|
.kpt-chat-message__actions .kpt-icon-button-host,
|
|
8369
|
-
.kpt-chat-message__pick
|
|
9955
|
+
.kpt-chat-message__pick,
|
|
9956
|
+
.kpt-chat-message__reaction,
|
|
9957
|
+
.kpt-chat-message__reaction-digit,
|
|
9958
|
+
.kpt-chat-message__status {
|
|
8370
9959
|
transition: none;
|
|
8371
9960
|
}
|
|
8372
9961
|
.kpt-chat-message__pick:hover {
|
|
@@ -8385,7 +9974,7 @@
|
|
|
8385
9974
|
display: flex;
|
|
8386
9975
|
align-items: center;
|
|
8387
9976
|
gap: var(--kpt-space-2, 0.5rem);
|
|
8388
|
-
/* Wcięcie równe kolumnie awatara
|
|
9977
|
+
/* Wcięcie równe kolumnie awatara - wskaźnik staje tam, gdzie stanie bąbel. */
|
|
8389
9978
|
padding-inline-start: calc(2rem + var(--kpt-space-2, 0.5rem));
|
|
8390
9979
|
}
|
|
8391
9980
|
.kpt-chat-typing__bubble {
|
|
@@ -8432,8 +10021,14 @@
|
|
|
8432
10021
|
opacity: 1;
|
|
8433
10022
|
}
|
|
8434
10023
|
}
|
|
10024
|
+
/* Ruch wyłączony konfiguracją (`provideKptMotion({ enabled: false })`): kropki to wskaźnik
|
|
10025
|
+
stanu jak spinner - pulsują wolniej zamiast stanąć. */
|
|
10026
|
+
:root[data-kpt-motion=off] .kpt-chat-typing__dot {
|
|
10027
|
+
animation-name: kpt-chat-typing-pulse;
|
|
10028
|
+
animation-duration: 1.8s;
|
|
10029
|
+
}
|
|
8435
10030
|
/* Skok zamieniamy na pulsowanie, a nie wyłączamy animację: kropki są jedynym
|
|
8436
|
-
nośnikiem informacji
|
|
10031
|
+
nośnikiem informacji "ktoś pisze" i nieruchome nie odróżniają się od ozdoby. */
|
|
8437
10032
|
@media (prefers-reduced-motion: reduce) {
|
|
8438
10033
|
.kpt-chat-typing__dot {
|
|
8439
10034
|
animation-name: kpt-chat-typing-pulse;
|
|
@@ -8454,7 +10049,7 @@
|
|
|
8454
10049
|
background: var(--kpt-color-surface);
|
|
8455
10050
|
color: var(--kpt-color-text);
|
|
8456
10051
|
}
|
|
8457
|
-
/* Pasek offline. `role="status"` bez `aria-live="assertive"`
|
|
10052
|
+
/* Pasek offline. `role="status"` bez `aria-live="assertive"` - utrata sieci ma być
|
|
8458
10053
|
zauważona, ale nie przerywać czytania wiadomości w połowie zdania. */
|
|
8459
10054
|
.kpt-chat__offline {
|
|
8460
10055
|
display: flex;
|
|
@@ -8472,7 +10067,7 @@
|
|
|
8472
10067
|
color: var(--kpt-color-text-muted);
|
|
8473
10068
|
font-size: var(--kpt-font-size-xs, 0.75rem);
|
|
8474
10069
|
}
|
|
8475
|
-
/* Kontener pozycjonujący dla pigułki
|
|
10070
|
+
/* Kontener pozycjonujący dla pigułki "nowe wiadomości" - pigułka ma pływać nad listą,
|
|
8476
10071
|
a nie nad całą stroną, więc nie jest `fixed` jak kpt-scroll-top. */
|
|
8477
10072
|
.kpt-chat__body {
|
|
8478
10073
|
position: relative;
|
|
@@ -8521,21 +10116,21 @@
|
|
|
8521
10116
|
}
|
|
8522
10117
|
/* Separator jedzie z treścią i nie jest `sticky`: przyklejony zostawał na górze, więc przy
|
|
8523
10118
|
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ę
|
|
10119
|
+
wystawały zza najnowszej. Rolę "w jakim dniu jestem" przejęła jedna pływająca pigułka. */
|
|
8525
10120
|
.kpt-chat__date {
|
|
8526
10121
|
align-self: center;
|
|
8527
10122
|
margin: var(--kpt-space-4, 1rem) 0 var(--kpt-space-2, 0.5rem);
|
|
8528
10123
|
}
|
|
8529
10124
|
/* 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
|
|
10125
|
+
Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body` - tak samo jak
|
|
10126
|
+
pigułka "nowe wiadomości" przy dolnej krawędzi. Gaśnie przez `visibility`, nie
|
|
8532
10127
|
`display: none`, bo skrypt musi móc zmierzyć jej pas także wtedy, gdy jej nie widać. */
|
|
8533
10128
|
.kpt-chat__day {
|
|
8534
10129
|
position: absolute;
|
|
8535
10130
|
inset-block-start: var(--kpt-space-2, 0.5rem);
|
|
8536
10131
|
/* Prawy odstęp kompensuje pasek przewijania: lista oddaje mu kawałek swojej szerokości,
|
|
8537
10132
|
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`
|
|
10133
|
+
względem samego tekstu. Logicznie, nie przez `right` - w RTL pasek jest po drugiej
|
|
8539
10134
|
stronie i przesunięcie musi iść za nim. */
|
|
8540
10135
|
inset-inline: 0 var(--kpt-space-3, 0.75rem);
|
|
8541
10136
|
z-index: var(--kpt-z-raised, 1);
|
|
@@ -9049,8 +10644,8 @@
|
|
|
9049
10644
|
color: var(--kpt-color-on-surface-muted);
|
|
9050
10645
|
}
|
|
9051
10646
|
/*
|
|
9052
|
-
* Pasek akcji przykleja się do dołu obszaru przewijania
|
|
9053
|
-
* i zdjęciem formularz ma kilkanaście pól i
|
|
10647
|
+
* Pasek akcji przykleja się do dołu obszaru przewijania - przy schemie z godzinami
|
|
10648
|
+
* i zdjęciem formularz ma kilkanaście pól i "Zapisz" uciekałby na sam dół.
|
|
9054
10649
|
*
|
|
9055
10650
|
* Slot `[kptDialogFooter]` odpada: projekcja treści widzi wyłącznie bezpośrednie dzieci
|
|
9056
10651
|
* `<kpt-dialog>`, a ten komponent trafia tam w całości jako jeden element.
|
|
@@ -9101,7 +10696,7 @@
|
|
|
9101
10696
|
padding: var(--kpt-space-1) 0;
|
|
9102
10697
|
}
|
|
9103
10698
|
.kpt-map-hours-field__day[data-locked] {
|
|
9104
|
-
/* Dzień przepisany z poniedziałku
|
|
10699
|
+
/* Dzień przepisany z poniedziałku - widoczny, ale nie do edycji. */
|
|
9105
10700
|
opacity: 0.6;
|
|
9106
10701
|
}
|
|
9107
10702
|
.kpt-map-hours-field__name {
|
|
@@ -9118,7 +10713,7 @@
|
|
|
9118
10713
|
display: flex;
|
|
9119
10714
|
gap: var(--kpt-space-1);
|
|
9120
10715
|
align-items: center;
|
|
9121
|
-
/* Obie godziny dzielą kolumnę po równo
|
|
10716
|
+
/* Obie godziny dzielą kolumnę po równo - `min-width: 0` pozwala im zejść poniżej treści. */
|
|
9122
10717
|
}
|
|
9123
10718
|
.kpt-map-hours-field__range .kpt-datepicker-host {
|
|
9124
10719
|
flex: 1 1 0;
|
|
@@ -9182,7 +10777,7 @@
|
|
|
9182
10777
|
.kpt-map-image-field__preview img {
|
|
9183
10778
|
display: block;
|
|
9184
10779
|
width: 100%;
|
|
9185
|
-
/* Ten sam kadr co w karcie miejsca
|
|
10780
|
+
/* Ten sam kadr co w karcie miejsca - podgląd ma pokazywać prawdę. */
|
|
9186
10781
|
aspect-ratio: 16/9;
|
|
9187
10782
|
object-fit: cover;
|
|
9188
10783
|
}
|
|
@@ -9244,7 +10839,7 @@
|
|
|
9244
10839
|
cursor: default;
|
|
9245
10840
|
}
|
|
9246
10841
|
.kpt-map-legend__item {
|
|
9247
|
-
/* Ukryta kategoria zostaje czytelna
|
|
10842
|
+
/* Ukryta kategoria zostaje czytelna - wygaszamy ją, nie chowamy. */
|
|
9248
10843
|
}
|
|
9249
10844
|
.kpt-map-legend__item.kpt-map-legend__item--off {
|
|
9250
10845
|
color: var(--kpt-color-on-surface-muted);
|
|
@@ -9330,7 +10925,7 @@
|
|
|
9330
10925
|
gap: 0 var(--kpt-space-2);
|
|
9331
10926
|
margin: var(--kpt-space-1) 0 0;
|
|
9332
10927
|
padding: 0 var(--kpt-space-4) var(--kpt-space-3);
|
|
9333
|
-
/* Kreska domyka nieruchomy nagłówek
|
|
10928
|
+
/* Kreska domyka nieruchomy nagłówek - bez niej ucięta treść czyta się jak błąd. */
|
|
9334
10929
|
border-bottom: var(--kpt-border-width-thin) solid var(--kpt-color-border);
|
|
9335
10930
|
}
|
|
9336
10931
|
.kpt-map-poi__distance {
|
|
@@ -9375,8 +10970,8 @@
|
|
|
9375
10970
|
min-width: 0;
|
|
9376
10971
|
}
|
|
9377
10972
|
/*
|
|
9378
|
-
Stan
|
|
9379
|
-
z `--_fg` przycisku, a `border-color` się nie dziedziczy
|
|
10973
|
+
Stan "w ulubionych" maluje przycisk, nie hosta: `color` z hosta i tak przegrywa
|
|
10974
|
+
z `--_fg` przycisku, a `border-color` się nie dziedziczy - reguła na samym `[data-on]`
|
|
9380
10975
|
nie zmieniała niczego widocznego.
|
|
9381
10976
|
*/
|
|
9382
10977
|
.kpt-map-poi__fav[data-on] .kpt-icon-button {
|
|
@@ -9492,7 +11087,7 @@
|
|
|
9492
11087
|
color: var(--kpt-color-on-surface-muted);
|
|
9493
11088
|
}
|
|
9494
11089
|
.kpt-map-poi__fact-label::after {
|
|
9495
|
-
content: "
|
|
11090
|
+
content: ", ";
|
|
9496
11091
|
}
|
|
9497
11092
|
.kpt-map-poi__row-actions {
|
|
9498
11093
|
display: flex;
|
|
@@ -9520,7 +11115,7 @@
|
|
|
9520
11115
|
}
|
|
9521
11116
|
/*
|
|
9522
11117
|
* 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
|
|
11118
|
+
* Na dotyku zostają widoczne, a `:focus-within` odsłania je dla klawiatury -
|
|
9524
11119
|
* elementy zostają w drzewie zawsze, więc kolejność tabulacji się nie zmienia.
|
|
9525
11120
|
*/
|
|
9526
11121
|
@media (hover: hover) and (pointer: fine) {
|
|
@@ -9533,7 +11128,7 @@
|
|
|
9533
11128
|
opacity: 1;
|
|
9534
11129
|
}
|
|
9535
11130
|
}
|
|
9536
|
-
/* Komunikat dla czytnika ekranu
|
|
11131
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9537
11132
|
.kpt-map-poi__live {
|
|
9538
11133
|
position: absolute;
|
|
9539
11134
|
width: 1px;
|
|
@@ -9595,6 +11190,10 @@
|
|
|
9595
11190
|
color: var(--kpt-color-on-surface-muted);
|
|
9596
11191
|
cursor: not-allowed;
|
|
9597
11192
|
}
|
|
11193
|
+
.kpt-map-search__speech {
|
|
11194
|
+
flex: none;
|
|
11195
|
+
gap: var(--kpt-space-1);
|
|
11196
|
+
}
|
|
9598
11197
|
.kpt-map-search__clear {
|
|
9599
11198
|
display: inline-flex;
|
|
9600
11199
|
flex: none;
|
|
@@ -9659,7 +11258,7 @@
|
|
|
9659
11258
|
padding: var(--kpt-space-3);
|
|
9660
11259
|
color: var(--kpt-color-on-surface-muted);
|
|
9661
11260
|
}
|
|
9662
|
-
/* Komunikat dla czytnika ekranu
|
|
11261
|
+
/* Komunikat dla czytnika ekranu - widoczny wyłącznie dla technologii asystujących. */
|
|
9663
11262
|
.kpt-map-search__status {
|
|
9664
11263
|
position: absolute;
|
|
9665
11264
|
width: 1px;
|
|
@@ -9734,20 +11333,20 @@
|
|
|
9734
11333
|
opacity: 0.6;
|
|
9735
11334
|
}
|
|
9736
11335
|
/*
|
|
9737
|
-
* Wyszukiwarka stoi w prawym górnym rogu
|
|
11336
|
+
* Wyszukiwarka stoi w prawym górnym rogu - kontrolki zoomu zajmują lewy.
|
|
9738
11337
|
* `z-index: 5` to szczyt skali warstwy Angulara nad mapą (popup 3, menu 4): rozwinięty
|
|
9739
11338
|
* panel podpowiedzi ma zakrywać wszystko, w tym menu prawego przycisku.
|
|
9740
11339
|
*
|
|
9741
11340
|
* TO MUSI BYĆ OPAKOWANIE, nie klasa na samym `<kpt-map-search>`.
|
|
9742
11341
|
*
|
|
9743
|
-
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }`
|
|
11342
|
+
* Host tamtego komponentu ma własną regułę `.kpt-map-search { position: relative }` -
|
|
9744
11343
|
* blok zawierający dla panelu podpowiedzi, potrzebny także wtedy, gdy komponent stoi
|
|
9745
11344
|
* poza mapą. Obie reguły trafiałyby wówczas na TEN SAM element z identyczną
|
|
9746
11345
|
* specyficznością (0,1,0) i w tej samej warstwie `kpt.components`, więc rozstrzygałaby
|
|
9747
|
-
* kolejność wstrzyknięcia stylów
|
|
11346
|
+
* kolejność wstrzyknięcia stylów - a Angular wstrzykuje style dziecka PO stylach
|
|
9748
11347
|
* rodzica. `relative` wygrywało, pole wypadało do normalnego przepływu za
|
|
9749
11348
|
* `.kpt-map__canvas` (`height: 100%`) i znikało przycięte przez `overflow: hidden`
|
|
9750
|
-
* widoku. Nie
|
|
11349
|
+
* widoku. Nie "stało krzywo" - nie było go wcale.
|
|
9751
11350
|
*
|
|
9752
11351
|
* Opakowanie rozdziela oba zestawy reguł na osobne elementy i wyjmuje rzecz
|
|
9753
11352
|
* z zależności od kolejności wstrzykiwania.
|
|
@@ -9848,7 +11447,7 @@
|
|
|
9848
11447
|
border-radius: var(--kpt-radius-full);
|
|
9849
11448
|
box-shadow: var(--kpt-elevation-2);
|
|
9850
11449
|
}
|
|
9851
|
-
/* Wielkość rośnie schodkowo
|
|
11450
|
+
/* Wielkość rośnie schodkowo - trzy stopnie wystarczą, żeby zobaczyć różnicę. */
|
|
9852
11451
|
.kpt-map__cluster--sm {
|
|
9853
11452
|
font-size: var(--kpt-font-size-xs);
|
|
9854
11453
|
scale: 0.78;
|
|
@@ -9910,7 +11509,7 @@
|
|
|
9910
11509
|
.kpt-map__popup {
|
|
9911
11510
|
/*
|
|
9912
11511
|
* Wariant `card`: całą treść rysuje komponent w środku, więc popup oddaje mu
|
|
9913
|
-
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy
|
|
11512
|
+
* szerokość i padding. Wysokość ograniczamy, a nadmiar przewijamy - karta
|
|
9914
11513
|
* miejsca bywa wyższa niż mapa, a auto-pan i tak mierzy realny element.
|
|
9915
11514
|
*/
|
|
9916
11515
|
}
|
|
@@ -9922,7 +11521,7 @@
|
|
|
9922
11521
|
display: flex;
|
|
9923
11522
|
flex-direction: column;
|
|
9924
11523
|
/*
|
|
9925
|
-
* Sam popup nie dostaje `overflow: hidden`
|
|
11524
|
+
* Sam popup nie dostaje `overflow: hidden` - strzałka `::after` wisi na `top: 100%`
|
|
9926
11525
|
* i schowałaby się razem z nadmiarem.
|
|
9927
11526
|
*
|
|
9928
11527
|
* Nie przewija też treści: oddaje wysokość komponentowi w środku, żeby ten mógł
|
|
@@ -10072,7 +11671,7 @@
|
|
|
10072
11671
|
/*
|
|
10073
11672
|
* Krąg dokładności przy silniku Google jest zwykłym elementem, a nie kółkiem SVG jak
|
|
10074
11673
|
* w Leaflecie: `google.maps.Circle` przyjmuje kolory w opcjach, a tu obowiązują tokeny.
|
|
10075
|
-
* Te same barwy co w regule SVG niżej
|
|
11674
|
+
* Te same barwy co w regule SVG niżej - tylko innymi właściwościami.
|
|
10076
11675
|
*/
|
|
10077
11676
|
.kpt-map[data-engine=google] .kpt-map__accuracy {
|
|
10078
11677
|
background: color-mix(in oklch, var(--kpt-color-info) 15%, transparent);
|
|
@@ -10080,13 +11679,13 @@
|
|
|
10080
11679
|
}
|
|
10081
11680
|
}
|
|
10082
11681
|
/*
|
|
10083
|
-
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO
|
|
11682
|
+
* PONIŻSZE REGUŁY STOJĄ POZA `@layer` CELOWO - jedyne takie miejsce w bibliotece.
|
|
10084
11683
|
*
|
|
10085
11684
|
* `leaflet.css` dostarcza aplikacja i nie jest warstwowany, a CSS spoza warstw wygrywa
|
|
10086
11685
|
* z KAŻDĄ regułą w `@layer` niezależnie od specyficzności. Nadpisania `.leaflet-*`
|
|
10087
11686
|
* umieszczone w `kpt.components` po prostu by nie zadziałały.
|
|
10088
11687
|
*
|
|
10089
|
-
* Nie przenosić tego do `@layer`
|
|
11688
|
+
* Nie przenosić tego do `@layer` "dla porządku".
|
|
10090
11689
|
*/
|
|
10091
11690
|
.kpt-map .leaflet-container {
|
|
10092
11691
|
font-family: var(--kpt-font-family-sans);
|
|
@@ -10095,9 +11694,9 @@
|
|
|
10095
11694
|
/*
|
|
10096
11695
|
* Zamyka skalę z-index Leafleta we WŁASNYM kontekście układania.
|
|
10097
11696
|
*
|
|
10098
|
-
* Bez tego panes (200
|
|
11697
|
+
* Bez tego panes (200-700) i kontrolki (800) konkurują bezpośrednio z warstwą Angulara
|
|
10099
11698
|
* 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
|
|
11699
|
+
* Popup, kontrolki zoomu i menu prawego przycisku były wtedy MALOWANE POD kaflami -
|
|
10101
11700
|
* i nie dało się tego zobaczyć hit-testem, bo panes mają `pointer-events: none`,
|
|
10102
11701
|
* więc `elementFromPoint` zwracał popup jako element na wierzchu.
|
|
10103
11702
|
*
|
|
@@ -10106,7 +11705,7 @@
|
|
|
10106
11705
|
z-index: 0;
|
|
10107
11706
|
}
|
|
10108
11707
|
|
|
10109
|
-
/* Ikony znaczników niosą własne tło
|
|
11708
|
+
/* Ikony znaczników niosą własne tło - kontener Leafleta musi zejść z drogi. */
|
|
10110
11709
|
.kpt-map .leaflet-div-icon,
|
|
10111
11710
|
.kpt-map .kpt-map__icon {
|
|
10112
11711
|
background: transparent;
|
|
@@ -10132,6 +11731,6 @@
|
|
|
10132
11731
|
|
|
10133
11732
|
.kpt-map .leaflet-popup-content-wrapper,
|
|
10134
11733
|
.kpt-map .leaflet-popup-tip {
|
|
10135
|
-
/* Popupów Leafleta nie używamy
|
|
11734
|
+
/* Popupów Leafleta nie używamy - renderuje je warstwa Angulara. */
|
|
10136
11735
|
display: none;
|
|
10137
11736
|
}
|