@clayui/css 3.91.0 → 3.92.0

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

@@ -113,7 +113,11 @@
 			starts-with($color, '#') or
 			starts-with($color, '%'),
 		$color,
-		str-insert($color, '.badge-', 1)
+		if(
+			starts-with($color, 'badge'),
+			str-insert($color, '.', 1),
+			str-insert($color, '.badge-', 1)
+		)
 	);
 
 	@if (starts-with($color, '%') or map-get($value, extend)) {

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

@@ -121,6 +121,45 @@
 		}
 	}
 
+	&.error {
+		@include clay-css($multi-step-item-error);
+
+		.multi-step-title {
+			@include clay-css(
+				map-get($multi-step-item-error, multi-step-title)
+			);
+		}
+
+		.multi-step-icon {
+			$_multi-step-icon: setter(
+				map-get($multi-step-item-error, multi-step-icon)
+			);
+
+			@include clay-css($_multi-step-icon);
+
+			&[data-multi-step-icon] {
+				$_data-multi-step-icon: setter(
+					map-get($_multi-step-icon, data-multi-step-icon),
+					()
+				);
+
+				&::before {
+					@include clay-css(map-get($_data-multi-step-icon, before));
+				}
+			}
+
+			.lexicon-icon {
+				@include clay-css(map-get($_multi-step-icon, lexicon-icon));
+			}
+		}
+
+		.multi-step-divider {
+			@include clay-css(
+				map-get($multi-step-item-error, multi-step-divider)
+			);
+		}
+	}
+
 	&.disabled {
 		.multi-step-title {
 			color: $multi-step-title-disabled-color;
@@ -218,6 +257,9 @@
 .multi-step-icon {
 	align-items: center;
 	background-color: $multi-step-icon-bg;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: $multi-step-icon-font-size;
 	border-color: $multi-step-icon-border-color;
 	border-radius: $multi-step-icon-border-radius;
 	border-style: $multi-step-icon-border-style;

package/src/scss/components/_navs.scss

@@ -135,20 +135,8 @@
 .nav-tabs {
 	@include clay-nav-variant($nav-tabs);
 
-	.dropdown-menu {
-		@include border-top-radius(0);
-
-		margin-top: math-sign($nav-tabs-border-width);
-	}
-
 	+ .tab-content {
 		.tab-pane {
-			background-color: $nav-tabs-tab-pane-bg;
-
-			@include border-radius($nav-tabs-tab-pane-border-radius);
-
-			padding: $nav-tabs-tab-pane-padding;
-
 			&.active:first-child {
 				border-top-left-radius: 0;
 			}

package/src/scss/components/_treeview.scss

@@ -162,27 +162,33 @@
 	}
 }
 
+.treeview-dropping-indicator-top {
+	@include clay-link(
+		map-deep-get($treeview, treeview-dropping-indicator-top)
+	);
+}
+
+.treeview-dropping-indicator-bottom {
+	@include clay-link(
+		map-deep-get($treeview, treeview-dropping-indicator-bottom)
+	);
+}
+
+.treeview-dropping-indicator-over {
+	@include clay-link(
+		map-deep-get($treeview, treeview-dropping-indicator-over)
+	);
+}
+
 .treeview-link {
 	@include clay-link(map-get($treeview, treeview-link));
 
-	&.treeview-dropping-bottom {
-		@include clay-link(
-			map-deep-get($treeview, treeview-link, treeview-dropping-bottom)
-		);
-	}
-
 	&.treeview-dropping-middle {
 		@include clay-link(
 			map-deep-get($treeview, treeview-link, treeview-dropping-middle)
 		);
 	}
 
-	&.treeview-dropping-top {
-		@include clay-link(
-			map-deep-get($treeview, treeview-link, treeview-dropping-top)
-		);
-	}
-
 	&.show,
 	&[aria-expanded='true'] {
 		.component-expander {

package/src/scss/components/_utilities-functional-important.scss

@@ -816,3 +816,9 @@
 .invisible {
 	visibility: hidden !important;
 }
+
+// Transitions
+
+.c-prefers-reduced-motion {
+	@include clay-css($c-prefers-reduced-motion);
+}

package/src/scss/mixins/_globals.scss

@@ -275,6 +275,12 @@
 						@media (prefers-reduced-motion: reduce) {
 							transition: none;
 						}
+
+						@at-root {
+							.c-prefers-reduced-motion & {
+								transition: none;
+							}
+						}
 					}
 				} @else if ($key == 'extend') {
 					@extend #{$value} !optional;

package/src/scss/mixins/_nav.scss

@@ -258,6 +258,22 @@
 			.nav-form {
 				@include clay-css(map-get($map, nav-form));
 			}
+
+			.dropdown-menu {
+				@include clay-dropdown-menu-variant(
+					map-get($map, dropdown-menu)
+				);
+			}
+
+			+ .tab-content {
+				$_tab-content: setter(map-get($map, tab-content), ());
+
+				@include clay-css($_tab-content);
+
+				.tab-pane {
+					@include clay-css(map-get($_tab-content, tab-pane));
+				}
+			}
 		}
 	}
 }

package/src/scss/mixins/_transition.scss

@@ -32,5 +32,11 @@
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
+
+		@at-root {
+			.c-prefers-reduced-motion & {
+				transition: none;
+			}
+		}
 	}
 }

package/src/scss/variables/_badges.scss

@@ -494,6 +494,11 @@ $badge-palette: map-deep-merge(
 		danger: $badge-danger,
 		light: $badge-light,
 		dark: $badge-dark,
+		badge-beta: (
+			background-color: $light-l1,
+			color: $info-d1,
+			text-transform: uppercase,
+		),
 	),
 	$badge-palette
 );

