Skip to content

Commit f0fcf7b

Browse files
nzbinnzbin
committed
refactor: rebuild with sass module api
1 parent b286792 commit f0fcf7b

26 files changed

+298
-235
lines changed

‎_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'scss/three-dots.scss';

‎dist/three-dots.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/three-dots.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@
2929
"start": "run-p build watch",
3030
"build": "run-s clean sass sassmin postcss copy",
3131
"clean": "rimraf dist",
32-
"sass": "sass --style=expanded sass/three-dots.scss dist/three-dots.css",
33-
"sassmin": "sass --style=compressed sass/three-dots.scss dist/three-dots.min.css",
32+
"sass": "sass --style=expanded scss/three-dots.scss dist/three-dots.css",
33+
"sassmin": "sass --style=compressed scss/three-dots.scss dist/three-dots.min.css",
3434
"copy": "cp dist/three-dots.css docs/css",
3535
"postcss": "postcss -r dist/*.css --map",
3636
"watch": "onchange sass -- run-s sass copy",
37-
"lint": "stylelint \"sass/**/*.scss\" --fix",
37+
"lint": "stylelint \"scss/**/*.scss\" --fix",
3838
"prepublish": "npm run build"
3939
},
4040
"devDependencies": {

‎scss/_dot-bouncing.scss

+7-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@
55
* ==============================================
66
*/
77

8+
@use './variables';
9+
@use './mixins';
10+
811
$d: 20px;
912

1013
.dot-bouncing {
1114
position: relative;
12-
height: $dot-height;
15+
height: variables.$dot-height;
1316
font-size: 10px;
1417

1518
&::before {
@@ -22,7 +25,7 @@ $d: 20px;
2225

2326
@keyframes dot-bouncing {
2427
0% {
25-
top: -$d;
28+
top: - $d;
2629
animation-timing-function: ease-in;
2730
}
2831

@@ -41,10 +44,10 @@ $d: 20px;
4144
}
4245

4346
90% {
44-
top: -$d;
47+
top: - $d;
4548
}
4649

4750
100% {
48-
top: -$d;
51+
top: - $d;
4952
}
5053
}

‎scss/_dot-bricks.scss

+50-47
Original file line numberDiff line numberDiff line change
@@ -4,117 +4,120 @@
44
* ==============================================
55
*/
66

7-
$spacing: $dot-width + 6px;
7+
@use './variables';
8+
@use './mixins';
9+
10+
$spacing: variables.$dot-width + 6px;
811
$top-pos: $spacing * .5;
912
$left-pos: -9999px;
10-
$x1: -$left-pos - $top-pos;
11-
$x2: -$left-pos - $top-pos + $spacing;
13+
$x1: - $left-pos - $top-pos;
14+
$x2: - $left-pos - $top-pos + $spacing;
1215
$y1: 0;
13-
$y2: -$spacing;
16+
$y2: - $spacing;
1417

1518
.dot-bricks {
1619
position: relative;
1720
top: $top-pos;
1821
left: $left-pos;
1922

20-
@include dot;
23+
@include mixins.dot;
2124

2225
box-shadow:
23-
$x1 $y2 0 0 $dot-before-color,
24-
$x1 $y1 0 0 $dot-color,
25-
$x2 $y1 0 0 $dot-after-color;
26+
$x1 $y2 0 0 variables.$dot-before-color,
27+
$x1 $y1 0 0 variables.$dot-color,
28+
$x2 $y1 0 0 variables.$dot-after-color;
2629
animation: dot-bricks 2s infinite ease;
2730
}
2831

2932
@keyframes dot-bricks {
3033
0% {
3134
box-shadow:
32-
$x1 $y2 0 0 $dot-before-color,
33-
$x1 $y1 0 0 $dot-color,
34-
$x2 $y1 0 0 $dot-after-color;
35+
$x1 $y2 0 0 variables.$dot-before-color,
36+
$x1 $y1 0 0 variables.$dot-color,
37+
$x2 $y1 0 0 variables.$dot-after-color;
3538
}
3639

3740
8.333% {
3841
box-shadow:
39-
$x2 $y2 0 0 $dot-before-color,
40-
$x1 $y1 0 0 $dot-color,
41-
$x2 $y1 0 0 $dot-after-color;
42+
$x2 $y2 0 0 variables.$dot-before-color,
43+
$x1 $y1 0 0 variables.$dot-color,
44+
$x2 $y1 0 0 variables.$dot-after-color;
4245
}
4346

4447
16.667% {
4548
box-shadow:
46-
$x2 $y2 0 0 $dot-before-color,
47-
$x1 $y2 0 0 $dot-color,
48-
$x2 $y1 0 0 $dot-after-color;
49+
$x2 $y2 0 0 variables.$dot-before-color,
50+
$x1 $y2 0 0 variables.$dot-color,
51+
$x2 $y1 0 0 variables.$dot-after-color;
4952
}
5053

5154
25% {
5255
box-shadow:
53-
$x2 $y2 0 0 $dot-before-color,
54-
$x1 $y2 0 0 $dot-color,
55-
$x1 $y1 0 0 $dot-after-color;
56+
$x2 $y2 0 0 variables.$dot-before-color,
57+
$x1 $y2 0 0 variables.$dot-color,
58+
$x1 $y1 0 0 variables.$dot-after-color;
5659
}
5760

5861
33.333% {
5962
box-shadow:
60-
$x2 $y1 0 0 $dot-before-color,
61-
$x1 $y2 0 0 $dot-color,
62-
$x1 $y1 0 0 $dot-after-color;
63+
$x2 $y1 0 0 variables.$dot-before-color,
64+
$x1 $y2 0 0 variables.$dot-color,
65+
$x1 $y1 0 0 variables.$dot-after-color;
6366
}
6467

6568
41.667% {
6669
box-shadow:
67-
$x2 $y1 0 0 $dot-before-color,
68-
$x2 $y2 0 0 $dot-color,
69-
$x1 $y1 0 0 $dot-after-color;
70+
$x2 $y1 0 0 variables.$dot-before-color,
71+
$x2 $y2 0 0 variables.$dot-color,
72+
$x1 $y1 0 0 variables.$dot-after-color;
7073
}
7174

7275
50% {
7376
box-shadow:
74-
$x2 $y1 0 0 $dot-before-color,
75-
$x2 $y2 0 0 $dot-color,
76-
$x1 $y2 0 0 $dot-after-color;
77+
$x2 $y1 0 0 variables.$dot-before-color,
78+
$x2 $y2 0 0 variables.$dot-color,
79+
$x1 $y2 0 0 variables.$dot-after-color;
7780
}
7881

7982
58.333% {
8083
box-shadow:
81-
$x1 $y1 0 0 $dot-before-color,
82-
$x2 $y2 0 0 $dot-color,
83-
$x1 $y2 0 0 $dot-after-color;
84+
$x1 $y1 0 0 variables.$dot-before-color,
85+
$x2 $y2 0 0 variables.$dot-color,
86+
$x1 $y2 0 0 variables.$dot-after-color;
8487
}
8588

8689
66.666% {
8790
box-shadow:
88-
$x1 $y1 0 0 $dot-before-color,
89-
$x2 $y1 0 0 $dot-color,
90-
$x1 $y2 0 0 $dot-after-color;
91+
$x1 $y1 0 0 variables.$dot-before-color,
92+
$x2 $y1 0 0 variables.$dot-color,
93+
$x1 $y2 0 0 variables.$dot-after-color;
9194
}
9295

9396
75% {
9497
box-shadow:
95-
$x1 $y1 0 0 $dot-before-color,
96-
$x2 $y1 0 0 $dot-color,
97-
$x2 $y2 0 0 $dot-after-color;
98+
$x1 $y1 0 0 variables.$dot-before-color,
99+
$x2 $y1 0 0 variables.$dot-color,
100+
$x2 $y2 0 0 variables.$dot-after-color;
98101
}
99102

100103
83.333% {
101104
box-shadow:
102-
$x1 $y2 0 0 $dot-before-color,
103-
$x2 $y1 0 0 $dot-color,
104-
$x2 $y2 0 0 $dot-after-color;
105+
$x1 $y2 0 0 variables.$dot-before-color,
106+
$x2 $y1 0 0 variables.$dot-color,
107+
$x2 $y2 0 0 variables.$dot-after-color;
105108
}
106109

107110
91.667% {
108111
box-shadow:
109-
$x1 $y2 0 0 $dot-before-color,
110-
$x1 $y1 0 0 $dot-color,
111-
$x2 $y2 0 0 $dot-after-color;
112+
$x1 $y2 0 0 variables.$dot-before-color,
113+
$x1 $y1 0 0 variables.$dot-color,
114+
$x2 $y2 0 0 variables.$dot-after-color;
112115
}
113116

114117
100% {
115118
box-shadow:
116-
$x1 $y2 0 0 $dot-before-color,
117-
$x1 $y1 0 0 $dot-color,
118-
$x2 $y1 0 0 $dot-after-color;
119+
$x1 $y2 0 0 variables.$dot-before-color,
120+
$x1 $y1 0 0 variables.$dot-color,
121+
$x2 $y1 0 0 variables.$dot-after-color;
119122
}
120123
}

‎scss/_dot-carousel.scss

+19-16
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,46 @@
44
* ==============================================
55
*/
66

7+
@use './variables';
8+
@use './mixins';
9+
710
$left-pos: -9999px;
8-
$x1: -$left-pos - $dot-spacing;
9-
$x2: -$left-pos;
10-
$x3: -$left-pos + $dot-spacing;
11+
$x1: - $left-pos - variables.$dot-spacing;
12+
$x2: - $left-pos;
13+
$x3: - $left-pos + variables.$dot-spacing;
1114

1215
.dot-carousel {
1316
position: relative;
1417
left: $left-pos;
1518

16-
@include dot;
19+
@include mixins.dot;
1720

1821
box-shadow:
19-
$x1 0 0 0 $dot-before-color,
20-
$x2 0 0 0 $dot-color,
21-
$x3 0 0 0 $dot-after-color;
22+
$x1 0 0 0 variables.$dot-before-color,
23+
$x2 0 0 0 variables.$dot-color,
24+
$x3 0 0 0 variables.$dot-after-color;
2225
animation: dot-carousel 1.5s infinite linear;
2326
}
2427

2528
@keyframes dot-carousel {
2629
0% {
2730
box-shadow:
28-
$x1 0 0 -1px $dot-before-color,
29-
$x2 0 0 1px $dot-color,
30-
$x3 0 0 -1px $dot-after-color;
31+
$x1 0 0 -1px variables.$dot-before-color,
32+
$x2 0 0 1px variables.$dot-color,
33+
$x3 0 0 -1px variables.$dot-after-color;
3134
}
3235

3336
50% {
3437
box-shadow:
35-
$x3 0 0 -1px $dot-before-color,
36-
$x1 0 0 -1px $dot-color,
37-
$x2 0 0 1px $dot-after-color;
38+
$x3 0 0 -1px variables.$dot-before-color,
39+
$x1 0 0 -1px variables.$dot-color,
40+
$x2 0 0 1px variables.$dot-after-color;
3841
}
3942

4043
100% {
4144
box-shadow:
42-
$x2 0 0 1px $dot-before-color,
43-
$x3 0 0 -1px $dot-color,
44-
$x1 0 0 -1px $dot-after-color;
45+
$x2 0 0 1px variables.$dot-before-color,
46+
$x3 0 0 -1px variables.$dot-color,
47+
$x1 0 0 -1px variables.$dot-after-color;
4548
}
4649
}

‎scss/_dot-collision.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@
44
* ==============================================
55
*/
66

7+
@use './variables';
8+
@use './mixins';
9+
710
.dot-collision {
811
position: relative;
912

10-
@include dot;
13+
@include mixins.dot;
1114

1215
&::before,
1316
&::after {
@@ -18,17 +21,17 @@
1821
}
1922

2023
&::before {
21-
left: -$dot-width;
24+
left: - variables.$dot-width;
2225

23-
@include dot($bg-color: $dot-before-color);
26+
@include mixins.dot($bg-color: variables.$dot-before-color);
2427

2528
animation: dot-collision-before 2s infinite ease-in;
2629
}
2730

2831
&::after {
29-
left: $dot-width;
32+
left: variables.$dot-width;
3033

31-
@include dot($bg-color: $dot-after-color);
34+
@include mixins.dot($bg-color: variables.$dot-after-color);
3235

3336
animation: dot-collision-after 2s infinite ease-in;
3437
animation-delay: 1s;
@@ -44,7 +47,7 @@
4447
}
4548

4649
25% {
47-
transform: translateX(-$dot-spacing);
50+
transform: translateX(- variables.$dot-spacing);
4851
}
4952
}
5053

@@ -57,6 +60,6 @@
5760
}
5861

5962
25% {
60-
transform: translateX($dot-spacing);
63+
transform: translateX(variables.$dot-spacing);
6164
}
6265
}

‎scss/_dot-elastic.scss

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@
44
* ==============================================
55
*/
66

7+
@use './variables';
8+
@use './mixins';
9+
710
.dot-elastic {
811
position: relative;
912

10-
@include dot;
13+
@include mixins.dot;
1114

1215
animation: dot-elastic 1s infinite linear;
1316

@@ -20,17 +23,17 @@
2023
}
2124

2225
&::before {
23-
left: -$dot-spacing;
26+
left: - variables.$dot-spacing;
2427

25-
@include dot($bg-color: $dot-before-color);
28+
@include mixins.dot($bg-color: variables.$dot-before-color);
2629

2730
animation: dot-elastic-before 1s infinite linear;
2831
}
2932

3033
&::after {
31-
left: $dot-spacing;
34+
left: variables.$dot-spacing;
3235

33-
@include dot($bg-color: $dot-after-color);
36+
@include mixins.dot($bg-color: variables.$dot-after-color);
3437

3538
animation: dot-elastic-after 1s infinite linear;
3639
}

0 commit comments

Comments
 (0)