@clayui/css 3.91.0 → 3.93.0

package/src/scss/cadmin/variables/_navs.scss

@@ -39,8 +39,7 @@ $cadmin-nav-link-btn-unstyled: map-deep-merge(
 	(
 		width: 100%,
 		focus: (
-			box-shadow: #{0 0 0 2px $cadmin-white,
-			0 0 0 4px $cadmin-primary-l1},
+			box-shadow: $cadmin-component-focus-box-shadow,
 		),
 		disabled: (
 			opacity: 1,

package/src/scss/cadmin/variables/_panels.scss

@@ -180,7 +180,7 @@ $cadmin-panel-unstyled-header-link: map-deep-merge(
 		border-radius: 1px,
 		focus: (
 			box-shadow: #{0 0 0 4px $cadmin-body-bg,
-			0 0 0 6px $cadmin-primary-l1},
+			0 0 0 6px $cadmin-primary-l0},
 		),
 	),
 	$cadmin-panel-unstyled-header-link

package/src/scss/cadmin/variables/_resizer.scss

@@ -11,10 +11,10 @@ $cadmin-c-horizontal-resizer: map-merge(
 		width: 0.5rem,
 		z-index: 10,
 		hover: (
-			background-color: $cadmin-primary-l1,
+			background-color: $cadmin-primary-l0,
 		),
 		focus: (
-			background-color: $cadmin-primary-l1,
+			background-color: $cadmin-primary-l0,
 		),
 	),
 	$cadmin-c-horizontal-resizer

package/src/scss/cadmin/variables/_sheets.scss

@@ -131,7 +131,7 @@ $cadmin-sheet-subtitle-link: map-deep-merge(
 		),
 		focus: (
 			box-shadow: #{0 0 0 4px $cadmin-white,
-			0 0 0 6px $cadmin-primary-l1},
+			0 0 0 6px $cadmin-primary-l0},
 			outline: 0,
 		),
 	),

package/src/scss/cadmin/variables/_sidebar.scss

@@ -183,7 +183,7 @@ $cadmin-sidebar-light: map-deep-merge(
 				link: (
 					focus: (
 						box-shadow: #{0 0 0 4px $cadmin-white,
-						0 0 0 6px $cadmin-primary-l1},
+						0 0 0 6px $cadmin-primary-l0},
 					),
 				),
 			),

package/src/scss/cadmin/variables/_tbar.scss

@@ -62,13 +62,11 @@ $cadmin-tbar-stacked: map-deep-merge(
 			position: relative,
 			width: 40px,
 			focus: (
-				box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
-				inset 0 0 0 4px $cadmin-white},
+				box-shadow: $cadmin-component-focus-inset-box-shadow,
 			),
 			active: (
 				focus: (
-					box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
-					inset 0 0 0 4px $cadmin-white},
+					box-shadow: $cadmin-component-focus-inset-box-shadow,
 				),
 			),
 		),

package/src/scss/cadmin/variables/_time.scss

@@ -13,7 +13,7 @@ $cadmin-clay-time-btn: map-deep-merge(
 		padding-top: 0,
 		width: 24px,
 		focus: (
-			box-shadow: 0 0 0 1px #80acff,
+			box-shadow: 0 0 0 1px $cadmin-primary-l0,
 		),
 	),
 	$cadmin-clay-time-btn

package/src/scss/cadmin/variables/_treeview.scss

@@ -32,7 +32,7 @@ $cadmin-treeview: map-merge(
 		),
 		treeview-dragging: (
 			background-color: $cadmin-white,
-			border-color: $cadmin-primary-l1,
+			border-color: $cadmin-primary-l0,
 			border-radius: $cadmin-border-radius-sm,
 			border-style: solid,
 			border-width: 1px,
@@ -61,6 +61,25 @@ $cadmin-treeview: map-merge(
 				box-shadow: none,
 			),
 		),
+		treeview-dropping-indicator-top: (
+			background-color: transparent,
+			display: block,
+			height: 2px,
+			margin-top: -2px,
+			outline: none,
+			width: 100%,
+		),
+		treeview-dropping-indicator-bottom: (
+			background-color: transparent,
+			display: block,
+			height: 2px,
+			margin-bottom: -2px,
+			outline: none,
+			width: 100%,
+		),
+		treeview-dropping-indicator-over: (
+			background-color: $cadmin-primary-l0,
+		),
 		treeview-link: (
 			background-color: transparent,
 			cursor: pointer,
@@ -75,15 +94,9 @@ $cadmin-treeview: map-merge(
 			position: relative,
 			text-align: left,
 			user-select: none,
-			treeview-dropping-bottom: (
-				box-shadow: 0 2px 0 0 $cadmin-primary-l1,
-			),
 			treeview-dropping-middle: (
 				background-color: $cadmin-primary-l3,
-				border-color: $cadmin-primary-l1,
-			),
-			treeview-dropping-top: (
-				box-shadow: 0 -2px 0 0 $cadmin-primary-l1,
+				border-color: $cadmin-primary-l0,
 			),
 			hover: (
 				text-decoration: none,

package/src/scss/cadmin/variables/_utilities.scss

@@ -104,7 +104,7 @@ $cadmin-c-focus-inset-focus: () !default;
 $cadmin-c-focus-inset-focus: map-deep-merge(
 	(
 		box-shadow: $cadmin-component-focus-inset-box-shadow,
-		border-color: $cadmin-primary-l1,
+		border-color: $cadmin-primary-l0,
 		outline: 0,
 	),
 	$cadmin-c-focus-inset-focus
@@ -541,3 +541,14 @@ $cadmin-text-decorations: map-deep-merge(
 	),
 	$cadmin-text-decorations
 );
+
+// Transitions
+
+$cadmin-c-prefers-reduced-motion: () !default;
+$cadmin-c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$cadmin-c-prefers-reduced-motion
+);

package/src/scss/components/_alerts.scss

@@ -372,31 +372,33 @@
 // Alert Variants
 
 @each $color, $value in $alert-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.alert-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-alert-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%alert-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.alert-', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-alert-variant($value);
-		}
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-alert-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%alert-#{$color}'
+			);
 
