Skip to content

Commit 87b8d95

Browse files
lukehaaslukehaas
committed
add sass support
1 parent 440847b commit 87b8d95

16 files changed

+728
-39
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ index.html
55
jade/
66
script/
77
less/main.less
8+
.sass-cache

‎Gruntfile.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ module.exports = function(grunt) {
2323
ext: '.css'
2424
}
2525
},
26+
sass: {
27+
options: {
28+
sourcemap:'none'
29+
},
30+
src: {
31+
expand: true,
32+
cwd: 'sass/',
33+
src: ['**/*.scss'],
34+
dest: 'css/',
35+
ext: '.css'
36+
}
37+
},
2638
watch: {
2739
files: ['less/**/*.less','jade/**/*.jade'],
2840
tasks: ['default']
@@ -33,8 +45,11 @@ module.exports = function(grunt) {
3345

3446
grunt.loadNpmTasks('grunt-contrib-less');
3547

48+
grunt.loadNpmTasks('grunt-contrib-sass');
49+
3650
grunt.loadNpmTasks('grunt-contrib-watch');
3751

3852
grunt.registerTask('default', ['less','jade','watch']);
3953

40-
};
54+
55+
};

‎css/load1.css

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,6 @@
77
width: 1em;
88
height: 4em;
99
}
10-
.load1 .loader:before,
11-
.load1 .loader:after {
12-
position: absolute;
13-
top: 0;
14-
content: '';
15-
}
16-
.load1 .loader:before {
17-
left: -1.5em;
18-
-webkit-animation-delay: -0.32s;
19-
animation-delay: -0.32s;
20-
}
2110
.load1 .loader {
2211
color: #ffffff;
2312
text-indent: -9999em;
@@ -30,6 +19,17 @@
3019
-webkit-animation-delay: -0.16s;
3120
animation-delay: -0.16s;
3221
}
22+
.load1 .loader:before,
23+
.load1 .loader:after {
24+
position: absolute;
25+
top: 0;
26+
content: '';
27+
}
28+
.load1 .loader:before {
29+
left: -1.5em;
30+
-webkit-animation-delay: -0.32s;
31+
animation-delay: -0.32s;
32+
}
3333
.load1 .loader:after {
3434
left: 1.5em;
3535
}

