mediacube-ui 0.1.85 → 0.1.87
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
CHANGED
|
@@ -170,12 +170,10 @@ export default {
|
|
|
170
170
|
&__text {
|
|
171
171
|
padding-bottom: 1px; // fix overflow
|
|
172
172
|
margin-bottom: -1px; // fix overflow
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
margin-left: $space-50;
|
|
178
|
-
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
> *:not(:empty):not(:last-child) {
|
|
176
|
+
margin-right: $space-50;
|
|
179
177
|
}
|
|
180
178
|
|
|
181
179
|
.mc-svg-icon,
|
|
@@ -439,16 +437,11 @@ export default {
|
|
|
439
437
|
}
|
|
440
438
|
html[direction='rtl'] {
|
|
441
439
|
.mc-title {
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
margin-right: $space-50;
|
|
446
|
-
}
|
|
447
|
-
*:not(:empty) + & {
|
|
448
|
-
margin-left: unset;
|
|
449
|
-
margin-right: $space-50;
|
|
450
|
-
}
|
|
440
|
+
> *:not(:empty):not(:last-child) {
|
|
441
|
+
margin-right: unset;
|
|
442
|
+
margin-left: $space-50;
|
|
451
443
|
}
|
|
444
|
+
|
|
452
445
|
&--text-align {
|
|
453
446
|
&-left {
|
|
454
447
|
text-align: right;
|
package/src/styles/_mixins.scss
CHANGED
|
@@ -398,3 +398,61 @@
|
|
|
398
398
|
}
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
+
|
|
402
|
+
@mixin animation-border-spinner($duration: 2s, $border-color: $color-purple, $border-size: $space-100) {
|
|
403
|
+
background-repeat: no-repeat;
|
|
404
|
+
background-image: linear-gradient(to right, $border-color 100%, $border-color 100%),
|
|
405
|
+
linear-gradient(to bottom, $border-color 100%, $border-color 100%),
|
|
406
|
+
linear-gradient(to right, $border-color 100%, $border-color 100%),
|
|
407
|
+
linear-gradient(to bottom, $border-color 100%, $border-color 100%);
|
|
408
|
+
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
409
|
+
background-size: 100% $border-size, $border-size 100%, 100% $border-size, $border-size 100%;
|
|
410
|
+
animation: spin-border $duration linear;
|
|
411
|
+
|
|
412
|
+
@keyframes spin-border {
|
|
413
|
+
0% {
|
|
414
|
+
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
415
|
+
background-size: 0 $border-size, $border-size 0, 0 $border-size, $border-size 0;
|
|
416
|
+
}
|
|
417
|
+
10% {
|
|
418
|
+
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
419
|
+
background-size: 0 $border-size, $border-size 25%, 0 $border-size, $border-size 0;
|
|
420
|
+
}
|
|
421
|
+
20% {
|
|
422
|
+
background-position: 0 0, 100% 100%, 100% 100%, 0 100%;
|
|
423
|
+
background-size: 0 $border-size, $border-size 50%, 0 $border-size, $border-size 0;
|
|
424
|
+
}
|
|
425
|
+
30% {
|
|
426
|
+
background-position: 0 0, 100% 100%, 100% 100%, 0 100%;
|
|
427
|
+
background-size: 0 $border-size, $border-size 0, 100% $border-size, $border-size 0;
|
|
428
|
+
}
|
|
429
|
+
40% {
|
|
430
|
+
background-position: 0 0, 100% 0, 0 100%, 0 100%;
|
|
431
|
+
background-size: 0 $border-size, $border-size 0, 100% $border-size, $border-size 100%;
|
|
432
|
+
}
|
|
433
|
+
50% {
|
|
434
|
+
background-position: 0 0, 100% 0, 0 100%, 0 100%;
|
|
435
|
+
background-size: 50% $border-size, $border-size 0, 75% $border-size, $border-size 100%;
|
|
436
|
+
}
|
|
437
|
+
60% {
|
|
438
|
+
background-position: 0 0, 100% 0, 0 100%, 0 100%;
|
|
439
|
+
background-size: 100% $border-size, $border-size 0, 50% $border-size, $border-size 100%;
|
|
440
|
+
}
|
|
441
|
+
70% {
|
|
442
|
+
background-position: 0 0, 100% 0, 0 100%, 0 100%;
|
|
443
|
+
background-size: 100% $border-size, $border-size 33%, 25% $border-size, $border-size 100%;
|
|
444
|
+
}
|
|
445
|
+
80% {
|
|
446
|
+
background-position: 0 0, 100% 0, 0 100%, 0 100%;
|
|
447
|
+
background-size: 100% $border-size, $border-size 66%, 0 $border-size, $border-size 100%;
|
|
448
|
+
}
|
|
449
|
+
90% {
|
|
450
|
+
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
451
|
+
background-size: 100% $border-size, $border-size 100%, 0 $border-size, $border-size 100%;
|
|
452
|
+
}
|
|
453
|
+
100% {
|
|
454
|
+
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
|
455
|
+
background-size: 100% $border-size, $border-size 100%, 100% $border-size, $border-size 100%;
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
}
|