1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vars';
|
9 | @import '../../globals/scss/css--reset';
|
10 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
11 | @import 'keyframes';
|
12 | @import 'mixins';
|
13 | @import 'vars';
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | @mixin loading {
|
19 | .#{$prefix}--loading {
|
20 | @include reset;
|
21 | @include animation__loading--spin;
|
22 |
|
23 | width: $loading__size;
|
24 | height: $loading__size;
|
25 | }
|
26 |
|
27 |
|
28 | .#{$prefix}--loading__svg {
|
29 | fill: transparent;
|
30 | }
|
31 |
|
32 | .#{$prefix}--loading__svg circle {
|
33 | stroke-width: 8;
|
34 | stroke-linecap: butt;
|
35 | stroke-dasharray: 240;
|
36 | }
|
37 |
|
38 | .#{$prefix}--loading__stroke {
|
39 | stroke: $interactive-04;
|
40 | stroke-dashoffset: $loading__gap;
|
41 | }
|
42 |
|
43 | .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
|
44 | stroke-dashoffset: $loading--small__gap;
|
45 | }
|
46 |
|
47 | .#{$prefix}--loading--stop {
|
48 | @include animation__loading--stop;
|
49 | }
|
50 |
|
51 | .#{$prefix}--loading--small {
|
52 | width: 2rem;
|
53 | height: 2rem;
|
54 | circle {
|
55 | stroke-width: 12;
|
56 | }
|
57 | }
|
58 |
|
59 | .#{$prefix}--loading--small .#{$prefix}--loading__svg {
|
60 | stroke: $interactive-04;
|
61 | }
|
62 |
|
63 | .#{$prefix}--loading__background {
|
64 | stroke: $ui-03;
|
65 | stroke-dashoffset: 0;
|
66 | }
|
67 |
|
68 | .#{$prefix}--loading-overlay {
|
69 | position: fixed;
|
70 | top: 0;
|
71 | left: 0;
|
72 | z-index: z('overlay');
|
73 | display: flex;
|
74 | align-items: center;
|
75 | justify-content: center;
|
76 | width: 100%;
|
77 | height: 100%;
|
78 | background-color: $overlay-01;
|
79 | transition: background-color $duration--slow-02 motion(standard, expressive);
|
80 | }
|
81 |
|
82 | .#{$prefix}--loading-overlay--stop {
|
83 | display: none;
|
84 | }
|
85 | }
|
86 |
|
87 | @include exports('loading') {
|
88 | @include loading;
|
89 | }
|