@clayui/css 3.161.0 → 3.163.0

package/src/scss/atlas-custom-properties/variables/_loaders.scss

@@ -1,243 +1,226 @@
-@if ($enable-atlas-custom-properties) {
-	// Loading Animation
-
-	// @deprecated as of v3.x with no replacement
-
-	$loading-icon-font-size: 40px; // 40px
-
-	// @deprecated as of v3.x with no replacement
-
-	$loading-icon-font-size-sm: 16px; // 16px
-
-	// Loading Animation
+// Loading Animation
+
+// @deprecated as of v3.x with no replacement
+
+$loading-icon-font-size: 40px !default; // 40px
+
+// @deprecated as of v3.x with no replacement
+
+$loading-icon-font-size-sm: 16px !default; // 16px
+
+// Loading Animation
+
+$loading-animation: () !default;
+$loading-animation: map-deep-merge(
+	(
+		display: var(--loading-animation-display, block),
+		height: var(--loading-animation-height, 1em),
+		margin-left: var(--loading-animation-margin-left, auto),
+		margin-right: var(--loading-animation-margin-right, auto),
+		overflow: var(--loading-animation-overflow, hidden),
+		position: var(--loading-animation-position, relative),
+		text-align: var(--loading-animation-text-align, left),
+		vertical-align: var(--loading-animation-vertical-align, middle),
+		width: var(--loading-animation-width, 1em),
+		before: (
+			animation:
+				var(
+					--loading-animation-before-animation,
+					loading-animation-circle 1s linear infinite
+				),
+			border-radius: var(--loading-animation-before-border-radius, 50%),
+			box-shadow:
+				var(
+					--loading-animation-before-box-shadow,
+					-0.03125em -0.375em 0 0 currentColor
+				),
+			content: var(--loading-animation-before-content, ''),
+			height: var(--loading-animation-before-height, 0.25em),
+			left: var(--loading-animation-before-left, 50%),
+			margin-left: var(--loading-animation-before-margin-left, -0.125em),
+			margin-top: var(--loading-animation-before-margin-top, -0.125em),
+			position: var(--loading-animation-before-position, absolute),
+			top: var(--loading-animation-before-top, 50%),
+			width: var(--loading-animation-before-width, 0.25em),
+		),
 
-	$loading-animation: ();
-	$loading-animation: map-deep-merge(
-		(
+		after: (
+			animation:
+				var(
+					--loading-animation-animation,
+					loading-animation-circle 1s linear infinite
+				),
+			background-color:
+				var(--loading-animation-background-color, currentColor),
+			border-radius: var(--loading-animation-border-radius, 50%),
+			content: var(--loading-animation-content, ''),
 			display: var(--loading-animation-display, block),
 			height: var(--loading-animation-height, 1em),
-			margin-left: var(--loading-animation-margin-left, auto),
-			margin-right: var(--loading-animation-margin-right, auto),
-			overflow: var(--loading-animation-overflow, hidden),
-			position: var(--loading-animation-position, relative),
-			text-align: var(--loading-animation-text-align, left),
-			vertical-align: var(--loading-animation-vertical-align, middle),
+			-webkit-mask: var(--loading-animation--webkit-mask, #{conic-gradient(
+							transparent 10%,
+							#000
+						), linear-gradient(#000 0 0) content-box}),
+			-webkit-mask-composite: var(--loading-animation--webkit-mask-composite, source-out),
+			mask-composite: var(--loading-animation-mask-composite, subtract),
+			padding: var(--loading-animation-padding, 0.25em),
 			width: var(--loading-animation-width, 1em),
-			before: (
-				animation:
-					var(
-						--loading-animation-before-animation,
-						loading-animation-circle 1s linear infinite
-					),
-				border-radius:
-					var(--loading-animation-before-border-radius, 50%),
-				box-shadow:
-					var(
-						--loading-animation-before-box-shadow,
-						-0.03125em -0.375em 0 0 currentColor
-					),
-				content: var(--loading-animation-before-content, ''),
-				height: var(--loading-animation-before-height, 0.25em),
-				left: var(--loading-animation-before-left, 50%),
-				margin-left:
-					var(--loading-animation-before-margin-left, -0.125em),
-				margin-top:
-					var(--loading-animation-before-margin-top, -0.125em),
-				position: var(--loading-animation-before-position, absolute),
-				top: var(--loading-animation-before-top, 50%),
-				width: var(--loading-animation-before-width, 0.25em),
-			),
-
-			after: (
-				animation:
-					var(
-						--loading-animation-animation,
-						loading-animation-circle 1s linear infinite
-					),
-				background-color:
-					var(--loading-animation-background-color, currentColor),
-				border-radius: var(--loading-animation-border-radius, 50%),
-				content: var(--loading-animation-content, ''),
-				display: var(--loading-animation-display, block),
-				height: var(--loading-animation-height, 1em),
-				-webkit-mask:
-					var(
-						--loading-animation--webkit-mask,
-						#{conic-gradient(transparent 10%, #000),
-						linear-gradient(#000 0 0) content-box}
-					),
-				-webkit-mask-composite:
-					var(--loading-animation--webkit-mask-composite, source-out),
-				mask-composite:
-					var(--loading-animation-mask-composite, subtract),
-				padding: var(--loading-animation-padding, 0.25em),
-				width: var(--loading-animation-width, 1em),
-			),
 		),
-		$loading-animation
-	);
+	),
+	$loading-animation
+);
+
+// .loading-animation-squares
+
+$loading-animation-squares: () !default;
+$loading-animation-squares: map-deep-merge(
+	(
+		display: block,
+		height: 1em,
+		margin-left: auto,
+		margin-right: auto,
+		position: relative,
+		text-align: left,
+		vertical-align: middle,
+		width: 1em,
+
+		before: (
+			animation: loading-animation-squares-box-1 2.4s ease-in-out infinite,
+			background-color: currentColor,
+			border-radius: 0.2em,
+			content: '',
+			display: block,
+			font-size: 0.3125em,
+			height: 1em,
+			left: 0,
+			opacity: 0.4,
+			position: absolute,
+			top: 0,
+			transform: scale(1),
+			width: 1em,
+		),
 
-	// .loading-animation-squares
+		after: (
+			animation: loading-animation-squares-box-2 2.4s ease-in-out infinite,
+			background-color: currentColor,
+			border-radius: 0.2em,
+			content: '',
+			display: block,
+			font-size: 0.3125em,
+			height: 1em,
+			left: calc(100% - 1.5em),
+			opacity: 1,
+			position: absolute,
+			top: calc(100% - 1.5em),
+			transform: scale(2),
+			width: 1em,
+		),
 
-	$loading-animation-squares: ();
-	$loading-animation-squares: map-deep-merge(
-		(
+		'prefers-reduced-motion': (
 			display: block,
 			height: 1em,
 			margin-left: auto,
 			margin-right: auto,
+			overflow: hidden,
 			position: relative,
 			text-align: left,
 			vertical-align: middle,
 			width: 1em,
 
-			before: (
-				animation:
-					loading-animation-squares-box-1
-					2.4s
-					ease-in-out
-					infinite,
-				background-color: currentColor,
-				border-radius: 0.2em,
+			'&::before': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: transparent,
+				border-radius: 50%,
+				box-shadow: -0.03125em -0.375em 0 0 currentColor,
 				content: '',
 				display: block,
-				font-size: 0.3125em,
-				height: 1em,
-				left: 0,
-				opacity: 0.4,
+				font-size: inherit,
+				height: 0.25em,
+				left: 50%,
+				margin-left: -0.125em,
+				margin-top: -0.125em,
+				opacity: inherit,
 				position: absolute,
-				top: 0,
-				transform: scale(1),
-				width: 1em,
+				top: 50%,
+				transform: none,
+				width: 0.25em,
 			),
 
-			after: (
-				animation:
-					loading-animation-squares-box-2
-					2.4s
-					ease-in-out
-					infinite,
+			'&::after': (
+				animation: loading-animation-circle 1s linear infinite,
 				background-color: currentColor,
-				border-radius: 0.2em,
+				border-radius: 50%,
 				content: '',
 				display: block,
-				font-size: 0.3125em,
+				font-size: inherit,
 				height: 1em,
-				left: calc(100% - 1.5em),
-				opacity: 1,
-				position: absolute,
-				top: calc(100% - 1.5em),
-				transform: scale(2),
-				width: 1em,
-			),
+				left: auto,
 
-			'prefers-reduced-motion': (
-				display: block,
-				height: 1em,
-				margin-left: auto,
-				margin-right: auto,
-				overflow: hidden,
+				-webkit-mask: #{conic-gradient(transparent 10%, #000),
+				linear-gradient(#000 0 0) content-box},
+				-webkit-mask-composite: source-out,
+
+				mask-composite: subtract,
+				padding: 0.25em,
 				position: relative,
-				text-align: left,
-				vertical-align: middle,
+				top: auto,
+				transform: none,
 				width: 1em,
-
-				'&::before': (
-					animation: loading-animation-circle 1s linear infinite,
-					background-color: transparent,
-					border-radius: 50%,
-					box-shadow: -0.03125em -0.375em 0 0 currentColor,
-					content: '',
-					display: block,
-					font-size: inherit,
-					height: 0.25em,
-					left: 50%,
-					margin-left: -0.125em,
-					margin-top: -0.125em,
-					opacity: inherit,
-					position: absolute,
-					top: 50%,
-					transform: none,
-					width: 0.25em,
-				),
-
-				'&::after': (
-					animation: loading-animation-circle 1s linear infinite,
-					background-color: currentColor,
-					border-radius: 50%,
-					content: '',
-					display: block,
-					font-size: inherit,
-					height: 1em,
-					left: auto,
-
-					-webkit-mask: #{conic-gradient(transparent 10%, #000),
-					linear-gradient(#000 0 0) content-box},
-					-webkit-mask-composite: source-out,
-
-					mask-composite: subtract,
-					padding: 0.25em,
-					position: relative,
-					top: auto,
-					transform: none,
-					width: 1em,
-				),
 			),
 		),
-		$loading-animation-squares
-	);
+	),
+	$loading-animation-squares
+);
 
-	// Loading Animation Sizes
+// Loading Animation Sizes
 
-	$loading-animation-sizes: ();
-	$loading-animation-sizes: map-deep-merge(
-		(
-			loading-animation-xs: (
-				font-size: var(--loading-animation-xs-font-size, 10px),
-			),
-
-			loading-animation-sm: (
-				font-size:
-					var(
-						--loading-animation-sm-font-size,
-						$loading-icon-font-size-sm
-					),
-			),
-
-			loading-animation-md: (
-				font-size: var(--loading-animation-md-font-size, 32px),
-			),
-
-			loading-animation-lg: (
-				font-size: var(--loading-animation-lg-font-size, 64px),
-			),
+$loading-animation-sizes: () !default;
+$loading-animation-sizes: map-deep-merge(
+	(
+		loading-animation-xs: (
+			font-size: var(--loading-animation-xs-font-size, 10px),
 		),
-		$loading-animation-sizes
-	);
 
-	// Loading Animation Variants
+		loading-animation-sm: (
+			font-size:
+				var(
+					--loading-animation-sm-font-size,
+					$loading-icon-font-size-sm
+				),
+		),
 
-	$loading-animation-light: ();
-	$loading-animation-light: map-deep-merge(
-		(
-			color: var(--loading-animation-light-color, $white),
+		loading-animation-md: (
+			font-size: var(--loading-animation-md-font-size, 32px),
 		),
-		$loading-animation-light
-	);
-
-	$loading-animation-palette: ();
-	$loading-animation-palette: map-deep-merge(
-		(
-			loading-animation-primary: (
-				color: var(--loading-animation-primary-color, $primary),
-			),
 
-			loading-animation-secondary: (
-				color: var(--loading-animation-secondary-color, $secondary),
-			),
+		loading-animation-lg: (
+			font-size: var(--loading-animation-lg-font-size, 64px),
+		),
+	),
+	$loading-animation-sizes
+);
+
+// Loading Animation Variants
+
+$loading-animation-light: () !default;
+$loading-animation-light: map-deep-merge(
+	(
+		color: var(--loading-animation-light-color, $white),
+	),
+	$loading-animation-light
+);
+
+$loading-animation-palette: () !default;
+$loading-animation-palette: map-deep-merge(
+	(
+		loading-animation-primary: (
+			color: var(--loading-animation-primary-color, $primary),
+		),
 
-			loading-animation-light: $loading-animation-light,
+		loading-animation-secondary: (
+			color: var(--loading-animation-secondary-color, $secondary),
 		),
-		$loading-animation-palette
-	);
-}
+
+		loading-animation-light: $loading-animation-light,
+	),
+	$loading-animation-palette
+);