package/src/scss/variables/_buttons.scss

@@ -203,7 +203,7 @@ $btn-sizes: map-deep-merge(
 			padding-top: 0.125rem,
 			inline-item: (
 				font-size: inherit,
-				margin-top: -3px,
+				margin-top: -0.16em,
 			),
 			inline-item-before: (
 				margin-right: 0.25rem,
@@ -892,6 +892,19 @@ $btn-palette: map-deep-merge(
 		light: $btn-light,
 		dark: $btn-dark,
 		link: $btn-link,
+		btn-beta: (
+			background-color: $light-l1,
+			color: $info-d1,
+			text-transform: uppercase,
+			hover: (
+				background-color: $light,
+				color: $info-d1,
+			),
+			focus: (
+				background-color: $light,
+				color: $info-d1,
+			),
+		),
 	),
 	$btn-palette
 );

package/src/scss/variables/_date-picker.scss

@@ -35,7 +35,7 @@ $date-picker-nav-btn: map-deep-merge(
 			background-color: $gray-200,
 		),
 		focus: (
-			box-shadow: $input-btn-focus-box-shadow,
+			box-shadow: $component-focus-box-shadow,
 		),
 		disabled: (
 			background-color: transparent,
@@ -211,7 +211,7 @@ $date-picker-date: map-deep-merge(
 			background-color: $gray-200,
 		),
 		focus: (
-			box-shadow: $input-btn-focus-box-shadow,
+			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
 		active: (

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

@@ -58,6 +58,29 @@ $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
 
+// data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
+
+$multi-step-item-error: () !default;
+$multi-step-item-error: map-deep-merge(
+	(
+		multi-step-icon: (
+			background-color: $danger,
+			background-image: clay-icon(times, $white),
+			color: $white,
+			text-indent: -100px,
+			data-multi-step-icon: (
+				before: (
+					content: none,
+				),
+			),
+			lexicon-icon: (
+				display: none,
+			),
+		),
+	),
+	$multi-step-item-error
+);
+
 $multi-step-icon-complete-color: $white !default;
 $multi-step-icon-complete-bg: $gray-600 !default;
 $multi-step-icon-complete-bg-image: clay-icon(

package/src/scss/variables/_navs.scss

@@ -421,6 +421,12 @@ $nav-tabs-link: map-deep-merge(
 	$nav-tabs-link
 );
 
+// Nav Tabs Tab Pane
+
+$nav-tabs-tab-pane-bg: null !default;
+$nav-tabs-tab-pane-border-radius: null !default;
+$nav-tabs-tab-pane-padding: null !default;
+
 // .nav-tabs
 
 $nav-tabs: () !default;
@@ -432,15 +438,36 @@ $nav-tabs: map-deep-merge(
 			margin-bottom: math-sign($nav-tabs-border-width),
 		),
 		nav-link: $nav-tabs-link,
+		dropdown-menu: (
+			border-top-left-radius: clay-enable-rounded(0),
+			border-top-right-radius: clay-enable-rounded(0),
+			margin-top: math-sign($nav-tabs-border-width),
+		),
+		tab-content: (
+			tab-pane: (
+				background-color: $nav-tabs-tab-pane-bg,
+				border-radius:
+					clay-enable-rounded($nav-tabs-tab-pane-border-radius),
+				padding: $nav-tabs-tab-pane-padding,
+			),
+		),
 	),
 	$nav-tabs
 );
 
-// Nav Tabs Tab Pane
-
-$nav-tabs-tab-pane-bg: null !default;
-$nav-tabs-tab-pane-border-radius: null !default;
-$nav-tabs-tab-pane-padding: null !default;
+$nav-tabs-light: () !default;
+$nav-tabs-light: map-deep-merge(
+	(
+		background-color: $gray-100,
+		tab-content: (
+			tab-pane: (
+				background-color: transparent,
+				border-radius: clay-enable-rounded(0),
+			),
+		),
+	),
+	$nav-tabs-light
+);
 
 // Nav Pills
 
@@ -459,3 +486,9 @@ $nav-pills-link-active-color: $component-active-color !default;
 // Nav Variants
 
 $nav-palette: () !default;
+$nav-palette: map-deep-merge(
+	(
+		nav-tabs-light: $nav-tabs-light,
+	),
+	$nav-palette
+);

package/src/scss/variables/_resizer.scss

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

package/src/scss/variables/_tbar.scss

@@ -62,11 +62,11 @@ $tbar-stacked: map-deep-merge(
 			position: relative,
 			width: 2.5rem,
 			focus: (
-				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l0,
 				inset 0 0 0 0.25rem $white},
 			),
 			active-focus: (
-				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l0,
 				inset 0 0 0 0.25rem $white},
 			),
 		),

package/src/scss/variables/_treeview.scss

@@ -32,7 +32,7 @@ $treeview: map-merge(
 		),
 		treeview-dragging: (
 			background-color: $white,
-			border-color: $primary-l1,
+			border-color: $primary-l0,
 			border-radius: $border-radius-sm,
 			border-style: solid,
 			border-width: 1px,
@@ -61,6 +61,25 @@ $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: $primary-l0,
+		),
 		treeview-link: (
 			background-color: transparent,
 			cursor: pointer,
@@ -75,15 +94,9 @@ $treeview: map-merge(
 			position: relative,
 			text-align: left,
 			user-select: none,
-			treeview-dropping-bottom: (
-				box-shadow: 0 2px 0 0 $primary-l1,
-			),
 			treeview-dropping-middle: (
 				background-color: $primary-l3,
-				border-color: $primary-l1,
-			),
-			treeview-dropping-top: (
-				box-shadow: 0 -2px 0 0 $primary-l1,
+				border-color: $primary-l0,
 			),
 			hover: (
 				text-decoration: none,

package/src/scss/variables/_utilities.scss

@@ -525,3 +525,14 @@ $text-decorations: map-deep-merge(
 	),
 	$text-decorations
 );
+
+// Transitions
+
+$c-prefers-reduced-motion: () !default;
+$c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$c-prefers-reduced-motion
+);