studiokit-scaffolding-js 7.0.12 → 7.1.0

package/lib/css/utils/_display.css

@@ -1,312 +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: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: fixed !important;
-	width: 1px;
-}
-
-.visually-hidden-lt-xs {
-	@media (--lt-xs) {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-sm {
-	@media (--lt-sm) {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-md {
-	@media (--lt-md) {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-lg {
-	@media (--lt-lg) {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-.visually-hidden-lt-xl {
-	@media (--lt-xl) {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: fixed !important;
-		width: 1px;
-	}
-}
-
-/* Clip */
-
-.clip-lt-xs {
-	position: fixed !important;
-	_position: absolute !important;
-	clip: rect(1px 1px 1px 1px);
-
-	/* IE6, IE7 */
-	clip: rect(1px, 1px, 1px, 1px);
-
-	@media (--xs) {
-		position: inherit !important;
-		clip: inherit;
-	}
-}
-
-.clip-gte-sm {
-	@media (--sm) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
-	}
-}
-
-.clip-gte-md {
-	@media (--md) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
-	}
-}
-
-.clip-gte-lg {
-	@media (--lg) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
-	}
-}
-
-.clip-gte-xl {
-	@media (--xl) {
-		position: fixed !important;
-		_position: absolute !important;
-		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
-	}
-}
+/**
+ * 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%);
+	}
+}