@stamcat/craftsman 0.0.52 → 0.0.54
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/skills/craftsman-style-utilities/SKILL.md +4 -1
- package/src/components/Loader/Loader.esm.js +11 -11
- package/src/components/Loader/loaders.css +1 -0
- package/src/components/Loader/loaders.scss +255 -0
- package/src/styles/global/components/_typography.scss +4 -4
- package/src/styles/theme/theme.esm.js +9 -5
- package/src/styles/theme/types.d.ts +1 -0
- package/src/components/Loader/loaders.module.css +0 -1
- package/src/components/Loader/loaders.module.scss +0 -247
- package/src/components/Loader/loaders.module.style.esm.js +0 -21
package/package.json
CHANGED
|
@@ -194,7 +194,8 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
|
|
|
194
194
|
|
|
195
195
|
## Theme Authoring
|
|
196
196
|
|
|
197
|
-
- `theme.root` supports JS style objects and raw CSS/Sass strings.
|
|
197
|
+
- `theme.root` supports JS style objects and raw CSS/Sass strings, and is written to the `cf-theme` cascade layer.
|
|
198
|
+
- `theme.base` supports the same JS style object / raw CSS/Sass string forms as `theme.root`, but is written to the lower-priority `cf-base` cascade layer alongside the default width/color variables. Use it for base/reset-level styles that should still lose to `theme.root` and `theme.components.*` overrides when specificity is equal.
|
|
198
199
|
- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
|
|
199
200
|
- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
|
|
200
201
|
- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
|
|
@@ -237,6 +238,7 @@ With `layered: false`, the theme CSS still declares `@layer cf-theme` but does n
|
|
|
237
238
|
Example:
|
|
238
239
|
|
|
239
240
|
```tsx
|
|
241
|
+
import greenBase from "./green.base.scss?inline";
|
|
240
242
|
import greenRoot from "./green.root.scss?inline";
|
|
241
243
|
import greenButton from "./green.button.scss?inline";
|
|
242
244
|
|
|
@@ -245,6 +247,7 @@ export const theme = {
|
|
|
245
247
|
gutter: 20,
|
|
246
248
|
tablet: 768,
|
|
247
249
|
},
|
|
250
|
+
base: greenBase,
|
|
248
251
|
root: greenRoot,
|
|
249
252
|
components: {
|
|
250
253
|
button: greenButton,
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { loaders as e } from "./types.esm.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { jsx as
|
|
3
|
+
import './loaders.css';/* empty css */
|
|
4
|
+
import t from "clsx";
|
|
5
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Loader/Loader.tsx
|
|
7
|
-
var
|
|
8
|
-
let { type:
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
className:
|
|
7
|
+
var r = (r) => {
|
|
8
|
+
let { type: i, color: a = "black", width: o, className: s, style: c, ...l } = r, u = e[i](a, o);
|
|
9
|
+
return /* @__PURE__ */ n("div", {
|
|
10
|
+
className: t("loader", i, s),
|
|
11
11
|
style: {
|
|
12
|
-
...
|
|
13
|
-
...
|
|
12
|
+
...u,
|
|
13
|
+
...c
|
|
14
14
|
},
|
|
15
|
-
...
|
|
15
|
+
...l
|
|
16
16
|
});
|
|
17
17
|
};
|
|
18
18
|
//#endregion
|
|
19
|
-
export {
|
|
19
|
+
export { r as Loader };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cf-component{@keyframes l5{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes l3{to{transform:rotate(1turn)}}@keyframes l1{to{clip-path:inset(0 -34% 0 0)}}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn)translate(150%)}}@keyframes dashes{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}@keyframes l2{to{transform:rotate(1turn)}}@keyframes l9{to{transform:rotate(1turn)}}@keyframes l7{to{background-position:right -25% top 0}}.loader.dots{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate l5}.loader.dots-trace{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite l1}.loader.dots-orbit{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite l22-0;display:grid}.loader.dots-orbit:before,.loader.dots-orbit:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite l22;transform:rotate(0)translate(150%)}.loader.dots-orbit:after{animation-delay:-.5s}.loader.dashes{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite dashes}.loader.spinner{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite l2}.loader.swirl{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite l3;-webkit-mask-composite:source-out;mask-composite:subtract}.loader.ball{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite l9}.loader.boxy{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite l7;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}}
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
@layer cf-component {
|
|
2
|
+
@keyframes l5 {
|
|
3
|
+
0% {
|
|
4
|
+
box-shadow:
|
|
5
|
+
var(--_l5w2) 0 var(--_l5c),
|
|
6
|
+
var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
7
|
+
background: var(--_l5c);
|
|
8
|
+
}
|
|
9
|
+
33% {
|
|
10
|
+
box-shadow:
|
|
11
|
+
var(--_l5w2) 0 var(--_l5c),
|
|
12
|
+
var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
13
|
+
background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
14
|
+
}
|
|
15
|
+
66% {
|
|
16
|
+
box-shadow:
|
|
17
|
+
var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
|
|
18
|
+
var(--_l5w3) 0 var(--_l5c);
|
|
19
|
+
background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
20
|
+
}
|
|
21
|
+
100% {
|
|
22
|
+
box-shadow:
|
|
23
|
+
var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
|
|
24
|
+
var(--_l5w3) 0 var(--_l5c);
|
|
25
|
+
background: var(--_l5c);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes l3 {
|
|
30
|
+
20%{background-position:0% 0%, 50% 50%,100% 50%}
|
|
31
|
+
40%{background-position:0% 100%, 50% 0%,100% 50%}
|
|
32
|
+
60%{background-position:0% 50%, 50% 100%,100% 0%}
|
|
33
|
+
80%{background-position:0% 50%, 50% 50%,100% 100%}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@keyframes l1 {
|
|
37
|
+
to {
|
|
38
|
+
clip-path: inset(0 -34% 0 0);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@keyframes l22-0 {
|
|
43
|
+
100% {transform: rotate(1turn)}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes l22 {
|
|
47
|
+
100% {transform: rotate(1turn) translate(150%)}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes dashes {
|
|
51
|
+
0% {
|
|
52
|
+
background-size:
|
|
53
|
+
var(--_dshw2) 4px,
|
|
54
|
+
var(--_dshw2) 4px,
|
|
55
|
+
var(--_dshw2) 4px;
|
|
56
|
+
opacity: 1;
|
|
57
|
+
}
|
|
58
|
+
33% {
|
|
59
|
+
background-size:
|
|
60
|
+
var(--_dshw2) var(--_dshw2),
|
|
61
|
+
var(--_dshw2) 4px,
|
|
62
|
+
var(--_dshw2) 4px;
|
|
63
|
+
opacity: 0.7;
|
|
64
|
+
}
|
|
65
|
+
66% {
|
|
66
|
+
background-size:
|
|
67
|
+
var(--_dshw2) 4px,
|
|
68
|
+
var(--_dshw2) var(--_dshw2),
|
|
69
|
+
var(--_dshw2) 4px;
|
|
70
|
+
opacity: 0.7;
|
|
71
|
+
}
|
|
72
|
+
100% {
|
|
73
|
+
background-size:
|
|
74
|
+
var(--_dshw2) 4px,
|
|
75
|
+
var(--_dshw2) 4px,
|
|
76
|
+
var(--_dshw2) var(--_dshw2);
|
|
77
|
+
opacity: 1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@keyframes l2 {to{transform: rotate(1turn)}}
|
|
82
|
+
|
|
83
|
+
@keyframes l3 {to{transform: rotate(1turn)}}
|
|
84
|
+
|
|
85
|
+
@keyframes l9 {to{transform: rotate(1turn)}}
|
|
86
|
+
|
|
87
|
+
@keyframes l7 {
|
|
88
|
+
100% {background-position: right -25% top 0}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.loader {
|
|
92
|
+
&.dots {
|
|
93
|
+
aspect-ratio: 1;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
animation: l5 1s infinite linear alternate;
|
|
96
|
+
width: var(--_l5w);
|
|
97
|
+
margin: 0 var(--_l5w2);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&.dots-trace {
|
|
101
|
+
width: var(--_dtw);
|
|
102
|
+
aspect-ratio: 4;
|
|
103
|
+
background: radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0 / calc(100% / 3) 100% space;
|
|
104
|
+
clip-path: inset(0 100% 0 0);
|
|
105
|
+
animation: l1 1s steps(4) infinite;
|
|
106
|
+
}
|
|
107
|
+
&.dots-orbit {
|
|
108
|
+
width: var(--_dow);
|
|
109
|
+
aspect-ratio: 1;
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
background: var(--_doc);
|
|
112
|
+
display: grid;
|
|
113
|
+
animation: l22-0 2s infinite linear;
|
|
114
|
+
&:before,
|
|
115
|
+
&:after {
|
|
116
|
+
content: "";
|
|
117
|
+
grid-area: 1/1;
|
|
118
|
+
margin: 15%;
|
|
119
|
+
border-radius: 50%;
|
|
120
|
+
background: inherit;
|
|
121
|
+
transform: rotate(0deg) translate(150%);
|
|
122
|
+
animation: l22 1s infinite;
|
|
123
|
+
}
|
|
124
|
+
&:after {
|
|
125
|
+
animation-delay: -.5s
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.dashes {
|
|
130
|
+
width: var(--_dshw);
|
|
131
|
+
height: calc(var(--_dshw) * 0.3);
|
|
132
|
+
background:
|
|
133
|
+
linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px,
|
|
134
|
+
linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px,
|
|
135
|
+
linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;
|
|
136
|
+
background-repeat: no-repeat;
|
|
137
|
+
animation: dashes 1s infinite linear;
|
|
138
|
+
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.spinner {
|
|
142
|
+
width: var(--_spnw);
|
|
143
|
+
aspect-ratio: 1;
|
|
144
|
+
border-radius: 50%;
|
|
145
|
+
border: var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);
|
|
146
|
+
border-right-color: var(--_spnc);
|
|
147
|
+
animation: l2 1s infinite linear;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&.swirl {
|
|
151
|
+
width: var(--_swrlw);
|
|
152
|
+
padding: var(--_swrlw2);
|
|
153
|
+
aspect-ratio: 1;
|
|
154
|
+
border-radius: 50%;
|
|
155
|
+
background: var(--_swrlc);
|
|
156
|
+
--_m:
|
|
157
|
+
conic-gradient(#0000 10%,#000),
|
|
158
|
+
linear-gradient(#000 0 0) content-box;
|
|
159
|
+
-webkit-mask: var(--_m);
|
|
160
|
+
mask: var(--_m);
|
|
161
|
+
-webkit-mask-composite: source-out;
|
|
162
|
+
mask-composite: subtract;
|
|
163
|
+
animation: l3 1s infinite linear;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&.ball {
|
|
167
|
+
width: var(--_ballw);
|
|
168
|
+
aspect-ratio: 1;
|
|
169
|
+
border-radius: 50%;
|
|
170
|
+
background:
|
|
171
|
+
radial-gradient(farthest-side,var(--_ballc) 95%,#0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat,
|
|
172
|
+
radial-gradient(farthest-side,#0000 calc(100% - var(--_ballw2)),#ccc 0);
|
|
173
|
+
animation: l9 2s infinite linear;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&.boxy {
|
|
177
|
+
width: var(--_boxw);
|
|
178
|
+
height: var(--_boxw2);
|
|
179
|
+
-webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
|
|
180
|
+
background:
|
|
181
|
+
linear-gradient(var(--_boxc) 0 0) left -25% top 0 /20% 100% no-repeat
|
|
182
|
+
#ddd;
|
|
183
|
+
animation: l7 1s infinite steps(6);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// .dots-bounce {
|
|
187
|
+
// width: var(--_gw);
|
|
188
|
+
// aspect-ratio: 2;
|
|
189
|
+
// background:
|
|
190
|
+
// var(--_g) 0% 50%,
|
|
191
|
+
// var(--_g) 50% 50%,
|
|
192
|
+
// var(--_g) 100% 50%;
|
|
193
|
+
// background-size: calc(100% / 3) 50%;
|
|
194
|
+
// animation: l3 1s infinite linear;
|
|
195
|
+
// }
|
|
196
|
+
// @keyframes l3 {
|
|
197
|
+
// 20% {
|
|
198
|
+
// background-position:
|
|
199
|
+
// 0% 0%,
|
|
200
|
+
// 50% 50%,
|
|
201
|
+
// 100% 50%;
|
|
202
|
+
// }
|
|
203
|
+
// 40% {
|
|
204
|
+
// background-position:
|
|
205
|
+
// 0% 100%,
|
|
206
|
+
// 50% 0%,
|
|
207
|
+
// 100% 50%;
|
|
208
|
+
// }
|
|
209
|
+
// 60% {
|
|
210
|
+
// background-position:
|
|
211
|
+
// 0% 50%,
|
|
212
|
+
// 50% 100%,
|
|
213
|
+
// 100% 0%;
|
|
214
|
+
// }
|
|
215
|
+
// 80% {
|
|
216
|
+
// background-position:
|
|
217
|
+
// 0% 50%,
|
|
218
|
+
// 50% 50%,
|
|
219
|
+
// 100% 100%;
|
|
220
|
+
// }
|
|
221
|
+
// }
|
|
222
|
+
// .factory {
|
|
223
|
+
// width: var(--_ftyw);
|
|
224
|
+
// height: var(--_ftyw2);
|
|
225
|
+
// box-shadow: 0 3px 0 var(--_ftyc);
|
|
226
|
+
// position: relative;
|
|
227
|
+
// clip-path: inset(-40px 0 -5px);
|
|
228
|
+
// &:before {
|
|
229
|
+
// content: "";
|
|
230
|
+
// position: absolute;
|
|
231
|
+
// inset: auto calc(50% - 17px) 0;
|
|
232
|
+
// height: var(--_ftyw3);
|
|
233
|
+
// --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
|
|
234
|
+
// background: var(--g),var(--g),var(--g),var(--g);
|
|
235
|
+
// background-size: var(--_ftyw4) 14px;
|
|
236
|
+
// animation:
|
|
237
|
+
// l7-1 2s infinite linear,
|
|
238
|
+
// l7-2 2s infinite linear;
|
|
239
|
+
// }
|
|
240
|
+
// }
|
|
241
|
+
// @keyframes l7-1 {
|
|
242
|
+
// 0%,
|
|
243
|
+
// 100% {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
244
|
+
// 17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
245
|
+
// 35% {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
246
|
+
// 52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
|
|
247
|
+
// 70%,
|
|
248
|
+
// 98% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
|
|
249
|
+
// }
|
|
250
|
+
// @keyframes l7-2 {
|
|
251
|
+
// 0%,70% {transform:translate(0)}
|
|
252
|
+
// 100% {transform:translate(200%)}
|
|
253
|
+
// }
|
|
254
|
+
}
|
|
255
|
+
}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
@mixin body-typography {
|
|
4
4
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
5
|
-
color: var(--text);
|
|
5
|
+
color: var(--text, 14px);
|
|
6
6
|
line-height: 1.5;
|
|
7
7
|
font-weight: 400;
|
|
8
|
-
font-size:
|
|
8
|
+
font-size: #{u.width("text")};
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@mixin h1 {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
margin: 0 0 #{u.width(gutter, 0.5)} 0;
|
|
31
31
|
}
|
|
32
32
|
@mixin h5 {
|
|
33
|
-
font-size:
|
|
33
|
+
font-size: #{u.width("text")};
|
|
34
34
|
line-height: 1.2;
|
|
35
35
|
margin: 0 0 #{u.width(gutter, 0.5)} 0;
|
|
36
36
|
}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
}
|
|
43
43
|
@mixin p {
|
|
44
44
|
font-style: normal;
|
|
45
|
-
font-size:
|
|
45
|
+
font-size: #{u.width("text")};
|
|
46
46
|
line-height: 1.5;
|
|
47
47
|
margin: 0;
|
|
48
48
|
}
|
|
@@ -28,7 +28,7 @@ function c(e) {
|
|
|
28
28
|
if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
|
|
29
29
|
}
|
|
30
30
|
function l(e, n) {
|
|
31
|
-
let o = n?.layered ?? !0, l = [
|
|
31
|
+
let o = n?.layered ?? !0, l = [`:root { ${i} ${r} }`, a(e.base)].filter(Boolean).join("\n"), u = [
|
|
32
32
|
t(":root", { ...e.colors || {} }),
|
|
33
33
|
c(e.widths),
|
|
34
34
|
a(e.root),
|
|
@@ -36,14 +36,18 @@ function l(e, n) {
|
|
|
36
36
|
].filter(Boolean).join("\n");
|
|
37
37
|
return o ? [
|
|
38
38
|
"@layer cf-base, cf-theme;",
|
|
39
|
-
|
|
40
|
-
"@layer cf-theme {",
|
|
39
|
+
"@layer cf-base {",
|
|
41
40
|
l,
|
|
41
|
+
"}",
|
|
42
|
+
"@layer cf-theme {",
|
|
43
|
+
u,
|
|
42
44
|
"}"
|
|
43
45
|
].filter(Boolean).join("\n") : [
|
|
44
|
-
|
|
45
|
-
"@layer cf-theme {",
|
|
46
|
+
"@layer cf-base {",
|
|
46
47
|
l,
|
|
48
|
+
"}",
|
|
49
|
+
"@layer cf-theme {",
|
|
50
|
+
u,
|
|
47
51
|
"}"
|
|
48
52
|
].filter(Boolean).join("\n");
|
|
49
53
|
}
|
|
@@ -19,6 +19,7 @@ export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
|
|
|
19
19
|
export type Theme = {
|
|
20
20
|
colors?: Colors;
|
|
21
21
|
widths?: WidthOverrides;
|
|
22
|
+
base?: CSSObject | SerializedStyles | string;
|
|
22
23
|
root?: CSSObject | SerializedStyles | string;
|
|
23
24
|
components?: ComponentThemeOverrides;
|
|
24
25
|
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer cf-base{._dots_1i7k4_2{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1i7k4_1}@keyframes _l5_1i7k4_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_1i7k4_1{to{transform:rotate(1turn)}}._dots-trace_1i7k4_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1i7k4_1}@keyframes _l1_1i7k4_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1i7k4_53{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1i7k4_1;display:grid}._dots-orbit_1i7k4_53:before,._dots-orbit_1i7k4_53:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1i7k4_1;transform:rotate(0)translate(150%)}._dots-orbit_1i7k4_53:after{animation-delay:-.5s}@keyframes _l22-0_1i7k4_1{to{transform:rotate(1turn)}}@keyframes _l22_1i7k4_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1i7k4_83{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1i7k4_83}@keyframes _dashes_1i7k4_83{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1i7k4_108{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1i7k4_1}@keyframes _l2_1i7k4_1{to{transform:rotate(1turn)}}._swirl_1i7k4_121{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1i7k4_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1i7k4_141{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1i7k4_1}@keyframes _l9_1i7k4_1{to{transform:rotate(1turn)}}._boxy_1i7k4_153{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1i7k4_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1i7k4_1{to{background-position:right -25% top 0}}}
|
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
@layer cf-base {
|
|
2
|
-
.dots {
|
|
3
|
-
aspect-ratio: 1;
|
|
4
|
-
border-radius: 50%;
|
|
5
|
-
animation: l5 1s infinite linear alternate;
|
|
6
|
-
width: var(--_l5w);
|
|
7
|
-
margin: 0 var(--_l5w2);
|
|
8
|
-
}
|
|
9
|
-
@keyframes l5 {
|
|
10
|
-
0% {
|
|
11
|
-
box-shadow:
|
|
12
|
-
var(--_l5w2) 0 var(--_l5c),
|
|
13
|
-
var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
14
|
-
background: var(--_l5c);
|
|
15
|
-
}
|
|
16
|
-
33% {
|
|
17
|
-
box-shadow:
|
|
18
|
-
var(--_l5w2) 0 var(--_l5c),
|
|
19
|
-
var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
20
|
-
background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
21
|
-
}
|
|
22
|
-
66% {
|
|
23
|
-
box-shadow:
|
|
24
|
-
var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
|
|
25
|
-
var(--_l5w3) 0 var(--_l5c);
|
|
26
|
-
background: color-mix(in srgb, var(--_l5c) 80%, white 75%);
|
|
27
|
-
}
|
|
28
|
-
100% {
|
|
29
|
-
box-shadow:
|
|
30
|
-
var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
|
|
31
|
-
var(--_l5w3) 0 var(--_l5c);
|
|
32
|
-
background: var(--_l5c);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@keyframes l3 {
|
|
37
|
-
20%{background-position:0% 0%, 50% 50%,100% 50%}
|
|
38
|
-
40%{background-position:0% 100%, 50% 0%,100% 50%}
|
|
39
|
-
60%{background-position:0% 50%, 50% 100%,100% 0%}
|
|
40
|
-
80%{background-position:0% 50%, 50% 50%,100% 100%}
|
|
41
|
-
}
|
|
42
|
-
// .dots-bounce {
|
|
43
|
-
// width: var(--_gw);
|
|
44
|
-
// aspect-ratio: 2;
|
|
45
|
-
// background:
|
|
46
|
-
// var(--_g) 0% 50%,
|
|
47
|
-
// var(--_g) 50% 50%,
|
|
48
|
-
// var(--_g) 100% 50%;
|
|
49
|
-
// background-size: calc(100% / 3) 50%;
|
|
50
|
-
// animation: l3 1s infinite linear;
|
|
51
|
-
// }
|
|
52
|
-
// @keyframes l3 {
|
|
53
|
-
// 20% {
|
|
54
|
-
// background-position:
|
|
55
|
-
// 0% 0%,
|
|
56
|
-
// 50% 50%,
|
|
57
|
-
// 100% 50%;
|
|
58
|
-
// }
|
|
59
|
-
// 40% {
|
|
60
|
-
// background-position:
|
|
61
|
-
// 0% 100%,
|
|
62
|
-
// 50% 0%,
|
|
63
|
-
// 100% 50%;
|
|
64
|
-
// }
|
|
65
|
-
// 60% {
|
|
66
|
-
// background-position:
|
|
67
|
-
// 0% 50%,
|
|
68
|
-
// 50% 100%,
|
|
69
|
-
// 100% 0%;
|
|
70
|
-
// }
|
|
71
|
-
// 80% {
|
|
72
|
-
// background-position:
|
|
73
|
-
// 0% 50%,
|
|
74
|
-
// 50% 50%,
|
|
75
|
-
// 100% 100%;
|
|
76
|
-
// }
|
|
77
|
-
// }
|
|
78
|
-
|
|
79
|
-
.dots-trace {
|
|
80
|
-
width: var(--_dtw);
|
|
81
|
-
aspect-ratio: 4;
|
|
82
|
-
background: radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0 / calc(100% / 3) 100% space;
|
|
83
|
-
clip-path: inset(0 100% 0 0);
|
|
84
|
-
animation: l1 1s steps(4) infinite;
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
@keyframes l1 {
|
|
88
|
-
to {
|
|
89
|
-
clip-path: inset(0 -34% 0 0);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.dots-orbit {
|
|
94
|
-
width: var(--_dow);
|
|
95
|
-
aspect-ratio: 1;
|
|
96
|
-
border-radius: 50%;
|
|
97
|
-
background: var(--_doc);
|
|
98
|
-
display: grid;
|
|
99
|
-
animation: l22-0 2s infinite linear;
|
|
100
|
-
&:before,
|
|
101
|
-
&:after {
|
|
102
|
-
content: "";
|
|
103
|
-
grid-area: 1/1;
|
|
104
|
-
margin: 15%;
|
|
105
|
-
border-radius: 50%;
|
|
106
|
-
background: inherit;
|
|
107
|
-
transform: rotate(0deg) translate(150%);
|
|
108
|
-
animation: l22 1s infinite;
|
|
109
|
-
}
|
|
110
|
-
&:after {
|
|
111
|
-
animation-delay: -.5s
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes l22-0 {
|
|
116
|
-
100% {transform: rotate(1turn)}
|
|
117
|
-
}
|
|
118
|
-
@keyframes l22 {
|
|
119
|
-
100% {transform: rotate(1turn) translate(150%)}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.dashes {
|
|
123
|
-
width: var(--_dshw);
|
|
124
|
-
height: calc(var(--_dshw) * 0.3);
|
|
125
|
-
background:
|
|
126
|
-
linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px,
|
|
127
|
-
linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px,
|
|
128
|
-
linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;
|
|
129
|
-
background-repeat: no-repeat;
|
|
130
|
-
animation: dashes 1s infinite linear;
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
@keyframes dashes {
|
|
134
|
-
0% {
|
|
135
|
-
background-size:
|
|
136
|
-
var(--_dshw2) 4px,
|
|
137
|
-
var(--_dshw2) 4px,
|
|
138
|
-
var(--_dshw2) 4px;
|
|
139
|
-
opacity: 1;
|
|
140
|
-
}
|
|
141
|
-
33% {
|
|
142
|
-
background-size:
|
|
143
|
-
var(--_dshw2) var(--_dshw2),
|
|
144
|
-
var(--_dshw2) 4px,
|
|
145
|
-
var(--_dshw2) 4px;
|
|
146
|
-
opacity: 0.7;
|
|
147
|
-
}
|
|
148
|
-
66% {
|
|
149
|
-
background-size:
|
|
150
|
-
var(--_dshw2) 4px,
|
|
151
|
-
var(--_dshw2) var(--_dshw2),
|
|
152
|
-
var(--_dshw2) 4px;
|
|
153
|
-
opacity: 0.7;
|
|
154
|
-
}
|
|
155
|
-
100% {
|
|
156
|
-
background-size:
|
|
157
|
-
var(--_dshw2) 4px,
|
|
158
|
-
var(--_dshw2) 4px,
|
|
159
|
-
var(--_dshw2) var(--_dshw2);
|
|
160
|
-
opacity: 1;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.spinner {
|
|
165
|
-
width: var(--_spnw);
|
|
166
|
-
aspect-ratio: 1;
|
|
167
|
-
border-radius: 50%;
|
|
168
|
-
border: var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);
|
|
169
|
-
border-right-color: var(--_spnc);
|
|
170
|
-
animation: l2 1s infinite linear;
|
|
171
|
-
}
|
|
172
|
-
@keyframes l2 {to{transform: rotate(1turn)}}
|
|
173
|
-
|
|
174
|
-
.swirl {
|
|
175
|
-
width: var(--_swrlw);
|
|
176
|
-
padding: var(--_swrlw2);
|
|
177
|
-
aspect-ratio: 1;
|
|
178
|
-
border-radius: 50%;
|
|
179
|
-
background: var(--_swrlc);
|
|
180
|
-
--_m:
|
|
181
|
-
conic-gradient(#0000 10%,#000),
|
|
182
|
-
linear-gradient(#000 0 0) content-box;
|
|
183
|
-
-webkit-mask: var(--_m);
|
|
184
|
-
mask: var(--_m);
|
|
185
|
-
-webkit-mask-composite: source-out;
|
|
186
|
-
mask-composite: subtract;
|
|
187
|
-
animation: l3 1s infinite linear;
|
|
188
|
-
}
|
|
189
|
-
@keyframes l3 {to{transform: rotate(1turn)}}
|
|
190
|
-
|
|
191
|
-
.ball {
|
|
192
|
-
width: var(--_ballw);
|
|
193
|
-
aspect-ratio: 1;
|
|
194
|
-
border-radius: 50%;
|
|
195
|
-
background:
|
|
196
|
-
radial-gradient(farthest-side,var(--_ballc) 95%,#0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat,
|
|
197
|
-
radial-gradient(farthest-side,#0000 calc(100% - var(--_ballw2)),#ccc 0);
|
|
198
|
-
animation: l9 2s infinite linear;
|
|
199
|
-
}
|
|
200
|
-
@keyframes l9 {to{transform: rotate(1turn)}}
|
|
201
|
-
|
|
202
|
-
.boxy {
|
|
203
|
-
width: var(--_boxw);
|
|
204
|
-
height: var(--_boxw2);
|
|
205
|
-
-webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
|
|
206
|
-
background:
|
|
207
|
-
linear-gradient(var(--_boxc) 0 0) left -25% top 0 /20% 100% no-repeat
|
|
208
|
-
#ddd;
|
|
209
|
-
animation: l7 1s infinite steps(6);
|
|
210
|
-
}
|
|
211
|
-
@keyframes l7 {
|
|
212
|
-
100% {background-position: right -25% top 0}
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
// .factory {
|
|
216
|
-
// width: var(--_ftyw);
|
|
217
|
-
// height: var(--_ftyw2);
|
|
218
|
-
// box-shadow: 0 3px 0 var(--_ftyc);
|
|
219
|
-
// position: relative;
|
|
220
|
-
// clip-path: inset(-40px 0 -5px);
|
|
221
|
-
// &:before {
|
|
222
|
-
// content: "";
|
|
223
|
-
// position: absolute;
|
|
224
|
-
// inset: auto calc(50% - 17px) 0;
|
|
225
|
-
// height: var(--_ftyw3);
|
|
226
|
-
// --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
|
|
227
|
-
// background: var(--g),var(--g),var(--g),var(--g);
|
|
228
|
-
// background-size: var(--_ftyw4) 14px;
|
|
229
|
-
// animation:
|
|
230
|
-
// l7-1 2s infinite linear,
|
|
231
|
-
// l7-2 2s infinite linear;
|
|
232
|
-
// }
|
|
233
|
-
// }
|
|
234
|
-
// @keyframes l7-1 {
|
|
235
|
-
// 0%,
|
|
236
|
-
// 100% {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
237
|
-
// 17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
238
|
-
// 35% {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
239
|
-
// 52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
|
|
240
|
-
// 70%,
|
|
241
|
-
// 98% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
|
|
242
|
-
// }
|
|
243
|
-
// @keyframes l7-2 {
|
|
244
|
-
// 0%,70% {transform:translate(0)}
|
|
245
|
-
// 100% {transform:translate(200%)}
|
|
246
|
-
// }
|
|
247
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import './loaders.module.css';//#region src/components/Loader/loaders.module.scss
|
|
2
|
-
var e = "_dots_1i7k4_2", t = "_l5_1i7k4_1", n = "_dots-trace_1i7k4_41", r = "_l1_1i7k4_1", i = "_dots-orbit_1i7k4_53", a = "_l22-0_1i7k4_1", o = "_l22_1i7k4_1", s = "_dashes_1i7k4_83", c = "_spinner_1i7k4_108", l = "_l2_1i7k4_1", u = "_swirl_1i7k4_121", d = "_l3_1i7k4_1", f = "_ball_1i7k4_141", p = "_l9_1i7k4_1", m = "_boxy_1i7k4_153", h = "_l7_1i7k4_1", g = {
|
|
3
|
-
dots: e,
|
|
4
|
-
l5: t,
|
|
5
|
-
dotsTrace: n,
|
|
6
|
-
l1: r,
|
|
7
|
-
dotsOrbit: i,
|
|
8
|
-
l220: a,
|
|
9
|
-
l22: o,
|
|
10
|
-
dashes: s,
|
|
11
|
-
spinner: c,
|
|
12
|
-
l2: l,
|
|
13
|
-
swirl: u,
|
|
14
|
-
l3: d,
|
|
15
|
-
ball: f,
|
|
16
|
-
l9: p,
|
|
17
|
-
boxy: m,
|
|
18
|
-
l7: h
|
|
19
|
-
};
|
|
20
|
-
//#endregion
|
|
21
|
-
export { f as ball, m as boxy, s as dashes, g as default, e as dots, i as dotsOrbit, n as dotsTrace, r as l1, l as l2, o as l22, a as l220, d as l3, t as l5, h as l7, p as l9, c as spinner, u as swirl };
|