@clayui/css 3.59.0 → 3.60.2

package/src/scss/mixins/_stickers.scss

@@ -113,176 +113,185 @@
 /// - Add @link to documentation
 
 @mixin clay-sticker-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-			height: setter(map-get($map, size), map-get($map, height)),
-			line-height: setter(map-get($map, size), map-get($map, line-height)),
-			width: setter(map-get($map, size), map-get($map, width)),
-		)
-	);
-
-	$inline-item: setter(map-get($map, inline-item), ());
-	$inline-item: map-merge(
-		$inline-item,
-		(
-			font-size:
-				setter(
-					map-get($map, inline-item-font-size),
-					map-get($inline-item, font-size)
-				),
-		)
-	);
-
-	$outside-offset: setter(
-		map-get($map, outside-offset),
-		if(
-			map-get($map, size),
-			calc(#{math-sign(map-get($map, size))} / 2),
-			null
-		)
-	);
-
-	$sticker-outside: setter(map-get($map, sticker-outside), ());
-
-	$sticker-outside-bottom-left: setter(
-		map-get($sticker-outside, sticker-bottom-left),
-		()
-	);
-	$sticker-outside-bottom-left: map-merge(
-		$sticker-outside-bottom-left,
-		setter(map-get($map, sticker-outside-bottom-left), ())
-	);
-
-	$sticker-outside-bottom-right: setter(
-		map-get($sticker-outside, sticker-bottom-right),
-		()
-	);
-	$sticker-outside-bottom-right: map-merge(
-		$sticker-outside-bottom-right,
-		setter(map-get($map, sticker-outside-bottom-right), ())
-	);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$sticker-outside-top-right: setter(
-		map-get($sticker-outside, sticker-top-right),
-		()
-	);
-	$sticker-outside-top-right: map-merge(
-		$sticker-outside-top-right,
-		setter(map-get($map, sticker-outside-top-right), ())
-	);
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+				height: setter(map-get($map, size), map-get($map, height)),
+				line-height:
+					setter(map-get($map, size), map-get($map, line-height)),
+				width: setter(map-get($map, size), map-get($map, width)),
+			)
+		);
 
