Skip to content

Commit b6b91fa

Browse files
adamschwartzadamschwartz
committed
Make themes work with new transform-based animations (CodeByZach@f08ecac) @zackbloom 
1 parent 9d2fcbc commit b6b91fa

11 files changed

+196
-172
lines changed

‎templates/pace-theme-barber-shop.tmpl.css‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
.pace {
22
-webkit-pointer-events: none;
33
pointer-events: none;
4+
45
-webkit-user-select: none;
56
-moz-user-select: none;
67
user-select: none;
8+
9+
overflow: hidden;
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
z-index: 2000;
14+
width: 100%;
15+
height: 12px;
16+
background: #fff;
717
}
818

919
.pace-inactive {
@@ -13,19 +23,25 @@
1323
.pace .pace-progress {
1424
background-color: `args.color || "#29d"`;
1525
position: fixed;
16-
z-index: 2000;
1726
top: 0;
18-
left: 0;
19-
height: 12px;
27+
bottom: 0;
28+
right: 100%;
29+
width: 100%;
2030
overflow: hidden;
2131
}
2232

23-
.pace .pace-progress-inner {
24-
position: absolute;
33+
.pace .pace-activity {
34+
position: fixed;
2535
top: 0;
26-
left: 0;
2736
right: -32px;
2837
bottom: 0;
38+
left: 0;
39+
40+
-webkit-transform: translate3d(0, 0, 0);
41+
-moz-transform: translate3d(0, 0, 0);
42+
-ms-transform: translate3d(0, 0, 0);
43+
-o-transform: translate3d(0, 0, 0);
44+
transform: translate3d(0, 0, 0);
2945

3046
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
3147
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);

‎templates/pace-theme-big-counter.tmpl.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.pace {
22
-webkit-pointer-events: none;
33
pointer-events: none;
4+
45
-webkit-user-select: none;
56
-moz-user-select: none;
67
user-select: none;
@@ -17,6 +18,10 @@
1718
right: 0;
1819
height: 5rem;
1920
width: 5rem;
21+
22+
-webkit-transform: translate3d(0, 0, 0) !important;
23+
-ms-transform: translate3d(0, 0, 0) !important;
24+
transform: translate3d(0, 0, 0) !important;
2025
}
2126

2227
.pace .pace-progress:after {

‎templates/pace-theme-bounce.tmpl.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@
5252
background: rgba(20, 20, 20, .1);
5353
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
5454
border-radius: 30px / 40px;
55-
-webkit-transform: scaleY(.3);
56-
-moz-transform: scaleY(.3);
57-
-ms-transform: scaleY(.3);
58-
-o-transform: scaleY(.3);
59-
transform: scaleY(.3);
55+
-webkit-transform: scaleY(.3) !important;
56+
-moz-transform: scaleY(.3) !important;
57+
-ms-transform: scaleY(.3) !important;
58+
-o-transform: scaleY(.3) !important;
59+
transform: scaleY(.3) !important;
6060
-webkit-animation: pace-compress .5s infinite alternate;
6161
-moz-animation: pace-compress .5s infinite alternate;
6262
-o-animation: pace-compress .5s infinite alternate;

‎templates/pace-theme-center-atom.tmpl.css‎

Lines changed: 44 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@
2525
z-index: 2000;
2626
position: absolute;
2727
height: 60px;
28-
width: 100px !important;
28+
width: 100px;
29+
30+
-webkit-transform: translate3d(0, 0, 0) !important;
31+
-ms-transform: translate3d(0, 0, 0) !important;
32+
transform: translate3d(0, 0, 0) !important;
2933
}
3034

3135
.pace .pace-progress:before {
@@ -47,27 +51,6 @@
4751
position: absolute;
4852
}
4953

50-
.pace .pace-progress:after {
51-
border-radius: 50%;
52-
border: 5px solid `args.color || "#29d"`;
53-
content: ' ';
54-
display: block;
55-
position: absolute;
56-
top: 0;
57-
left: 0;
58-
height: 60px;
59-
width: 100px;
60-
61-
-webkit-transform: rotate(90deg);
62-
-moz-transform: rotate(90deg);
63-
-o-transform: rotate(90deg);
64-
transform: rotate(90deg);
65-
-webkit-animation: spin-3 2s linear infinite;
66-
-moz-animation: spin-3 2s linear infinite;
67-
-o-animation: spin-3 2s linear infinite;
68-
animation: spin-3 2s linear infinite;
69-
}
70-
7154
.pace .pace-activity {
7255
font-size: 15px;
7356
line-height: 1;
@@ -77,9 +60,13 @@
7760
width: 100px;
7861

7962
display: block;
63+
-webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
64+
-moz-animation: pace-theme-center-atom-spin 2s linear infinite;
65+
-o-animation: pace-theme-center-atom-spin 2s linear infinite;
66+
animation: pace-theme-center-atom-spin 2s linear infinite;
8067
}
8168

82-
.pace .pace-activity:before {
69+
.pace .pace-activity {
8370
border-radius: 50%;
8471
border: 5px solid `args.color || "#29d"`;
8572
content: ' ';
@@ -89,81 +76,55 @@
8976
left: 0;
9077
height: 60px;
9178
width: 100px;
92-
93-
-webkit-animation: spin-1 2s linear infinite;
94-
-moz-animation: spin-1 2s linear infinite;
95-
-o-animation: spin-1 2s linear infinite;
96-
animation: spin-1 2s linear infinite;
9779
}
9880

99-
.pace .pace-activity:after{
81+
.pace .pace-activity:after {
10082
border-radius: 50%;
10183
border: 5px solid `args.color || "#29d"`;
10284
content: ' ';
10385
display: block;
10486
position: absolute;
105-
top: 0;
106-
left: 0;
87+
top: -5px;
88+
left: -5px;
10789
height: 60px;
10890
width: 100px;
10991

110-
-webkit-transform: rotate(45deg);
111-
-moz-transform: rotate(45deg);
112-
-o-transform: rotate(45deg);
113-
transform: rotate(45deg);
114-
-webkit-animation: spin-2 2s linear infinite;
115-
-moz-animation: spin-2 2s linear infinite;
116-
-o-animation: spin-2 2s linear infinite;
117-
animation: spin-2 2s linear infinite;
92+
-webkit-transform: rotate(60deg);
93+
-moz-transform: rotate(60deg);
94+
-o-transform: rotate(60deg);
95+
transform: rotate(60deg);
11896
}
11997

120-
@-webkit-keyframes spin-1 {
121-
0% { -webkit-transform: rotate(0deg); }
122-
100%{ -webkit-transform: rotate(359deg);}
123-
}
124-
@-moz-keyframes spin-1 {
125-
0% { -moz-transform: rotate(0deg); }
126-
100%{ -moz-transform: rotate(359deg);}
127-
}
128-
@-o-keyframes spin-1 {
129-
0% { -o-transform: rotate(0deg); }
130-
100%{ -o-transform: rotate(359deg);}
131-
}
132-
@keyframes spin-1 {
133-
0% { transform: rotate(0deg); }
134-
100%{ transform: rotate(359deg);}
135-
}
98+
.pace .pace-activity:before {
99+
border-radius: 50%;
100+
border: 5px solid `args.color || "#29d"`;
101+
content: ' ';
102+
display: block;
103+
position: absolute;
104+
top: -5px;
105+
left: -5px;
106+
height: 60px;
107+
width: 100px;
136108

137-
@-webkit-keyframes spin-2 {
138-
0% { -webkit-transform: rotate(59.8deg); }
139-
100%{ -webkit-transform: rotate(418.8deg);}
140-
}
141-
@-moz-keyframes spin-2 {
142-
0% { -moz-transform: rotate(59.8deg); }
143-
100%{ -moz-transform: rotate(418.8deg);}
144-
}
145-
@-o-keyframes spin-2 {
146-
0% { -o-transform: rotate(59.8deg); }
147-
100%{ -o-transform: rotate(418.8deg);}
148-
}
149-
@keyframes spin-2 {
150-
0% { transform: rotate(59.8deg); }
151-
100%{ transform: rotate(418.8deg);}
109+
-webkit-transform: rotate(120deg);
110+
-moz-transform: rotate(120deg);
111+
-o-transform: rotate(120deg);
112+
transform: rotate(120deg);
152113
}
153114

154-
@-webkit-keyframes spin-3 {
155-
0% { -webkit-transform: rotate(119.6deg); }
156-
100%{ -webkit-transform: rotate(478.6deg);}
115+
@-webkit-keyframes pace-theme-center-atom-spin {
116+
0% { -webkit-transform: rotate(0deg) }
117+
100% { -webkit-transform: rotate(359deg) }
118+
}
119+
@-moz-keyframes pace-theme-center-atom-spin {
120+
0% { -moz-transform: rotate(0deg) }
121+
100% { -moz-transform: rotate(359deg) }
157122
}
158-
@-moz-keyframes spin-3 {
159-
0% { -moz-transform: rotate(119.6deg); }
160-
100%{ -moz-transform: rotate(478.6deg);}
123+
@-o-keyframes pace-theme-center-atom-spin {
124+
0% { -o-transform: rotate(0deg) }
125+
100% { -o-transform: rotate(359deg) }
161126
}
162-
@-o-keyframes spin-3 {
163-
0% { -o-transform: rotate(119.6deg); }
164-
100%{ -o-transform: rotate(478.6deg);}
127+
@keyframes pace-theme-center-atom-spin {
128+
0% { transform: rotate(0deg) }
129+
100% { transform: rotate(359deg) }
165130
}
166-
@keyframes spin-3 {
167-
0% { transform: rotate(119.6deg); }
168-
100%{ transform: rotate(478.6deg);}
169-
}

‎templates/pace-theme-center-simple.tmpl.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.pace {
22
-webkit-pointer-events: none;
33
pointer-events: none;
4+
45
-webkit-user-select: none;
56
-moz-user-select: none;
67
user-select: none;
@@ -16,6 +17,8 @@
1617
width: 200px;
1718
background: #fff;
1819
border: 1px solid `args.color || "#29d"`;
20+
21+
overflow: hidden;
1922
}
2023

2124
.pace .pace-progress {
@@ -36,9 +39,10 @@
3639
z-index: 2000;
3740
display: block;
3841
position: absolute;
39-
left: 0px;
40-
top: 0px;
42+
top: 0;
43+
right: 100%;
4144
height: 100%;
45+
width: 100%;
4246
background: `args.color || "#29d"`;
4347
}
4448

‎templates/pace-theme-fill-left.tmpl.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
position: fixed;
1616
z-index: -1;
1717
top: 0;
18-
left: 0;
18+
right: 100%;
1919
bottom: 0;
20+
width: 100%;
2021
}

‎templates/pace-theme-flash.tmpl.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
position: fixed;
1616
z-index: 2000;
1717
top: 0;
18-
left: 0;
18+
right: 100%;
19+
width: 100%;
1920
height: 2px;
2021
}
2122

‎templates/pace-theme-flat-top.tmpl.css‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
11
.pace {
22
-webkit-pointer-events: none;
33
pointer-events: none;
4+
45
-webkit-user-select: none;
56
-moz-user-select: none;
67
user-select: none;
8+
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
14+
-webkit-transform: translate3d(0, -50px, 0);
15+
-ms-transform: translate3d(0, -50px, 0);
16+
transform: translate3d(0, -50px, 0);
17+
18+
-webkit-transition: -webkit-transform .5s ease-out;
19+
-ms-transition: -webkit-transform .5s ease-out;
20+
transition: transform .5s ease-out;
21+
}
22+
23+
.pace.pace-active {
24+
-webkit-transform: translate3d(0, 0, 0);
25+
-ms-transform: translate3d(0, 0, 0);
26+
transform: translate3d(0, 0, 0);
727
}
828

929
.pace .pace-progress {
1030
display: block;
1131
position: fixed;
1232
z-index: 2000;
1333
top: 0;
14-
left: 0;
15-
height: 12px;
34+
right: 100%;
35+
width: 100%;
36+
height: 10px;
1637
background: `args.color || "#29d"`;
1738

18-
19-
-webkit-transform: translateY(-50px);
20-
transform: translateY(-50px);
21-
2239
pointer-events: none;
2340
}
24-
25-
.pace.pace-active .pace-progress {
26-
-webkit-transform: translateY(0);
27-
transform: translateY(0);
28-
}

0 commit comments

Comments
 (0)