@clayui/css 3.126.0 → 3.128.0

package/src/scss/mixins/_modals.scss

@@ -24,31 +24,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
@@ -172,7 +147,7 @@
 			@at-root {
 				button.close {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						box-shadow: map-get(
 							$header-close-btn-focus,
 							box-shadow

package/src/scss/mixins/_popovers.scss

@@ -90,31 +90,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -151,7 +126,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-popover-variant(map-get($map, focus));
 				}
 			}

package/src/scss/mixins/_sidebar.scss

@@ -104,31 +104,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -266,7 +241,7 @@
 
 					&.focus,
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($sidenav-start, focus));
 					}
 				}
@@ -279,7 +254,7 @@
 
 					&.focus,
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($sidenav-end, focus));
 					}
 				}
@@ -288,7 +263,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css(map-get($map, focus));
 				}
 			}

package/src/scss/mixins/_slideout.scss

@@ -20,31 +20,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -114,7 +89,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-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)
 						);

package/src/scss/mixins/_toggle-switch.scss

@@ -646,31 +646,6 @@
 		$breakpoint-down: setter(map-get($map, breakpoint-down), sm);
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@include clay-css($map);
 
 		@if ($enabled) {
@@ -688,7 +663,7 @@
 
 			@at-root {
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					~ .toggle-switch-bar {
 						@include clay-toggle-switch-bar-variant(
 							map-deep-get($map, focus, toggle-switch-bar)
@@ -725,7 +700,7 @@
 			@at-root {
 				&:checked {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -768,7 +743,7 @@
 			@at-root {
 				&:indeterminate {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -818,7 +793,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -866,7 +841,7 @@
 				@at-root {
 					&:checked {
 						#{$focus-visible-selector},
-						#{$_c-prefers-focus-selector} {
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 							~ .toggle-switch-bar {
 								@include clay-toggle-switch-bar-variant(
 									map-deep-get(
@@ -933,7 +908,7 @@
 				@at-root {
 					&:indeterminate {
 						#{$focus-visible-selector},
-						#{$_c-prefers-focus-selector} {
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 							~ .toggle-switch-bar {
 								@include clay-toggle-switch-bar-variant(
 									map-deep-get(

package/src/scss/variables/_dropdowns.scss

@@ -217,6 +217,7 @@ $dropdown-item-base: map-deep-merge(
 			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
+			align-items: center,
 			padding-left: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			padding-right: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			autofit-col: (
@@ -225,6 +226,7 @@ $dropdown-item-base: map-deep-merge(
 			),
 		),
 		autofit-row: (
+			align-items: center,
 			margin-left: -0.25rem,
 			margin-right: -0.25rem,
 			width: auto,
@@ -233,6 +235,17 @@ $dropdown-item-base: map-deep-merge(
 				padding-right: 0.25rem,
 			),
 		),
+		inline-item: (
+			line-height: 1,
+			lexicon-icon: (
+				font-size: 1rem,
+				margin-top: 0,
+			),
+		),
+		label: (
+			margin-bottom: 0,
+			margin-top: 0.3125rem,
+		),
 	),
 	$dropdown-item-base
 );
@@ -502,6 +515,7 @@ $dropdown-item-indicator-start: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 1rem,
 			margin-top: 0,
 		),
 	),
@@ -548,6 +562,7 @@ $dropdown-item-indicator-end: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 16px,
 			margin-top: 0,
 		),
 	),
@@ -963,10 +978,6 @@ $dropdown-menu-palette: map-deep-merge(
 				padding-left: 1.75rem,
 				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
-				'&.autofit-row': (
-					padding-left: 1.5rem,
-					padding-right: 0.5rem,
-				),
 			),
 			dropdown-item-scroll: (
 				font-size: 1rem,
@@ -1023,15 +1034,16 @@ $dropdown-menu-palette: map-deep-merge(
 			dropdown-menu-indicator-start: (
 				dropdown-item-indicator-start: (
 					left: 0.5rem,
-					top: 0.5rem,
 				),
 			),
 			dropdown-menu-indicator-end: (
 				dropdown-item-indicator-end: (
 					right: 0.5rem,
-					top: 0.5rem,
 				),
 			),
+			inline-scroller: (
+				max-height: 224px,
+			),
 		),
 		'.dropdown-menu-select.dropdown-menu-height-lg': (
 			inline-scroller: (

package/src/scss/variables/_globals.scss

@@ -24,6 +24,12 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: if(
+	$enable-focus-visible,
+	'.c-prefers-focus &:focus',
+	null
+);
+
 $enable-lexicon-flat-colors: false !default;
 $enable-scaling-components: false !default;
 $scaling-breakpoint-down: sm !default;
@@ -434,6 +440,8 @@ $container-max-widths: (
 	md: 720px,
 	lg: 960px,
 	xl: 1140px,
+	xxl: 1392px,
+	xxxl: 1872px,
 ) !default;
 
 @include _assert-ascending($container-max-widths, '$container-max-widths');

package/src/scss/variables/_multi-step-nav.scss

@@ -22,9 +22,9 @@ $multi-step-icon-hover-bg: $multi-step-icon-bg !default;
 $multi-step-icon-hover-color: rgba($black, 0.7) !default;
 $multi-step-icon-hover-text-decoration: none !default;
 
-$multi-step-icon-focus-bg: $multi-step-icon-hover-bg !default;
+$multi-step-icon-focus-bg: null !default;
 $multi-step-icon-focus-box-shadow: $component-focus-box-shadow !default;
-$multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
+$multi-step-icon-focus-color: null !default;
 $multi-step-icon-focus-outline: 0 !default;
 $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;