@clayui/css 3.60.0 → 3.61.0

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/_globals.scss

@@ -189,28 +189,14 @@ $spacers: () !default;
 $spacers: map-deep-merge(
 	(
 		0: 0,
-		1: (
-			$spacer * 0.25,
-		),
-		2: (
-			$spacer * 0.5,
-		),
+		1: $spacer * 0.25,
+		2: $spacer * 0.5,
 		3: $spacer,
-		4: (
-			$spacer * 1.5,
-		),
-		5: (
-			$spacer * 3,
-		),
-		6: (
-			$spacer * 4.5,
-		),
-		7: (
-			$spacer * 6,
-		),
-		8: (
-			$spacer * 7.5,
-		),
+		4: $spacer * 1.5,
+		5: $spacer * 3,
+		6: $spacer * 4.5,
+		7: $spacer * 6,
+		8: $spacer * 7.5,
 	),
 	$spacers
 );

package/src/scss/variables/_loaders.scss

@@ -13,27 +13,30 @@ $loading-icon-font-size-sm: map-get($font-scale, 4) !default; // 16px
 $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,
+		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%,
-			transform: translate(-50%, -50%),
 			width: 0.25em,
 		),
 		after: (
+			animation: loading-animation-circle 1s linear infinite,
 			background-color: currentColor,
 			border-radius: 50%,
 			content: '',

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
+);