material-sass 1.4.1 → 4.0.0.alpha5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (189) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/Rakefile +61 -0
  4. data/app/assets/fonts/{MaterialIcons-Regular.eot → material-icons/MaterialIcons-Regular.eot} +0 -0
  5. data/app/assets/fonts/{MaterialIcons-Regular.ijmap → material-icons/MaterialIcons-Regular.ijmap} +0 -0
  6. data/app/assets/fonts/{MaterialIcons-Regular.svg → material-icons/MaterialIcons-Regular.svg} +0 -0
  7. data/app/assets/fonts/{MaterialIcons-Regular.ttf → material-icons/MaterialIcons-Regular.ttf} +0 -0
  8. data/app/assets/fonts/{MaterialIcons-Regular.woff → material-icons/MaterialIcons-Regular.woff} +0 -0
  9. data/app/assets/fonts/{MaterialIcons-Regular.woff2 → material-icons/MaterialIcons-Regular.woff2} +0 -0
  10. data/app/assets/fonts/{README.md → material-icons/README.md} +0 -0
  11. data/app/assets/fonts/{codepoints → material-icons/codepoints} +0 -0
  12. data/app/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  13. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  14. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  15. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  16. data/app/assets/fonts/roboto/Roboto-Light.eot +0 -0
  17. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  18. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  19. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  20. data/app/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  21. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  22. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  23. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  24. data/app/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  25. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  26. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  27. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  28. data/app/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  29. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  30. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  31. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  32. data/app/assets/javascripts/material.js +739 -798
  33. data/app/assets/javascripts/material/addons-materialise/pickadate.js +139 -0
  34. data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js +9 -0
  35. data/app/assets/javascripts/material/addons-materialise/wave.js +12 -0
  36. data/app/assets/javascripts/material/addons/pickadate.js +7 -0
  37. data/app/assets/javascripts/material/addons/textarea-autosize.js +5 -0
  38. data/app/assets/javascripts/material/{wave.js → addons/wave.js} +0 -10
  39. data/app/assets/javascripts/material/src/floating-label.js +91 -0
  40. data/app/assets/javascripts/material/src/navdrawer.js +352 -0
  41. data/app/assets/javascripts/material/src/tab-switch.js +136 -0
  42. data/app/assets/javascripts/material/src/util.js +138 -0
  43. data/app/assets/stylesheets/material.min.css +2 -2
  44. data/app/assets/stylesheets/material.scss +1 -1
  45. data/app/assets/stylesheets/material/_mixins.scss +21 -0
  46. data/app/assets/stylesheets/material/_utilities.scss +15 -0
  47. data/app/assets/stylesheets/material/_variables.scss +25 -0
  48. data/app/assets/stylesheets/material/base/_base.scss +482 -0
  49. data/app/assets/stylesheets/material/base/_grid.scss +28 -40
  50. data/app/assets/stylesheets/material/base/_typography.scss +208 -0
  51. data/app/assets/stylesheets/material/bootstrap/_alert.scss +55 -0
  52. data/app/assets/stylesheets/material/bootstrap/_animation.scss +26 -0
  53. data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss +39 -0
  54. data/app/assets/stylesheets/material/bootstrap/_button-group.scss +155 -0
  55. data/app/assets/stylesheets/material/bootstrap/_carousel.scss +234 -0
  56. data/app/assets/stylesheets/material/bootstrap/_close.scss +31 -0
  57. data/app/assets/stylesheets/material/bootstrap/_code.scss +50 -0
  58. data/app/assets/stylesheets/material/bootstrap/_custom-form.scss +69 -0
  59. data/app/assets/stylesheets/material/bootstrap/_form.scss +116 -0
  60. data/app/assets/stylesheets/material/bootstrap/_image.scss +25 -0
  61. data/app/assets/stylesheets/material/bootstrap/_jumbotron.scss +12 -0
  62. data/app/assets/stylesheets/material/bootstrap/_media.scss +69 -0
  63. data/app/assets/stylesheets/material/bootstrap/_nav.scss +118 -0
  64. data/app/assets/stylesheets/material/bootstrap/_pagination.scss +68 -0
  65. data/app/assets/stylesheets/material/bootstrap/_popover.scss +84 -0
  66. data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss +37 -0
  67. data/app/assets/stylesheets/material/material.scss +62 -0
  68. data/app/assets/stylesheets/material/material/_button-flat.scss +53 -0
  69. data/app/assets/stylesheets/material/material/_button-float.scss +29 -0
  70. data/app/assets/stylesheets/material/material/_button.scss +241 -0
  71. data/app/assets/stylesheets/material/material/_card.scss +286 -0
  72. data/app/assets/stylesheets/material/material/_chip.scss +93 -0
  73. data/app/assets/stylesheets/material/material/_data-table.scss +138 -0
  74. data/app/assets/stylesheets/material/material/_dialog.scss +147 -0
  75. data/app/assets/stylesheets/material/material/_expansion-panel.scss +292 -0
  76. data/app/assets/stylesheets/material/material/_menu.scss +281 -0
  77. data/app/assets/stylesheets/material/material/_navdrawer.scss +289 -0
  78. data/app/assets/stylesheets/material/material/_picker.scss +272 -0
  79. data/app/assets/stylesheets/material/material/_progress-circular.scss +144 -0
  80. data/app/assets/stylesheets/material/material/_progress.scss +174 -0
  81. data/app/assets/stylesheets/material/material/_selection-control.scss +221 -0
  82. data/app/assets/stylesheets/material/material/_stepper.scss +135 -0
  83. data/app/assets/stylesheets/material/material/_tab.scss +196 -0
  84. data/app/assets/stylesheets/material/material/_text-field-floating-label.scss +51 -0
  85. data/app/assets/stylesheets/material/material/_text-field-input-group.scss +76 -0
  86. data/app/assets/stylesheets/material/material/_text-field-textarea.scss +31 -0
  87. data/app/assets/stylesheets/material/material/_text-field.scss +179 -0
  88. data/app/assets/stylesheets/material/material/_toolbar.scss +516 -0
  89. data/app/assets/stylesheets/material/material/_tooltip.scss +86 -0
  90. data/app/assets/stylesheets/material/mixins/_background-variant.scss +14 -0
  91. data/app/assets/stylesheets/material/mixins/_border-radius.scss +34 -0
  92. data/app/assets/stylesheets/material/mixins/_breakpoint.scss +38 -0
  93. data/app/assets/stylesheets/material/mixins/_clearfix.scss +7 -0
  94. data/app/assets/stylesheets/material/mixins/_form.scss +60 -0
  95. data/app/assets/stylesheets/material/mixins/_grid.scss +149 -0
  96. data/app/assets/stylesheets/material/mixins/_hex-to-rgba.scss +3 -0
  97. data/app/assets/stylesheets/material/mixins/_hover.scss +70 -0
  98. data/app/assets/stylesheets/material/mixins/_image.scss +4 -0
  99. data/app/assets/stylesheets/material/mixins/_list.scss +4 -0
  100. data/app/assets/stylesheets/material/mixins/_nav-divider.scss +6 -0
  101. data/app/assets/stylesheets/material/mixins/_pull.scss +7 -0
  102. data/app/assets/stylesheets/material/mixins/_reset-text.scss +35 -0
  103. data/app/assets/stylesheets/material/mixins/_screenreader.scss +23 -0
  104. data/app/assets/stylesheets/material/mixins/_strip-unit.scss +3 -0
  105. data/app/assets/stylesheets/material/mixins/_tab-focus.scss +5 -0
  106. data/app/assets/stylesheets/material/mixins/_text-emphasis.scss +14 -0
  107. data/app/assets/stylesheets/material/mixins/_text-hide.scss +7 -0
  108. data/app/assets/stylesheets/material/mixins/_text-truncate.scss +5 -0
  109. data/app/assets/stylesheets/material/mixins/_transition.scss +55 -0
  110. data/app/assets/stylesheets/material/mixins/_typography.scss +69 -0
  111. data/app/assets/stylesheets/material/utilities/_align.scss +23 -0
  112. data/app/assets/stylesheets/material/utilities/_background.scss +23 -0
  113. data/app/assets/stylesheets/material/utilities/_border.scss +27 -0
  114. data/app/assets/stylesheets/material/utilities/_clearfix.scss +3 -0
  115. data/app/assets/stylesheets/material/utilities/_display.scss +11 -0
  116. data/app/assets/stylesheets/material/utilities/_float.scss +15 -0
  117. data/app/assets/stylesheets/material/utilities/_material-icons.scss +10 -0
  118. data/app/assets/stylesheets/material/utilities/_screenreader.scss +7 -0
  119. data/app/assets/stylesheets/material/utilities/_spacing.scss +65 -0
  120. data/app/assets/stylesheets/material/utilities/_text.scss +95 -0
  121. data/app/assets/stylesheets/material/utilities/_visibility.scss +50 -0
  122. data/app/assets/stylesheets/material/utilities/_waves.scss +48 -0
  123. data/app/assets/stylesheets/material/variables/_animation.scss +22 -0
  124. data/app/assets/stylesheets/material/variables/_colour.scss +389 -0
  125. data/app/assets/stylesheets/material/variables/_elevation-shadow.scss +84 -0
  126. data/app/assets/stylesheets/material/variables/_grid.scss +32 -0
  127. data/app/assets/stylesheets/material/variables/_spacer.scss +73 -0
  128. data/app/assets/stylesheets/material/variables/_typography.scss +72 -0
  129. data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss +129 -0
  130. data/app/assets/stylesheets/material/variables/_variable-material.scss +434 -0
  131. data/lib/material-sass/engine.rb +3 -2
  132. data/lib/material-sass/version.rb +1 -1
  133. metadata +128 -70
  134. data/app/assets/javascripts/material.min.js +0 -2
  135. data/app/assets/javascripts/material/_.js +0 -6
  136. data/app/assets/javascripts/material/bootstrap.js +0 -6
  137. data/app/assets/javascripts/material/form-floating-label.js +0 -49
  138. data/app/assets/javascripts/material/form-textarea.js +0 -13
  139. data/app/assets/javascripts/material/header.js +0 -12
  140. data/app/assets/javascripts/material/menu.js +0 -200
  141. data/app/assets/javascripts/material/modal.js +0 -12
  142. data/app/assets/javascripts/material/picker.js +0 -141
  143. data/app/assets/javascripts/material/snackbar.js +0 -116
  144. data/app/assets/javascripts/material/tab.js +0 -51
  145. data/app/assets/javascripts/material/tile.js +0 -181
  146. data/app/assets/stylesheets/material/addons/_material-icons.scss +0 -9
  147. data/app/assets/stylesheets/material/addons/_waves.scss +0 -44
  148. data/app/assets/stylesheets/material/addons/material-icons/_core.scss +0 -20
  149. data/app/assets/stylesheets/material/addons/material-icons/_larger.scss +0 -23
  150. data/app/assets/stylesheets/material/addons/material-icons/_path.scss +0 -11
  151. data/app/assets/stylesheets/material/addons/material-icons/_variables.scss +0 -3
  152. data/app/assets/stylesheets/material/base.scss +0 -50
  153. data/app/assets/stylesheets/material/base/_reset.scss +0 -421
  154. data/app/assets/stylesheets/material/components/_avatar.scss +0 -59
  155. data/app/assets/stylesheets/material/components/_breadcrumb.scss +0 -26
  156. data/app/assets/stylesheets/material/components/_button-flat.scss +0 -22
  157. data/app/assets/stylesheets/material/components/_button-float.scss +0 -183
  158. data/app/assets/stylesheets/material/components/_button.scss +0 -81
  159. data/app/assets/stylesheets/material/components/_card.scss +0 -175
  160. data/app/assets/stylesheets/material/components/_code.scss +0 -53
  161. data/app/assets/stylesheets/material/components/_dropdown.scss +0 -99
  162. data/app/assets/stylesheets/material/components/_form-checkbox.scss +0 -161
  163. data/app/assets/stylesheets/material/components/_form-floating-label.scss +0 -64
  164. data/app/assets/stylesheets/material/components/_form-switch.scss +0 -96
  165. data/app/assets/stylesheets/material/components/_form-textarea.scss +0 -4
  166. data/app/assets/stylesheets/material/components/_form.scss +0 -217
  167. data/app/assets/stylesheets/material/components/_label.scss +0 -23
  168. data/app/assets/stylesheets/material/components/_modal.scss +0 -164
  169. data/app/assets/stylesheets/material/components/_nav.scss +0 -53
  170. data/app/assets/stylesheets/material/components/_picker.scss +0 -298
  171. data/app/assets/stylesheets/material/components/_progress-circular.scss +0 -169
  172. data/app/assets/stylesheets/material/components/_progress-loadbar.scss +0 -97
  173. data/app/assets/stylesheets/material/components/_progress.scss +0 -132
  174. data/app/assets/stylesheets/material/components/_snackbar.scss +0 -59
  175. data/app/assets/stylesheets/material/components/_stepper.scss +0 -201
  176. data/app/assets/stylesheets/material/components/_tab.scss +0 -84
  177. data/app/assets/stylesheets/material/components/_table.scss +0 -82
  178. data/app/assets/stylesheets/material/components/_tile.scss +0 -156
  179. data/app/assets/stylesheets/material/elements/_content.scss +0 -42
  180. data/app/assets/stylesheets/material/elements/_header.scss +0 -141
  181. data/app/assets/stylesheets/material/elements/_menu.scss +0 -267
  182. data/app/assets/stylesheets/material/mixin/_grid.scss +0 -78
  183. data/app/assets/stylesheets/material/mixin/_responsive.scss +0 -32
  184. data/app/assets/stylesheets/material/mixin/_utilities.scss +0 -69
  185. data/app/assets/stylesheets/material/utilities/_print.scss +0 -95
  186. data/app/assets/stylesheets/material/utilities/_utilities-responsive.scss +0 -97
  187. data/app/assets/stylesheets/material/utilities/_utilities.scss +0 -393
  188. data/app/assets/stylesheets/material/var/_colours.scss +0 -336
  189. data/app/assets/stylesheets/material/var/_variables.scss +0 -78
