Skip to content

Commit 8c97caa

Browse files
ZMYaroZMYaro
committed
Update MaterialZ
1 parent ceb10c8 commit 8c97caa

File tree

4 files changed

+453
-66
lines changed

4 files changed

+453
-66
lines changed

‎app/static/scripts/libs/material-touch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Script for triggering element active states when touched
22
* Supplement to the MaterialZ CSS library
33
*
4-
* Copyright 2016 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* https://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
(function () {

‎app/static/styles/libs/material-depth.css‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Base Material styles for depth
22
* Part of the MaterialZ CSS library
33
*
4-
* Copyright 2015-2020 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* http://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
@charset "UTF-8";
@@ -29,6 +29,17 @@
2929
-o-transition-property: box-shadow;
3030
transition-property: box-shadow;
3131
}
32+
.card.full-width.z1,
33+
.card.full-width.z2,
34+
.card.full-width.z3,
35+
.card.full-width.z4,
36+
.card.full-width.z5 {
37+
-webkit-transition-property: margin, border-radius, -webkit-box-shadow, box-shadow;
38+
-moz-transition-property: margin, border-radius, -moz-box-shadow, box-shadow;
39+
-ms-transition-property: margin, border-radius, box-shadow;
40+
-o-transition-property: margin, border-radius, box-shadow;
41+
transition-property: margin, border-radius, box-shadow;
42+
}
3243
button.z1,
3344
button.z2,
3445
button.z3,
@@ -165,8 +176,6 @@ input[type="reset"].z5 {
165176
-webkit-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
166177
-moz-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
167178
box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
168-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
169-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
170179
}
171180

172181
button.z1:hover,
@@ -182,8 +191,6 @@ input[type="reset"].z1:focus {
182191
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
183192
-moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
184193
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
185-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7);
186-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7)";
187194
}
188195
.z2,
189196
button.z1:enabled:active,
@@ -199,8 +206,6 @@ input[type="reset"].z1.active {
199206
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
200207
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
201208
box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
202-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10);
203-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10)";
204209
}
205210
.z3,
206211
button.z2:enabled:active,
@@ -255,6 +260,18 @@ input[type="reset"].z1.disabled {
255260
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
256261
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
257262
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
258-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
259-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
263+
}
264+
265+
@media (prefers-reduced-motion: reduce) {
266+
.z1,
267+
.z2,
268+
.z3,
269+
.z4,
270+
.z5 {
271+
-webkit-transition-duration: 0s;
272+
-moz-transition-duration: 0s;
273+
-ms-transition-duration: 0s;
274+
-o-transition-duration: 0s;
275+
transition-duration: 0s;
276+
}
260277
}

‎app/static/styles/libs/material-elements.css‎

Lines changed: 135 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Base Material styles for elements
22
* Part of the MaterialZ CSS library
33
*
4-
* Copyright 2015-2020 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* http://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
@charset "UTF-8";
@@ -137,11 +137,11 @@ select {
137137
min-width: 0;
138138
position: relative;
139139
background-color: transparent;
140-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAICAYAAACs/DyzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFRJREFUeNrUzzEKACAMA8AMPjw/rzoIUlqqTqYQ6JAMBwAcscfQzPBz1r0g5wYqwFsk10gJeIrkPlADVkj6siIwQzIqqgI9klnpd2ArgNEvdV2AAQCCQISyxDe1CAAAAABJRU5ErkJggg==);
141-
background-size: 28px 4px;
140+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAIAgMAAADCRZTUAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAgJsrThgAAAAySURBVAjXY8hatWolAwxIrVq1BM5hW7VqApzDuGqVAwMcZAG1IDQBtSA0AbUgNCG0AAD8iAqhtDTiaAAAAABJRU5ErkJggg==);
141+
background-size: 24px 4px;
142142
background-position: right center;
143143
background-repeat: no-repeat;
144-
padding-right: 36px;
144+
padding-right: 32px;
145145

