@clayui/css 3.58.0 → 3.60.0

package/src/scss/components/_loaders.scss

@@ -1,35 +1,115 @@
-.loading-animation {
-	display: block;
-	font-size: $loading-icon-font-size;
-	height: 1em;
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
-	text-align: left;
-	vertical-align: middle;
-	width: 1em;
+// Loading Animation Circle
+
+@keyframes loading-animation-circle {
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
-// Loading Icon Dotted
+// Loading Animation
 
 %loading-animation {
-	@include clay-loading-animation-variant($loading-animation);
-}
-
-%loading-animation-light {
-	@include clay-loading-animation-variant($loading-animation-light);
+	@include clay-spinner-variant($loading-animation);
 }
 
 .loading-animation {
 	@extend %loading-animation !optional;
 }
 
-.loading-animation-light {
-	@extend %loading-animation-light !optional;
+// Loading Animation Squares
+
+@keyframes loading-animation-squares-box-1 {
+	0% {
+		left: 0;
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	25% {
+		left: calc(100% - 1em);
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	50% {
+		left: calc(100% - 1.5em);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	75% {
+		left: calc(1em / 2);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+}
+
+@keyframes loading-animation-squares-box-2 {
+	0% {
+		left: calc(100% - 1.5em);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	25% {
+		left: calc(1em / 2);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	50% {
+		left: 0;
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	75% {
+		left: calc(100% - 1em);
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+}
+
+.loading-animation-squares {
+	@include clay-spinner-variant($loading-animation-squares);
+}
+
+// Loading Animation Sizes
+
+@each $selector, $value in $loading-animation-sizes {
+	$_selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$_selector} {
+		@include clay-spinner-variant($value);
+	}
 }
 
-// Loading Icon Sizes
+// Loading Animation Variants
+
+@each $selector, $value in $loading-animation-palette {
+	$placeholder: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		'%#{str-slice($selector, 2)}',
+		'%#{$selector}'
+	);
+
+	$_selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$placeholder} {
+		@include clay-spinner-variant($value);
+	}
 
-.loading-animation.loading-animation-sm {
-	font-size: $loading-icon-font-size-sm;
+	#{$_selector} {
+		@extend #{$placeholder} !optional;
+	}
 }

package/src/scss/components/_utilities.scss

@@ -285,20 +285,18 @@
 // Inline Item
 
 .inline-item {
-	align-items: center;
-	display: inline-flex;
-	vertical-align: middle;
+	@include clay-css($inline-item);
 
 	.inline-item {
-		display: inline;
+		@include clay-css(map-get($inline-item, inline-item));
 	}
 
 	.lexicon-icon {
-		margin-top: $inline-item-lexicon-icon-margin-top;
+		@include clay-css(map-get($inline-item, lexicon-icon));
 	}
 
 	.loading-animation {
-		font-size: $inline-item-loading-animation-font-size;
+		@include clay-css(map-get($inline-item, loading-animation));
 	}
 }
 

package/src/scss/mixins/_globals.scss

@@ -81,6 +81,8 @@
 			'caption-side',
 			'clear',
 			'clip',
+			'-webkit-clip-path',
+			'clip-path',
 			'color',
 			'column-count',
 			'column-fill',
@@ -149,6 +151,24 @@
 			'margin-left',
 			'margin-right',
 			'margin-top',
+			'-webkit-mask',
+			'-webkit-mask-clip',
+			'-webkit-mask-composite',
+			'-webkit-mask-image',
+			'-webkit-mask-mode',
+			'-webkit-mask-origin',
+			'-webkit-mask-position',
+			'-webkit-mask-repeat',
+			'-webkit-mask-size',
+			'mask',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-mode',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
 			'max-height',
 			'max-width',
 			'min-height',

package/src/scss/mixins/_loaders.scss

@@ -3,6 +3,7 @@
 ////
 
 /// A mixin for creating and customizing the Clay CSS Loading Indicator.
+/// @deprecated The dotted spinner was replaced by the circular spinner with gradient.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
 /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
@@ -83,24 +84,24 @@
 		$after,
 		(
 			animation:
-				setter(map-get($map, animation), map-get($after, animation)),
+				setter(map-get($after, animation), map-get($map, animation)),
 			animation-name:
 				required(
 					setter(
-						map-get($map, animation-name),
-						map-get($after, animation-name)
+						map-get($after, animation-name),
+						map-get($map, animation-name)
 					),
 					'The property `animation-name` in `#{$mixin-name}` is required!'
 				),
 			border-radius:
 				setter(
-					map-get($map, border-radius),
-					map-get($after, border-radius)
+					map-get($after, border-radius),
+					map-get($map, border-radius)
 				),
 			box-shadow:
 				setter(
-					map-get($map, box-shadow),
 					map-get($after, box-shadow),
+					map-get($map, box-shadow),
 					#{0 -1em 0 $ball-0-scale $ball-0-color,
 					1em -0.5em 0 $ball-5-scale $ball-5-color,
 					1em 0.5em 0 $ball-4-scale $ball-4-color,
@@ -110,12 +111,14 @@
 				),
 			color: $after-color,
 			transform:
-				setter(map-get($map, transform), map-get($after, transform)),
+				setter(map-get($after, transform), map-get($map, transform)),
 		)
 	);
 
 	@if ($enabled) {
-		&:after {
+		@include clay-css($map);
+
+		&::after {
 			@include clay-css($after);
 		}
 
@@ -174,3 +177,40 @@
 		}
 	}
 }
+
+/// A mixin for creating and customizing the Clay CSS Spinners.
+/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
+/// @example
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	mixin-name: {String}, // Accepts the string 'clay-loading-animation-variant' to revert to the old mixin
+/// 	// .loading-animation
+/// 	before: (
+/// 		// .loading-animation::before
+/// 	),
+/// 	after: (
+/// 		// .loading-animation::after
+/// 	),
+/// )
+
+@mixin clay-spinner-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$mixin-name: map-get($map, mixin-name);
+
+		@if ($mixin-name == 'clay-loading-animation-variant') {
+			@include clay-loading-animation-variant($map);
+		} @else if ($enabled) {
+			@include clay-css($map);
+
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+		}
+	}
+}

package/src/scss/mixins/_slideout.scss

@@ -18,51 +18,43 @@
 
 @mixin clay-slideout-variant($map) {
 	@if (setter(map-get($map, enabled), true)) {
-		@include clay-css(setter($map, ()));
+		@include clay-css($map);
 
 		&.c-slideout-shown {
-			@include clay-css(setter(map-get($map, c-slideout-shown), ()));
+			@include clay-css(map-get($map, c-slideout-shown));
 		}
 
 		&.c-slideout-tbar-shown {
-			@include clay-css(setter(map-get($map, c-slideout-tbar-shown), ()));
+			@include clay-css(map-get($map, c-slideout-tbar-shown));
 		}
 
 		&.c-slideout-tbar-shown .sidebar {
-			@include clay-css(
-				setter(map-get($map, c-slideout-tbar-shown-sidebar), ())
-			);
+			@include clay-css(map-get($map, c-slideout-tbar-shown-sidebar));
 		}
 
 		.sidebar {
-			@include clay-css(setter(map-get($map, sidebar), ()));
+			@include clay-css(map-get($map, sidebar));
 		}
 
 		.sidebar.c-slideout-show {
-			@include clay-css(
-				setter(map-get($map, sidebar-c-slideout-show), ())
-			);
+			@include clay-css(map-get($map, sidebar-c-slideout-show));
 		}
 
 		.sidebar.c-slideout-transition {
-			@include clay-css(
-				setter(map-get($map, sidebar-c-slideout-transition), ())
-			);
+			@include clay-css(map-get($map, sidebar-c-slideout-transition));
 		}
 
 		.tbar-stacked {
-			@include clay-css(setter(map-get($map, tbar-stacked), ()));
+			@include clay-css(map-get($map, tbar-stacked));
 		}
 
 		.tbar-stacked.c-slideout-show {
-			@include clay-css(
-				setter(map-get($map, tbar-stacked-c-slideout-show), ())
-			);
+			@include clay-css(map-get($map, tbar-stacked-c-slideout-show));
 		}
 
 		.tbar-stacked.c-slideout-transition {
 			@include clay-css(
-				setter(map-get($map, tbar-stacked-c-slideout-transition), ())
+				map-get($map, tbar-stacked-c-slideout-transition)
 			);
 		}
 	}

package/src/scss/variables/_buttons.scss

@@ -403,7 +403,6 @@ $btn-primary: map-deep-merge(
 			border-color: $primary,
 			color: color-yiq($primary),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-primary
 );
@@ -480,7 +479,6 @@ $btn-secondary: map-deep-merge(
 			border-color: $secondary,
 			color: color-yiq($secondary),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-secondary
 );
@@ -541,7 +539,6 @@ $btn-success: map-deep-merge(
 			border-color: $success,
 			color: color-yiq($success),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-success
 );
@@ -596,7 +593,6 @@ $btn-info: map-deep-merge(
 			border-color: $info,
 			color: color-yiq($info),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-info
 );
@@ -717,7 +713,6 @@ $btn-danger: map-deep-merge(
 			border-color: $danger,
 			color: color-yiq($danger),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-danger
 );
@@ -826,7 +821,6 @@ $btn-dark: map-deep-merge(
 			border-color: $dark,
 			color: color-yiq($dark),
 		),
-		loading-animation: 'loading-animation-light',
 	),
 	$btn-dark
 );

package/src/scss/variables/_loaders.scss

@@ -1,37 +1,143 @@
+// Loading Animation
+
+/// @deprecated as of v3.x with no replacement
+
 $loading-icon-font-size: 2.5rem !default; // 40px
 
-$loading-icon-font-size-sm: 1.25rem !default; // 20px
+/// @deprecated as of v3.x with no replacement
+
+$loading-icon-font-size-sm: map-get($font-scale, 4) !default; // 16px
 
-// Loading Icon Dotted
+// Loading Animation
 
 $loading-animation: () !default;
 $loading-animation: map-deep-merge(
 	(
+		animation: loading-animation-circle 1s linear infinite,
+		display: block,
+		height: 1em,
+		margin-left: auto,
+		margin-right: auto,
+		position: relative,
+		text-align: left,
+		vertical-align: middle,
+		width: 1em,
+		before: (
+			border-radius: 50%,
+			box-shadow: -0.03125em -0.375em 0 0 currentColor,
+			content: '',
+			height: 0.25em,
+			left: 50%,
+			position: absolute,
+			top: 50%,
+			transform: translate(-50%, -50%),
+			width: 0.25em,
+		),
 		after: (
-			animation: 1.2s ease-out infinite,
-			animation-name: loading-animation,
+			background-color: currentColor,
 			border-radius: 50%,
-			color: $gray-900,
 			content: '',
 			display: block,
 			height: 1em,
+			-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,
+			width: 1em,
+		),
+	),
+	$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(0.33334),
+			transform: scale(1),
+			width: 1em,
+		),
+		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
+	$loading-animation-squares
+);
+
+// Loading Animation Sizes
+
+$loading-animation-sizes: () !default;
+$loading-animation-sizes: map-deep-merge(
+	(
+		loading-animation-xs: (
+			font-size: map-get($font-scale, 1),
+		),
+		loading-animation-sm: (
+			font-size: $loading-icon-font-size-sm,
+		),
+		loading-animation-md: (
+			font-size: 2rem,
+		),
+		loading-animation-lg: (
+			font-size: 4rem,
+		),
+	),
+	$loading-animation-sizes
 );
 
+// Loading Animation Variants
+
 $loading-animation-light: () !default;
 $loading-animation-light: map-deep-merge(
 	(
-		after: (
-			animation-name: loading-animation-light,
-			color: $white,
-		),
+		color: $white,
 	),
 	$loading-animation-light
 );
+
+$loading-animation-palette: () !default;
+$loading-animation-palette: map-deep-merge(
+	(
+		loading-animation-primary: (
+			color: $primary,
+		),
+		loading-animation-secondary: (
+			color: $secondary,
+		),
+		loading-animation-light: $loading-animation-light,
+	),
+	$loading-animation-palette
+);

package/src/scss/variables/_slideout.scss

@@ -74,10 +74,10 @@ $c-slideout: map-deep-merge(
 			z-index: 1,
 		),
 		tbar-stacked-c-slideout-show: (
-			display: block,
+			display: flex,
 		),
 		tbar-stacked-c-slideout-transition: (
-			display: block,
+			display: flex,
 		),
 	),
 	$c-slideout

package/src/scss/variables/_utilities.scss

@@ -127,7 +127,28 @@ $heading-text-margin-top: auto !default;
 $inline-item-lexicon-icon-margin-top: -0.1em !default;
 $inline-item-spacer-x: 0.5rem !default; // 8px
 
-$inline-item-loading-animation-font-size: 1.25em !default;
+$inline-item-loading-animation-font-size: null !default;
+
+$inline-item: () !default;
+$inline-item: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		vertical-align: middle,
+		inline-item: (
+			display: inline,
+		),
+		lexicon-icon: (
+			margin-top: $inline-item-lexicon-icon-margin-top,
+		),
+		loading-animation: (
+			font-size: $inline-item-loading-animation-font-size,
+		),
+	),
+	$inline-item
+);
+
+// Page Header
 
 $page-header-bg: $gray-200 !default;