Update MaterialZ

Author: ZMYaro

index.html

@@ -40,7 +40,7 @@ <h1>GrocerieZ</h1>
 				</svg>
 			</a>
 		</div>
-		<div class="card z1" id="load-card">
+		<div class="card full-width z1" id="load-card">
 			<progress id="progress-bar" min="0" max="6"></progress>
 			<button class="z1" id="auth-btn">
 				<svg role="img" class="icon" aria-hidden="true" viewbox="0 0 24 24" style="margin-right: 0.25em;">
@@ -49,7 +49,7 @@ <h1>GrocerieZ</h1>
 				<span>Authenticate with Trello</span>
 			</button>
 		</div>
-		<div class="card z1" id="content-card">
+		<div class="card full-width z1" id="content-card">
 			<h2>Stores</h2>
 			<ul class="list" id="labels"></ul>
 			<h2>Get</h2>

scripts/material-touch.js

@@ -1,9 +1,9 @@
 /* Script for triggering element active states when touched
  * Supplement to the MaterialZ CSS library
  *
- * Copyright 2015-2019 Zachary Yaro
+ * Copyright 2015-2021 Zachary Yaro
  * Released under the MIT license
- * https://materialz.zmyaro.com/LICENSE.txt
+ * https://materialz.dev/LICENSE.txt
  */
 
  (function () {

styles/material-depth.css

@@ -1,9 +1,9 @@
 /* Base Material styles for depth
  * Part of the MaterialZ CSS library
  *
- * Copyright 2015-2019 Zachary Yaro
+ * Copyright 2015-2021 Zachary Yaro
  * Released under the MIT license
- * http://materialz.zmyaro.com/LICENSE.txt
+ * https://materialz.dev/LICENSE.txt
  */
 
 @charset "UTF-8";
@@ -29,6 +29,17 @@
 	     -o-transition-property: box-shadow;
 	        transition-property: box-shadow;
 }
+.card.full-width.z1,
+.card.full-width.z2,
+.card.full-width.z3,
+.card.full-width.z4,
+.card.full-width.z5 {
+	-webkit-transition-property: margin, border-radius, -webkit-box-shadow, box-shadow;
+	   -moz-transition-property: margin, border-radius, -moz-box-shadow, box-shadow;
+	    -ms-transition-property: margin, border-radius, box-shadow;
+	     -o-transition-property: margin, border-radius, box-shadow;
+	        transition-property: margin, border-radius, box-shadow;
+}
 button.z1,
 button.z2,
 button.z3,
@@ -165,8 +176,6 @@ input[type="reset"].z5 {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
 	        box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
 }
 
 button.z1:hover,
@@ -182,8 +191,6 @@ input[type="reset"].z1:focus {
 	-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
 	   -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
 	        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7)";
 }
 .z2,
 button.z1:enabled:active,
@@ -199,8 +206,6 @@ input[type="reset"].z1.active {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
 	        box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10)";
 }
 .z3,
 button.z2:enabled:active,
@@ -255,6 +260,18 @@ input[type="reset"].z1.disabled {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
 	        box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.z1,
+	.z2,
+	.z3,
+	.z4,
+	.z5 {
+		-webkit-transition-duration: 0s;
+		   -moz-transition-duration: 0s;
+		    -ms-transition-duration: 0s;
+		     -o-transition-duration: 0s;
+		        transition-duration: 0s;
+	}
 }