Skip to content

Commit 27effb1

Browse files
ZMYaroZMYaro
committed
Update MaterialZ
1 parent 859f87b commit 27effb1

File tree

7 files changed

+455
-80
lines changed

7 files changed

+455
-80
lines changed

‎app/scripts/lib/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 2015-2020 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/styles/materialz/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/styles/materialz/material-elements.css‎

Lines changed: 136 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
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";
10+
@import url(//fonts.googleapis.com/css?family=Roboto+Mono:400italic,400|Roboto:400,400italic,500,500italic,700,700italic);
1011

1112
::selection {
1213
background-color: #40c4ff;
@@ -136,11 +137,11 @@ select {
136137
min-width: 0;
137138
position: relative;
138139
background-color: transparent;
139-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAICAYAAACs/DyzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFRJREFUeNrUzzEKACAMA8AMPjw/rzoIUlqqTqYQ6JAMBwAcscfQzPBz1r0g5wYqwFsk10gJeIrkPlADVkj6siIwQzIqqgI9klnpd2ArgNEvdV2AAQCCQISyxDe1CAAAAABJRU5ErkJggg==);
140-
background-size: 28px 4px;
140+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAIAgMAAADCRZTUAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAgJsrThgAAAAySURBVAjXY8hatWolAwxIrVq1BM5hW7VqApzDuGqVAwMcZAG1IDQBtSA0AbUgNCG0AAD8iAqhtDTiaAAAAABJRU5ErkJggg==);
141+
background-size: 24px 4px;
141142
background-position: right center;
142143
background-repeat: no-repeat;
143-
padding-right: 36px;
144+
padding-right: 32px;
144145

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

195196
border-style: solid;
196197
border-width: 2px;
197-
border-color: black;
198-
color: black;
198+
color: inherit;
199+
border-color: currentcolor;
199200

200201
background-color: transparent;
201202
background-repeat: no-repeat;
@@ -222,9 +223,70 @@ input[type="checkbox"] {
222223
}
223224
input[type="radio"]:checked,
224225
input[type="checkbox"]:checked {
225-
border-color: #40c4ff;
226226
color: #40c4ff;
227+
color: var(--mz-accent-color, #40c4ff);
227228
}
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+
}
228290
input[type="radio"] {
229291
width: 20px;
230292
height: 20px;
@@ -268,9 +330,9 @@ input[type="radio"] {
268330
-o-transition-property: box-shadow, -o-transform, transform;
269331
transition-property: box-shadow, transform;
270332

271-
-webkit-box-shadow: inset 0 0 0 0;
272-
-moz-box-shadow: inset 0 0 0 0;
273-
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;
274336

275337
-webkit-transform: scale(1);
276338
-moz-transform: scale(1);
@@ -286,9 +348,9 @@ input[type="radio"] {
286348
transition-delay: 0, 0.13s;
287349

288350
color: inherit;
289-
-webkit-box-shadow: inset 0 0 0 10px;
290-
-moz-box-shadow: inset 0 0 0 10px;
291-
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;
292354

293355
-webkit-transform: scale(0.65);
294356
-moz-transform: scale(0.65);
@@ -302,16 +364,16 @@ input[type="checkbox"] {
302364
-webkit-border-radius: 2px;
303365
-moz-border-radius: 2px;
304366
border-radius: 2px;
305-
color: black;
306-
-webkit-box-shadow: inset 0 0 0 0;
307-
-moz-box-shadow: inset 0 0 0 0;
308-
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;
309370
}
310371
input[type="checkbox"]:checked {
311372
color: #40c4ff;
312-
-webkit-box-shadow: inset 0 0 0 10px;
313-
-moz-box-shadow: inset 0 0 0 10px;
314-
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;
315377
}
316378
input[type="checkbox"]::after {
317379
content: '';
@@ -362,7 +424,8 @@ input[type="checkbox"] {
362424
}
363425

364426
/* --------======== RANGE SLIDERS and PROGRESS BARS ========-------- */
365-
input[type="range"], progress {
427+
input[type="range"],
428+
progress {
366429
height: 2px;
367430
margin: 16px 8px;
368431
border-style: none;
@@ -374,6 +437,8 @@ input[type="range"], progress {
374437

375438
-webkit-transition-duration: 0.1s;
376439
-moz-transition-duration: 0.1s;
440+
-ms-transition-duration: 0.1s;
441+
-o-transition-duration: 0.1s;
377442
transition-duration: 0.1s;
378443
}
379444
input[type="range"]::-moz-range-track {
@@ -401,6 +466,7 @@ input[type="range"], progress {
401466
-webkit-border-radius: 50%;
402467
border-radius: 50%;
403468
background-color: #40c4ff;
469+
background-color: var(--mz-accent-color, #40c4ff);
404470
-webkit-box-shadow: none;
405471
box-shadow: none;
406472

@@ -414,6 +480,7 @@ input[type="range"], progress {
414480
-moz-border-radius: 50%;
415481
border-radius: 50%;
416482
background-color: #40c4ff;
483+
background-color: var(--mz-accent-color, #40c4ff);
417484
-moz-box-shadow: none;
418485
box-shadow: none;
419486

@@ -426,6 +493,7 @@ input[type="range"], progress {
426493
border: 0 none;
427494
border-radius: 50%;
428495
background-color: #40c4ff;
496+
background-color: var(--mz-accent-color, #40c4ff);
429497
box-shadow: none;
430498

431499
transition-duration: 0.1s;
@@ -484,12 +552,15 @@ input[type="range"], progress {
484552
progress::-webkit-progress-bar-value,
485553
progress::-webkit-progress-value {
486554
background-color: #40c4ff;
555+
background-color: var(--mz-accent-color, #40c4ff);
487556
}
488557
progress::-moz-progress-bar {
489558
background-color: #40c4ff;
559+
background-color: var(--mz-accent-color, #40c4ff);
490560
}
491561
progress::-ms-fill {
492562
background-color: #40c4ff;
563+
background-color: var(--mz-accent-color, #40c4ff);
493564
}
494565

495566
/* --------======== TEXT FIELDS ========-------- */
@@ -538,6 +609,7 @@ select[size] > option {
538609
textarea:focus,
539610
select[size]:focus {
540611
border-color: #40c4ff;
612+
border-color: var(--mz-accent-color, #40c4ff);
541613
outline: 0 none transparent;
542614
}
543615
input[type="text"]:focus,
@@ -571,3 +643,45 @@ select:disabled {
571643
padding: 16px;
572644
}
573645
}
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)