@clayui/css 3.130.0 → 3.132.0

package/src/scss/variables/_cards.scss

@@ -862,6 +862,16 @@ $user-card: map-deep-merge(
 	$user-card
 );
 
+$card-page: () !default;
+$card-page: map-deep-merge(
+	(
+		container-name: c-card-page,
+		container-type: inline-size,
+		extend: '%clay-custom-grid-wrapper',
+	),
+	$card-page
+);
+
 // Card Page Item Asset
 
 // base: min-width 0, sm min-width: 576px, md: min-width: 768px,
@@ -870,27 +880,30 @@ $user-card: map-deep-merge(
 $card-page-item-asset: () !default;
 $card-page-item-asset: map-deep-merge(
 	(
-		base: (
-			breakpoint: 0,
-			min-width: 193px,
-			padding-left: $grid-gutter-width * 0.5,
-			padding-right: $grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($grid-breakpoints, sm),
+		flex-basis: 100%,
+		max-width: 100%,
+		padding-left: $grid-gutter-width * 0.5,
+		padding-right: $grid-gutter-width * 0.5,
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, sm)})':
+		(
 			flex-basis: 50%,
 			max-width: 50%,
 		),
-		md: (
-			breakpoint: map-get($grid-breakpoints, md),
-			flex-basis: 33.3333%,
-			max-width: 33.3333%,
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, md)})':
+		(
+			flex-basis: 33.33333%,
+			max-width: 33.33333%,
 		),
-		lg: (
-			breakpoint: map-get($grid-breakpoints, lg),
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, lg)})':
+		(
 			flex-basis: 25%,
 			max-width: 25%,
 		),
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, xl)})':
+		(
+			flex-basis: 20%,
+			max-width: 20%,
+		),
 	),
 	$card-page-item-asset
 );
@@ -901,26 +914,7 @@ $card-page-item-asset: map-deep-merge(
 
 $card-page-item-user: () !default;
 $card-page-item-user: map-deep-merge(
-	(
-		base: (
-			breakpoint: 0,
-			flex-basis: 50%,
-			max-width: 50%,
-			padding-left: $grid-gutter-width * 0.5,
-			padding-right: $grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($grid-breakpoints, sm),
-			flex-basis: 33.33333%,
-			max-width: 33.33333%,
-			min-width: 200px,
-		),
-		lg: (
-			breakpoint: map-get($grid-breakpoints, lg),
-			flex-basis: 20%,
-			max-width: 20%,
-		),
-	),
+	$card-page-item-asset,
 	$card-page-item-user
 );
 

package/src/scss/variables/_loaders.scss

@@ -96,6 +96,54 @@ $loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+		'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-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
 );

package/src/scss/variables/_utilities.scss

@@ -798,22 +798,6 @@ $c-prefers-reduced-motion: map-merge(
 	(
 		scroll-behavior: auto,
 		transition: clay-enable-transitions(none),
-		'.loading-animation-squares': (
-			'&::before': (
-				background-color: transparent,
-				display: block,
-				font-size: inherit,
-				opacity: inherit,
-				transform: none,
-			),
-			'&::after': (
-				font-size: inherit,
-				left: auto,
-				position: relative,
-				top: auto,
-				transform: none,
-			),
-		),
 	),
 	$c-prefers-reduced-motion
 );