@kubit-ui-web/react-components 2.0.0-beta.62 → 2.0.0-beta.63

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.
Files changed (42) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/image/image.css +1 -38
  3. package/dist/cjs/components/input/stories/styles.css +1 -11
  4. package/dist/cjs/components/popover/stories/demos/animationsDemo.css +1 -97
  5. package/dist/cjs/components/popover/styles/index.css +1 -10
  6. package/dist/cjs/components/popover/styles/keyframes.css +1 -421
  7. package/dist/cjs/components/popover/styles/popover-arrow.css +1 -42
  8. package/dist/cjs/components/popover/styles/popover.css +1 -189
  9. package/dist/cjs/components/skeleton/skeleton.css +1 -13
  10. package/dist/cjs/components/text/text.css +1 -14
  11. package/dist/cjs/components/tooltip/tooltip.css +1 -54
  12. package/dist/esm/components/image/image.css +1 -38
  13. package/dist/esm/components/input/stories/styles.css +1 -11
  14. package/dist/esm/components/popover/stories/demos/animationsDemo.css +1 -97
  15. package/dist/esm/components/popover/styles/index.css +1 -10
  16. package/dist/esm/components/popover/styles/keyframes.css +1 -421
  17. package/dist/esm/components/popover/styles/popover-arrow.css +1 -42
  18. package/dist/esm/components/popover/styles/popover.css +1 -189
  19. package/dist/esm/components/skeleton/skeleton.css +1 -13
  20. package/dist/esm/components/text/text.css +1 -14
  21. package/dist/esm/components/tooltip/tooltip.css +1 -54
  22. package/package.json +4 -5
  23. package/dist/cjs/src/components/image/image.css +0 -38
  24. package/dist/cjs/src/components/input/stories/styles.css +0 -11
  25. package/dist/cjs/src/components/popover/stories/demos/animationsDemo.css +0 -97
  26. package/dist/cjs/src/components/popover/styles/index.css +0 -10
  27. package/dist/cjs/src/components/popover/styles/keyframes.css +0 -421
  28. package/dist/cjs/src/components/popover/styles/popover-arrow.css +0 -42
  29. package/dist/cjs/src/components/popover/styles/popover.css +0 -189
  30. package/dist/cjs/src/components/skeleton/skeleton.css +0 -13
  31. package/dist/cjs/src/components/text/text.css +0 -14
  32. package/dist/cjs/src/components/tooltip/tooltip.css +0 -54
  33. package/dist/esm/src/components/image/image.css +0 -38
  34. package/dist/esm/src/components/input/stories/styles.css +0 -11
  35. package/dist/esm/src/components/popover/stories/demos/animationsDemo.css +0 -97
  36. package/dist/esm/src/components/popover/styles/index.css +0 -10
  37. package/dist/esm/src/components/popover/styles/keyframes.css +0 -421
  38. package/dist/esm/src/components/popover/styles/popover-arrow.css +0 -42
  39. package/dist/esm/src/components/popover/styles/popover.css +0 -189
  40. package/dist/esm/src/components/skeleton/skeleton.css +0 -13
  41. package/dist/esm/src/components/text/text.css +0 -14
  42. package/dist/esm/src/components/tooltip/tooltip.css +0 -54
