pace-rails 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +21 -16
  3. data/lib/pace/rails/version.rb +1 -1
  4. data/vendor/assets/stylesheets/pace/{pace-theme-barber-shop.css → black/pace-theme-barber-shop.css} +2 -1
  5. data/vendor/assets/stylesheets/pace/{pace-theme-big-counter.css → black/pace-theme-big-counter.css} +2 -1
  6. data/vendor/assets/stylesheets/pace/{pace-theme-bounce.css → black/pace-theme-bounce.css} +2 -1
  7. data/vendor/assets/stylesheets/pace/{pace-theme-center-atom.css → black/pace-theme-center-atom.css} +5 -4
  8. data/vendor/assets/stylesheets/pace/{pace-theme-center-circle.css → black/pace-theme-center-circle.css} +2 -1
  9. data/vendor/assets/stylesheets/pace/{pace-theme-center-radar.css → black/pace-theme-center-radar.css} +3 -2
  10. data/vendor/assets/stylesheets/pace/{pace-theme-center-simple.css → black/pace-theme-center-simple.css} +3 -2
  11. data/vendor/assets/stylesheets/pace/{pace-theme-corner-indicator.css → black/pace-theme-corner-indicator.css} +2 -1
  12. data/vendor/assets/stylesheets/pace/{pace-theme-fill-left.css → black/pace-theme-fill-left.css} +2 -1
  13. data/vendor/assets/stylesheets/pace/{pace-theme-flash.css → black/pace-theme-flash.css} +5 -4
  14. data/vendor/assets/stylesheets/pace/black/pace-theme-flat-top.css +41 -0
  15. data/vendor/assets/stylesheets/pace/black/pace-theme-loading-bar.css +198 -0
  16. data/vendor/assets/stylesheets/pace/{pace-theme-mac-osx.css → black/pace-theme-mac-osx.css} +6 -5
  17. data/vendor/assets/stylesheets/pace/{pace-theme-minimal.css → black/pace-theme-minimal.css} +2 -1
  18. data/vendor/assets/stylesheets/pace/blue/pace-theme-barber-shop.css +83 -0
  19. data/vendor/assets/stylesheets/pace/blue/pace-theme-big-counter.css +40 -0
  20. data/vendor/assets/stylesheets/pace/blue/pace-theme-bounce.css +231 -0
  21. data/vendor/assets/stylesheets/pace/blue/pace-theme-center-atom.css +131 -0
  22. data/vendor/assets/stylesheets/pace/blue/pace-theme-center-circle.css +90 -0
  23. data/vendor/assets/stylesheets/pace/blue/pace-theme-center-radar.css +74 -0
  24. data/vendor/assets/stylesheets/pace/blue/pace-theme-center-simple.css +52 -0
  25. data/vendor/assets/stylesheets/pace/blue/pace-theme-corner-indicator.css +73 -0
  26. data/vendor/assets/stylesheets/pace/blue/pace-theme-fill-left.css +22 -0
  27. data/vendor/assets/stylesheets/pace/blue/pace-theme-flash.css +77 -0
  28. data/vendor/assets/stylesheets/pace/blue/pace-theme-flat-top.css +41 -0
  29. data/vendor/assets/stylesheets/pace/blue/pace-theme-loading-bar.css +198 -0
  30. data/vendor/assets/stylesheets/pace/blue/pace-theme-mac-osx.css +87 -0
  31. data/vendor/assets/stylesheets/pace/blue/pace-theme-minimal.css +23 -0
  32. data/vendor/assets/stylesheets/pace/green/pace-theme-barber-shop.css +83 -0
  33. data/vendor/assets/stylesheets/pace/green/pace-theme-big-counter.css +40 -0
  34. data/vendor/assets/stylesheets/pace/green/pace-theme-bounce.css +231 -0
  35. data/vendor/assets/stylesheets/pace/green/pace-theme-center-atom.css +131 -0
  36. data/vendor/assets/stylesheets/pace/green/pace-theme-center-circle.css +90 -0
  37. data/vendor/assets/stylesheets/pace/green/pace-theme-center-radar.css +74 -0
  38. data/vendor/assets/stylesheets/pace/green/pace-theme-center-simple.css +52 -0
  39. data/vendor/assets/stylesheets/pace/green/pace-theme-corner-indicator.css +73 -0
  40. data/vendor/assets/stylesheets/pace/green/pace-theme-fill-left.css +22 -0
  41. data/vendor/assets/stylesheets/pace/green/pace-theme-flash.css +77 -0
  42. data/vendor/assets/stylesheets/pace/green/pace-theme-flat-top.css +41 -0
  43. data/vendor/assets/stylesheets/pace/green/pace-theme-loading-bar.css +198 -0
  44. data/vendor/assets/stylesheets/pace/green/pace-theme-mac-osx.css +87 -0
  45. data/vendor/assets/stylesheets/pace/green/pace-theme-minimal.css +23 -0
  46. data/vendor/assets/stylesheets/pace/orange/pace-theme-barber-shop.css +83 -0
  47. data/vendor/assets/stylesheets/pace/orange/pace-theme-big-counter.css +40 -0
  48. data/vendor/assets/stylesheets/pace/orange/pace-theme-bounce.css +231 -0
  49. data/vendor/assets/stylesheets/pace/orange/pace-theme-center-atom.css +131 -0
  50. data/vendor/assets/stylesheets/pace/orange/pace-theme-center-circle.css +90 -0
  51. data/vendor/assets/stylesheets/pace/orange/pace-theme-center-radar.css +74 -0
  52. data/vendor/assets/stylesheets/pace/orange/pace-theme-center-simple.css +52 -0
  53. data/vendor/assets/stylesheets/pace/orange/pace-theme-corner-indicator.css +73 -0
  54. data/vendor/assets/stylesheets/pace/orange/pace-theme-fill-left.css +22 -0
  55. data/vendor/assets/stylesheets/pace/orange/pace-theme-flash.css +77 -0
  56. data/vendor/assets/stylesheets/pace/orange/pace-theme-flat-top.css +41 -0
  57. data/vendor/assets/stylesheets/pace/orange/pace-theme-loading-bar.css +198 -0
  58. data/vendor/assets/stylesheets/pace/orange/pace-theme-mac-osx.css +87 -0
  59. data/vendor/assets/stylesheets/pace/orange/pace-theme-minimal.css +23 -0
  60. data/vendor/assets/stylesheets/pace/pink/pace-theme-barber-shop.css +83 -0
  61. data/vendor/assets/stylesheets/pace/pink/pace-theme-big-counter.css +40 -0
  62. data/vendor/assets/stylesheets/pace/pink/pace-theme-bounce.css +231 -0
  63. data/vendor/assets/stylesheets/pace/pink/pace-theme-center-atom.css +131 -0
  64. data/vendor/assets/stylesheets/pace/pink/pace-theme-center-circle.css +90 -0
  65. data/vendor/assets/stylesheets/pace/pink/pace-theme-center-radar.css +74 -0
  66. data/vendor/assets/stylesheets/pace/pink/pace-theme-center-simple.css +52 -0
  67. data/vendor/assets/stylesheets/pace/pink/pace-theme-corner-indicator.css +73 -0
  68. data/vendor/assets/stylesheets/pace/pink/pace-theme-fill-left.css +22 -0
  69. data/vendor/assets/stylesheets/pace/pink/pace-theme-flash.css +77 -0
  70. data/vendor/assets/stylesheets/pace/pink/pace-theme-flat-top.css +41 -0
  71. data/vendor/assets/stylesheets/pace/pink/pace-theme-loading-bar.css +198 -0
  72. data/vendor/assets/stylesheets/pace/pink/pace-theme-mac-osx.css +87 -0
  73. data/vendor/assets/stylesheets/pace/pink/pace-theme-minimal.css +23 -0
  74. data/vendor/assets/stylesheets/pace/purple/pace-theme-barber-shop.css +83 -0
  75. data/vendor/assets/stylesheets/pace/purple/pace-theme-big-counter.css +40 -0
  76. data/vendor/assets/stylesheets/pace/purple/pace-theme-bounce.css +231 -0
  77. data/vendor/assets/stylesheets/pace/purple/pace-theme-center-atom.css +131 -0
  78. data/vendor/assets/stylesheets/pace/purple/pace-theme-center-circle.css +90 -0
  79. data/vendor/assets/stylesheets/pace/purple/pace-theme-center-radar.css +74 -0
  80. data/vendor/assets/stylesheets/pace/purple/pace-theme-center-simple.css +52 -0
  81. data/vendor/assets/stylesheets/pace/purple/pace-theme-corner-indicator.css +73 -0
  82. data/vendor/assets/stylesheets/pace/purple/pace-theme-fill-left.css +22 -0
  83. data/vendor/assets/stylesheets/pace/purple/pace-theme-flash.css +77 -0
  84. data/vendor/assets/stylesheets/pace/purple/pace-theme-flat-top.css +41 -0
  85. data/vendor/assets/stylesheets/pace/purple/pace-theme-loading-bar.css +198 -0
  86. data/vendor/assets/stylesheets/pace/purple/pace-theme-mac-osx.css +87 -0
  87. data/vendor/assets/stylesheets/pace/purple/pace-theme-minimal.css +23 -0
  88. data/vendor/assets/stylesheets/pace/red/pace-theme-barber-shop.css +83 -0
  89. data/vendor/assets/stylesheets/pace/red/pace-theme-big-counter.css +40 -0
  90. data/vendor/assets/stylesheets/pace/red/pace-theme-bounce.css +231 -0
  91. data/vendor/assets/stylesheets/pace/red/pace-theme-center-atom.css +131 -0
  92. data/vendor/assets/stylesheets/pace/red/pace-theme-center-circle.css +90 -0
  93. data/vendor/assets/stylesheets/pace/red/pace-theme-center-radar.css +74 -0
  94. data/vendor/assets/stylesheets/pace/red/pace-theme-center-simple.css +52 -0
  95. data/vendor/assets/stylesheets/pace/red/pace-theme-corner-indicator.css +73 -0
  96. data/vendor/assets/stylesheets/pace/red/pace-theme-fill-left.css +22 -0
  97. data/vendor/assets/stylesheets/pace/red/pace-theme-flash.css +77 -0
  98. data/vendor/assets/stylesheets/pace/red/pace-theme-flat-top.css +41 -0
  99. data/vendor/assets/stylesheets/pace/red/pace-theme-loading-bar.css +198 -0
  100. data/vendor/assets/stylesheets/pace/red/pace-theme-mac-osx.css +87 -0
  101. data/vendor/assets/stylesheets/pace/red/pace-theme-minimal.css +23 -0
  102. data/vendor/assets/stylesheets/pace/silver/pace-theme-barber-shop.css +83 -0
  103. data/vendor/assets/stylesheets/pace/silver/pace-theme-big-counter.css +40 -0
  104. data/vendor/assets/stylesheets/pace/silver/pace-theme-bounce.css +231 -0
  105. data/vendor/assets/stylesheets/pace/silver/pace-theme-center-atom.css +131 -0
  106. data/vendor/assets/stylesheets/pace/silver/pace-theme-center-circle.css +90 -0
  107. data/vendor/assets/stylesheets/pace/silver/pace-theme-center-radar.css +74 -0
  108. data/vendor/assets/stylesheets/pace/silver/pace-theme-center-simple.css +52 -0
  109. data/vendor/assets/stylesheets/pace/silver/pace-theme-corner-indicator.css +73 -0
  110. data/vendor/assets/stylesheets/pace/silver/pace-theme-fill-left.css +22 -0
  111. data/vendor/assets/stylesheets/pace/silver/pace-theme-flash.css +77 -0
  112. data/vendor/assets/stylesheets/pace/silver/pace-theme-flat-top.css +41 -0
  113. data/vendor/assets/stylesheets/pace/silver/pace-theme-loading-bar.css +198 -0
  114. data/vendor/assets/stylesheets/pace/silver/pace-theme-mac-osx.css +87 -0
  115. data/vendor/assets/stylesheets/pace/silver/pace-theme-minimal.css +23 -0
  116. data/vendor/assets/stylesheets/pace/white/pace-theme-barber-shop.css +83 -0
  117. data/vendor/assets/stylesheets/pace/white/pace-theme-big-counter.css +40 -0
  118. data/vendor/assets/stylesheets/pace/white/pace-theme-bounce.css +231 -0
  119. data/vendor/assets/stylesheets/pace/white/pace-theme-center-atom.css +131 -0
  120. data/vendor/assets/stylesheets/pace/white/pace-theme-center-circle.css +90 -0
  121. data/vendor/assets/stylesheets/pace/white/pace-theme-center-radar.css +74 -0
  122. data/vendor/assets/stylesheets/pace/white/pace-theme-center-simple.css +52 -0
  123. data/vendor/assets/stylesheets/pace/white/pace-theme-corner-indicator.css +73 -0
  124. data/vendor/assets/stylesheets/pace/white/pace-theme-fill-left.css +22 -0
  125. data/vendor/assets/stylesheets/pace/white/pace-theme-flash.css +77 -0
  126. data/vendor/assets/stylesheets/pace/white/pace-theme-flat-top.css +41 -0
  127. data/vendor/assets/stylesheets/pace/white/pace-theme-loading-bar.css +198 -0
  128. data/vendor/assets/stylesheets/pace/white/pace-theme-mac-osx.css +87 -0
  129. data/vendor/assets/stylesheets/pace/white/pace-theme-minimal.css +23 -0
  130. data/vendor/assets/stylesheets/pace/yellow/pace-theme-barber-shop.css +83 -0
  131. data/vendor/assets/stylesheets/pace/yellow/pace-theme-big-counter.css +40 -0
  132. data/vendor/assets/stylesheets/pace/yellow/pace-theme-bounce.css +231 -0
  133. data/vendor/assets/stylesheets/pace/yellow/pace-theme-center-atom.css +131 -0
  134. data/vendor/assets/stylesheets/pace/yellow/pace-theme-center-circle.css +90 -0
  135. data/vendor/assets/stylesheets/pace/yellow/pace-theme-center-radar.css +74 -0
  136. data/vendor/assets/stylesheets/pace/yellow/pace-theme-center-simple.css +52 -0
  137. data/vendor/assets/stylesheets/pace/yellow/pace-theme-corner-indicator.css +73 -0
  138. data/vendor/assets/stylesheets/pace/yellow/pace-theme-fill-left.css +22 -0
  139. data/vendor/assets/stylesheets/pace/yellow/pace-theme-flash.css +77 -0
  140. data/vendor/assets/stylesheets/pace/yellow/pace-theme-flat-top.css +41 -0
  141. data/vendor/assets/stylesheets/pace/yellow/pace-theme-loading-bar.css +198 -0
  142. data/vendor/assets/stylesheets/pace/yellow/pace-theme-mac-osx.css +87 -0
  143. data/vendor/assets/stylesheets/pace/yellow/pace-theme-minimal.css +23 -0
  144. metadata +142 -15
  145. data/vendor/assets/stylesheets/pace/pace-theme-loading-bar.css +0 -104
