@clayui/css 3.133.0 → 3.134.0

package/src/scss/mixins/_slideout.scss

@@ -21,78 +21,128 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
+			@if (length($map) != 0) {
+				@include clay-css($map);
+			}
+
+			$_c-slideout-shown: map-get($map, c-slideout-shown);
 
-			&.c-slideout-shown {
-				@include clay-css(map-get($map, c-slideout-shown));
+			@if ($_c-slideout-shown) {
+				&.c-slideout-shown {
+					@include clay-css($_c-slideout-shown);
+				}
 			}
 
-			&.c-slideout-tbar-shown {
-				@include clay-css(map-get($map, c-slideout-tbar-shown));
+			$_c-slideout-tbar-shown: map-get($map, c-slideout-tbar-shown);
+
+			@if ($_c-slideout-tbar-shown) {
+				&.c-slideout-tbar-shown {
+					@include clay-css($_c-slideout-tbar-shown);
+				}
 			}
 
-			&.c-slideout-tbar-shown .sidebar {
-				@include clay-css(map-get($map, c-slideout-tbar-shown-sidebar));
+			$_c-slideout-tbar-shown-sidebar: map-get(
+				$map,
+				c-slideout-tbar-shown-sidebar
+			);
+
+			@if ($_c-slideout-tbar-shown-sidebar) {
+				&.c-slideout-tbar-shown .sidebar {
+					@include clay-css($_c-slideout-tbar-shown-sidebar);
+				}
 			}
 
-			.sidebar {
-				@include clay-css(map-get($map, sidebar));
+			$_sidebar: map-get($map, sidebar);
+
+			@if ($_sidebar) {
+				.sidebar {
+					@include clay-css($_sidebar);
+				}
 			}
 
-			.sidebar.c-slideout-show {
-				@include clay-css(map-get($map, sidebar-c-slideout-show));
+			$_sidebar-c-slideout-show: map-get($map, sidebar-c-slideout-show);
+
+			@if ($_sidebar-c-slideout-show) {
+				.sidebar.c-slideout-show {
+					@include clay-css($_sidebar-c-slideout-show);
+				}
 			}
 
-			.sidebar.c-slideout-transition {
-				$_sidebar-c-slideout-transition: setter(
-					map-get($map, sidebar-c-slideout-transition),
-					()
-				);
+			$_sidebar-c-slideout-transition: map-get(
+				$map,
+				sidebar-c-slideout-transition
+			);
 
-				@include clay-css($_sidebar-c-slideout-transition);
+			@if ($_sidebar-c-slideout-transition) {
+				.sidebar.c-slideout-transition {
+					@include clay-css($_sidebar-c-slideout-transition);
 
-				.c-horizontal-resizer {
-					@include clay-css(
-						map-get(
-							$_sidebar-c-slideout-transition,
-							c-horizontal-resizer
-						)
+					$_c-horizontal-resizer: map-get(
+						$_sidebar-c-slideout-transition,
+						c-horizontal-resizer
 					);
+
+					@if ($_c-horizontal-resizer) {
+						.c-horizontal-resizer {
+							@include clay-css($_c-horizontal-resizer);
+						}
+					}
 				}
 			}
 
-			.tbar-stacked {
-				@include clay-css(map-get($map, tbar-stacked));
+			$_tbar-stacked: map-get($map, tbar-stacked);
+
+			@if ($_tbar-stacked) {
+				.tbar-stacked {
+					@include clay-css($_tbar-stacked);
+				}
 			}
 
-			.tbar-stacked.c-slideout-show {
-				@include clay-css(map-get($map, tbar-stacked-c-slideout-show));
+			$_tbar-stacked-c-slideout-show: map-get(
+				$map,
+				tbar-stacked-c-slideout-show
+			);
+
+			@if ($_tbar-stacked-c-slideout-show) {
+				.tbar-stacked.c-slideout-show {
+					@include clay-css($_tbar-stacked-c-slideout-show);
+				}
 			}
 
-			.tbar-stacked.c-slideout-transition {
-				@include clay-css(
-					map-get($map, tbar-stacked-c-slideout-transition)
-				);
+			$_tbar-stacked-c-slideout-transition: map-get(
+				$map,
+				tbar-stacked-c-slideout-transition
+			);
+
+			@if ($_tbar-stacked-c-slideout-transition) {
+				.tbar-stacked.c-slideout-transition {
+					@include clay-css($_tbar-stacked-c-slideout-transition);
+				}
 			}
 
-			.c-horizontal-resizer {
-				$_c-horizontal-resizer: setter(
-					map-get($map, c-horizontal-resizer),
-					()
-				);
+			$_c-horizontal-resizer: map-get($map, c-horizontal-resizer);
 
-				@include clay-css($_c-horizontal-resizer);
+			@if ($_c-horizontal-resizer) {
+				.c-horizontal-resizer {
+					@include clay-css($_c-horizontal-resizer);
 
-				&:hover {
-					@include clay-css(map-get($_c-horizontal-resizer, hover));
-				}
+					$_hover: map-get($_c-horizontal-resizer, hover);
+
+					@if ($_hover) {
+						&:hover {
+							@include clay-css($_hover);
+						}
+					}
+
+					$_focus: map-get($_c-horizontal-resizer, focus);
 
-				@at-root {
-					#{$focus-visible-selector},
-					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
-						@include clay-css(
-							map-get($_c-horizontal-resizer, focus)
-						);
+					@if ($_focus) {
+						@at-root {
+							#{$focus-visible-selector},
+							#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+								@include clay-css($_focus);
+							}
+						}
 					}
 				}
 			}

package/src/scss/variables/_labels.scss

@@ -125,15 +125,14 @@ $label-dismissible: map-merge(
 $label-close: () !default;
 $label-close: map-deep-merge(
 	(
-		border-radius: 1px,
+		border-radius: 5000px,
 		color: inherit,
 		display: inline-flex,
 		font-size: 1rem,
-		height: auto,
-		margin-bottom: -2px,
-		margin-top: -2px,
+		height: 1.5rem,
+		margin: -6px,
 		opacity: 1,
-		width: auto,
+		width: 1.5rem,
 		hover: (
 			color: inherit,
 			opacity: 1,

package/src/scss/variables/_modals.scss

@@ -101,6 +101,10 @@ $modal-header: map-deep-merge(
 		padding-bottom: 0,
 		padding-top: 0,
 		z-index: 1,
+		'.modal-title': (
+			margin-bottom: 0,
+			margin-top: 0,
+		),
 		mobile: (
 			height: $modal-header-height-mobile,
 		),
@@ -134,6 +138,17 @@ $modal-body: map-deep-merge(
 			overflow: auto,
 			padding: $modal-inner-padding,
 		),
+		'.aspect-ratio': (
+			margin-left: math-sign($modal-inner-padding),
+			margin-right: math-sign($modal-inner-padding),
+			top: math-sign($modal-inner-padding),
+		),
+		'.close': (
+			position: absolute,
+			right: 1rem,
+			top: 1rem,
+			z-index: 1,
+		),
 	),
 	$modal-body
 );
@@ -225,7 +240,7 @@ $modal-item-shrink: map-deep-merge(
 
 $modal-title-font-size: 1.25rem !default;
 $modal-title-font-weight: $font-weight-semi-bold !default;
-$modal-title-line-height: $line-height-base !default;
+$modal-title-line-height: $headings-line-height !default;
 $modal-title-text-align: null !default;
 $modal-title-font-size-mobile: null !default;
 
@@ -353,7 +368,8 @@ $modal: map-deep-merge(
 			font-size: $modal-title-font-size,
 			font-weight: $modal-title-font-weight,
 			line-height: $modal-title-line-height,
-			margin-bottom: 0,
+			margin-bottom: 1.5rem,
+			margin-top: 1rem,
 			overflow: hidden,
 			text-align: $modal-title-text-align,
 			text-overflow: ellipsis,

package/src/scss/variables/_utilities.scss

@@ -260,6 +260,12 @@ $bg-theme-colors: map-deep-merge(
 				background-color: clay-darken($primary, 10%) !important,
 			),
 		),
+		'primary-l3': (
+			background-color: $primary-l3 !important,
+			hover: (
+				background-color: clay-darken($primary-l3, 10%) !important,
+			),
+		),
 		'secondary': (
 			background-color: $secondary !important,
 			hover: (