Skip to content

Commit ad7bfc0

Browse files
zbryiktzbryikt
committed
- generate dist files for shapes (shape.css) and control kits (ctrl.css). use utils.css to replace loading.utils.css while still keep the old name for backward compatibility.
 - upgrade dev dependency `fedep` - bump version
1 parent 29bbaf0 commit ad7bfc0

File tree

11 files changed

+5786
-1721
lines changed

11 files changed

+5786
-1721
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Change Logs
22

3+
## v3.2.1
4+
5+
- generate dist files for shapes (`shape.css`) and control kits (`ctrl.css`). use `utils.css` to replace `loading.utils.css` while still keep the old name for backward compatibility.
6+
7+
38
## v3.2.0
49

510
- add `important` in ctrl classes

‎build‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,18 @@ echo "build src/shape.styl -> dist/shape.css ..."
88
echo "build animations..."
99
./node_modules/.bin/lsc tool/build-css.ls
1010

11-
echo "merge css files into loading.css / loading.utils.css ..."
11+
echo "merge css files into loading.css / utils.css ..."
1212
cat dist/shape.css dist/ctrl.css dist/loading.css > dist/loading-bundle.css
1313
mv dist/loading-bundle.css dist/loading.css
14-
cat dist/shape.css dist/ctrl.css > dist/loading.utils.css
15-
echo "minifying loading.css / loading.utils.css ..."
14+
cat dist/shape.css dist/ctrl.css > dist/utils.css
15+
echo "minifying loading.css / utils.css ..."
1616
./node_modules/.bin/uglifycss dist/loading.css > dist/loading.min.css
17-
./node_modules/.bin/uglifycss dist/loading.utils.css > dist/loading.utils.min.css
17+
./node_modules/.bin/uglifycss dist/utils.css > dist/utils.min.css
18+
./node_modules/.bin/uglifycss dist/shape.css > dist/shape.min.css
19+
./node_modules/.bin/uglifycss dist/ctrl.css > dist/ctrl.min.css
20+
echo "copy utils to loading.utils for backward compatibility ..."
21+
cp dist/utils.css dist/loading.utils.css
22+
cp dist/utils.min.css dist/loading.utils.min.css
1823

1924
echo "merge css files into lite.css ..."
2025
cat dist/shape.css dist/lite.css > dist/lite-bundle.css
@@ -24,7 +29,5 @@ echo "minifying lite.css ..."
2429

2530
echo "zipping..."
2631
zip -r dist/loading-css.zip dist/loading.min.css dist/loading.utils.min.css
27-
echo "clean up intermediate files..."
28-
rm -f dist/ctrl.css dist/shape.css
2932

3033
echo "done."

‎dist/ctrl.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.ld.reverse {
2+
animation-direction: reverse !important;
3+
}
4+
.ld.xp15 {
5+
animation-duration: 0.15s !important;
6+
}
7+
.ld.xp35 {
8+
animation-duration: 0.35s !important;
9+
}
10+
.ld.xhalf {
11+
animation-duration: 0.5s !important;
12+
}
13+
.ld.x1 {
14+
animation-duration: 1s !important;
15+
}
16+
.ld.x2 {
17+
animation-duration: 2s !important;
18+
}
19+
.ld.x4 {
20+
animation-duration: 4s !important;
21+
}
22+
.ld.running {
23+
animation-play-state: running !important;
24+
}
25+
.ld.paused {
26+
animation-play-state: paused !important;
27+
}
28+
.ld.f00 {
29+
animation-delay: 0s !important;
30+
}
31+
.ld.f01 {
32+
animation-delay: -0.1s !important;
33+
}
34+
.ld.f02 {
35+
animation-delay: -0.2s !important;
36+
}
37+
.ld.f03 {
38+
animation-delay: -0.3s !important;
39+
}
40+
.ld.f04 {
41+
animation-delay: -0.4s !important;
42+
}
43+
.ld.f05 {
44+
animation-delay: -0.5s !important;
45+
}
46+
.ld.f06 {
47+
animation-delay: -0.6s !important;
48+
}
49+
.ld.f07 {
50+
animation-delay: -0.7s !important;
51+
}
52+
.ld.f08 {
53+
animation-delay: -0.8s !important;
54+
}
55+
.ld.f09 {
56+
animation-delay: -0.9s !important;
57+
}
58+
.ld.f10 {
59+
animation-delay: -1s !important;
60+
}