@@ -1,421 +1 @@
1
- /**
2
- * CSS animations for popover positioning
3
- * Each animation corresponds to a specific body position from positionStyles.ts
4
- */
5
-
6
- /* ========================================
7
- CENTER POSITION ANIMATIONS
8
- ======================================== */
9
-
10
- /* Center position - scales from center */
11
- @keyframes popover-enter-center {
12
- from {
13
- opacity: 0;
14
- transform: translate(-50%, -50%) scale(0.8);
15
- }
16
- to {
17
- opacity: 1;
18
- transform: translate(-50%, -50%) scale(1);
19
- }
20
- }
21
-
22
- @keyframes popover-exit-center {
23
- from {
24
- opacity: 1;
25
- transform: translate(-50%, -50%) scale(1);
26
- }
27
- to {
28
- opacity: 0;
29
- transform: translate(-50%, -50%) scale(0.8);
30
- }
31
- }
32
-
33
- /* ========================================
34
- TOP POSITION ANIMATIONS
35
- ======================================== */
36
-
37
- /* Top center - slides down and fades in */
38
- @keyframes popover-enter-top {
39
- from {
40
- opacity: 0;
41
- transform: translateX(-50%) translateY(-20px);
42
- }
43
- to {
44
- opacity: 1;
45
- transform: translateX(-50%) translateY(0);
46
- }
47
- }
48
-
49
- @keyframes popover-exit-top {
50
- from {
51
- opacity: 1;
52
- transform: translateX(-50%) translateY(0);
53
- }
54
- to {
55
- opacity: 0;
56
- transform: translateX(-50%) translateY(-20px);
57
- }
58
- }
59
-
60
- /* Top start (left) - slides down only (same as top) */
61
- @keyframes popover-enter-top-start {
62
- from {
63
- opacity: 0;
64
- transform: translateY(-20px);
65
- }
66
- to {
67
- opacity: 1;
68
- transform: translateY(0);
69
- }
70
- }
71
-
72
- @keyframes popover-exit-top-start {
73
- from {
74
- opacity: 1;
75
- transform: translateY(0);
76
- }
77
- to {
78
- opacity: 0;
79
- transform: translateY(-20px);
80
- }
81
- }
82
-
83
- /* Top end (right) - slides down only (same as top) */
84
- @keyframes popover-enter-top-end {
85
- from {
86
- opacity: 0;
87
- transform: translateY(-20px);
88
- }
89
- to {
90
- opacity: 1;
91
- transform: translateY(0);
92
- }
93
- }
94
-
95
- @keyframes popover-exit-top-end {
96
- from {
97
- opacity: 1;
98
- transform: translateY(0);
99
- }
100
- to {
101
- opacity: 0;
102
- transform: translateY(-20px);
103
- }
104
- }
105
-
106
- /* ========================================
107
- BOTTOM POSITION ANIMATIONS
108
- ======================================== */
109
-
110
- /* Bottom center - slides up and fades in */
111
- @keyframes popover-enter-bottom {
112
- from {
113
- opacity: 0;
114
- transform: translateX(-50%) translateY(20px);
115
- }
116
- to {
117
- opacity: 1;
118
- transform: translateX(-50%) translateY(0);
119
- }
120
- }
121
-
122
- @keyframes popover-exit-bottom {
123
- from {
124
- opacity: 1;
125
- transform: translateX(-50%) translateY(0);
126
- }
127
- to {
128
- opacity: 0;
129
- transform: translateX(-50%) translateY(20px);
130
- }
131
- }
132
-
133
- /* Bottom start (left) - slides up only (same as bottom) */
134
- @keyframes popover-enter-bottom-start {
135
- from {
136
- opacity: 0;
137
- transform: translateY(20px);
138
- }
139
- to {
140
- opacity: 1;
141
- transform: translateY(0);
142
- }
143
- }
144
-
145
- @keyframes popover-exit-bottom-start {
146
- from {
147
- opacity: 1;
148
- transform: translateY(0);
149
- }
150
- to {
151
- opacity: 0;
152
- transform: translateY(20px);
153
- }
154
- }
155
-
156
- /* Bottom end (right) - slides up only (same as bottom) */
157
- @keyframes popover-enter-bottom-end {
158
- from {
159
- opacity: 0;
160
- transform: translateY(20px);
161
- }
162
- to {
163
- opacity: 1;
164
- transform: translateY(0);
165
- }
166
- }
167
-
168
- @keyframes popover-exit-bottom-end {
169
- from {
170
- opacity: 1;
171
- transform: translateY(0);
172
- }
173
- to {
174
- opacity: 0;
175
- transform: translateY(20px);
176
- }
177
- }
178
-
179
- /* ========================================
180
- LEFT POSITION ANIMATIONS
181
- ======================================== */
182
-
183
- /* Left center - slides right and fades in */
184
- @keyframes popover-enter-left {
185
- from {
186
- opacity: 0;
187
- transform: translateY(-50%) translateX(-20px);
188
- }
189
- to {
190
- opacity: 1;
191
- transform: translateY(-50%) translateX(0);
192
- }
193
- }
194
-
195
- @keyframes popover-exit-left {
196
- from {
197
- opacity: 1;
198
- transform: translateY(-50%) translateX(0);
199
- }
200
- to {
201
- opacity: 0;
202
- transform: translateY(-50%) translateX(-20px);
203
- }
204
- }
205
-
206
- /* Left start (top) - slides right only (same as left) */
207
- @keyframes popover-enter-left-start {
208
- from {
209
- opacity: 0;
210
- transform: translateX(-20px);
211
- }
212
- to {
213
- opacity: 1;
214
- transform: translateX(0);
215
- }
216
- }
217
-
218
- @keyframes popover-exit-left-start {
219
- from {
220
- opacity: 1;
221
- transform: translateX(0);
222
- }
223
- to {
224
- opacity: 0;
225
- transform: translateX(-20px);
226
- }
227
- }
228
-
229
- /* Left end (bottom) - slides right only (same as left) */
230
- @keyframes popover-enter-left-end {
231
- from {
232
- opacity: 0;
233
- transform: translateX(-20px);
234
- }
235
- to {
236
- opacity: 1;
237
- transform: translateX(0);
238
- }
239
- }
240
-
241
- @keyframes popover-exit-left-end {
242
- from {
243
- opacity: 1;
244
- transform: translateX(0);
245
- }
246
- to {
247
- opacity: 0;
248
- transform: translateX(-20px);
249
- }
250
- }
251
-
252
- /* ========================================
253
- RIGHT POSITION ANIMATIONS
254
- ======================================== */
255
-
256
- /* Right center - slides left and fades in */
257
- @keyframes popover-enter-right {
258
- from {
259
- opacity: 0;
260
- transform: translateY(-50%) translateX(20px);
261
- }
262
- to {
263
- opacity: 1;
264
- transform: translateY(-50%) translateX(0);
265
- }
266
- }
267
-
268
- @keyframes popover-exit-right {
269
- from {
270
- opacity: 1;
271
- transform: translateY(-50%) translateX(0);
272
- }
273
- to {
274
- opacity: 0;
275
- transform: translateY(-50%) translateX(20px);
276
- }
277
- }
278
-
279
- /* Right start (top) - slides left only (same as right) */
280
- @keyframes popover-enter-right-start {
281
- from {
282
- opacity: 0;
283
- transform: translateX(20px);
284
- }
285
- to {
286
- opacity: 1;
287
- transform: translateX(0);
288
- }
289
- }
290
-
291
- @keyframes popover-exit-right-start {
292
- from {
293
- opacity: 1;
294
- transform: translateX(0);
295
- }
296
- to {
297
- opacity: 0;
298
- transform: translateX(20px);
299
- }
300
- }
301
-
302
- /* Right end (bottom) - slides left only (same as right) */
303
- @keyframes popover-enter-right-end {
304
- from {
305
- opacity: 0;
306
- transform: translateX(20px);
307
- }
308
- to {
309
- opacity: 1;
310
- transform: translateX(0);
311
- }
312
- }
313
-
314
- @keyframes popover-exit-right-end {
315
- from {
316
- opacity: 1;
317
- transform: translateX(0);
318
- }
319
- to {
320
- opacity: 0;
321
- transform: translateX(20px);
322
- }
323
- }
324
-
325
- /* ========================================
326
- NOTE: No default animation needed
327
- ======================================== */
328
- /* When no placement is specified, center animation is used as fallback */
329
-
330
- /* ========================================
331
- UTILITY CLASSES FOR APPLYING ANIMATIONS
332
- ======================================== */
333
-
334
- /* Animation duration and timing */
335
- .popover-animate {
336
- animation-duration: 200ms;
337
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
338
- animation-fill-mode: forwards;
339
- }
340
-
341
- /* Enter animations by position */
342
- .popover-enter-center {
343
- animation-name: popover-enter-center;
344
- }
345
- .popover-enter-top {
346
- animation-name: popover-enter-top;
347
- }
348
- .popover-enter-top-start {
349
- animation-name: popover-enter-top-start;
350
- }
351
- .popover-enter-top-end {
352
- animation-name: popover-enter-top-end;
353
- }
354
- .popover-enter-bottom {
355
- animation-name: popover-enter-bottom;
356
- }
357
- .popover-enter-bottom-start {
358
- animation-name: popover-enter-bottom-start;
359
- }
360
- .popover-enter-bottom-end {
361
- animation-name: popover-enter-bottom-end;
362
- }
363
- .popover-enter-left {
364
- animation-name: popover-enter-left;
365
- }
366
- .popover-enter-left-start {
367
- animation-name: popover-enter-left-start;
368
- }
369
- .popover-enter-left-end {
370
- animation-name: popover-enter-left-end;
371
- }
372
- .popover-enter-right {
373
- animation-name: popover-enter-right;
374
- }
375
- .popover-enter-right-start {
376
- animation-name: popover-enter-right-start;
377
- }
378
- .popover-enter-right-end {
379
- animation-name: popover-enter-right-end;
380
- }
381
-
382
- /* Exit animations by position */
383
- .popover-exit-center {
384
- animation-name: popover-exit-center;
385
- }
386
- .popover-exit-top {
387
- animation-name: popover-exit-top;
388
- }
389
- .popover-exit-top-start {
390
- animation-name: popover-exit-top-start;
391
- }
392
- .popover-exit-top-end {
393
- animation-name: popover-exit-top-end;
394
- }
395
- .popover-exit-bottom {
396
- animation-name: popover-exit-bottom;
397
- }
398
- .popover-exit-bottom-start {
399
- animation-name: popover-exit-bottom-start;
400
- }
401
- .popover-exit-bottom-end {
402
- animation-name: popover-exit-bottom-end;
403
- }
404
- .popover-exit-left {
405
- animation-name: popover-exit-left;
406
- }
407
- .popover-exit-left-start {
408
- animation-name: popover-exit-left-start;
409
- }
410
- .popover-exit-left-end {
411
- animation-name: popover-exit-left-end;
412
- }
413
- .popover-exit-right {
414
- animation-name: popover-exit-right;
415
- }
416
- .popover-exit-right-start {
417
- animation-name: popover-exit-right-start;
418
- }
419
- .popover-exit-right-end {
420
- animation-name: popover-exit-right-end;
421
- }
1
+ @keyframes popover-enter-center{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes popover-exit-center{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.8)}}@keyframes popover-enter-top{0%{opacity:0;transform:translate(-50%)translateY(-20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes popover-exit-top{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-20px)}}@keyframes popover-enter-top-start{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-top-end{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-bottom{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes popover-exit-bottom{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(20px)}}@keyframes popover-enter-bottom-start{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-bottom-end{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-left{0%{opacity:0;transform:translateY(-50%)translate(-20px)}to{opacity:1;transform:translateY(-50%)translate(0)}}@keyframes popover-exit-left{0%{opacity:1;transform:translateY(-50%)translate(0)}to{opacity:0;transform:translateY(-50%)translate(-20px)}}@keyframes popover-enter-left-start{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-left-start{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes popover-enter-left-end{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-left-end{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes popover-enter-right{0%{opacity:0;transform:translateY(-50%)translate(20px)}to{opacity:1;transform:translateY(-50%)translate(0)}}@keyframes popover-exit-right{0%{opacity:1;transform:translateY(-50%)translate(0)}to{opacity:0;transform:translateY(-50%)translate(20px)}}@keyframes popover-enter-right-start{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-right-start{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}@keyframes popover-enter-right-end{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-right-end{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.popover-animate{animation-duration:.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards}.popover-enter-center{animation-name:popover-enter-center}.popover-enter-top{animation-name:popover-enter-top}.popover-enter-top-start{animation-name:popover-enter-top-start}.popover-enter-top-end{animation-name:popover-enter-top-end}.popover-enter-bottom{animation-name:popover-enter-bottom}.popover-enter-bottom-start{animation-name:popover-enter-bottom-start}.popover-enter-bottom-end{animation-name:popover-enter-bottom-end}.popover-enter-left{animation-name:popover-enter-left}.popover-enter-left-start{animation-name:popover-enter-left-start}.popover-enter-left-end{animation-name:popover-enter-left-end}.popover-enter-right{animation-name:popover-enter-right}.popover-enter-right-start{animation-name:popover-enter-right-start}.popover-enter-right-end{animation-name:popover-enter-right-end}.popover-exit-center{animation-name:popover-exit-center}.popover-exit-top{animation-name:popover-exit-top}.popover-exit-top-start{animation-name:popover-exit-top-start}.popover-exit-top-end{animation-name:popover-exit-top-end}.popover-exit-bottom{animation-name:popover-exit-bottom}.popover-exit-bottom-start{animation-name:popover-exit-bottom-start}.popover-exit-bottom-end{animation-name:popover-exit-bottom-end}.popover-exit-left{animation-name:popover-exit-left}.popover-exit-left-start{animation-name:popover-exit-left-start}.popover-exit-left-end{animation-name:popover-exit-left-end}.popover-exit-right{animation-name:popover-exit-right}.popover-exit-right-start{animation-name:popover-exit-right-start}.popover-exit-right-end{animation-name:popover-exit-right-end}
@@ -1,42 +1 @@
1
- /* ============================================= */
2
- /* Popover Arrow Styles */
3
- /* ============================================= */
4
-
5
- /* Arrow base styles */
6
- [data-kbt-id='popover-arrow'] {
7
- position: absolute;
8
- transform: rotate(45deg);
9
- z-index: -1;
10
- }
11
-
12
- /* Arrow positioning based on placement */
13
- [data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
14
- bottom: calc(-1 * var(--arrow-size, 8px) / 2);
15
- left: 50%;
16
- transform: translateX(-50%) rotate(45deg);
17
- }
18
-
19
- [data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
20
- top: calc(-1 * var(--arrow-size, 8px) / 2);
21
- left: 50%;
22
- transform: translateX(-50%) rotate(45deg);
23
- }
24
-
25
- [data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
26
- right: calc(-1 * var(--arrow-size, 8px) / 2);
27
- top: 50%;
28
- transform: translateY(-50%) rotate(45deg);
29
- }
30
-
31
- [data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
32
- left: calc(-1 * var(--arrow-size, 8px) / 2);
33
- top: 50%;
34
- transform: translateY(-50%) rotate(45deg);
35
- }
36
-
37
- /* Center placement arrow - default to bottom position */
38
- [data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
39
- top: calc(-1 * var(--arrow-size, 8px) / 2);
40
- left: 50%;
41
- transform: translateX(-50%) rotate(45deg);
42
- }
1
+ [data-kbt-id=popover-arrow]{z-index:-1;position:absolute;transform:rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=top]{bottom:calc(-1*var(--arrow-size,8px)/2);left:50%;transform:translate(-50%)rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=bottom]{top:calc(-1*var(--arrow-size,8px)/2);left:50%;transform:translate(-50%)rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=left]{right:calc(-1*var(--arrow-size,8px)/2);top:50%;transform:translateY(-50%)rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=right]{left:calc(-1*var(--arrow-size,8px)/2);top:50%;transform:translateY(-50%)rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement=center]{top:calc(-1*var(--arrow-size,8px)/2);left:50%;transform:translate(-50%)rotate(45deg)}
@@ -1,189 +1 @@
1
- /**
2
- * Popover Main Styles
3
- * Contains animation logic and positioning styles
4
- */
5
-
6
- /* Import all animation keyframes */
7
- @import './keyframes.css';
8
-
9
- /* Popover Animation Styles */
10
- /* ============================================= */
11
-
12
- /* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
13
- /* This allows additionalClasses to work properly */
14
- [data-kbt-id='popover'][data-kbt-placement] {
15
- animation-duration: 500ms;
16
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
17
- animation-fill-mode: forwards;
18
- animation-iteration-count: 1;
19
- }
20
-
21
- /* Opening animations based on placement - ONLY when animations are enabled */
22
- [data-kbt-id='popover'][data-kbt-closing='false']:not(
23
- [data-kbt-disable-animations='true']
24
- ) {
25
- --animation-prefix: 'popover-enter-';
26
- }
27
-
28
- [data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='false']:not(
29
- [data-kbt-disable-animations='true']
30
- ) {
31
- animation-name: popover-enter-center;
32
- }
33
-
34
- [data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='false']:not(
35
- [data-kbt-disable-animations='true']
36
- ) {
37
- animation-name: var(--animation-name, popover-enter-top);
38
- }
39
-
40
- [data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='false']:not(
41
- [data-kbt-disable-animations='true']
42
- ) {
43
- animation-name: popover-enter-top-start;
44
- }
45
-
46
- [data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='false']:not(
47
- [data-kbt-disable-animations='true']
48
- ) {
49
- animation-name: popover-enter-top-end;
50
- }
51
-
52
- [data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='false']:not(
53
- [data-kbt-disable-animations='true']
54
- ) {
55
- animation-name: var(--animation-name, popover-enter-bottom);
56
- }
57
-
58
- [data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='false']:not(
59
- [data-kbt-disable-animations='true']
60
- ) {
61
- animation-name: popover-enter-bottom-start;
62
- }
63
-
64
- [data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='false']:not(
65
- [data-kbt-disable-animations='true']
66
- ) {
67
- animation-name: popover-enter-bottom-end;
68
- }
69
-
70
- [data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='false']:not(
71
- [data-kbt-disable-animations='true']
72
- ) {
73
- animation-name: var(--animation-name, popover-enter-left);
74
- }
75
-
76
- [data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='false']:not(
77
- [data-kbt-disable-animations='true']
78
- ) {
79
- animation-name: popover-enter-left-start;
80
- }
81
-
82
- [data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='false']:not(
83
- [data-kbt-disable-animations='true']
84
- ) {
85
- animation-name: popover-enter-left-end;
86
- }
87
-
88
- [data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='false']:not(
89
- [data-kbt-disable-animations='true']
90
- ) {
91
- animation-name: var(--animation-name, popover-enter-right);
92
- }
93
-
94
- [data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='false']:not(
95
- [data-kbt-disable-animations='true']
96
- ) {
97
- animation-name: popover-enter-right-start;
98
- }
99
-
100
- [data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='false']:not(
101
- [data-kbt-disable-animations='true']
102
- ) {
103
- animation-name: popover-enter-right-end;
104
- }
105
-
106
- /* Closing animations based on placement - ONLY when animations are enabled */
107
- [data-kbt-id='popover'][data-kbt-closing='true']:not(
108
- [data-kbt-disable-animations='true']
109
- ) {
110
- --animation-prefix: 'popover-exit-';
111
- }
112
-
113
- [data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='true']:not(
114
- [data-kbt-disable-animations='true']
115
- ) {
116
- animation-name: popover-exit-center;
117
- }
118
-
119
- [data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='true']:not(
120
- [data-kbt-disable-animations='true']
121
- ) {
122
- animation-name: var(--exit-animation-name, popover-exit-top);
123
- }
124
-
125
- [data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='true']:not(
126
- [data-kbt-disable-animations='true']
127
- ) {
128
- animation-name: popover-exit-top-start;
129
- }
130
-
131
- [data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='true']:not(
132
- [data-kbt-disable-animations='true']
133
- ) {
134
- animation-name: popover-exit-top-end;
135
- }
136
-
137
- [data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='true']:not(
138
- [data-kbt-disable-animations='true']
139
- ) {
140
- animation-name: var(--exit-animation-name, popover-exit-bottom);
141
- }
142
-
143
- [data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='true']:not(
144
- [data-kbt-disable-animations='true']
145
- ) {
146
- animation-name: popover-exit-bottom-start;
147
- }
148
-
149
- [data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='true']:not(
150
- [data-kbt-disable-animations='true']
151
- ) {
152
- animation-name: popover-exit-bottom-end;
153
- }
154
-
155
- [data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='true']:not(
156
- [data-kbt-disable-animations='true']
157
- ) {
158
- animation-name: var(--exit-animation-name, popover-exit-left);
159
- }
160
-
161
- [data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='true']:not(
162
- [data-kbt-disable-animations='true']
163
- ) {
164
- animation-name: popover-exit-left-start;
165
- }
166
-
167
- [data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='true']:not(
168
- [data-kbt-disable-animations='true']
169
- ) {
170
- animation-name: popover-exit-left-end;
171
- }
172
-
173
- [data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='true']:not(
174
- [data-kbt-disable-animations='true']
175
- ) {
176
- animation-name: var(--exit-animation-name, popover-exit-right);
177
- }
178
-
179
- [data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='true']:not(
180
- [data-kbt-disable-animations='true']
181
- ) {
182
- animation-name: popover-exit-right-start;
183
- }
184
-
185
- [data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='true']:not(
186
- [data-kbt-disable-animations='true']
187
- ) {
188
- animation-name: popover-exit-right-end;
189
- }
1
+ @import "./keyframes.css";[data-kbt-id=popover][data-kbt-placement]{animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-iteration-count:1;animation-fill-mode:forwards}[data-kbt-id=popover][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-enter-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-end}[data-kbt-id=popover][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-exit-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-end}
@@ -1,13 +1 @@
1
- @keyframes breatheAnimation {
2
- from {
3
- background-position-x: 0%;
4
- }
5
-
6
- to {
7
- background-position-x: -200%;
8
- }
9
- }
10
-
11
- .kbt-skeleton {
12
- animation-name: breatheAnimation;
13
- }
1
+ @keyframes breatheAnimation{0%{background-position-x:0%}to{background-position-x:-200%}}.kbt-skeleton{animation-name:breatheAnimation}
@@ -1,14 +1 @@
1
- .kbt-text {
2
- -webkit-text-size-adjust: 100%;
3
- text-size-adjust: 100%;
4
- }
5
-
6
- .kbt-text--disabled {
7
- pointer-events: none;
8
- }
9
-
10
- .kbt-text--truncate {
11
- white-space: nowrap;
12
- overflow: hidden;
13
- text-overflow: ellipsis;
14
- }
1
+ .kbt-text{text-size-adjust:100%}.kbt-text--disabled{pointer-events:none}.kbt-text--truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}