-		#{$selector} {
-			@extend %alert-#{$color} !optional;
+			#{$placeholder} {
+				@include clay-alert-variant($value);
+			}
+
+			#{$selector} {
+				@extend %alert-#{$color} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_aspect-ratio.scss

@@ -161,41 +161,43 @@
 // aspect-ratio-#-to-#
 
 @each $selector, $value in $aspect-ratio-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	@if (starts-with($selector, '%')) {
-		#{$selector} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
-			);
-		}
-	} @else if (map-get($value, extend)) {
-		#{$selector} {
-			@include clay-css($value);
-		}
-	} @else {
-		$placeholder: str-insert(
-			str-slice($selector, 2, str-length($selector)),
-			'%',
-			1
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
+		@if (starts-with($selector, '%')) {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+		} @else if (map-get($value, extend)) {
+			#{$selector} {
+				@include clay-css($value);
+			}
+		} @else {
+			$placeholder: str-insert(
+				str-slice($selector, 2, str-length($selector)),
+				'%',
+				1
 			);
-		}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$placeholder} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_badges.scss

@@ -108,31 +108,37 @@
 // Badge Variants
 
 @each $color, $value in $badge-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.badge-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-badge-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%badge-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(
+				starts-with($color, 'badge'),
+				str-insert($color, '.', 1),
+				str-insert($color, '.badge-', 1)
+			)
 		);
 
-		#{$placeholder} {
-			@include clay-badge-variant($value);
-		}
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%badge-#{$color}'
+			);
+
+			#{$placeholder} {
+				@include clay-badge-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -19,29 +19,31 @@ fieldset:disabled a.btn {
 // Button Sizes
 
 @each $size, $value in $btn-sizes {
-	$selector: if(
-		starts-with($size, 'btn-'),
-		clay-str-replace($size, 'btn-', '.btn-'),
-		$size
-	);
-
-	@if (starts-with($size, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: if(
+	@if not clay-is-map-unset($value) {
+		$selector: if(
 			starts-with($size, 'btn-'),
-			'%clay-#{$size}',
-			'%#{str-slice($size, 2)}'
+			clay-str-replace($size, 'btn-', '.btn-'),
+			$size
 		);
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($size, 'btn-'),
+				'%clay-#{$size}',
+				'%#{str-slice($size, 2)}'
+			);
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -80,33 +82,35 @@ input[type='button'] {
 // Button Monospaced
 
 @each $size, $value in $btn-monospaced-sizes {
-	$selector: if(
-		starts-with($size, 'btn-monospaced-'),
-		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
-		if(
-			$size == 'btn-monospaced',
-			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
-			$size
-		)
-	);
-
-	@if (starts-with($size, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($size, 'btn-monospaced'),
-			'%clay-#{$size}',
-			'%#{str-slice($size, 2)}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, 'btn-monospaced-'),
+			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
+			if(
+				$size == 'btn-monospaced',
+				clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
+				$size
+			)
 		);
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($size, 'btn-monospaced'),
+				'%clay-#{$size}',
+				'%#{str-slice($size, 2)}'
+			);
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -114,37 +118,39 @@ input[type='button'] {
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'btn'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.btn-', 1)
-		)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(
+				starts-with($color, 'btn'),
+				str-insert($color, '.', 1),
+				str-insert($color, '.btn-', 1)
+			)
+		);
 
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else {
+			$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
+			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
 		}
 	}
 }
@@ -152,37 +158,39 @@ input[type='button'] {
 // Button Outline Variants
 
 @each $color, $value in $btn-outline-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'btn'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.btn-outline-', 1)
-		)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(
+				starts-with($color, 'btn'),
+				str-insert($color, '.', 1),
+				str-insert($color, '.btn-outline-', 1)
+			)
+		);
 
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else {
+			$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
+			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
 		}
 	}
 }

package/src/scss/components/_drilldown.scss

@@ -13,7 +13,7 @@
 // Drilldown Transition Classes
 
 .drilldown-transition {
-	transition: $drilldown-transition;
+	@include transition($drilldown-transition);
 }
 
 .drilldown-item.transitioning {

package/src/scss/components/_dropdowns.scss

@@ -124,14 +124,16 @@
 // Dropdown Menu Variants
 
 @each $key, $value in $dropdown-menu-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-dropdown-menu-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-dropdown-menu-variant($value);
+		}
 	}
 }
 

package/src/scss/components/_forms.scss

@@ -158,14 +158,16 @@ fieldset[disabled] .form-control {
 }
 
 @each $key, $value in $input-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-form-control-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-form-control-variant($value);
+		}
 	}
 }
 
@@ -343,7 +345,8 @@ textarea.form-control-plaintext,
 
 	&::-webkit-slider-thumb {
 		border-radius: 100px;
-		transition: $input-transition;
+
+		@include transition($input-transition);
 	}
 }
 

package/src/scss/components/_input-groups.scss

@@ -226,7 +226,8 @@
 		margin-bottom: 0;
 		padding-left: $input-group-inset-item-padding-left;
 		padding-right: $input-group-inset-item-padding-right;
-		transition: $input-transition;
+
+		@include transition($input-transition);
 
 		.btn {
 			@include clay-button-size($input-group-inset-item-btn);