1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vars';
|
9 | @import '../../globals/scss/css--reset';
|
10 | @import '../../globals/scss/typography';
|
11 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
12 | @import '../loading/loading';
|
13 | @import 'keyframes';
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | @mixin inline-loading {
|
19 | .#{$prefix}--inline-loading {
|
20 | display: flex;
|
21 | align-items: center;
|
22 | width: 100%;
|
23 | min-height: 2rem;
|
24 |
|
25 | .#{$prefix}--loading__svg circle {
|
26 | stroke-width: 12;
|
27 | }
|
28 |
|
29 | .#{$prefix}--loading__stroke {
|
30 | stroke-dashoffset: $loading--small__gap;
|
31 | }
|
32 | }
|
33 |
|
34 | .#{$prefix}--inline-loading__text {
|
35 | @include type-style('label-01');
|
36 |
|
37 | color: $text-02;
|
38 | }
|
39 |
|
40 | .#{$prefix}--inline-loading__animation {
|
41 | position: relative;
|
42 | display: flex;
|
43 | align-items: center;
|
44 | justify-content: center;
|
45 | width: 2rem;
|
46 | height: 2rem;
|
47 | }
|
48 |
|
49 | .#{$prefix}--inline-loading__checkmark-container {
|
50 | fill: $support-02;
|
51 |
|
52 |
|
53 | &.#{$prefix}--inline-loading__svg {
|
54 | position: absolute;
|
55 | top: 0.75rem;
|
56 | width: 0.75rem;
|
57 | }
|
58 |
|
59 | &[hidden] {
|
60 | display: none;
|
61 | }
|
62 | }
|
63 |
|
64 | .#{$prefix}--inline-loading__checkmark {
|
65 | transform-origin: 50% 50%;
|
66 | animation-name: stroke;
|
67 | animation-duration: 250ms;
|
68 | animation-fill-mode: forwards;
|
69 | fill: none;
|
70 | stroke: $interactive-04;
|
71 | stroke-width: 1.8;
|
72 | stroke-dasharray: 12;
|
73 | stroke-dashoffset: 12;
|
74 | }
|
75 |
|
76 | .#{$prefix}--inline-loading--error {
|
77 | width: rem(16px);
|
78 | height: rem(16px);
|
79 | fill: $support-01;
|
80 |
|
81 | &[hidden] {
|
82 | display: none;
|
83 | }
|
84 | }
|
85 |
|
86 | .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
|
87 | stroke: $interactive-04;
|
88 | }
|
89 |
|
90 | @media screen and (-ms-high-contrast: active),
|
91 | screen and (-ms-high-contrast: none) {
|
92 | .#{$prefix}--inline-loading__checkmark-container {
|
93 | top: 1px;
|
94 | right: 0.5rem;
|
95 | }
|
96 |
|
97 | .#{$prefix}--inline-loading__checkmark {
|
98 | animation: none;
|
99 | stroke-dashoffset: 0;
|
100 | stroke-dasharray: 0;
|
101 | }
|
102 | }
|
103 | }
|
104 |
|
105 | @include exports('inline-loading') {
|
106 | @include inline-loading;
|
107 | }
|