@@ -0,0 +1,40 @@
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
+
6
+ -webkit-user-select: none;
7
+ -moz-user-select: none;
8
+ user-select: none;
9
+ }
10
+
11
+ .pace.pace-inactive .pace-progress {
12
+ display: none;
13
+ }
14
+
15
+ .pace .pace-progress {
16
+ position: fixed;
17
+ z-index: 2000;
18
+ top: 0;
19
+ right: 0;
20
+ height: 5rem;
21
+ width: 5rem;
22
+
23
+ -webkit-transform: translate3d(0, 0, 0) !important;
24
+ -ms-transform: translate3d(0, 0, 0) !important;
25
+ transform: translate3d(0, 0, 0) !important;
26
+ }
27
+
28
+ .pace .pace-progress:after {
29
+ display: block;
30
+ position: absolute;
31
+ top: 0;
32
+ right: .5rem;
33
+ content: attr(data-progress-text);
34
+ font-family: "Helvetica Neue", sans-serif;
35
+ font-weight: 100;
36
+ font-size: 5rem;
37
+ line-height: 1;
38
+ text-align: right;
39
+ color: rgba(124, 96, 224, 0.19999999999999996);
40
+ }
@@ -0,0 +1,231 @@
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: #7c60e0;
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) !important;
57
+ -moz-transform: scaleY(.3) !important;
58
+ -ms-transform: scaleY(.3) !important;
59
+ -o-transform: scaleY(.3) !important;
60
+ transform: scaleY(.3) !important;
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
+ }
@@ -0,0 +1,131 @@
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;
30
+
31
+ -webkit-transform: translate3d(0, 0, 0) !important;
32
+ -ms-transform: translate3d(0, 0, 0) !important;
33
+ transform: translate3d(0, 0, 0) !important;
34
+ }
35
+
36
+ .pace .pace-progress:before {
37
+ content: attr(data-progress-text);
38
+ text-align: center;
39
+ color: #fff;
40
+ background: #7c60e0;
41
+ border-radius: 50%;
42
+ font-family: "Helvetica Neue", sans-serif;
43
+ font-size: 14px;
44
+ font-weight: 100;
45
+ line-height: 1;
46
+ padding: 20% 0 7px;
47
+ width: 50%;
48
+ height: 40%;
49
+ margin: 10px 0 0 30px;
50
+ display: block;
51
+ z-index: 999;
52
+ position: absolute;
53
+ }
54
+
55
+ .pace .pace-activity {
56
+ font-size: 15px;
57
+ line-height: 1;
58
+ z-index: 2000;
59
+ position: absolute;
60
+ height: 60px;
61
+ width: 100px;
62
+
63
+ display: block;
64
+ -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
65
+ -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
66
+ -o-animation: pace-theme-center-atom-spin 2s linear infinite;
67
+ animation: pace-theme-center-atom-spin 2s linear infinite;
68
+ }
69
+
70
+ .pace .pace-activity {
71
+ border-radius: 50%;
72
+ border: 5px solid #7c60e0;
73
+ content: ' ';
74
+ display: block;
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ height: 60px;
79
+ width: 100px;
80
+ }
81
+
82
+ .pace .pace-activity:after {
83
+ border-radius: 50%;
84
+ border: 5px solid #7c60e0;
85
+ content: ' ';
86
+ display: block;
87
+ position: absolute;
88
+ top: -5px;
89
+ left: -5px;
90
+ height: 60px;
91
+ width: 100px;
92
+
93
+ -webkit-transform: rotate(60deg);
94
+ -moz-transform: rotate(60deg);
95
+ -o-transform: rotate(60deg);
96
+ transform: rotate(60deg);
97
+ }
98
+
99
+ .pace .pace-activity:before {
100
+ border-radius: 50%;
101
+ border: 5px solid #7c60e0;
102
+ content: ' ';
103
+ display: block;
104
+ position: absolute;
105
+ top: -5px;
106
+ left: -5px;
107
+ height: 60px;
108
+ width: 100px;
109
+
110
+ -webkit-transform: rotate(120deg);
111
+ -moz-transform: rotate(120deg);
112
+ -o-transform: rotate(120deg);
113
+ transform: rotate(120deg);
114
+ }
115
+
116
+ @-webkit-keyframes pace-theme-center-atom-spin {
117
+ 0% { -webkit-transform: rotate(0deg) }
118
+ 100% { -webkit-transform: rotate(359deg) }
119
+ }
120
+ @-moz-keyframes pace-theme-center-atom-spin {
121
+ 0% { -moz-transform: rotate(0deg) }
122
+ 100% { -moz-transform: rotate(359deg) }
123
+ }
124
+ @-o-keyframes pace-theme-center-atom-spin {
125
+ 0% { -o-transform: rotate(0deg) }
126
+ 100% { -o-transform: rotate(359deg) }
127
+ }
128
+ @keyframes pace-theme-center-atom-spin {
129
+ 0% { transform: rotate(0deg) }
130
+ 100% { transform: rotate(359deg) }
131
+ }
@@ -0,0 +1,90 @@
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
+
6
+ -webkit-user-select: none;
7
+ -moz-user-select: none;
8
+ user-select: none;
9
+
10
+ -webkit-perspective: 12rem;
11
+ -moz-perspective: 12rem;
12
+ -ms-perspective: 12rem;
13
+ -o-perspective: 12rem;
14
+ perspective: 12rem;
15
+
16
+ z-index: 2000;
17
+ position: fixed;
18
+ height: 6rem;
19
+ width: 6rem;
20
+ margin: auto;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ }
26
+
27
+ .pace.pace-inactive .pace-progress {
28
+ display: none;
29
+ }
30
+
31
+ .pace .pace-progress {
32
+ position: fixed;
33
+ z-index: 2000;
34
+ display: block;
35
+ position: absolute;
36
+ left: 0;
37
+ top: 0;
38
+ height: 6rem;
39
+ width: 6rem !important;
40
+ line-height: 6rem;
41
+ font-size: 2rem;
42
+ border-radius: 50%;
43
+ background: rgba(124, 96, 224, 0.8);
44
+ color: #fff;
45
+ font-family: "Helvetica Neue", sans-serif;
46
+ font-weight: 100;
47
+ text-align: center;
48
+
49
+ -webkit-animation: pace-theme-center-circle-spin linear infinite 2s;
50
+ -moz-animation: pace-theme-center-circle-spin linear infinite 2s;
51
+ -ms-animation: pace-theme-center-circle-spin linear infinite 2s;
52
+ -o-animation: pace-theme-center-circle-spin linear infinite 2s;
53
+ animation: pace-theme-center-circle-spin linear infinite 2s;
54
+
55
+ -webkit-transform-style: preserve-3d;
56
+ -moz-transform-style: preserve-3d;
57
+ -ms-transform-style: preserve-3d;
58
+ -o-transform-style: preserve-3d;
59
+ transform-style: preserve-3d;
60
+ }
61
+
62
+ .pace .pace-progress:after {
63
+ content: attr(data-progress-text);
64
+ display: block;
65
+ }
66
+
67
+ @-webkit-keyframes pace-theme-center-circle-spin {
68
+ from { -webkit-transform: rotateY(0deg) }
69
+ to { -webkit-transform: rotateY(360deg) }
70
+ }
71
+
72
+ @-moz-keyframes pace-theme-center-circle-spin {
73
+ from { -moz-transform: rotateY(0deg) }
74
+ to { -moz-transform: rotateY(360deg) }
75
+ }
76
+
77
+ @-ms-keyframes pace-theme-center-circle-spin {
78
+ from { -ms-transform: rotateY(0deg) }
79
+ to { -ms-transform: rotateY(360deg) }
80
+ }
81
+
82
+ @-o-keyframes pace-theme-center-circle-spin {
83
+ from { -o-transform: rotateY(0deg) }
84
+ to { -o-transform: rotateY(360deg) }
85
+ }
86
+
87
+ @keyframes pace-theme-center-circle-spin {
88
+ from { transform: rotateY(0deg) }
89
+ to { transform: rotateY(360deg) }
90
+ }