studiokit-scaffolding-js 7.0.12-next.2.5 → 7.0.12-next.2.7

package/lib/css/utils/_display.css

@@ -1,305 +1,305 @@
-/**
- * Display None - LT Styles
- * * Hidden in the breakpoint range and below, visible above the breakpoint range
- */
-
-.dn-lt-phone-new {
-	@media (--lt-phone-new) {
-		display: none !important;
-	}
-}
-
-.dn-lt-xs {
-	display: none !important;
-
-	@media (--xs) {
-		display: inherit;
-	}
-}
-
-.dn-lt-sm {
-	@media (--lt-sm) {
-		display: none !important;
-	}
-
-	@media (--sm) {
-		display: inherit;
-	}
-}
-
-.dn-lt-md {
-	@media (--lt-md) {
-		display: none !important;
-	}
-
-	@media (--md) {
-		display: inherit;
-	}
-}
-
-.dn-lt-lg {
-	@media (--lt-lg) {
-		display: none !important;
-	}
-
-	@media (--lg) {
-		display: inherit;
-	}
-}
-
-.dn-lt-xl {
-	@media (--lt-xl) {
-		display: none !important;
-	}
-
-	@media (--xl) {
-		display: inherit;
-	}
-}
-
-td,
-th {
-	&.dn-lt-xs {
-		@media (--xs) {
-			display: table-cell;
-		}
-	}
-
-	&.dn-lt-sm {
-		@media (--sm) {
-			display: table-cell;
-		}
-	}
-
-	&.dn-lt-md {
-		@media (--md) {
-			display: table-cell;
-		}
-	}
-
-	&.dn-lt-lg {
-		@media (--lg) {
-			display: table-cell;
-		}
-	}
-
-	&.dn-lt-xl {
-		@media (--xl) {
-			display: table-cell;
-		}
-	}
-}
-
-/**
- * Display None - GTE Styles
- * * Show in the breakpoint range and below, hidden above the breakpoint range
- */
-
-.dn-gte-phone-new {
-	@media (--phone-new) {
-		display: none !important;
-	}
-}
-
-.dn-gte-xs {
-	@media (--xs) {
-		display: none !important;
-	}
-}
-
-.dn-gte-sm {
-	@media (--sm) {
-		display: none !important;
-	}
-}
-
-.dn-gte-md {
-	@media (--md) {
-		display: none !important;
-	}
-}
-
-.dn-gte-lg {
-	@media (--lg) {
-		display: none !important;
-	}
-}
-
-.dn-gte-xl {
-	@media (--xl) {
-		display: none !important;
-	}
-}
-
-/* Display Inline */
-
-.di-lt-phone-new {
-	@media (--lt-phone-new) {
-		display: inline !important;
-	}
-}
-
-.di-gte-phone-new {
-	@media (--phone-new) {
-		display: inline !important;
-	}
-}
-
-/* Display Block */
-
-.db-gte-md {
-	@media (--md) {
-		display: block !important;
-	}
-}
-
-.db-gte-lg {
-	@media (--lg) {
-		display: block !important;
-	}
-}
-
-/* Display Inline Block */
-
-.dib-gte-lg {
-	@media (--lg) {
-		display: inline-block !important;
-	}
-}
-
-/* Flex */
-
-.flex-gte-xs {
-	@media (--xs) {
-		display: flex;
-	}
-}
-
-/**
- * Visually Hidden
- *
- * Hide element while making it readable for screen readers
- * Shamelessly borrowed from HTML5Boilerplate:
- * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
- */
-
-.visually-hidden {
-	border: 0;
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: fixed !important;
-	width: 1px;
-}
-
-.visually-hidden-lt-xs {
-	@media (--lt-xs) {
-		border: 0;
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-sm {
-	@media (--lt-sm) {
-		border: 0;
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-md {
-	@media (--lt-md) {
-		border: 0;
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-lg {
-	@media (--lt-lg) {
-		border: 0;
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-xl {
-	@media (--lt-xl) {
-		border: 0;
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-/* Clip */
-
-.clip-lt-xs {
-	position: fixed !important;
-	_position: absolute !important;
-	clip-path: inset(50%);
-
-	@media (--xs) {
-		position: inherit !important;
-		clip-path: inherit;
-	}
-}
-
-.clip-gte-sm {
-	@media (--sm) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip-path: inset(50%);
-	}
-}
-
-.clip-gte-md {
-	@media (--md) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip-path: inset(50%);
-	}
-}
-
-.clip-gte-lg {
-	@media (--lg) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip-path: inset(50%);
-	}
-}
-
-.clip-gte-xl {
-	@media (--xl) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip-path: inset(50%);
-	}
-}
+/**
+ * Display None - LT Styles
+ * * Hidden in the breakpoint range and below, visible above the breakpoint range
+ */
+
+.dn-lt-phone-new {
+	@media (--lt-phone-new) {
+		display: none !important;
+	}
+}
+
+.dn-lt-xs {
+	display: none !important;
+
+	@media (--xs) {
+		display: inherit;
+	}
+}
+
+.dn-lt-sm {
+	@media (--lt-sm) {
+		display: none !important;
+	}
+
+	@media (--sm) {
+		display: inherit;
+	}
+}
+
+.dn-lt-md {
+	@media (--lt-md) {
+		display: none !important;
+	}
+
+	@media (--md) {
+		display: inherit;
+	}
+}
+
+.dn-lt-lg {
+	@media (--lt-lg) {
+		display: none !important;
+	}
+
+	@media (--lg) {
+		display: inherit;
+	}
+}
+
+.dn-lt-xl {
+	@media (--lt-xl) {
+		display: none !important;
+	}
+
+	@media (--xl) {
+		display: inherit;
+	}
+}
+
+td,
+th {
+	&.dn-lt-xs {
+		@media (--xs) {
+			display: table-cell;
+		}
+	}
+
+	&.dn-lt-sm {
+		@media (--sm) {
+			display: table-cell;
+		}
+	}
+
+	&.dn-lt-md {
+		@media (--md) {
+			display: table-cell;
+		}
+	}
+
+	&.dn-lt-lg {
+		@media (--lg) {
+			display: table-cell;
+		}
+	}
+
+	&.dn-lt-xl {
+		@media (--xl) {
+			display: table-cell;
+		}
+	}
+}
+
+/**
+ * Display None - GTE Styles
+ * * Show in the breakpoint range and below, hidden above the breakpoint range
+ */
+
+.dn-gte-phone-new {
+	@media (--phone-new) {
+		display: none !important;
+	}
+}
+
+.dn-gte-xs {
+	@media (--xs) {
+		display: none !important;
+	}
+}
+
+.dn-gte-sm {
+	@media (--sm) {
+		display: none !important;
+	}
+}
+
+.dn-gte-md {
+	@media (--md) {
+		display: none !important;
+	}
+}
+
+.dn-gte-lg {
+	@media (--lg) {
+		display: none !important;
+	}
+}
+
+.dn-gte-xl {
+	@media (--xl) {
+		display: none !important;
+	}
+}
+
+/* Display Inline */
+
+.di-lt-phone-new {
+	@media (--lt-phone-new) {
+		display: inline !important;
+	}
+}
+
+.di-gte-phone-new {
+	@media (--phone-new) {
+		display: inline !important;
+	}
+}
+
+/* Display Block */
+
+.db-gte-md {
+	@media (--md) {
+		display: block !important;
+	}
+}
+
+.db-gte-lg {
+	@media (--lg) {
+		display: block !important;
+	}
+}
+
+/* Display Inline Block */
+
+.dib-gte-lg {
+	@media (--lg) {
+		display: inline-block !important;
+	}
+}
+
+/* Flex */
+
+.flex-gte-xs {
+	@media (--xs) {
+		display: flex;
+	}
+}
+
+/**
+ * Visually Hidden
+ *
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+
+.visually-hidden {
+	border: 0;
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: fixed !important;
+	width: 1px;
+}
+
+.visually-hidden-lt-xs {
+	@media (--lt-xs) {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: fixed !important;
+		width: 1px;
+	}
+}
+
+.visually-hidden-lt-sm {
+	@media (--lt-sm) {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: fixed !important;
+		width: 1px;
+	}
+}
+
+.visually-hidden-lt-md {
+	@media (--lt-md) {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: fixed !important;
+		width: 1px;
+	}
+}
+
+.visually-hidden-lt-lg {
+	@media (--lt-lg) {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: fixed !important;
+		width: 1px;
+	}
+}
+
+.visually-hidden-lt-xl {
+	@media (--lt-xl) {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: fixed !important;
+		width: 1px;
+	}
+}
+
+/* Clip */
+
+.clip-lt-xs {
+	position: fixed !important;
+	_position: absolute !important;
+	clip-path: inset(50%);
+
+	@media (--xs) {
+		position: inherit !important;
+		clip-path: inherit;
+	}
+}
+
+.clip-gte-sm {
+	@media (--sm) {
+		position: fixed !important;
+		_position: absolute !important;
+		clip-path: inset(50%);
+	}
+}
+
+.clip-gte-md {
+	@media (--md) {
+		position: fixed !important;
+		_position: absolute !important;
+		clip-path: inset(50%);
+	}
+}
+
+.clip-gte-lg {
+	@media (--lg) {
+		position: fixed !important;
+		_position: absolute !important;
+		clip-path: inset(50%);
+	}
+}
+
+.clip-gte-xl {
+	@media (--xl) {
+		position: fixed !important;
+		_position: absolute !important;
+		clip-path: inset(50%);
+	}
+}

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 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;
-	}
-}
+/**
+ * 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;
+	}
+}