pace-rails 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,72 +0,0 @@
1
- /* This is a compiled file, you should be editing the file in the templates directory */
2
- .pace {
3
- -webkit-pointer-events: none;
4
- pointer-events: none;
5
- -webkit-user-select: none;
6
- -moz-user-select: none;
7
- user-select: none;
8
- }
9
-
10
- .pace-inactive {
11
- display: none;
12
- }
13
-
14
- .pace .pace-progress {
15
- background-color: #29d;
16
- position: fixed;
17
- z-index: 2000;
18
- top: 0;
19
- left: 0;
20
- height: 12px;
21
- overflow: hidden;
22
-
23
- -webkit-transition: width 1s;
24
- -moz-transition: width 1s;
25
- -o-transition: width 1s;
26
- transition: width 1s;
27
- }
28
-
29
- .pace .pace-progress-inner {
30
- position: absolute;
31
- top: 0;
32
- left: 0;
33
- right: -32px;
34
- bottom: 0;
35
-
36
- 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));
37
- 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);
38
- background-image: -moz-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);
39
- background-image: -o-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);
40
- background-image: 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);
41
- -webkit-background-size: 32px 32px;
42
- -moz-background-size: 32px 32px;
43
- -o-background-size: 32px 32px;
44
- background-size: 32px 32px;
45
-
46
- -webkit-animation: pace-stripe-animation 500ms linear infinite;
47
- -moz-animation: pace-stripe-animation 500ms linear infinite;
48
- -ms-animation: pace-stripe-animation 500ms linear infinite;
49
- -o-animation: pace-stripe-animation 500ms linear infinite;
50
- animation: pace-stripe-animation 500ms linear infinite;
51
- }
52
-
53
- @-webkit-keyframes pace-stripe-animation {
54
- 0% { -webkit-transform: none; transform: none; }
55
- 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
56
- }
57
- @-moz-keyframes pace-stripe-animation {
58
- 0% { -moz-transform: none; transform: none; }
59
- 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
60
- }
61
- @-o-keyframes pace-stripe-animation {
62
- 0% { -o-transform: none; transform: none; }
63
- 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
64
- }
65
- @-ms-keyframes pace-stripe-animation {
66
- 0% { -ms-transform: none; transform: none; }
67
- 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
68
- }
69
- @keyframes pace-stripe-animation {
70
- 0% { transform: none; transform: none; }
71
- 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
72
- }
@@ -1,35 +0,0 @@
1
- /* This is a compiled file, you should be editing the file in the templates directory */
2
- .pace {
3
- -webkit-pointer-events: none;
4
- pointer-events: none;
5
- -webkit-user-select: none;
6
- -moz-user-select: none;
7
- user-select: none;
8
- }
9
-
10
- .pace.pace-inactive .pace-progress {
11
- display: none;
12
- }
13
-
14
- .pace .pace-progress {
15
- position: fixed;
16
- z-index: 2000;
17
- top: 0;
18
- right: 0;
19
- height: 5rem;
20
- width: 5rem;
21
- }
22
-
23
- .pace .pace-progress:after {
24
- display: block;
25
- position: absolute;
26
- top: 0;
27
- right: .5rem;
28
- content: attr(data-progress-text);
29
- font-family: "Helvetica Neue", sans-serif;
30
- font-weight: 100;
31
- font-size: 5rem;
32
- line-height: 1;
33
- text-align: right;
34
- color: rgba(0, 0, 0, 0.19999999999999996);
35
- }
@@ -1,231 +0,0 @@
1
- /* This is a compiled file, you should be editing the file in the templates directory */
2
- .pace {
3
- width: 140px;
4
- height: 300px;
5
- position: fixed;
6
- top: -90px;
7
- right: -20px;
8
- z-index: 2000;
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
- }
19
-
20
- .pace.pace-active {
21
- -webkit-transform: scale(.25);
22
- -moz-transform: scale(.25);
23
- -ms-transform: scale(.25);
24
- -o-transform: scale(.25);
25
- transform: scale(.25);
26
- opacity: 1;
27
- }
28
-
29
- .pace .pace-activity {
30
- width: 140px;
31
- height: 140px;
32
- border-radius: 70px;
33
- background: #29d;
34
- position: absolute;
35
- top: 0;
36
- z-index: 1911;
37
- -webkit-animation: pace-bounce 1s infinite;
38
- -moz-animation: pace-bounce 1s infinite;
39
- -o-animation: pace-bounce 1s infinite;
40
- -ms-animation: pace-bounce 1s infinite;
41
- animation: pace-bounce 1s infinite;
42
- }
43
-
44
- .pace .pace-progress {
45
- position: absolute;
46
- display: block;
47
- left: 50%;
48
- bottom: 0;
49
- z-index: 1910;
50
- margin-left: -30px;
51
- width: 60px;
52
- height: 75px;
53
- background: rgba(20, 20, 20, .1);
54
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
55
- border-radius: 30px / 40px;
56
- -webkit-transform: scaleY(.3);
57
- -moz-transform: scaleY(.3);
58
- -ms-transform: scaleY(.3);
59
- -o-transform: scaleY(.3);
60
- transform: scaleY(.3);
61
- -webkit-animation: pace-compress .5s infinite alternate;
62
- -moz-animation: pace-compress .5s infinite alternate;
63
- -o-animation: pace-compress .5s infinite alternate;
64
- -ms-animation: pace-compress .5s infinite alternate;
65
- animation: pace-compress .5s infinite alternate;
66
- }
67
-
68
- @-webkit-keyframes pace-bounce {
69
- 0% {
70
- top: 0;
71
- -webkit-animation-timing-function: ease-in;
72
- }
73
- 40% {}
74
- 50% {
75
- top: 140px;
76
- height: 140px;
77
- -webkit-animation-timing-function: ease-out;
78
- }
79
- 55% {
80
- top: 160px;
81
- height: 120px;
82
- border-radius: 70px / 60px;
83
- -webkit-animation-timing-function: ease-in;
84
- }
85
- 65% {
86
- top: 120px;
87
- height: 140px;
88
- border-radius: 70px;
89
- -webkit-animation-timing-function: ease-out;
90
- }
91
- 95% {
92
- top: 0;
93
- -webkit-animation-timing-function: ease-in;
94
- }
95
- 100% {
96
- top: 0;
97
- -webkit-animation-timing-function: ease-in;
98
- }
99
- }
100
-
101
- @-moz-keyframes pace-bounce {
102
- 0% {
103
- top: 0;
104
- -moz-animation-timing-function: ease-in;
105
- }
106
- 40% {}
107
- 50% {
108
- top: 140px;
109
- height: 140px;
110
- -moz-animation-timing-function: ease-out;
111
- }
112
- 55% {
113
- top: 160px;
114
- height: 120px;
115
- border-radius: 70px / 60px;
116
- -moz-animation-timing-function: ease-in;
117
- }
118
- 65% {
119
- top: 120px;
120
- height: 140px;
121
- border-radius: 70px;
122
- -moz-animation-timing-function: ease-out;}
123
- 95% {
124
- top: 0;
125
- -moz-animation-timing-function: ease-in;
126
- }
127
- 100% {top: 0;
128
- -moz-animation-timing-function: ease-in;
129
- }
130
- }
131
-
132
- @keyframes pace-bounce {
133
- 0% {
134
- top: 0;
135
- animation-timing-function: ease-in;
136
- }
137
- 50% {
138
- top: 140px;
139
- height: 140px;
140
- animation-timing-function: ease-out;
141
- }
142
- 55% {
143
- top: 160px;
144
- height: 120px;
145
- border-radius: 70px / 60px;
146
- animation-timing-function: ease-in;
147
- }
148
- 65% {
149
- top: 120px;
150
- height: 140px;
151
- border-radius: 70px;
152
- animation-timing-function: ease-out;
153
- }
154
- 95% {
155
- top: 0;
156
- animation-timing-function: ease-in;
157
- }
158
- 100% {
159
- top: 0;
160
- animation-timing-function: ease-in;
161
- }
162
- }
163
-
164
- @-webkit-keyframes pace-compress {
165
- 0% {
166
- bottom: 0;
167
- margin-left: -30px;
168
- width: 60px;
169
- height: 75px;
170
- background: rgba(20, 20, 20, .1);
171
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
172
- border-radius: 30px / 40px;
173
- -webkit-animation-timing-function: ease-in;
174
- }
175
- 100% {
176
- bottom: 30px;
177
- margin-left: -10px;
178
- width: 20px;
179
- height: 5px;
180
- background: rgba(20, 20, 20, .3);
181
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
182
- border-radius: 20px / 20px;
183
- -webkit-animation-timing-function: ease-out;
184
- }
185
- }
186
-
187
- @-moz-keyframes pace-compress {
188
- 0% {
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
- -moz-animation-timing-function: ease-in;
197
- }
198
- 100% {
199
- bottom: 30px;
200
- margin-left: -10px;
201
- width: 20px;
202
- height: 5px;
203
- background: rgba(20, 20, 20, .3);
204
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
205
- border-radius: 20px / 20px;
206
- -moz-animation-timing-function: ease-out;
207
- }
208
- }
209
-
210
- @keyframes pace-compress {
211
- 0% {
212
- bottom: 0;
213
- margin-left: -30px;
214
- width: 60px;
215
- height: 75px;
216
- background: rgba(20, 20, 20, .1);
217
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
218
- border-radius: 30px / 40px;
219
- animation-timing-function: ease-in;
220
- }
221
- 100% {
222
- bottom: 30px;
223
- margin-left: -10px;
224
- width: 20px;
225
- height: 5px;
226
- background: rgba(20, 20, 20, .3);
227
- box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
228
- border-radius: 20px / 20px;
229
- animation-timing-function: ease-out;
230
- }
231
- }
@@ -1,170 +0,0 @@
1
- /* This is a compiled file, you should be editing the file in the templates directory */
2
- .pace.pace-inactive {
3
- display: none;
4
- }
5
-
6
- .pace {
7
- -webkit-pointer-events: none;
8
- pointer-events: none;
9
-
10
- -webkit-user-select: none;
11
- -moz-user-select: none;
12
- user-select: none;
13
-
14
- z-index: 2000;
15
- position: fixed;
16
- height: 60px;
17
- width: 100px;
18
- margin: auto;
19
- top: 0;
20
- left: 0;
21
- right: 0;
22
- bottom: 0;
23
- }
24
-
25
- .pace .pace-progress {
26
- z-index: 2000;
27
- position: absolute;
28
- height: 60px;
29
- width: 100px !important;
30
- }
31
-
32
- .pace .pace-progress:before {
33
- content: attr(data-progress-text);
34
- text-align: center;
35
- color: #fff;
36
- background: #29d;
37
- border-radius: 50%;
38
- font-family: "Helvetica Neue", sans-serif;
39
- font-size: 14px;
40
- font-weight: 100;
41
- line-height: 1;
42
- padding: 20% 0 7px;
43
- width: 50%;
44
- height: 40%;
45
- margin: 10px 0 0 30px;
46
- display: block;
47
- z-index: 999;
48
- position: absolute;
49
- }
50
-
51
- .pace .pace-progress:after {
52
- border-radius: 50%;
53
- border: 5px solid #29d;
54
- content: ' ';
55
- display: block;
56
- position: absolute;
57
- top: 0;
58
- left: 0;
59
- height: 60px;
60
- width: 100px;
61
-
62
- -webkit-transform: rotate(90deg);
63
- -moz-transform: rotate(90deg);
64
- -o-transform: rotate(90deg);
65
- transform: rotate(90deg);
66
- -webkit-animation: spin-3 2s linear infinite;
67
- -moz-animation: spin-3 2s linear infinite;
68
- -o-animation: spin-3 2s linear infinite;
69
- animation: spin-3 2s linear infinite;
70
- }
71
-
72
- .pace .pace-activity {
73
- font-size: 15px;
74
- line-height: 1;
75
- z-index: 2000;
76
- position: absolute;
77
- height: 60px;
78
- width: 100px;
79
-
80
- display: block;
81
- }
82
-
83
- .pace .pace-activity:before {
84
- border-radius: 50%;
85
- border: 5px solid #29d;
86
- content: ' ';
87
- display: block;
88
- position: absolute;
89
- top: 0;
90
- left: 0;
91
- height: 60px;
92
- width: 100px;
93
-
94
- -webkit-animation: spin-1 2s linear infinite;
95
- -moz-animation: spin-1 2s linear infinite;
96
- -o-animation: spin-1 2s linear infinite;
97
- animation: spin-1 2s linear infinite;
98
- }
99
-
100
- .pace .pace-activity:after{
101
- border-radius: 50%;
102
- border: 5px solid #29d;
103
- content: ' ';
104
- display: block;
105
- position: absolute;
106
- top: 0;
107
- left: 0;
108
- height: 60px;
109
- width: 100px;
110
-
111
- -webkit-transform: rotate(45deg);
112
- -moz-transform: rotate(45deg);
113
- -o-transform: rotate(45deg);
114
- transform: rotate(45deg);
115
- -webkit-animation: spin-2 2s linear infinite;
116
- -moz-animation: spin-2 2s linear infinite;
117
- -o-animation: spin-2 2s linear infinite;
118
- animation: spin-2 2s linear infinite;
119
- }
120
-
121
- @-webkit-keyframes spin-1 {
122
- 0% { -webkit-transform: rotate(0deg); }
123
- 100%{ -webkit-transform: rotate(359deg);}
124
- }
125
- @-moz-keyframes spin-1 {
126
- 0% { -moz-transform: rotate(0deg); }
127
- 100%{ -moz-transform: rotate(359deg);}
128
- }
129
- @-o-keyframes spin-1 {
130
- 0% { -o-transform: rotate(0deg); }
131
- 100%{ -o-transform: rotate(359deg);}
132
- }
133
- @keyframes spin-1 {
134
- 0% { transform: rotate(0deg); }
135
- 100%{ transform: rotate(359deg);}
136
- }
137
-
138
- @-webkit-keyframes spin-2 {
139
- 0% { -webkit-transform: rotate(59.8deg); }
140
- 100%{ -webkit-transform: rotate(418.8deg);}
141
- }
142
- @-moz-keyframes spin-2 {
143
- 0% { -moz-transform: rotate(59.8deg); }
144
- 100%{ -moz-transform: rotate(418.8deg);}
145
- }
146
- @-o-keyframes spin-2 {
147
- 0% { -o-transform: rotate(59.8deg); }
148
- 100%{ -o-transform: rotate(418.8deg);}
149
- }
150
- @keyframes spin-2 {
151
- 0% { transform: rotate(59.8deg); }
152
- 100%{ transform: rotate(418.8deg);}
153
- }
154
-
155
- @-webkit-keyframes spin-3 {
156
- 0% { -webkit-transform: rotate(119.6deg); }
157
- 100%{ -webkit-transform: rotate(478.6deg);}
158
- }
159
- @-moz-keyframes spin-3 {
160
- 0% { -moz-transform: rotate(119.6deg); }
161
- 100%{ -moz-transform: rotate(478.6deg);}
162
- }
163
- @-o-keyframes spin-3 {
164
- 0% { -o-transform: rotate(119.6deg); }
165
- 100%{ -o-transform: rotate(478.6deg);}
166
- }
167
- @keyframes spin-3 {
168
- 0% { transform: rotate(119.6deg); }
169
- 100%{ transform: rotate(478.6deg);}
170
- }