‎dist/ctrl.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/loading-css.zip‎

0 Bytes
Binary file not shown.

‎dist/shape.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
with old method, spinner will shift when rotating if font-size contains floating point ( such as 22.5px ).
3+
here we use 2em in width and height, scaling back to 1em with transform: scale(.5) to prevent this effect.
4+
*/
5+
.ld-ball,
6+
.ld-ring,
7+
.ld-hourglass,
8+
.ld-loader,
9+
.ld-cross,
10+
.ld-square,
11+
.ld-pie,
12+
.ld-spinner {
13+
width: 1em;
14+
height: 1em;
15+
position: relative;
16+
color: inherit;
17+
display: inline-block;
18+
box-sizing: content-box;
19+
}
20+
.ld-ball:after,
21+
.ld-ring:after,
22+
.ld-hourglass:after,
23+
.ld-loader:after,
24+
.ld-cross:after,
25+
.ld-square:after,
26+
.ld-pie:after,
27+
.ld-spinner:after {
28+
content: " ";
29+
display: block;
30+
width: 2em;
31+
height: 2em;
32+
box-sizing: border-box;
33+
transform-origin: 0em 0em;
34+
transform: translateZ(0) scale(0.5);
35+
backface-visibility: hidden;
36+
}
37+
.ld-ring:after {
38+
border-radius: 50%;
39+
border: 0.3em solid currentColor;
40+
border-left-color: transparent;
41+
}
42+
.ld-ball:after {
43+
border-radius: 50%;
44+
background: currentColor;
45+
}
46+
.ld-hourglass:after {
47+
border-radius: 50%;
48+
border: 1em solid currentColor;
49+
border-left-color: transparent;
50+
border-right-color: transparent;
51+
}
52+
.ld-cross:after {
53+
position: absolute;
54+
height: 0.5em;
55+
transform: translateZ(0) scale(0.5) translate(0, 0.75em);
56+
background: currentColor;
57+
}
58+
.ld-cross:before {
59+
content: " ";
60+
display: block;
61+
width: 0.5em;
62+
height: 2em;
63+
box-sizing: border-box;
64+
transform-origin: 0em 0em;
65+
backface-visibility: hidden;
66+
position: absolute;
67+
width: 0.5em;
68+
transform: translateZ(0) scale(0.5) translate(0.75em, 0);
69+
background: currentColor;
70+
}
71+
.ld-square:after {
72+
background: currentColor;
73+
}
74+
.ld-pie:after {
75+
border-radius: 50%;
76+
border: 1em solid currentColor;
77+
border-left-color: transparent;
78+
}
79+
.ld-spinner:after {
80+
position: absolute;
81+
width: 0.4em;
82+
height: 0.4em;
83+
transform: translateZ(0) scale(0.5) translate(0.8em, 0.8em);
84+
border-radius: 50%;
85+
background: none;
86+
box-shadow: 0 1em 0 currentColor,0 -1em 0 currentColor,1em 0 0 currentColor,-1em 0 0 currentColor,.70710678em .70710678em 0 currentColor,-.70710678em .70710678em 0 currentColor,.70710678em -.70710678em 0 currentColor,-.70710678em -.70710678em 0 currentColor;
87+
}
88+
.ld-loader {
89+
background-size: cover;
90+
}