-	@if ($outside-offset) {
-		$sticker-outside: map-merge(
-			$sticker-outside,
+		$inline-item: setter(map-get($map, inline-item), ());
+		$inline-item: map-merge(
+			$inline-item,
 			(
-				left: $outside-offset,
-				top: $outside-offset,
+				font-size:
+					setter(
+						map-get($map, inline-item-font-size),
+						map-get($inline-item, font-size)
+					),
+			)
+		);
+
+		$outside-offset: setter(
+			map-get($map, outside-offset),
+			if(
+				map-get($map, size),
+				calc(#{math-sign(map-get($map, size))} / 2),
+				null
 			)
 		);
 
+		$sticker-outside: setter(map-get($map, sticker-outside), ());
+
+		$sticker-outside-bottom-left: setter(
+			map-get($sticker-outside, sticker-bottom-left),
+			()
+		);
 		$sticker-outside-bottom-left: map-merge(
 			$sticker-outside-bottom-left,
-			(
-				bottom: $outside-offset,
-				top: auto,
-			)
+			setter(map-get($map, sticker-outside-bottom-left), ())
 		);
 
+		$sticker-outside-bottom-right: setter(
+			map-get($sticker-outside, sticker-bottom-right),
+			()
+		);
 		$sticker-outside-bottom-right: map-merge(
 			$sticker-outside-bottom-right,
-			(
-				bottom: $outside-offset,
-				left: auto,
-				right: $outside-offset,
-				top: auto,
-			)
+			setter(map-get($map, sticker-outside-bottom-right), ())
 		);
 
+		$sticker-outside-top-right: setter(
+			map-get($sticker-outside, sticker-top-right),
+			()
+		);
 		$sticker-outside-top-right: map-merge(
 			$sticker-outside-top-right,
-			(
-				left: auto,
-				right: $outside-offset,
-			)
+			setter(map-get($map, sticker-outside-top-right), ())
 		);
-	}
-
-	@if ($enabled) {
-		@include clay-css($base);
 
-		> .inline-item {
-			@include clay-css($inline-item);
-
-			.lexicon-icon {
-				@include clay-css(
-					setter(map-deep-get($map, inline-item, lexicon-icon), ())
-				);
-			}
+		@if ($outside-offset) {
+			$sticker-outside: map-merge(
+				$sticker-outside,
+				(
+					left: $outside-offset,
+					top: $outside-offset,
+				)
+			);
+
+			$sticker-outside-bottom-left: map-merge(
+				$sticker-outside-bottom-left,
+				(
+					bottom: $outside-offset,
+					top: auto,
+				)
+			);
+
+			$sticker-outside-bottom-right: map-merge(
+				$sticker-outside-bottom-right,
+				(
+					bottom: $outside-offset,
+					left: auto,
+					right: $outside-offset,
+					top: auto,
+				)
+			);
+
+			$sticker-outside-top-right: map-merge(
+				$sticker-outside-top-right,
+				(
+					left: auto,
+					right: $outside-offset,
+				)
+			);
 		}
 
-		.lexicon-icon {
-			@include clay-css(setter(map-get($map, lexicon-icon), ()));
-		}
+		@if ($enabled) {
+			@include clay-css($base);
 
-		.sticker-img {
-			@include clay-css(setter(map-get($map, sticker-img), ()));
-		}
-
-		.sticker-overlay {
-			@include clay-css(setter(map-get($map, sticker-overlay), ()));
-		}
+			> .inline-item {
+				@include clay-css($inline-item);
 
-		&.rounded {
-			@include clay-css(setter(map-get($map, rounded), ()));
+				.lexicon-icon {
+					@include clay-css(
+						setter(
+							map-deep-get($map, inline-item, lexicon-icon),
+							()
+						)
+					);
+				}
+			}
 
-			.sticker-overlay {
-				@include clay-css(
-					setter(map-deep-get($map, rounded, sticker-overlay), ())
-				);
+			.lexicon-icon {
+				@include clay-css(setter(map-get($map, lexicon-icon), ()));
 			}
-		}
 
-		&.rounded-circle {
-			@include clay-css(setter(map-get($map, rounded-circle), ()));
+			.sticker-img {
+				@include clay-css(setter(map-get($map, sticker-img), ()));
+			}
 
 			.sticker-overlay {
-				@include clay-css(
-					setter(
-						map-deep-get($map, rounded-circle, sticker-overlay),
-						()
-					)
-				);
+				@include clay-css(setter(map-get($map, sticker-overlay), ()));
 			}
-		}
 
-		&.rounded-0 {
-			@include clay-css(setter(map-get($map, rounded-0), ()));
+			&.rounded {
+				@include clay-css(setter(map-get($map, rounded), ()));
 
-			.sticker-overlay {
-				@include clay-css(
-					setter(map-deep-get($map, rounded-0, sticker-overlay), ())
-				);
+				.sticker-overlay {
+					@include clay-css(
+						setter(map-deep-get($map, rounded, sticker-overlay), ())
+					);
+				}
 			}
-		}
-
-		&.sticker-outside {
-			@include clay-css($sticker-outside);
 
-			&.sticker-bottom-left {
-				@include clay-css($sticker-outside-bottom-left);
+			&.rounded-circle {
+				@include clay-css(setter(map-get($map, rounded-circle), ()));
+
+				.sticker-overlay {
+					@include clay-css(
+						setter(
+							map-deep-get($map, rounded-circle, sticker-overlay),
+							()
+						)
+					);
+				}
 			}
 
-			&.sticker-bottom-right {
-				@include clay-css($sticker-outside-bottom-right);
+			&.rounded-0 {
+				@include clay-css(setter(map-get($map, rounded-0), ()));
+
+				.sticker-overlay {
+					@include clay-css(
+						setter(
+							map-deep-get($map, rounded-0, sticker-overlay),
+							()
+						)
+					);
+				}
 			}
 
-			&.sticker-top-right {
-				@include clay-css($sticker-outside-top-right);
+			&.sticker-outside {
+				@include clay-css($sticker-outside);
+
+				&.sticker-bottom-left {
+					@include clay-css($sticker-outside-bottom-left);
+				}
+
+				&.sticker-bottom-right {
+					@include clay-css($sticker-outside-bottom-right);
+				}
+
+				&.sticker-top-right {
+					@include clay-css($sticker-outside-top-right);
+				}
 			}
 		}
 	}

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,146 @@
+// 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(
 	(
+		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,
+			border-radius: 50%,
+			box-shadow: -0.03125em -0.375em 0 0 currentColor,
+			content: '',
+			height: 0.25em,
+			left: 50%,
+			margin-left: -0.125em,
+			margin-top: -0.125em,
+			position: absolute,
+			top: 50%,
+			width: 0.25em,
+		),
 		after: (
-			animation: 1.2s ease-out infinite,
-			animation-name: loading-animation,
+			animation: loading-animation-circle 1s linear infinite,
+			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/_sidebar.scss

@@ -79,29 +79,6 @@ $sidebar-list-group-sticker-size: map-deep-merge(
 
 // Sidebar Light
 
-$sidebar-light: () !default;
-$sidebar-light: map-deep-merge(
-	(
-		bg: $light,
-		border-color: $gray-300,
-		border-left-width: 1px,
-		color: $gray-900,
-		dd: (
-			clay-link: (
-				color: $gray-900,
-			),
-		),
-		panel-bg: $gray-200,
-		sidebar-list-group-title: (
-			font-size: 1rem,
-			clay-link: (
-				color: $gray-900,
-			),
-		),
-	),
-	$sidebar-light
-);
-
 $sidebar-light-navigation-bar: () !default;
 $sidebar-light-navigation-bar: map-deep-merge(
 	(
@@ -127,42 +104,144 @@ $sidebar-light-navigation-bar: map-deep-merge(
 	$sidebar-light-navigation-bar
 );
 
+$sidebar-light: () !default;
+$sidebar-light: map-deep-merge(
+	(
+		background-color: $light,
+		border-color: $gray-300,
+		border-left-width: 1px,
+		color: $gray-900,
+		sidebar-dd: (
+			href: (
+				color: $gray-900,
+			),
+		),
+		sidebar-panel: (
+			background-color: $gray-200,
+		),
+		sidebar-list-group: (
+			list-group-title: (
+				font-size: 1rem,
+				href: (
+					color: $gray-900,
+				),
+			),
+		),
+		component-navigation-bar: $sidebar-light-navigation-bar,
+	),
+	$sidebar-light
+);
+
 // Sidebar Dark
 
 $sidebar-dark: () !default;
 $sidebar-dark: map-deep-merge(
 	(
-		bg: $dark,
+		background-color: $dark,
 		color: $white,
-		component-header-title: (
-			color: inherit,
-			clay-link: (
+		sidebar-header: (
+			component-title: (
 				color: inherit,
+				href: (
+					color: inherit,
+				),
 			),
-		),
-		component-header-subtitle: (
-			color: inherit,
-			clay-link: (
+			component-subtitle: (
 				color: inherit,
+				href: (
+					color: inherit,
+				),
 			),
 		),
 		close: (
 			color: $secondary-l1,
-			hover-color: $white,
+			hover: (
+				color: $white,
+			),
 		),
-		nav-nested-link: (
-			border-radius: $border-radius,
-			color: $secondary-l1,
-			transition: box-shadow 0.15s ease-in-out,
-			hover-color: $white,
-			focus-box-shadow: $component-focus-box-shadow,
-			focus-outline: 0,
-			active-color: $white,
-			disabled-box-shadow: none,
-			disabled-color: $secondary-l1,
-			disabled-opacity: 0.65,
-			disabled-active-pointer-events: none,
+		nav-nested: (
+			nav-link: (
+				border-radius: $border-radius,
+				color: $secondary-l1,
+				transition: box-shadow 0.15s ease-in-out,
+				hover: (
+					color: $white,
+				),
+				focus: (
+					box-shadow: $component-focus-box-shadow,
+					outline: 0,
+				),
+				active: (
+					color: $white,
+				),
+				disabled: (
+					box-shadow: none,
+					color: $secondary-l1,
+					opacity: 0.65,
+					active: (
+						pointer-events: none,
+					),
+				),
+			),
 		),
 	),
 	$sidebar-dark
 );
+
+$sidebar-palette: () !default;
+$sidebar-palette: map-deep-merge(
+	(
+		sidebar-light: $sidebar-light,
+		sidebar-dark: $sidebar-dark,
+		sidebar-dark-l2: (
+			background-color: $dark-l2,
+			color: $white,
+			sidebar-header: (
+				component-title: (
+					color: inherit,
+					href: (
+						color: inherit,
+					),
+				),
+				component-subtitle: (
+					color: inherit,
+					href: (
+						color: inherit,
+					),
+				),
+			),
+			close: (
+				color: $secondary-l1,
+				hover: (
+					color: $white,
+				),
+			),
+			nav-nested: (
+				nav-link: (
+					border-radius: $border-radius,
+					color: $secondary-l1,
+					transition: box-shadow 0.15s ease-in-out,
+					hover: (
+						color: $white,
+					),
+					focus: (
+						box-shadow: $component-focus-box-shadow,
+						outline: 0,
+					),
+					active: (
+						color: $white,
+					),
+					disabled: (
+						box-shadow: none,
+						color: $secondary-l1,
+						opacity: 0.65,
+						active: (
+							pointer-events: none,
+						),
+					),
+				),
+			),
+		),
+	),
+	$sidebar-palette
+);