1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vars';
|
9 | @import '../../globals/scss/css--reset';
|
10 | @import '../../globals/scss/css--typography';
|
11 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
12 | @import 'keyframes';
|
13 |
|
14 | @mixin inline-loading {
|
15 | .#{$prefix}--inline-loading {
|
16 | display: flex;
|
17 | width: 100%;
|
18 | align-items: center;
|
19 | }
|
20 |
|
21 | .#{$prefix}--inline-loading__text {
|
22 | @include typescale('zeta');
|
23 | }
|
24 |
|
25 | .#{$prefix}--inline-loading__animation {
|
26 | position: relative;
|
27 | width: 2rem;
|
28 | height: 2rem;
|
29 | display: flex;
|
30 | justify-content: center;
|
31 | align-items: center;
|
32 | }
|
33 |
|
34 | .#{$prefix}--inline-loading__checkmark-container {
|
35 | width: 0.75rem;
|
36 | position: absolute;
|
37 | top: 0.75rem;
|
38 |
|
39 | &[hidden] {
|
40 | display: none;
|
41 | }
|
42 | }
|
43 |
|
44 | .#{$prefix}--inline-loading__checkmark {
|
45 | fill: none;
|
46 | stroke: $brand-01;
|
47 | transform-origin: 50% 50%;
|
48 | stroke-width: 2.1;
|
49 | stroke-dasharray: 12;
|
50 | stroke-dashoffset: 12;
|
51 | animation-name: stroke;
|
52 | animation-duration: 0.25s;
|
53 | animation-fill-mode: forwards;
|
54 | }
|
55 |
|
56 | .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
|
57 | stroke: $brand-01;
|
58 | }
|
59 |
|
60 | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
61 | .#{$prefix}--inline-loading__checkmark-container {
|
62 | top: 1px;
|
63 | right: 0.5rem;
|
64 | }
|
65 |
|
66 | .#{$prefix}--inline-loading__checkmark {
|
67 | animation: none;
|
68 | stroke-dashoffset: 0;
|
69 | stroke-dasharray: 0;
|
70 | }
|
71 | }
|
72 | }
|
73 |
|
74 | @mixin inline-loading--x {
|
75 | .#{$prefix}--inline-loading {
|
76 | display: flex;
|
77 | width: 100%;
|
78 | align-items: center;
|
79 |
|
80 | .#{$prefix}--loading__svg circle {
|
81 | stroke-width: 12;
|
82 | }
|
83 |
|
84 | .#{$prefix}--loading__stroke {
|
85 | stroke-dashoffset: 99;
|
86 | }
|
87 | }
|
88 |
|
89 | .#{$prefix}--inline-loading__text {
|
90 | @include type-style('body-short-01');
|
91 | color: $text-02;
|
92 | }
|
93 |
|
94 | .#{$prefix}--inline-loading__animation {
|
95 | position: relative;
|
96 | width: 2rem;
|
97 | height: 2rem;
|
98 | display: flex;
|
99 | justify-content: center;
|
100 | align-items: center;
|
101 | }
|
102 |
|
103 | .#{$prefix}--inline-loading__checkmark-container {
|
104 | width: 0.75rem;
|
105 | position: absolute;
|
106 | top: 0.75rem;
|
107 |
|
108 | &[hidden] {
|
109 | display: none;
|
110 | }
|
111 | }
|
112 |
|
113 | .#{$prefix}--inline-loading__checkmark {
|
114 | fill: none;
|
115 | stroke: $interactive-01;
|
116 | transform-origin: 50% 50%;
|
117 | stroke-width: 1.8;
|
118 | stroke-dasharray: 12;
|
119 | stroke-dashoffset: 12;
|
120 | animation-name: stroke;
|
121 | animation-duration: 0.25s;
|
122 | animation-fill-mode: forwards;
|
123 | }
|
124 |
|
125 | .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
|
126 | stroke: $interactive-01;
|
127 | }
|
128 |
|
129 | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
130 | .#{$prefix}--inline-loading__checkmark-container {
|
131 | top: 1px;
|
132 | right: 0.5rem;
|
133 | }
|
134 |
|
135 | .#{$prefix}--inline-loading__checkmark {
|
136 | animation: none;
|
137 | stroke-dashoffset: 0;
|
138 | stroke-dasharray: 0;
|
139 | }
|
140 | }
|
141 | }
|
142 |
|
143 | @include exports('inline-loading') {
|
144 | @if feature-flag-enabled('components-x') {
|
145 | @include inline-loading--x;
|
146 | } @else {
|
147 | @include inline-loading;
|
148 | }
|
149 | }
|