Skip to content

Commit 4b6ee9d

Browse files
committed
Move themes
1 parent 5862493 commit 4b6ee9d

11 files changed

Lines changed: 265 additions & 1 deletion

Gruntfile.coffee

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ module.exports = (grunt) ->
4646

4747
themes:
4848
src: 'templates/*.tmpl.css'
49-
dest: '.'
49+
dest: 'themes'
5050

5151
grunt.loadNpmTasks 'grunt-contrib-watch'
5252
grunt.loadNpmTasks 'grunt-contrib-uglify'

themes/pace-theme-bounce.css

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
// This is a compiled file, you should be editing the file in templates/
2+
.pace {
3+
width: 140px;
4+
height: 300px;
5+
position: fixed;
6+
top: -90px;
7+
right: -20px;
8+
z-index: 100;
9+
-webkit-transform: scale(0);
10+
-moz-transform: scale(0);
11+
-ms-transform: scale(0);
12+
-o-transform: scale(0);
13+
transform: scale(0);
14+
opacity: 0;
15+
-webkit-transition: all 2s linear 0s;
16+
-moz-transition: all 2s linear 0s;
17+
transition: all 2s linear 0s;
18+
cursor: pointer;
19+
}
20+
21+
.pace.pace-active {
22+
-webkit-transform: scale(.25);
23+
-moz-transform: scale(.25);
24+
-ms-transform: scale(.25);
25+
-o-transform: scale(.25);
26+
transform: scale(.25);
27+
opacity: 1;
28+
cursor: pointer;
29+
}
30+
31+
.pace .pace-activity {
32+
width: 140px;
33+
height: 140px;
34+
border-radius: 70px;
35+
background: #29d;
36+
position: absolute;
37+
top: 0;
38+
z-index: 11;
39+
-webkit-animation: pace-bounce 1s infinite;
40+
-moz-animation: pace-bounce 1s infinite;
41+
-o-animation: pace-bounce 1s infinite;
42+
-ms-animation: pace-bounce 1s infinite;
43+
animation: pace-bounce 1s infinite;
44+
cursor: pointer;
45+
}
46+
47+
.pace .pace-progress {
48+
position: absolute;
49+
display: block;
50+
left: 50%;
51+
bottom: 0;
52+
z-index: 10;
53+
margin-left: -30px;
54+
width: 60px;
55+
height: 75px;
56+
background: rgba(20, 20, 20, .1);
57+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
58+
border-radius: 30px / 40px;
59+
-webkit-transform: scaleY(.3);
60+
-moz-transform: scaleY(.3);
61+
-ms-transform: scaleY(.3);
62+
-o-transform: scaleY(.3);
63+
transform: scaleY(.3);
64+
-webkit-animation: pace-compress 1s infinite;
65+
-moz-animation: pace-compress 1s infinite;
66+
-o-animation: pace-compress 1s infinite;
67+
-ms-animation: pace-compress 1s infinite;
68+
animation: pace-compress 1s infinite;
69+
}
70+
71+
@-webkit-keyframes pace-bounce {
72+
0% {
73+
top: 0;
74+
-webkit-animation-timing-function: ease-in;
75+
}
76+
40% {}
77+
50% {
78+
top: 140px;
79+
height: 140px;
80+
-webkit-animation-timing-function: ease-out;
81+
}
82+
55% {
83+
top: 160px;
84+
height: 120px;
85+
border-radius: 70px / 60px;
86+
-webkit-animation-timing-function: ease-in;
87+
}
88+
65% {
89+
top: 120px;
90+
height: 140px;
91+
border-radius: 70px;
92+
-webkit-animation-timing-function: ease-out;
93+
}
94+
95% {
95+
top: 0;
96+
-webkit-animation-timing-function: ease-in;
97+
}
98+
100% {
99+
top: 0;
100+
-webkit-animation-timing-function: ease-in;
101+
}
102+
}
103+
104+
@-moz-keyframes pace-bounce {
105+
0% {
106+
top: 0;
107+
-moz-animation-timing-function: ease-in;
108+
}
109+
40% {}
110+
50% {
111+
top: 140px;
112+
height: 140px;
113+
-moz-animation-timing-function: ease-out;
114+
}
115+
55% {
116+
top: 160px;
117+
height: 120px;
118+
border-radius: 70px / 60px;
119+
-moz-animation-timing-function: ease-in;
120+
}
121+
65% {
122+
top: 120px;
123+
height: 140px;
124+
border-radius: 70px;
125+
-moz-animation-timing-function: ease-out;}
126+
95% {
127+
top: 0;
128+
-moz-animation-timing-function: ease-in;
129+
}
130+
100% {top: 0;
131+
-moz-animation-timing-function: ease-in;
132+
}
133+
}
134+
135+
@keyframes pace-bounce {
136+
0% {
137+
top: 0;
138+
animation-timing-function: ease-in;
139+
}
140+
50% {
141+
top: 140px;
142+
height: 140px;
143+
animation-timing-function: ease-out;
144+
}
145+
55% {
146+
top: 160px;
147+
height: 120px;
148+
border-radius: 70px / 60px;
149+
animation-timing-function: ease-in;
150+
}
151+
65% {
152+
top: 120px;
153+
height: 140px;
154+
border-radius: 70px;
155+
animation-timing-function: ease-out;
156+
}
157+
95% {
158+
top: 0;
159+
animation-timing-function: ease-in;
160+
}
161+
100% {
162+
top: 0;
163+
animation-timing-function: ease-in;
164+
}
165+
}
166+
167+
@-webkit-keyframes pace-compress {
168+
0% {
169+
bottom: 0;
170+
margin-left: -30px;
171+
width: 60px;
172+
height: 75px;
173+
background: rgba(20, 20, 20, .1);
174+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
175+
border-radius: 30px / 40px;
176+
-webkit-animation-timing-function: ease-in;
177+
}
178+
50% {
179+
bottom: 30px;
180+
margin-left: -10px;
181+
width: 20px;
182+
height: 5px;
183+
background: rgba(20, 20, 20, .3);
184+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
185+
border-radius: 20px / 20px;
186+
-webkit-animation-timing-function: ease-out;
187+
}
188+
100% {
189+
bottom: 0;
190+
margin-left: -30px;
191+
width: 60px;
192+
height: 75px;
193+
background: rgba(20, 20, 20, .1);
194+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
195+
border-radius: 30px / 40px;
196+
-webkit-animation-timing-function: ease-in;
197+
}
198+
}
199+
200+
@-moz-keyframes pace-compress {
201+
0% {
202+
bottom: 0;
203+
margin-left: -30px;
204+
width: 60px;
205+
height: 75px;
206+
background: rgba(20, 20, 20, .1);
207+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
208+
border-radius: 30px / 40px;
209+
-moz-animation-timing-function: ease-in;
210+
}
211+
50% {
212+
bottom: 30px;
213+
margin-left: -10px;
214+
width: 20px;
215+
height: 5px;
216+
background: rgba(20, 20, 20, .3);
217+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
218+
border-radius: 20px / 20px;
219+
-moz-animation-timing-function: ease-out;
220+
}
221+
100% {
222+
bottom: 0;
223+
margin-left: -30px;
224+
width: 60px;
225+
height: 75px;
226+
background: rgba(20, 20, 20, .1);
227+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
228+
border-radius: 30px / 40px;
229+
-moz-animation-timing-function: ease-in;
230+
}
231+
}
232+
233+
@keyframes pace-compress {
234+
0% {
235+
bottom: 0;
236+
margin-left: -30px;
237+
width: 60px;
238+
height: 75px;
239+
background: rgba(20, 20, 20, .1);
240+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
241+
border-radius: 30px / 40px;
242+
animation-timing-function: ease-in;
243+
}
244+
50% {
245+
bottom: 30px;
246+
margin-left: -10px;
247+
width: 20px;
248+
height: 5px;
249+
background: rgba(20, 20, 20, .3);
250+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
251+
border-radius: 20px / 20px;
252+
animation-timing-function: ease-out;
253+
}
254+
100% {
255+
bottom: 0;
256+
margin-left: -30px;
257+
width: 60px;
258+
height: 75px;
259+
background: rgba(20, 20, 20, .1);
260+
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
261+
border-radius: 30px / 40px;
262+
animation-timing-function: ease-in;
263+
}
264+
}

0 commit comments

Comments
 (0)