‎css/load2.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
.load2 .loader:after {
44
border-radius: 50%;
55
}
6+
.load2 .loader {
7+
color: #ffffff;
8+
font-size: 11px;
9+
text-indent: -99999em;
10+
margin: 55px auto;
11+
position: relative;
12+
width: 10em;
13+
height: 10em;
14+
box-shadow: inset 0 0 0 1em;
15+
-webkit-transform: translateZ(0);
16+
-ms-transform: translateZ(0);
17+
transform: translateZ(0);
18+
}
619
.load2 .loader:before,
720
.load2 .loader:after {
821
position: absolute;
@@ -20,19 +33,6 @@
2033
-webkit-animation: load2 2s infinite ease 1.5s;
2134
animation: load2 2s infinite ease 1.5s;
2235
}
23-
.load2 .loader {
24-
color: #ffffff;
25-
font-size: 11px;
26-
text-indent: -99999em;
27-
margin: 55px auto;
28-
position: relative;
29-
width: 10em;
30-
height: 10em;
31-
box-shadow: inset 0 0 0 1em;
32-
-webkit-transform: translateZ(0);
33-
-ms-transform: translateZ(0);
34-
transform: translateZ(0);
35-
}
3636
.load2 .loader:after {
3737
width: 5.2em;
3838
height: 10.2em;

‎css/load7.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
.load7 .loader,
12
.load7 .loader:before,
2-
.load7 .loader:after,
3-
.load7 .loader {
3+
.load7 .loader:after {
44
border-radius: 50%;
55
width: 2.5em;
66
height: 2.5em;
@@ -21,6 +21,12 @@
2121
-webkit-animation-delay: -0.16s;
2222
animation-delay: -0.16s;
2323
}
24+
.load7 .loader:before,
25+
.load7 .loader:after {
26+
content: '';
27+
position: absolute;
28+
top: 0;
29+
}
2430
.load7 .loader:before {
2531
left: -3.5em;
2632
-webkit-animation-delay: -0.32s;
@@ -29,12 +35,6 @@
2935
.load7 .loader:after {
3036
left: 3.5em;
3137
}
32-
.load7 .loader:before,
33-
.load7 .loader:after {
34-
content: '';
35-
position: absolute;
36-
top: 0;
37-
}
3838
@-webkit-keyframes load7 {
3939
0%,
4040
80%,

‎css/load8.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.load8 .loader,
2+
.load8 .loader:after {
3+
border-radius: 50%;
4+
width: 10em;
5+
height: 10em;
6+
}
17
.load8 .loader {
28
margin: 60px auto;
39
font-size: 10px;
@@ -13,12 +19,6 @@
1319
-webkit-animation: load8 1.1s infinite linear;
1420
animation: load8 1.1s infinite linear;
1521
}
16-
.load8 .loader,
17-
.load8 .loader:after {
18-
border-radius: 50%;
19-
width: 10em;
20-
height: 10em;
21-
}
2222
@-webkit-keyframes load8 {
2323
0% {
2424
-webkit-transform: rotate(0deg);

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"grunt": "~0.4.4",
1313
"grunt-contrib-jade": "~0.11.0",
1414
"grunt-contrib-less": "^0.11.0",
15+
"grunt-contrib-sass": "^1.0.0",
1516
"grunt-contrib-watch": "^0.6.1"
1617
}
1718
}

‎sass/fallback.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* Import this if you are using modernizr (recommended)
2+
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
3+
*/
4+
5+
.no-cssanimations {
6+
7+
.load-container {
8+
9+
.loader {
10+
text-indent:0;
11+
text-align:center;
12+
color:#FFF;
13+
font-size:17px;
14+
background:none;
15+
border:0 none;
16+
width:auto;
17+
height:auto;
18+
margin:1em auto;
19+
overflow:visible;
20+
box-shadow:none;
21+
-webkit-animation:none;
22+
animation:none;
23+
24+
&:before,
25+
&:after {
26+
display:none;
27+
}
28+
29+
}
30+
31+
}
32+
33+
}
34+

‎sass/load1.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
$foreground: #FFF;
2+
3+
.load1 {
4+
5+
.loader,
6+
.loader:before,
7+
.loader:after {
8+
background:$foreground;
9+
-webkit-animation:load1 1s infinite ease-in-out;
10+
animation:load1 1s infinite ease-in-out;
11+
width:1em;
12+
height:4em;
13+
}
14+
15+
.loader {
16+
color:$foreground;
17+
text-indent:-9999em;
18+
margin:88px auto;
19+
position:relative;
20+
font-size:11px;
21+
-webkit-transform: translateZ(0);
22+
-ms-transform: translateZ(0);
23+
transform: translateZ(0);
24+
-webkit-animation-delay:-0.16s;
25+
animation-delay:-0.16s;
26+
27+
&:before,
28+
&:after {
29+
position:absolute;
30+
top:0;
31+
content:'';
32+
}
33+
34+
&:before {
35+
left:-1.5em;
36+
-webkit-animation-delay:-0.32s;
37+
animation-delay:-0.32s;
38+
}
39+
40+
&:after {
41+
left:1.5em;
42+
}
43+
44+
}
45+
46+
}
47+
48+
@mixin load1-frames {
49+
0%,
50+
80%,
51+
100% {
52+
box-shadow:0 0;
53+
height:4em;
54+
}
55+
56+
40% {
57+
box-shadow:0 -2em;
58+
height:5em;
59+
}
60+
}
61+
62+
@-webkit-keyframes load1 {@include load1-frames;}
63+
@keyframes load1 {@include load1-frames;}

‎sass/load2.scss

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
$background: hsl(179,88%,41%);
2+
$foreground: #FFF;
3+
4+
.load2 {
5+
6+
.loader,
7+
.loader:before,
8+
.loader:after {
9+
border-radius:50%;
10+
}
11+
12+
.loader {
13+
color:$foreground;
14+
font-size:11px;
15+
text-indent:-99999em;
16+
margin:55px auto;
17+
position:relative;
18+
width:10em;
19+
height:10em;
20+
box-shadow: inset 0 0 0 1em;
21+
-webkit-transform: translateZ(0);
22+
-ms-transform: translateZ(0);
23+
transform: translateZ(0);
24+
25+
&:before,
26+
&:after {
27+
position:absolute;
28+
content:'';
29+
}
30+
31+
&:before {
32+
width:5.2em;
33+
height:10.2em;
34+
background: $background;
35+
border-radius: 10.2em 0 0 10.2em;
36+
top:-0.1em;
37+
left:-0.1em;
38+
-webkit-transform-origin:5.2em 5.1em;
39+
transform-origin:5.2em 5.1em;
40+
-webkit-animation:load2 2s infinite ease 1.5s;
41+
animation:load2 2s infinite ease 1.5s;
42+
}
43+
44+
&:after {
45+
width:5.2em;
46+
height:10.2em;
47+
background: $background;
48+
border-radius: 0 10.2em 10.2em 0;
49+
top:-0.1em;
50+
left:5.1em;
51+
-webkit-transform-origin:0px 5.1em;
52+
transform-origin:0px 5.1em;
53+
-webkit-animation:load2 2s infinite ease;
54+
animation:load2 2s infinite ease;
55+
}
56+
57+
}
58+
59+
}
60+
61+
@mixin load2-frames() {
62+
63+
0% {
64+
-webkit-transform:rotate(0deg);
65+
transform:rotate(0deg);
66+
}
67+
68+
100% {
69+
-webkit-transform:rotate(360deg);
70+
transform:rotate(360deg);
71+
}
72+
73+
}
74+
75+
@-webkit-keyframes load2 {@include load2-frames;}
76+
@keyframes load2 {@include load2-frames;}

0 commit comments

Comments
 (0)