studiokit-scaffolding-js 7.0.12 → 7.1.0

package/lib/css/utils/_general.css

@@ -1,48 +1,48 @@
-/**
- * General
- * --------
- * Assorted utility styles, similar to tachyons.
- * Break out style groups into separate files once a few similar ones exist.
- */
-
-.touch-target {
-	min-height: 44px;
-	min-width: 44px;
-}
-
-.circle {
-	border-radius: 50%;
-}
-
-/* Shadows */
-
-.shadow-large {
-	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-/* Padding */
-
-/* 25% between pa3 and pa4 */
-.pa3pt25 {
-	padding: 1.25rem;
-}
-
-.pa0-lt-xs {
-	@media (--lt-xs) {
-		padding: 0 !important;
-	}
-}
-
-/* Margin */
-
-.mb0-gte-xs {
-	@media (--xs) {
-		margin-bottom: 0 !important;
-	}
-}
-
-.mb4-gte-lg {
-	@media (--lg) {
-		margin-bottom: 2rem !important;
-	}
-}
+/**
+ * General
+ * --------
+ * Assorted utility styles, similar to tachyons.
+ * Break out style groups into separate files once a few similar ones exist.
+ */
+
+.touch-target {
+	min-height: 44px;
+	min-width: 44px;
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+/* Shadows */
+
+.shadow-large {
+	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+}
+
+/* Padding */
+
+/* 25% between pa3 and pa4 */
+.pa3pt25 {
+	padding: 1.25rem;
+}
+
+.pa0-lt-xs {
+	@media (--lt-xs) {
+		padding: 0 !important;
+	}
+}
+
+/* Margin */
+
+.mb0-gte-xs {
+	@media (--xs) {
+		margin-bottom: 0 !important;
+	}
+}
+
+.mb4-gte-lg {
+	@media (--lg) {
+		margin-bottom: 2rem !important;
+	}
+}

package/lib/css/utils/_icon.css

@@ -1,16 +1,16 @@
-/* Icon Sizes */
-
-.icon-size-1 {
-	height: 1.25rem;
-	width: 1.25rem;
-}
-
-.icon-size-2 {
-	height: 2rem;
-	width: 2rem;
-}
-
-.icon-size-3 {
-	height: 3rem;
-	width: 3rem;
-}
+/* Icon Sizes */
+
+.icon-size-1 {
+	height: 1.25rem;
+	width: 1.25rem;
+}
+
+.icon-size-2 {
+	height: 2rem;
+	width: 2rem;
+}
+
+.icon-size-3 {
+	height: 3rem;
+	width: 3rem;
+}

package/lib/css/utils/_text.css

@@ -1,24 +1,25 @@
-/* Font Size */
-
-/* 60% between f5 and f4 */
-.f4pt6 {
-	font-size: 1.15rem;
-}
-
-/* Text Align */
-
-.tr-gte-lg {
-	@media (--lg) {
-		text-align: right !important;
-	}
-}
-
-/* White Space */
-
-.pre-wrap {
-	white-space: pre-wrap;
-}
-
-.word-break {
-	word-break: break-word;
-}
+/* Font Size */
+
+/* 60% between f5 and f4 */
+.f4pt6 {
+	font-size: 1.15rem;
+}
+
+/* Text Align */
+
+.tr-gte-lg {
+	@media (--lg) {
+		text-align: right !important;
+	}
+}
+
+/* White Space */
+
+.pre-wrap {
+	white-space: pre-wrap;
+}
+
+.word-break {
+	word-break: normal;
+	overflow-wrap: anywhere;
+}

package/lib/css/utils/_width.css

@@ -1,60 +1,60 @@
-/* Width */
-
-.w-15 {
-	width: 15%;
-}
-
-.w-35 {
-	width: 35%;
-}
-
-.w-45 {
-	width: 45%;
-}
-
-.w-55 {
-	width: 55%;
-}
-
-.w-65 {
-	width: 65%;
-}
-
-.w-75 {
-	width: 75%;
-}
-
-.w-85 {
-	width: 85%;
-}
-
-.w-95 {
-	width: 95%;
-}
-
-.w-auto-ns {
-	@media screen and (min-width: 30em) {
-		width: auto !important;
-	}
-}
-
-.w-100-lt-xs {
-	@media (--lt-xs) {
-		width: 100%;
-		float: none;
-		clear: both;
-		margin-left: 0;
-		margin-right: 0;
-		display: block;
-
-		& .MuiFormControl-root {
-			width: 100%;
-		}
-	}
-}
-
-/* Max Width */
-
-.max-width-9 {
-	max-width: 9rem;
-}
+/* Width */
+
+.w-15 {
+	width: 15%;
+}
+
+.w-35 {
+	width: 35%;
+}
+
+.w-45 {
+	width: 45%;
+}
+
+.w-55 {
+	width: 55%;
+}
+
+.w-65 {
+	width: 65%;
+}
+
+.w-75 {
+	width: 75%;
+}
+
+.w-85 {
+	width: 85%;
+}
+
+.w-95 {
+	width: 95%;
+}
+
+.w-auto-ns {
+	@media screen and (min-width: 30em) {
+		width: auto !important;
+	}
+}
+
+.w-100-lt-xs {
+	@media (--lt-xs) {
+		width: 100%;
+		float: none;
+		clear: both;
+		margin-left: 0;
+		margin-right: 0;
+		display: block;
+
+		& .MuiFormControl-root {
+			width: 100%;
+		}
+	}
+}
+
+/* Max Width */
+
+.max-width-9 {
+	max-width: 9rem;
+}

package/lib/css/variables.css

@@ -1,84 +1,84 @@
-:root {
-	/* Fonts */
-	--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-	--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-	--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
-
-	/* Font Size */
-	--base-font-size: 16px;
-	--base-line-height: 1.57rem;
-
-	/* Font Weights */
-	--font-weight-light: 300;
-	--font-weight-normal: 400;
-	--font-weight-semibold: 600;
-	--font-weight-bold: 700;
-	--font-weight-black: 800;
-
-	/**
-	 * Constant Colors
-	 * These are the same across all apps
-	 */
-	--color-black: #000;
-	--color-white: #fff;
-	--color-off-white: #f9f9fb;
-	--color-light-grey: #dfe2e5;
-	--color-blue: #00749c;
-	--color-light-red: #f5ccd1;
-	--color-dark-gold: #7d882d;
-	--color-light-green: #e4f1d4;
-	--color-orange: #ee701b;
-	--color-light-orange: #f8f5e6;
-	--color-dark-yellow: #b2a44a;
-	--color-dark-grey: #30363d;
-
-	/* from Bootstrap's warning alert border and bg */
-	--color-light-yellow: #ffeeba;
-	--color-lightest-yellow: #fff3cd;
-
-	/**
-	 * Common Colors
-	 * These usually vary across each app
-	 */
-	--color-accent-blue: #086ee4;
-	--color-grey: #555;
-	--color-medium-dark-grey: #888;
-	--color-medium-grey: #ccc;
-	--color-lightest-grey: #e8e8f0;
-	--color-blue-grey: #3b444b;
-	--color-light-blue: #e8f4fd;
-	--color-purple: #4450be;
-	--color-pink: #c31776;
-	--color-red: #c93d44;
-	--color-green: #7bcf64;
-
-	/**
-	 * Themed Colors
-	 * These will be customized per app
-	 */
-	--color-disabled: #747474;
-	--color-primary: var(--color-blue);
-	--color-error: var(--color-red);
-	--color-success: var(--color-green);
-
-	/* Border Radius */
-	--border-radius: 3px;
-}
-
-/* Media Queries */
-
-/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
-@custom-media --lt-phone-new only screen and (width < 375px);
-
-/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
-@custom-media --phone-new only screen and (width >= 375px);
-@custom-media --lt-xs only screen and (width < 480px);
-@custom-media --xs only screen and (width >= 480px);
-@custom-media --lt-sm only screen and (width < 576px);
-@custom-media --sm only screen and (width >= 576px);
-@custom-media --lt-md only screen and (width < 768px);
-@custom-media --md only screen and (width >= 768px);
-@custom-media --lt-lg only screen and (width < 992px);
-@custom-media --lg only screen and (width >= 992px);
-@custom-media --lt-xl only screen and (width < 1200px);
-@custom-media --xl only screen and (width >= 1200px);
+:root {
+	/* Fonts */
+	--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+	--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+	--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
+
+	/* Font Size */
+	--base-font-size: 16px;
+	--base-line-height: 1.57rem;
+
+	/* Font Weights */
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-weight-black: 800;
+
+	/**
+	 * Constant Colors
+	 * These are the same across all apps
+	 */
+	--color-black: #000;
+	--color-white: #fff;
+	--color-off-white: #f9f9fb;
+	--color-light-grey: #dfe2e5;
+	--color-blue: #00749c;
+	--color-light-red: #f5ccd1;
+	--color-dark-gold: #7d882d;
+	--color-light-green: #e4f1d4;
+	--color-orange: #ee701b;
+	--color-light-orange: #f8f5e6;
+	--color-dark-yellow: #b2a44a;
+	--color-dark-grey: #30363d;
+
+	/* from Bootstrap's warning alert border and bg */
+	--color-light-yellow: #ffeeba;
+	--color-lightest-yellow: #fff3cd;
+
+	/**
+	 * Common Colors
+	 * These usually vary across each app
+	 */
+	--color-accent-blue: #086ee4;
+	--color-grey: #555;
+	--color-medium-dark-grey: #888;
+	--color-medium-grey: #ccc;
+	--color-lightest-grey: #e8e8f0;
+	--color-blue-grey: #3b444b;
+	--color-light-blue: #e8f4fd;
+	--color-purple: #4450be;
+	--color-pink: #c31776;
+	--color-red: #c93d44;
+	--color-green: #7bcf64;
+
+	/**
+	 * Themed Colors
+	 * These will be customized per app
+	 */
+	--color-disabled: #747474;
+	--color-primary: var(--color-blue);
+	--color-error: var(--color-red);
+	--color-success: var(--color-green);
+
+	/* Border Radius */
+	--border-radius: 3px;
+}
+
+/* Media Queries */
+
+/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
+@custom-media --lt-phone-new only screen and (width < 375px);
+
+/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
+@custom-media --phone-new only screen and (width >= 375px);
+@custom-media --lt-xs only screen and (width < 480px);
+@custom-media --xs only screen and (width >= 480px);
+@custom-media --lt-sm only screen and (width < 576px);
+@custom-media --sm only screen and (width >= 576px);
+@custom-media --lt-md only screen and (width < 768px);
+@custom-media --md only screen and (width >= 768px);
+@custom-media --lt-lg only screen and (width < 992px);
+@custom-media --lg only screen and (width >= 992px);
+@custom-media --lt-xl only screen and (width < 1200px);
+@custom-media --xl only screen and (width >= 1200px);