‎dist/shape.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utils.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/*
2+
with old method, spinner will shift when rotating if font-size contains floating point ( such as 22.5px ).
3+
here we use 2em in width and height, scaling back to 1em with transform: scale(.5) to prevent this effect.
4+
*/
5+
.ld-ball,
6+
.ld-ring,
7+
.ld-hourglass,
8+
.ld-loader,
9+
.ld-cross,
10+
.ld-square,
11+
.ld-pie,
12+
.ld-spinner {
13+
width: 1em;
14+
height: 1em;
15+
position: relative;
16+
color: inherit;
17+
display: inline-block;
18+
box-sizing: content-box;
19+
}
20+
.ld-ball:after,
21+
.ld-ring:after,
22+
.ld-hourglass:after,
23+
.ld-loader:after,
24+
.ld-cross:after,
25+
.ld-square:after,
26+
.ld-pie:after,
27+
.ld-spinner:after {
28+
content: " ";
29+
display: block;
30+
width: 2em;
31+
height: 2em;
32+
box-sizing: border-box;
33+
transform-origin: 0em 0em;
34+
transform: translateZ(0) scale(0.5);
35+
backface-visibility: hidden;
36+
}
37+
.ld-ring:after {
38+
border-radius: 50%;
39+
border: 0.3em solid currentColor;
40+
border-left-color: transparent;
41+
}
42+
.ld-ball:after {
43+
border-radius: 50%;
44+
background: currentColor;
45+
}
46+
.ld-hourglass:after {
47+
border-radius: 50%;
48+
border: 1em solid currentColor;
49+
border-left-color: transparent;
50+
border-right-color: transparent;
51+
}
52+
.ld-cross:after {
53+
position: absolute;
54+
height: 0.5em;
55+
transform: translateZ(0) scale(0.5) translate(0, 0.75em);
56+
background: currentColor;
57+
}
58+
.ld-cross:before {
59+
content: " ";
60+
display: block;
61+
width: 0.5em;
62+
height: 2em;
63+
box-sizing: border-box;
64+
transform-origin: 0em 0em;
65+
backface-visibility: hidden;
66+
position: absolute;
67+
width: 0.5em;
68+
transform: translateZ(0) scale(0.5) translate(0.75em, 0);
69+
background: currentColor;
70+
}
71+
.ld-square:after {
72+
background: currentColor;
73+
}
74+
.ld-pie:after {
75+
border-radius: 50%;
76+
border: 1em solid currentColor;
77+
border-left-color: transparent;
78+
}
79+
.ld-spinner:after {
80+
position: absolute;
81+
width: 0.4em;
82+
height: 0.4em;
83+
transform: translateZ(0) scale(0.5) translate(0.8em, 0.8em);
84+
border-radius: 50%;
85+
background: none;
86+
box-shadow: 0 1em 0 currentColor,0 -1em 0 currentColor,1em 0 0 currentColor,-1em 0 0 currentColor,.70710678em .70710678em 0 currentColor,-.70710678em .70710678em 0 currentColor,.70710678em -.70710678em 0 currentColor,-.70710678em -.70710678em 0 currentColor;
87+
}
88+
.ld-loader {
89+
background-size: cover;
90+
}
91+
.ld.reverse {
92+
animation-direction: reverse !important;
93+
}
94+
.ld.xp15 {
95+
animation-duration: 0.15s !important;
96+
}
97+
.ld.xp35 {
98+
animation-duration: 0.35s !important;
99+
}
100+
.ld.xhalf {
101+
animation-duration: 0.5s !important;
102+
}
103+
.ld.x1 {
104+
animation-duration: 1s !important;
105+
}
106+
.ld.x2 {
107+
animation-duration: 2s !important;
108+
}
109+
.ld.x4 {
110+
animation-duration: 4s !important;
111+
}
112+
.ld.running {
113+
animation-play-state: running !important;
114+
}
115+
.ld.paused {
116+
animation-play-state: paused !important;
117+
}
118+
.ld.f00 {
119+
animation-delay: 0s !important;
120+
}
121+
.ld.f01 {
122+
animation-delay: -0.1s !important;
123+
}
124+
.ld.f02 {
125+
animation-delay: -0.2s !important;
126+
}
127+
.ld.f03 {
128+
animation-delay: -0.3s !important;
129+
}
130+
.ld.f04 {
131+
animation-delay: -0.4s !important;
132+
}
133+
.ld.f05 {
134+
animation-delay: -0.5s !important;
135+
}
136+
.ld.f06 {
137+
animation-delay: -0.6s !important;
138+
}
139+
.ld.f07 {
140+
animation-delay: -0.7s !important;
141+
}
142+
.ld.f08 {
143+
animation-delay: -0.8s !important;
144+
}
145+
.ld.f09 {
146+
animation-delay: -0.9s !important;
147+
}
148+
.ld.f10 {
149+
animation-delay: -1s !important;
150+
}

‎dist/utils.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)