146146
/* Hide the default arrow in Gecko. */
147147
text-indent: 0.01px;
@@ -195,8 +195,8 @@ input[type="checkbox"] {
195195

196196
border-style: solid;
197197
border-width: 2px;
198-
border-color: black;
199-
color: black;
198+
color: inherit;
199+
border-color: currentcolor;
200200

201201
background-color: transparent;
202202
background-repeat: no-repeat;
@@ -223,9 +223,70 @@ input[type="checkbox"] {
223223
}
224224
input[type="radio"]:checked,
225225
input[type="checkbox"]:checked {
226-
border-color: #40c4ff;
227226
color: #40c4ff;
227+
color: var(--mz-accent-color, #40c4ff);
228228
}
229+
input[type="radio"]::before,
230+
input[type="checkbox"]::before {
231+
content: '';
232+
233+
display: block;
234+
position: absolute;
235+
left: 0;
236+
top: 0;
237+
right: 0;
238+
bottom: 0;
239+
240+
-webkit-border-radius: 50%;
241+
-moz-border-radius: 50%;
242+
border-radius: 50%;
243+
244+
background-color: rgba(128, 128, 128, 0);
245+
-webkit-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 0px,
246+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
247+
-moz-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 0px,
248+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
249+
box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 0px,
250+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
251+
252+
-webkit-transition-duration: 0.1s;
253+
-moz-transition-duration: 0.1s;
254+
-ms-transition-duration: 0.1s;
255+
-o-transition-duration: 0.1s;
256+
transition-duration: 0.1s;
257+
-webkit-transition-timing-function: linear;
258+
-moz-transition-timing-function: linear;
259+
-ms-transition-timing-function: linear;
260+
-o-transition-timing-function: linear;
261+
transition-timing-function: linear;
262+
-webkit-transition-property: background-color, -webkit-box-shadow, box-shadow;
263+
-moz-transition-property: background-color, -moz-box-shadow, box-shadow;
264+
-ms-transition-property: background-color, box-shadow;
265+
-o-transition-property: background-color, box-shadow;
266+
transition-property: background-color, box-shadow;
267+
}
268+
input[type="radio"]:not(:disabled):focus::before,
269+
input[type="checkbox"]:not(:disabled):focus::before {
270+
background-color: rgba(128, 128, 128, 0.1);
271+
-webkit-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
272+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
273+
-moz-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
274+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
275+
box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
276+
rgba(128, 128, 128, 0.1) 0px 0px 0px 0px;
277+
}
278+
input[type="radio"]:not(:disabled):active::before,
279+
input[type="radio"]:not(:disabled).active::before,
280+
input[type="checkbox"]:not(:disabled):active::before,
281+
input[type="checkbox"]:not(:disabled).active::before {
282+
background-color: rgba(128, 128, 128, 0.2);
283+
-webkit-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
284+
rgba(128, 128, 128, 0.1) 0px 0px 0px 13px;
285+
-moz-box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
286+
rgba(128, 128, 128, 0.1) 0px 0px 0px 13px;
287+
box-shadow: rgba(128, 128, 128, 0.1) 0px 0px 0px 13px,
288+
rgba(128, 128, 128, 0.1) 0px 0px 0px 13px;
289+
}
229290
input[type="radio"] {
230291
width: 20px;
231292
height: 20px;
@@ -269,9 +330,9 @@ input[type="radio"] {
269330
-o-transition-property: box-shadow, -o-transform, transform;
270331
transition-property: box-shadow, transform;
271332

272-
-webkit-box-shadow: inset 0 0 0 0;
273-
-moz-box-shadow: inset 0 0 0 0;
274-
box-shadow: inset 0 0 0 0;
333+
-webkit-box-shadow: inset 0 0 0 0 currentcolor;
334+
-moz-box-shadow: inset 0 0 0 0 currentcolor;
335+
box-shadow: inset 0 0 0 0 currentcolor;
275336

276337
-webkit-transform: scale(1);
277338
-moz-transform: scale(1);
@@ -287,9 +348,9 @@ input[type="radio"] {
287348
transition-delay: 0, 0.13s;
288349

289350
color: inherit;
290-
-webkit-box-shadow: inset 0 0 0 10px;
291-
-moz-box-shadow: inset 0 0 0 10px;
292-
box-shadow: inset 0 0 0 10px;
351+
-webkit-box-shadow: inset 0 0 0 10px currentcolor;
352+
-moz-box-shadow: inset 0 0 0 10px currentcolor;
353+
box-shadow: inset 0 0 0 10px currentcolor;
293354

294355
-webkit-transform: scale(0.65);
295356
-moz-transform: scale(0.65);
@@ -303,16 +364,16 @@ input[type="checkbox"] {
303364
-webkit-border-radius: 2px;
304365
-moz-border-radius: 2px;
305366
border-radius: 2px;
306-
color: black;
307-
-webkit-box-shadow: inset 0 0 0 0;
308-
-moz-box-shadow: inset 0 0 0 0;
309-
box-shadow: inset 0 0 0 0;
367+
-webkit-box-shadow: inset 0 0 0 0 currentcolor;
368+
-moz-box-shadow: inset 0 0 0 0 currentcolor;
369+
box-shadow: inset 0 0 0 0 currentcolor;
310370
}
311371
input[type="checkbox"]:checked {
312372
color: #40c4ff;
313-
-webkit-box-shadow: inset 0 0 0 10px;
314-
-moz-box-shadow: inset 0 0 0 10px;
315-
box-shadow: inset 0 0 0 10px;
373+
color: var(--mz-accent-color, #40c4ff);
374+
-webkit-box-shadow: inset 0 0 0 10px currentcolor;
375+
-moz-box-shadow: inset 0 0 0 10px currentcolor;
376+
box-shadow: inset 0 0 0 10px currentcolor;
316377
}
317378
input[type="checkbox"]::after {
318379
content: '';
@@ -363,7 +424,8 @@ input[type="checkbox"] {
363424
}
364425

365426
/* --------======== RANGE SLIDERS and PROGRESS BARS ========-------- */
366-
input[type="range"], progress {
427+
input[type="range"],
428+
progress {
367429
height: 2px;
368430
margin: 16px 8px;
369431
border-style: none;
@@ -375,6 +437,8 @@ input[type="range"], progress {
375437

376438
-webkit-transition-duration: 0.1s;
377439
-moz-transition-duration: 0.1s;
440+
-ms-transition-duration: 0.1s;
441+
-o-transition-duration: 0.1s;
378442
transition-duration: 0.1s;
379443
}
380444
input[type="range"]::-moz-range-track {
@@ -402,6 +466,7 @@ input[type="range"], progress {
402466
-webkit-border-radius: 50%;
403467
border-radius: 50%;
404468
background-color: #40c4ff;
469+
background-color: var(--mz-accent-color, #40c4ff);
405470
-webkit-box-shadow: none;
406471
box-shadow: none;
407472

@@ -415,6 +480,7 @@ input[type="range"], progress {
415480
-moz-border-radius: 50%;
416481
border-radius: 50%;
417482
background-color: #40c4ff;
483+
background-color: var(--mz-accent-color, #40c4ff);
418484
-moz-box-shadow: none;
419485
box-shadow: none;
420486

@@ -427,6 +493,7 @@ input[type="range"], progress {
427493
border: 0 none;
428494
border-radius: 50%;
429495
background-color: #40c4ff;
496+
background-color: var(--mz-accent-color, #40c4ff);
430497
box-shadow: none;
431498

432499
transition-duration: 0.1s;
@@ -485,12 +552,15 @@ input[type="range"], progress {
485552
progress::-webkit-progress-bar-value,
486553
progress::-webkit-progress-value {
487554
background-color: #40c4ff;
555+
background-color: var(--mz-accent-color, #40c4ff);
488556
}
489557
progress::-moz-progress-bar {
490558
background-color: #40c4ff;
559+
background-color: var(--mz-accent-color, #40c4ff);
491560
}
492561
progress::-ms-fill {
493562
background-color: #40c4ff;
563+
background-color: var(--mz-accent-color, #40c4ff);
494564
}
495565

496566
/* --------======== TEXT FIELDS ========-------- */
@@ -539,6 +609,7 @@ select[size] > option {
539609
textarea:focus,
540610
select[size]:focus {
541611
border-color: #40c4ff;
612+
border-color: var(--mz-accent-color, #40c4ff);
542613
outline: 0 none transparent;
543614
}
544615
input[type="text"]:focus,
@@ -572,3 +643,45 @@ select:disabled {
572643
padding: 16px;
573644
}
574645
}
646+
647+
/* Override animations for reduced motion */
648+
@media (prefers-reduced-motion: reduce) {
649+
input[type="radio"],
650+
input[type="checkbox"],
651+
input[type="radio"]::before,
652+
input[type="checkbox"]::before,
653+
input[type="checkbox"]::after,
654+
input[type="range"],
655+
progress {
656+
-webkit-transition-duration: 0s;
657+
-moz-transition-duration: 0s;
658+
-ms-transition-duration: 0s;
659+
-o-transition-duration: 0s;
660+
transition-duration: 0s;
661+
}
662+
663+
input[type="radio"]::after {
664+
-webkit-transition-delay: 0s, 0s, 0s, 0s;
665+
-moz-transition-delay: 0s, 0s, 0s, 0s;
666+
-ms-transition-delay: 0s, 0s, 0s;
667+
-o-transition-delay: 0s, 0s, 0s;
668+
transition-delay: 0s, 0s;
669+
-webkit-transition-duration: 0s, 0s, 0s, 0s;
670+
-moz-transition-duration: 0s, 0s, 0s, 0s;
671+
-ms-transition-duration: 0s, 0s, 0s;
672+
-o-transition-duration: 0s, 0s, 0s;
673+
transition-duration: 0s, 0s;
674+
}
675+
676+
input[type="range"]::-webkit-slider-thumb {
677+
-webkit-transition-duration: 0s;
678+
transition-duration: 0s;
679+
}
680+
input[type="range"]::-moz-range-thumb {
681+
-moz-transition-duration: 0s;
682+
transition-duration: 0s;
683+
}
684+
input[type="range"]::-ms-thumb {
685+
transition-duration: 0s;
686+
}
687+
}

0 commit comments

Comments
 (0)