Skip to content

Commit 3b07cf6

Browse files
lukehaaslukehaas
committed
let box-shadow inherit colour instead of defining it
1 parent 6de80e3 commit 3b07cf6

File tree

5 files changed

+104
-99
lines changed

5 files changed

+104
-99
lines changed

‎less/load1.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
animation-delay:-0.32s;
1919
}
2020
.load1 .loader {
21+
color:@foreground;
2122
text-indent:-9999em;
2223
margin:88px auto;
2324
position:relative;
@@ -37,11 +38,11 @@
3738

3839
.load1-frames() {
3940
0%,80%,100% {
40-
box-shadow:0 0 @foreground;
41+
box-shadow:0 0;
4142
height:4em;
4243
}
4344
40% {
44-
box-shadow:0 -2em @foreground;
45+
box-shadow:0 -2em;
4546
height:5em;
4647
}
4748
}

‎less/load2.less‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@
2121
animation:load2 2s infinite ease 1.5s;
2222
}
2323
.load2 .loader {
24+
color:@foreground;
2425
font-size:11px;
2526
text-indent:-99999em;
2627
margin:55px auto;
2728
position:relative;
2829
width:10em;
2930
height:10em;
30-
box-shadow: inset 0 0 0 1em @foreground;
31+
box-shadow: inset 0 0 0 1em;
3132
-webkit-transform: translateZ(0);
3233
-ms-transform: translateZ(0);
3334
transform: translateZ(0);

‎less/load4.less‎

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@foreground: #FFF;
22

33
.load4 .loader {
4+
color:@foreground;
45
font-size:20px;
56
margin:100px auto;
67
width:1em;
@@ -19,83 +20,83 @@
1920

2021
.load4-frames() {
2122
0%,100% {
22-
box-shadow:0 -3em 0 0.2em @foreground,
23-
2em -2em 0 0em @foreground,
24-
3em 0 0 -1em @foreground,
25-
2em 2em 0 -1em @foreground,
26-
0 3em 0 -1em @foreground,
27-
-2em 2em 0 -1em @foreground,
28-
-3em 0 0 -1em @foreground,
29-
-2em -2em 0 0 @foreground;
23+
box-shadow:0 -3em 0 0.2em,
24+
2em -2em 0 0em,
25+
3em 0 0 -1em,
26+
2em 2em 0 -1em,
27+
0 3em 0 -1em,
28+
-2em 2em 0 -1em,
29+
-3em 0 0 -1em,
30+
-2em -2em 0 0;
3031
}
3132
12.5% {
32-
box-shadow:0 -3em 0 0 @foreground,
33-
2em -2em 0 0.2em @foreground,
34-
3em 0 0 0 @foreground,
35-
2em 2em 0 -1em @foreground,
36-
0 3em 0 -1em @foreground,
37-
-2em 2em 0 -1em @foreground,
38-
-3em 0 0 -1em @foreground,
39-
-2em -2em 0 -1em @foreground;
33+
box-shadow:0 -3em 0 0,
34+
2em -2em 0 0.2em,
35+
3em 0 0 0,
36+
2em 2em 0 -1em,
37+
0 3em 0 -1em,
38+
-2em 2em 0 -1em,
39+
-3em 0 0 -1em,
40+
-2em -2em 0 -1em;
4041
}
4142
25% {
42-
box-shadow:0 -3em 0 -0.5em @foreground,
43-
2em -2em 0 0 @foreground,
44-
3em 0 0 0.2em @foreground,
45-
2em 2em 0 0 @foreground,
46-
0 3em 0 -1em @foreground,
47-
-2em 2em 0 -1em @foreground,
48-
-3em 0 0 -1em @foreground,
49-
-2em -2em 0 -1em @foreground;
43+
box-shadow:0 -3em 0 -0.5em,
44+
2em -2em 0 0,
45+
3em 0 0 0.2em,
46+
2em 2em 0 0,
47+
0 3em 0 -1em,
48+
-2em 2em 0 -1em,
49+
-3em 0 0 -1em,
50+
-2em -2em 0 -1em;
5051
}
5152
37.5% {
52-
box-shadow:0 -3em 0 -1em @foreground,
53-
2em -2em 0 -1em @foreground,
54-
3em 0em 0 0 @foreground,
55-
2em 2em 0 0.2em @foreground,
56-
0 3em 0 0em @foreground,
57-
-2em 2em 0 -1em @foreground,
58-
-3em 0em 0 -1em @foreground,
59-
-2em -2em 0 -1em @foreground;
53+
box-shadow:0 -3em 0 -1em,
54+
2em -2em 0 -1em,
55+
3em 0em 0 0,
56+
2em 2em 0 0.2em,
57+
0 3em 0 0em,
58+
-2em 2em 0 -1em,
59+
-3em 0em 0 -1em,
60+
-2em -2em 0 -1em;
6061
}
6162
50% {
62-
box-shadow:0 -3em 0 -1em @foreground,
63-
2em -2em 0 -1em @foreground,
64-
3em 0 0 -1em @foreground,
65-
2em 2em 0 0em @foreground,
66-
0 3em 0 0.2em @foreground,
67-
-2em 2em 0 0 @foreground,
68-
-3em 0em 0 -1em @foreground,
69-
-2em -2em 0 -1em @foreground;
63+
box-shadow:0 -3em 0 -1em,
64+
2em -2em 0 -1em,
65+
3em 0 0 -1em,
66+
2em 2em 0 0em,
67+
0 3em 0 0.2em,
68+
-2em 2em 0 0,
69+
-3em 0em 0 -1em,
70+
-2em -2em 0 -1em;
7071
}
7172
62.5% {
72-
box-shadow:0 -3em 0 -1em @foreground,
73-
2em -2em 0 -1em @foreground,
74-
3em 0 0 -1em @foreground,
75-
2em 2em 0 -1em @foreground,
76-
0 3em 0 0 @foreground,
77-
-2em 2em 0 0.2em @foreground,
78-
-3em 0 0 0 @foreground,
79-
-2em -2em 0 -1em @foreground;
73+
box-shadow:0 -3em 0 -1em,
74+
2em -2em 0 -1em,
75+
3em 0 0 -1em,
76+
2em 2em 0 -1em,
77+
0 3em 0 0,
78+
-2em 2em 0 0.2em,
79+
-3em 0 0 0,
80+
-2em -2em 0 -1em;
8081
}
8182
75% {
82-
box-shadow:0em -3em 0 -1em @foreground,
83-
2em -2em 0 -1em @foreground,
84-
3em 0em 0 -1em @foreground,
85-
2em 2em 0 -1em @foreground,
86-
0 3em 0 -1em @foreground,
87-
-2em 2em 0 0 @foreground,
88-
-3em 0em 0 0.2em @foreground,
89-
-2em -2em 0 0 @foreground;
83+
box-shadow:0em -3em 0 -1em,
84+
2em -2em 0 -1em,
85+
3em 0em 0 -1em,
86+
2em 2em 0 -1em,
87+
0 3em 0 -1em,
88+
-2em 2em 0 0,
89+
-3em 0em 0 0.2em,
90+
-2em -2em 0 0;
9091
}
9192
87.5% {
92-
box-shadow:0em -3em 0 0 @foreground,
93-
2em -2em 0 -1em @foreground,
94-
3em 0 0 -1em @foreground,
95-
2em 2em 0 -1em @foreground,
96-
0 3em 0 -1em @foreground,
97-
-2em 2em 0 0 @foreground,
98-
-3em 0em 0 0 @foreground,
99-
-2em -2em 0 0.2em @foreground;
93+
box-shadow:0em -3em 0 0,
94+
2em -2em 0 -1em,
95+
3em 0 0 -1em,
96+
2em 2em 0 -1em,
97+
0 3em 0 -1em,
98+
-2em 2em 0 0,
99+
-3em 0em 0 0,
100+
-2em -2em 0 0.2em;
100101
}
101102
}

‎less/load6.less‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@foreground: #fff;
22

33
.load6 .loader {
4+
color:@foreground;
45
font-size:90px;
56
text-indent:-9999em;
67
overflow: hidden;
@@ -23,53 +24,53 @@
2324
-webkit-transform:rotate(0deg);
2425
transform:rotate(0deg);
2526
box-shadow:
26-
0 -0.83em 0 -0.4em @foreground,
27-
0 -0.83em 0 -0.42em @foreground,
28-
0 -0.83em 0 -0.44em @foreground,
29-
0 -0.83em 0 -0.46em @foreground,
30-
0 -0.83em 0 -0.477em @foreground;
27+
0 -0.83em 0 -0.4em,
28+
0 -0.83em 0 -0.42em,
29+
0 -0.83em 0 -0.44em,
30+
0 -0.83em 0 -0.46em,
31+
0 -0.83em 0 -0.477em;
3132
}
3233
5%, 95% {
3334
box-shadow:
34-
0 -0.83em 0 -0.4em @foreground,
35-
0 -0.83em 0 -0.42em @foreground,
36-
0 -0.83em 0 -0.44em @foreground,
37-
0 -0.83em 0 -0.46em @foreground,
38-
0 -0.83em 0 -0.477em @foreground;
35+
0 -0.83em 0 -0.4em,
36+
0 -0.83em 0 -0.42em,
37+
0 -0.83em 0 -0.44em,
38+
0 -0.83em 0 -0.46em,
39+
0 -0.83em 0 -0.477em;
3940
}
4041
10%,
4142
59% {
4243
box-shadow:
43-
0 -0.83em 0 -0.4em @foreground,
44-
-0.087em -0.825em 0 -0.42em @foreground,
45-
-0.173em -0.812em 0 -0.44em @foreground,
46-
-0.256em -0.789em 0 -0.46em @foreground,
47-
-0.297em -0.775em 0 -0.477em @foreground;
44+
0 -0.83em 0 -0.4em,
45+
-0.087em -0.825em 0 -0.42em,
46+
-0.173em -0.812em 0 -0.44em,
47+
-0.256em -0.789em 0 -0.46em,
48+
-0.297em -0.775em 0 -0.477em;
4849
}
4950
20% {
5051
box-shadow:
51-
0 -0.83em 0 -0.4em @foreground,
52-
-0.338em -0.758em 0 -0.42em @foreground,
53-
-0.555em -0.617em 0 -0.44em @foreground,
54-
-0.671em -0.488em 0 -0.46em @foreground,
55-
-0.749em -0.34em 0 -0.477em @foreground;
52+
0 -0.83em 0 -0.4em,
53+
-0.338em -0.758em 0 -0.42em,
54+
-0.555em -0.617em 0 -0.44em,
55+
-0.671em -0.488em 0 -0.46em,
56+
-0.749em -0.34em 0 -0.477em;
5657
}
5758
38% {
5859
box-shadow:
59-
0 -0.83em 0 -0.4em @foreground,
60-
-0.377em -0.74em 0 -0.42em @foreground,
61-
-0.645em -0.522em 0 -0.44em @foreground,
62-
-0.775em -0.297em 0 -0.46em @foreground,
63-
-0.82em -0.09em 0 -0.477em @foreground;
60+
0 -0.83em 0 -0.4em,
61+
-0.377em -0.74em 0 -0.42em,
62+
-0.645em -0.522em 0 -0.44em,
63+
-0.775em -0.297em 0 -0.46em,
64+
-0.82em -0.09em 0 -0.477em;
6465
}
6566
100% {
6667
-webkit-transform:rotate(360deg);
6768
transform:rotate(360deg);
6869
box-shadow:
69-
0 -0.83em 0 -0.4em @foreground,
70-
0 -0.83em 0 -0.42em @foreground,
71-
0 -0.83em 0 -0.44em @foreground,
72-
0 -0.83em 0 -0.46em @foreground,
73-
0 -0.83em 0 -0.477em @foreground;
70+
0 -0.83em 0 -0.4em,
71+
0 -0.83em 0 -0.42em,
72+
0 -0.83em 0 -0.44em,
73+
0 -0.83em 0 -0.46em,
74+
0 -0.83em 0 -0.477em;
7475
}
7576
}

‎less/load7.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
animation:load7 1.8s infinite ease-in-out;
1111
}
1212
.load7 .loader {
13+
color:@foreground;
1314
font-size:10px;
1415
margin:80px auto;
1516
position:relative;
@@ -39,9 +40,9 @@
3940

4041
.load7-frames() {
4142
0%,80%,100% {
42-
box-shadow:0 2.5em 0 -1.3em @foreground;
43+
box-shadow:0 2.5em 0 -1.3em;
4344
}
4445
40% {
45-
box-shadow:0 2.5em 0 0 @foreground;
46+
box-shadow:0 2.5em 0 0;
4647
}
4748
}

0 commit comments

Comments
 (0)