@progress/kendo-theme-core 14.3.0 → 14.4.0-dev.1
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/package.json +1 -1
- package/scss/components/loader/_layout.scss +123 -172
package/package.json
CHANGED
|
@@ -4,6 +4,58 @@
|
|
|
4
4
|
@use "../../z-index/index.scss" as *;
|
|
5
5
|
@use "../../functions/index.scss" as *;
|
|
6
6
|
|
|
7
|
+
// Generates 3 transform-only keyframes for spinner-3 at a given size.
|
|
8
|
+
// $w/$h = effective canvas dimensions (spinner size minus segment size).
|
|
9
|
+
@mixin spinner-3-keyframes($suffix, $w, $h) {
|
|
10
|
+
@keyframes spinner-3-#{$suffix}-1 {
|
|
11
|
+
0% { transform: translate( -50%, -50% ); }
|
|
12
|
+
33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% + #{$h} ) ); }
|
|
13
|
+
66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% + #{$h} ) ); }
|
|
14
|
+
100% { transform: translate( -50%, -50% ); }
|
|
15
|
+
}
|
|
16
|
+
@keyframes spinner-3-#{$suffix}-2 {
|
|
17
|
+
0% { transform: translate( -50%, -50% ); }
|
|
18
|
+
33.3333% { transform: translate( calc( -50% + #{$w} ), -50% ); }
|
|
19
|
+
66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% - #{$h} ) ); }
|
|
20
|
+
100% { transform: translate( -50%, -50% ); }
|
|
21
|
+
}
|
|
22
|
+
@keyframes spinner-3-#{$suffix}-3 {
|
|
23
|
+
0% { transform: translate( -50%, -50% ); }
|
|
24
|
+
33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% - #{$h} ) ); }
|
|
25
|
+
66.6666% { transform: translate( calc( -50% - #{$w} ), -50% ); }
|
|
26
|
+
100% { transform: translate( -50%, -50% ); }
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Generates 4 transform-only keyframes for spinner-4 at a given size.
|
|
31
|
+
// $hw/$hh = half canvas width/height (distance from corner to center).
|
|
32
|
+
@mixin spinner-4-keyframes($suffix, $hw, $hh) {
|
|
33
|
+
@keyframes spinner-4-#{$suffix}-1 {
|
|
34
|
+
0% { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
|
|
35
|
+
33.3% { transform: translate( -50%, -50% ); }
|
|
36
|
+
66.6% { transform: translate( -50%, -50% ); }
|
|
37
|
+
100% { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
|
|
38
|
+
}
|
|
39
|
+
@keyframes spinner-4-#{$suffix}-2 {
|
|
40
|
+
0% { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
|
|
41
|
+
33.3% { transform: translate( -50%, -50% ); }
|
|
42
|
+
66.6% { transform: translate( -50%, -50% ); }
|
|
43
|
+
100% { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
|
|
44
|
+
}
|
|
45
|
+
@keyframes spinner-4-#{$suffix}-3 {
|
|
46
|
+
0% { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
|
|
47
|
+
33.3% { transform: translate( -50%, -50% ); }
|
|
48
|
+
66.6% { transform: translate( -50%, -50% ); }
|
|
49
|
+
100% { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
|
|
50
|
+
}
|
|
51
|
+
@keyframes spinner-4-#{$suffix}-4 {
|
|
52
|
+
0% { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
|
|
53
|
+
33.3% { transform: translate( -50%, -50% ); }
|
|
54
|
+
66.6% { transform: translate( -50%, -50% ); }
|
|
55
|
+
100% { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
7
59
|
@mixin kendo-loader--layout-base() {
|
|
8
60
|
|
|
9
61
|
.k-loader {
|
|
@@ -58,6 +110,7 @@
|
|
|
58
110
|
position: absolute;
|
|
59
111
|
}
|
|
60
112
|
|
|
113
|
+
|
|
61
114
|
// Loader pulsing 2
|
|
62
115
|
@keyframes pulsing-2-segment {
|
|
63
116
|
0% { transform: scale(1); }
|
|
@@ -65,8 +118,6 @@
|
|
|
65
118
|
100% { transform: scale(1); }
|
|
66
119
|
}
|
|
67
120
|
|
|
68
|
-
|
|
69
|
-
// Component
|
|
70
121
|
.k-loader-pulsing-2 {
|
|
71
122
|
|
|
72
123
|
.k-loader-canvas {
|
|
@@ -112,62 +163,44 @@
|
|
|
112
163
|
}
|
|
113
164
|
|
|
114
165
|
|
|
115
|
-
|
|
116
|
-
|
|
117
166
|
// Loader spinner 3
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
167
|
+
// Transform-only keyframes — one set per size, generated by mixin above.
|
|
168
|
+
@include spinner-3-keyframes(
|
|
169
|
+
"sm",
|
|
170
|
+
calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} ),
|
|
171
|
+
calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} )
|
|
172
|
+
);
|
|
173
|
+
@include spinner-3-keyframes(
|
|
174
|
+
"md",
|
|
175
|
+
calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} ),
|
|
176
|
+
calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} )
|
|
177
|
+
);
|
|
178
|
+
@include spinner-3-keyframes(
|
|
179
|
+
"lg",
|
|
180
|
+
calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} ),
|
|
181
|
+
calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} )
|
|
182
|
+
);
|
|
128
183
|
|
|
129
|
-
66.6666% {
|
|
130
|
-
inset-block-start: 100%;
|
|
131
|
-
inset-inline-start: 100%;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
100% {
|
|
135
|
-
inset-block-start: 0;
|
|
136
|
-
inset-inline-start: 50%;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
// Component
|
|
142
184
|
.k-loader-spinner-3 {
|
|
143
185
|
|
|
144
|
-
//
|
|
145
|
-
//
|
|
146
|
-
// * offset dots by artifically reduce dimentions by 1 dot size
|
|
147
|
-
// * compensate by setting margin on all sides half a dot size
|
|
148
|
-
|
|
186
|
+
// The dot center sits on the exact corner point.
|
|
187
|
+
// Canvas is reduced by 1 dot size and offset by half a dot via margin.
|
|
149
188
|
.k-loader-segment {
|
|
150
189
|
transform: translate( -50%, -50% );
|
|
151
190
|
}
|
|
152
191
|
.k-loader-segment:nth-child(1) {
|
|
153
192
|
top: 0;
|
|
154
193
|
left: 50%;
|
|
155
|
-
animation: spinner-3-segment 2s ease infinite;
|
|
156
194
|
}
|
|
157
195
|
.k-loader-segment:nth-child(2) {
|
|
158
196
|
top: 100%;
|
|
159
197
|
left: 0;
|
|
160
|
-
animation: spinner-3-segment 2s ease infinite;
|
|
161
|
-
animation-delay: calc( -2s / 3 );
|
|
162
198
|
}
|
|
163
199
|
.k-loader-segment:nth-child(3) {
|
|
164
200
|
top: 100%;
|
|
165
201
|
left: 100%;
|
|
166
|
-
animation: spinner-3-segment 2s ease infinite;
|
|
167
|
-
animation-delay: calc( -4s / 3 );
|
|
168
202
|
}
|
|
169
203
|
|
|
170
|
-
|
|
171
204
|
#{k-when-default($kendo-loader-default-size, "sm")}
|
|
172
205
|
&.k-loader-sm {
|
|
173
206
|
.k-loader-canvas {
|
|
@@ -175,15 +208,21 @@
|
|
|
175
208
|
width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} );
|
|
176
209
|
height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} );
|
|
177
210
|
}
|
|
211
|
+
.k-loader-segment:nth-child(1) { animation: spinner-3-sm-1 2s ease infinite; }
|
|
212
|
+
.k-loader-segment:nth-child(2) { animation: spinner-3-sm-2 2s ease infinite; }
|
|
213
|
+
.k-loader-segment:nth-child(3) { animation: spinner-3-sm-3 2s ease infinite; }
|
|
178
214
|
}
|
|
179
215
|
|
|
180
216
|
#{k-when-default($kendo-loader-default-size, "md")}
|
|
181
217
|
&.k-loader-md {
|
|
182
218
|
.k-loader-canvas {
|
|
183
|
-
margin: calc( #{
|
|
219
|
+
margin: calc( #{$kendo-loader-md-segment-size} / 2 );
|
|
184
220
|
width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} );
|
|
185
221
|
height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} );
|
|
186
222
|
}
|
|
223
|
+
.k-loader-segment:nth-child(1) { animation: spinner-3-md-1 2s ease infinite; }
|
|
224
|
+
.k-loader-segment:nth-child(2) { animation: spinner-3-md-2 2s ease infinite; }
|
|
225
|
+
.k-loader-segment:nth-child(3) { animation: spinner-3-md-3 2s ease infinite; }
|
|
187
226
|
}
|
|
188
227
|
|
|
189
228
|
#{k-when-default($kendo-loader-default-size, "lg")}
|
|
@@ -193,156 +232,58 @@
|
|
|
193
232
|
width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} );
|
|
194
233
|
height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} );
|
|
195
234
|
}
|
|
235
|
+
.k-loader-segment:nth-child(1) { animation: spinner-3-lg-1 2s ease infinite; }
|
|
236
|
+
.k-loader-segment:nth-child(2) { animation: spinner-3-lg-2 2s ease infinite; }
|
|
237
|
+
.k-loader-segment:nth-child(3) { animation: spinner-3-lg-3 2s ease infinite; }
|
|
196
238
|
}
|
|
197
239
|
}
|
|
198
240
|
|
|
199
241
|
|
|
200
|
-
|
|
201
|
-
|
|
202
242
|
// Loader spinner 4
|
|
203
|
-
@keyframes spinner-4
|
|
204
|
-
0%
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
243
|
+
@keyframes spinner-4 {
|
|
244
|
+
0% { transform: rotate(0); }
|
|
245
|
+
33.3% { transform: rotate(0); }
|
|
246
|
+
66.6% { transform: rotate(180deg); }
|
|
247
|
+
100% { transform: rotate(180deg); }
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
@include spinner-4-keyframes(
|
|
251
|
+
"sm",
|
|
252
|
+
calc( #{$kendo-loader-sm-spinner-4-width} / 2 ),
|
|
253
|
+
calc( #{$kendo-loader-sm-spinner-4-height} / 2 )
|
|
254
|
+
);
|
|
255
|
+
@include spinner-4-keyframes(
|
|
256
|
+
"md",
|
|
257
|
+
calc( #{$kendo-loader-md-spinner-4-width} / 2 ),
|
|
258
|
+
calc( #{$kendo-loader-md-spinner-4-height} / 2 )
|
|
259
|
+
);
|
|
260
|
+
@include spinner-4-keyframes(
|
|
261
|
+
"lg",
|
|
262
|
+
calc( #{$kendo-loader-lg-spinner-4-width} / 2 ),
|
|
263
|
+
calc( #{$kendo-loader-lg-spinner-4-height} / 2 )
|
|
264
|
+
);
|
|
209
265
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
transform: translateX(0) translateY(0);
|
|
266
|
+
.k-loader-spinner-4 {
|
|
267
|
+
.k-loader-canvas {
|
|
268
|
+
animation: spinner-4 1.833s ease infinite;
|
|
214
269
|
}
|
|
215
270
|
|
|
216
|
-
|
|
271
|
+
.k-loader-segment { transform: translate( -50%, -50% ); }
|
|
272
|
+
.k-loader-segment:nth-child(1) {
|
|
217
273
|
top: 0;
|
|
218
274
|
left: 0;
|
|
219
|
-
transform: translateX(0) translateY(0);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
100% {
|
|
223
|
-
top: 50%;
|
|
224
|
-
left: 50%;
|
|
225
|
-
transform: translateX(-50%) translateY(-50%);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
@keyframes spinner-4-segment-2 {
|
|
229
|
-
0% {
|
|
230
|
-
top: 50%;
|
|
231
|
-
left: 50%;
|
|
232
|
-
transform: translateX(-50%) translateY(-50%);
|
|
233
275
|
}
|
|
234
|
-
|
|
235
|
-
33.3% {
|
|
236
|
-
top: 0;
|
|
237
|
-
left: 100%;
|
|
238
|
-
transform: translateX(-100%) translateY(0);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
66.6% {
|
|
276
|
+
.k-loader-segment:nth-child(2) {
|
|
242
277
|
top: 0;
|
|
243
278
|
left: 100%;
|
|
244
|
-
transform: translateX(-100%) translateY(0);
|
|
245
279
|
}
|
|
246
|
-
|
|
247
|
-
100% {
|
|
248
|
-
top: 50%;
|
|
249
|
-
left: 50%;
|
|
250
|
-
transform: translateX(-50%) translateY(-50%);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
@keyframes spinner-4-segment-3 {
|
|
254
|
-
0% {
|
|
255
|
-
top: 50%;
|
|
256
|
-
left: 50%;
|
|
257
|
-
transform: translateX(-50%) translateY(-50%);
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
33.3% {
|
|
261
|
-
top: 100%;
|
|
262
|
-
left: 100%;
|
|
263
|
-
transform: translateX(-100%) translateY(-100%);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
66.6% {
|
|
280
|
+
.k-loader-segment:nth-child(3) {
|
|
267
281
|
top: 100%;
|
|
268
282
|
left: 100%;
|
|
269
|
-
transform: translateX(-100%) translateY(-100%);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
100% {
|
|
273
|
-
top: 50%;
|
|
274
|
-
left: 50%;
|
|
275
|
-
transform: translateX(-50%) translateY(-50%);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
@keyframes spinner-4-segment-4 {
|
|
279
|
-
0% {
|
|
280
|
-
top: 50%;
|
|
281
|
-
left: 50%;
|
|
282
|
-
transform: translateX(-50%) translateY(-50%);
|
|
283
283
|
}
|
|
284
|
-
|
|
285
|
-
33.3% {
|
|
284
|
+
.k-loader-segment:nth-child(4) {
|
|
286
285
|
top: 100%;
|
|
287
286
|
left: 0;
|
|
288
|
-
transform: translateX(0) translateY(-100%);
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
66.6% {
|
|
292
|
-
top: 100%;
|
|
293
|
-
left: 0;
|
|
294
|
-
transform: translateX(0) translateY(-100%);
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
100% {
|
|
298
|
-
top: 50%;
|
|
299
|
-
left: 50%;
|
|
300
|
-
transform: translateX(-50%) translateY(-50%);
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
@keyframes spinner-4 {
|
|
304
|
-
0% {
|
|
305
|
-
transform: rotate(0);
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
33.3% {
|
|
309
|
-
transform: rotate(0);
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
66.6% {
|
|
313
|
-
transform: rotate(180deg);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
100% {
|
|
317
|
-
transform: rotate(180deg);
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
.k-loader-spinner-4 {
|
|
322
|
-
.k-loader-canvas {
|
|
323
|
-
animation: spinner-4 1.833s ease infinite;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.k-loader-segment {
|
|
327
|
-
top: 50%;
|
|
328
|
-
left: 50%;
|
|
329
|
-
transform: translateX(-50%) translateY(-50%);
|
|
330
|
-
|
|
331
|
-
&:nth-child(1) {
|
|
332
|
-
animation: spinner-4-segment-1 1.833s ease infinite;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
&:nth-child(2) {
|
|
336
|
-
animation: spinner-4-segment-2 1.833s ease infinite;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
&:nth-child(3) {
|
|
340
|
-
animation: spinner-4-segment-3 1.833s ease infinite;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
&:nth-child(4) {
|
|
344
|
-
animation: spinner-4-segment-4 1.833s ease infinite;
|
|
345
|
-
}
|
|
346
287
|
}
|
|
347
288
|
|
|
348
289
|
#{k-when-default($kendo-loader-default-size, "sm")}
|
|
@@ -351,6 +292,10 @@
|
|
|
351
292
|
width: $kendo-loader-sm-spinner-4-width;
|
|
352
293
|
height: $kendo-loader-sm-spinner-4-height;
|
|
353
294
|
}
|
|
295
|
+
.k-loader-segment:nth-child(1) { animation: spinner-4-sm-1 1.833s ease infinite; }
|
|
296
|
+
.k-loader-segment:nth-child(2) { animation: spinner-4-sm-2 1.833s ease infinite; }
|
|
297
|
+
.k-loader-segment:nth-child(3) { animation: spinner-4-sm-3 1.833s ease infinite; }
|
|
298
|
+
.k-loader-segment:nth-child(4) { animation: spinner-4-sm-4 1.833s ease infinite; }
|
|
354
299
|
}
|
|
355
300
|
|
|
356
301
|
#{k-when-default($kendo-loader-default-size, "md")}
|
|
@@ -359,6 +304,10 @@
|
|
|
359
304
|
width: $kendo-loader-md-spinner-4-width;
|
|
360
305
|
height: $kendo-loader-md-spinner-4-height;
|
|
361
306
|
}
|
|
307
|
+
.k-loader-segment:nth-child(1) { animation: spinner-4-md-1 1.833s ease infinite; }
|
|
308
|
+
.k-loader-segment:nth-child(2) { animation: spinner-4-md-2 1.833s ease infinite; }
|
|
309
|
+
.k-loader-segment:nth-child(3) { animation: spinner-4-md-3 1.833s ease infinite; }
|
|
310
|
+
.k-loader-segment:nth-child(4) { animation: spinner-4-md-4 1.833s ease infinite; }
|
|
362
311
|
}
|
|
363
312
|
|
|
364
313
|
#{k-when-default($kendo-loader-default-size, "lg")}
|
|
@@ -367,12 +316,14 @@
|
|
|
367
316
|
width: $kendo-loader-lg-spinner-4-width;
|
|
368
317
|
height: $kendo-loader-lg-spinner-4-height;
|
|
369
318
|
}
|
|
319
|
+
.k-loader-segment:nth-child(1) { animation: spinner-4-lg-1 1.833s ease infinite; }
|
|
320
|
+
.k-loader-segment:nth-child(2) { animation: spinner-4-lg-2 1.833s ease infinite; }
|
|
321
|
+
.k-loader-segment:nth-child(3) { animation: spinner-4-lg-3 1.833s ease infinite; }
|
|
322
|
+
.k-loader-segment:nth-child(4) { animation: spinner-4-lg-4 1.833s ease infinite; }
|
|
370
323
|
}
|
|
371
324
|
}
|
|
372
325
|
|
|
373
326
|
|
|
374
|
-
|
|
375
|
-
|
|
376
327
|
// Loader container
|
|
377
328
|
.k-loader-container {
|
|
378
329
|
display: flex;
|