@@ -1,298 +0,0 @@
1
- .picker {
2
- position: absolute;
3
- z-index: $top-base;
4
- user-select: none;
5
- }
6
-
7
- .picker__box {
8
- background-color: $white;
9
- border-radius: 0 0 4px 4px;
10
- flex: 1;
11
- // 992
12
- @include responsive(md) {
13
- border-radius: 0 4px 4px 0;
14
- }
15
- }
16
-
17
- .picker__date-display {
18
- background-color: $brand-color;
19
- border-radius: 4px 4px 0 0;
20
- color: $brand-text;
21
- padding: $margin-sm $grid-gutter;
22
- text-align: left;
23
- // 992
24
- @include responsive(md) {
25
- border-radius: 4px 0 0 4px;
26
- width: floor(($cell-height * 7 + $grid-gutter) / 2);
27
- }
28
- }
29
-
30
- .picker__date-display-bottom {
31
- font-size: $font-size-h2;
32
- line-height: $line-height-h2;
33
- overflow: hidden;
34
- text-overflow: ellipsis;
35
- white-space: nowrap;
36
- }
37
-
38
- .picker__date-display-top {
39
- color: $brand-color-light;
40
- margin-bottom: $margin-base;
41
- }
42
-
43
- .picker__day {
44
- border-radius: 50%;
45
- display: inline-block;
46
- height: $btn-height;
47
- padding: (($btn-height - $line-height) / 2) 0;
48
- width: $btn-height;
49
- &:focus,
50
- &:hover {
51
- color: $brand-color;
52
- cursor: pointer;
53
- }
54
- &.picker__day--disabled {
55
- color: inherit;
56
- cursor: not-allowed;
57
- opacity: 0.5;
58
- }
59
- &.picker__day--highlighted {
60
- color: $brand-color;
61
- }
62
- &.picker__day--selected {
63
- background-color: $brand-color;
64
- color: $brand-text !important;
65
- }
66
- }
67
-
68
- .picker__day-display {
69
- margin-right: ($grid-gutter / 2);
70
- }
71
-
72
- .picker__day--outfocus {
73
- display: none;
74
- }
75
-
76
- .picker__footer {
77
- padding: $margin-base $grid-gutter;
78
- text-align: right;
79
- button {
80
- margin-left: ($grid-gutter / 2);
81
- &:first-child {
82
- margin-left: 0;
83
- }
84
- }
85
- // 992
86
- @include responsive(md) {
87
- padding-right: ($grid-gutter * 1.5);
88
- padding-left: ($grid-gutter * 1.5);
89
- }
90
- }
91
-
92
- .picker__frame {
93
- margin: $margin-lg auto;
94
- max-width: ($btn-height * 7 + $grid-gutter);
95
- position: relative;
96
- transform: scale(0, 0);
97
- transition: transform 0.3s $timing;
98
- .picker--opened & {
99
- transform: scale(1, 1);
100
- }
101
- // 992
102
- @include responsive(md) {
103
- max-width: ceil(($cell-height * 7 + $grid-gutter) * 1.5);
104
- }
105
- }
106
-
107
- .picker__header {
108
- margin-top: $margin-sm;
109
- margin-bottom: (($btn-height - $line-height) / 2);
110
- position: relative;
111
- }
112
-
113
- .picker__holder {
114
- align-items: center;
115
- backface-visibility: hidden;
116
- display: flex;
117
- overflow-x: hidden;
118
- overflow-y: auto;
119
- position: fixed;
120
- top: 0;
121
- right: 0;
122
- bottom: 0;
123
- left: 0;
124
- text-align: center;
125
- transform: translateY(100%);
126
- transition: transform 0s 0.3s;
127
- width: 100%;
128
- -webkit-overflow-scrolling: touch;
129
- -ms-overflow-style: -ms-autohiding-scrollbar;
130
- &:before {
131
- background-color: $black;
132
- content: "";
133
- display: block;
134
- height: 100%;
135
- opacity: 0;
136
- position: absolute;
137
- top: 0;
138
- left: 0;
139
- transition: opacity 0.3s $timing;
140
- width: 100%;
141
- }
142
- .picker--opened & {
143
- transform: translateZ(0);
144
- transition: none;
145
- &:before {
146
- opacity: 0.5;
147
- }
148
- }
149
- }
150
-
151
- .picker__input {
152
- background-color: transparent !important;
153
- border-bottom-style: solid !important;
154
- color: inherit !important;
155
- cursor: text !important;
156
- &.picker__input--active {
157
- border-color: $brand-color-accent;
158
- border-bottom-width: 2px;
159
- &.form-control-default {
160
- border-bottom-width: 1px;
161
- }
162
- }
163
- }
164
-
165
- .picker__month,
166
- .picker__year {
167
- display: inline;
168
- margin-left: $grid-gutter;
169
- &:first-child {
170
- margin-left: 0;
171
- }
172
- }
173
-
174
- .picker__nav--next,
175
- .picker__nav--prev {
176
- cursor: pointer;
177
- height: $btn-height;
178
- line-height: $line-height;
179
- margin-top: ($btn-height / -2);
180
- padding-top: (($btn-height - $line-height) / 2);
181
- padding-bottom: (($btn-height - $line-height) / 2);
182
- position: absolute;
183
- top: 50%;
184
- text-align: center;
185
- width: $btn-height;
186
- &:focus,
187
- &:hover {
188
- color: $brand-color;
189
- }
190
- // 992
191
- @include responsive(md) {
192
- width: $cell-height;
193
- }
194
- }
195
-
196
- .picker__nav--next {
197
- // position
198
- right: ($grid-gutter / 2);
199
- &:before {
200
- content: "keyboard_arrow_right";
201
- }
202
- }
203
-
204
- .picker__nav--prev {
205
- // position
206
- left: ($grid-gutter / 2);
207
- &:before {
208
- content: "keyboard_arrow_left";
209
- }
210
- }
211
-
212
- .picker__select--month,
213
- .picker__select--year {
214
- @extend .form-control;
215
- background-position: 100% (($line-height - 12) / 2) !important;
216
- border-bottom: 0;
217
- display: inline-block;
218
- height: $line-height;
219
- margin-left: $grid-gutter;
220
- padding: 0;
221
- width: auto;
222
- &:first-child {
223
- margin-left: 0;
224
- }
225
- &:focus {
226
- border-bottom: 0;
227
- padding-bottom: 0;
228
- }
229
- }
230
-
231
- .picker__table {
232
- border-collapse: collapse;
233
- border-spacing: 0;
234
- margin: 0 ($grid-gutter / 2);
235
- table-layout: fixed;
236
- // 992
237
- @include responsive(md) {
238
- margin: 0;
239
- }
240
- }
241
-
242
- .picker__table td,
243
- .picker__table th {
244
- border: 0;
245
- font-size: floor($font-size * 0.9);
246
- line-height: $line-height;
247
- margin: 0;
248
- padding: 0;
249
- text-align: center;
250
- vertical-align: middle;
251
- width: $btn-height;
252
- // 992
253
- @include responsive(md) {
254
- width: $cell-height;
255
- &:first-child {
256
- padding-left: ($grid-gutter / 2);
257
- width: ($cell-height + $grid-gutter / 2);
258
- }
259
- &:last-child {
260
- padding-right: ($grid-gutter / 2);
261
- width: ($cell-height + $grid-gutter / 2);
262
- }
263
- }
264
- }
265
-
266
- .picker__weekday {
267
- color: $black-hint-solid;
268
- padding-top: (($btn-height - $line-height) / 2) !important;
269
- padding-bottom: (($btn-height - $line-height) / 2) !important;
270
- }
271
-
272
- .picker__weekday-display {
273
- margin-right: ($grid-gutter / 2);
274
- &:after {
275
- content: ",";
276
- }
277
- // 992
278
- @include responsive(md) {
279
- display: block;
280
- overflow: hidden;
281
- text-overflow: ellipsis;
282
- }
283
- }
284
-
285
- .picker__wrap {
286
- border-radius: 4px;
287
- box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
288
- display: flex;
289
- flex-direction: column;
290
- outline: 0;
291
- position: relative;
292
- vertical-align: middle;
293
- z-index: 1;
294
- // 992
295
- @include responsive(md) {
296
- flex-direction: row;
297
- }
298
- }
@@ -1,169 +0,0 @@
1
- .progress-circular {
2
- height: $pcircular-height;
3
- margin-top: $margin-md;
4
- margin-bottom: $margin-md;
5
- overflow: hidden;
6
- position: relative;
7
- width: $pcircular-height;
8
- }
9
-
10
- .progress-circular-center {
11
- margin-right: auto;
12
- margin-left: auto;
13
- }
14
-
15
- .progress-circular-gap {
16
- border-top: 2px solid $brand-color-accent;
17
- position: absolute;
18
- top: 0;
19
- right: ($pcircular-height / 2 - 1);
20
- bottom: 0;
21
- left: ($pcircular-height / 2 - 1);
22
- }
23
-
24
- // colour
25
- @each $color in $palette-list-class {
26
- $i: index($palette-list-class, $color);
27
-
28
- @if $color != "brand-accent" {
29
- .progress-circular-gap {
30
- .progress-circular-#{$color} & {
31
- border-top-color: nth($palette-list-color, $i);
32
- }
33
- }
34
- }
35
- }
36
-
37
- .progress-circular-inline {
38
- display: inline-block;
39
- margin-right: $grid-gutter;
40
- margin-left: $grid-gutter;
41
- }
42
-
43
- .progress-circular-inner {
44
- animation: pcircular-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
45
- height: $pcircular-height;
46
- position: relative;
47
- width: $pcircular-height;
48
- will-change: transform;
49
- }
50
-
51
- .progress-circular-left,
52
- .progress-circular-right {
53
- height: $pcircular-height;
54
- overflow: hidden;
55
- position: absolute;
56
- top: 0;
57
- width: ($pcircular-height / 2);
58
- }
59
-
60
- .progress-circular-left {
61
- // position
62
- left: 0;
63
- }
64
-
65
- .progress-circular-right {
66
- // position
67
- right: 0;
68
- }
69
-
70
- .progress-circular-spinner {
71
- border: ($base / 2) solid $brand-color-accent;
72
- border-bottom-color: transparent;
73
- border-radius: 50%;
74
- height: $pcircular-height;
75
- position: absolute;
76
- top: 0;
77
- width: $pcircular-height;
78
- will-change: transform;
79
- .progress-circular-left & {
80
- animation: pcircular-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
81
- border-right-color: transparent;
82
- // position
83
- left: 0;
84
- }
85
- .progress-circular-right & {
86
- animation: pcircular-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
87
- border-left-color: transparent;
88
- // position
89
- right: 0;
90
- }
91
- }
92
-
93
- // colour
94
- @each $color in $palette-list-class {
95
- $i: index($palette-list-class, $color);
96
-
97
- @if $color != "brand-accent" {
98
- .progress-circular-spinner {
99
- .progress-circular-#{$color} & {
100
- border-top-color: nth($palette-list-color, $i);
101
- }
102
- .progress-circular-#{$color} .progress-circular-left & {
103
- border-left-color: nth($palette-list-color, $i);
104
- }
105
- .progress-circular-#{$color} .progress-circular-right & {
106
- border-right-color: nth($palette-list-color, $i);
107
- }
108
- }
109
- }
110
- }
111
-
112
- .progress-circular-wrapper {
113
- animation: pcircular-wrapper-rotate 2.91667s linear infinite;
114
- will-change: transform;
115
- }
116
-
117
- // animation
118
- @keyframes pcircular-inner-rotate {
119
- 12.5% {
120
- transform: rotate(135deg);
121
- }
122
- 25% {
123
- transform: rotate(270deg);
124
- }
125
- 37.5% {
126
- transform: rotate(405deg);
127
- }
128
- 50% {
129
- transform: rotate(540deg);
130
- }
131
- 62.5% {
132
- transform: rotate(675deg);
133
- }
134
- 75% {
135
- transform: rotate(810deg);
136
- }
137
- 87.5% {
138
- transform: rotate(945deg);
139
- }
140
- 100% {
141
- transform: rotate(1080deg);
142
- }
143
- }
144
-
145
- @keyframes pcircular-spinner-left {
146
- 0%,
147
- 100% {
148
- transform: rotate(130deg);
149
- }
150
- 50% {
151
- transform: rotate(-5deg);
152
- }
153
- }
154
-
155
- @keyframes pcircular-spinner-right {
156
- 0%,
157
- 100% {
158
- transform: rotate(-130deg);
159
- }
160
- 50% {
161
- transform: rotate(5deg);
162
- }
163
- }
164
-
165
- @keyframes pcircular-wrapper-rotate {
166
- 100% {
167
- transform: rotate(360deg);
168
- }
169
- }