@clayui/css 3.90.0 → 3.92.0

package/src/scss/components/_navbar.scss

@@ -575,44 +575,5 @@
 // Navbar Underline
 
 .navbar-underline {
-	.navbar-toggler-link {
-		&:after {
-			background-color: $navbar-underline-active-bg;
-			bottom: math-sign($navbar-padding-y);
-			content: '';
-			display: block;
-			height: $nav-underline-link-active-highlight-height;
-			left: 0;
-			position: absolute;
-			right: 0;
-			width: auto;
-		}
-	}
-}
-
-.navbar-underline.navbar-expand {
-	@each $breakpoint in map-keys($grid-breakpoints) {
-		$next: breakpoint-next($breakpoint, $grid-breakpoints);
-		$infix: breakpoint-infix($next, $grid-breakpoints);
-
-		// .navbar-expand, sm, md, lg, xl
-
-		&#{$infix} {
-			@include media-breakpoint-up($next) {
-				.navbar-nav .nav-link {
-					&.active:after {
-						background-color: $navbar-underline-active-bg;
-						bottom: math-sign($navbar-padding-y);
-						content: '';
-						display: block;
-						height: $nav-underline-link-active-highlight-height;
-						left: 0;
-						position: absolute;
-						right: 0;
-						width: auto;
-					}
-				}
-			}
-		}
-	}
+	@include clay-navbar-variant($navbar-underline);
 }

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;
 			}
@@ -198,21 +186,16 @@
 	}
 }
 
-// Nav Underline
+// Nav Variants
 
-@each $value in $nav-underline-link-highlight-palette {
-	$index: index($nav-underline-link-highlight-palette, $value);
+@each $key, $value in $nav-palette {
+	$selector: if(
+		starts-with($key, '.') or starts-with($key, '#'),
+		$key,
+		str-insert($key, '.', 1)
+	);
 
-	.nav-underline .nav-item:nth-of-type(#{$index}n + 0) {
-		.nav-link::after {
-			background-color: nth(
-				$nav-underline-link-highlight-palette,
-				$index
-			);
-		}
+	#{$selector} {
+		@include clay-nav-variant($value);
 	}
 }
-
-.nav-underline {
-	@include clay-nav-variant($nav-underline);
-}

package/src/scss/components/_resizer.scss

@@ -0,0 +1,11 @@
+.c-horizontal-resizer {
+	@include clay-css($c-horizontal-resizer);
+
+	&:hover {
+		@include clay-css(map-get($c-horizontal-resizer, hover));
+	}
+
+	&:focus {
+		@include clay-css(map-get($c-horizontal-resizer, focus));
+	}
+}

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

@@ -44,7 +44,21 @@
 			}
 
 			.sidebar.c-slideout-transition {
-				@include clay-css(map-get($map, sidebar-c-slideout-transition));
+				$_sidebar-c-slideout-transition: setter(
+					map-get($map, 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
+						)
+					);
+				}
 			}
 
 			.tbar-stacked {
@@ -60,6 +74,23 @@
 					map-get($map, tbar-stacked-c-slideout-transition)
 				);
 			}
+
+			.c-horizontal-resizer {
+				$_c-horizontal-resizer: setter(
+					map-get($map, c-horizontal-resizer),
+					()
+				);
+
+				@include clay-css($_c-horizontal-resizer);
+
+				&:hover {
+					@include clay-css(map-get($_c-horizontal-resizer, hover));
+				}
+
+				&:focus {
+					@include clay-css(map-get($_c-horizontal-resizer, focus));
+				}
+			}
 		}
 	}
 }

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

@@ -42,6 +42,52 @@ $navbar-toggler-padding-y: 0.25rem !default;
 
 $navbar-underline-active-bg: $component-active-bg !default;
 
+$navbar-underline: () !default;
+$navbar-underline: map-deep-merge(
+	(
+		navbar-toggler-link: (
+			after: (
+				background-color: $navbar-underline-active-bg,
+				bottom: math-sign($navbar-padding-y),
+				content: '',
+				display: block,
+				height: 0.1875rem,
+				left: 0,
+				position: absolute,
+				right: 0,
+				width: auto,
+			),
+		),
+		media-breakpoint-up: (
+			md: (
+				navbar-expand-md: (
+					navbar-underline: (
+						navbar-nav: (
+							nav-link: (
+								active-class: (
+									after: (
+										background-color:
+											$navbar-underline-active-bg,
+										bottom: math-sign($navbar-padding-y),
+										content: '',
+										display: block,
+										height: 0.1875rem,
+										left: 0,
+										position: absolute,
+										right: 0,
+										width: auto,
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	$navbar-underline
+);
+
 // Navbar Dark
 
 $navbar-dark-color: rgba($white, 0.5) !default;

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
 
@@ -456,102 +483,12 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 
 $nav-pills-link-active-color: $component-active-color !default;
 
-// Nav Underline Link Highlight
-
-$nav-underline-link-highlight-content: null !default;
-$nav-underline-link-highlight-height: null !default;
-$nav-underline-link-highlight-bottom: 0 !default;
-$nav-underline-link-highlight-left: $nav-link-padding-x * 0.5 !default;
-$nav-underline-link-highlight-right: $nav-link-padding-x * 0.5 !default;
-$nav-underline-link-highlight-top: null !default;
-
-$nav-underline-link-active-highlight: $primary-l0 !default;
-$nav-underline-link-active-content: '' !default;
-$nav-underline-link-active-highlight-height: 0.1875rem !default;
-
-$nav-underline-link-disabled-highlight: null !default;
-
-// .nav-underline
-
-$nav-underline-font-size: null !default;
-
-$nav-underline-link-highlight-palette: null !default;
-
-$nav-underline-link-color: null !default;
-$nav-underline-link-padding-x: null !default;
-$nav-underline-link-padding-y: null !default;
-
-$nav-underline-link-hover-color: null !default;
-
-$nav-underline-link-active-color: null !default;
-
-$nav-underline-link-disabled-color: null !default;
-
-// .nav-underline .nav-link[aria-expanded='true']
-
-$nav-underline-link-show: () !default;
-$nav-underline-link-show: map-deep-merge(
-	(
-		color: $nav-underline-link-active-color,
-		after: (
-			content: $nav-underline-link-active-content,
-			height: $nav-underline-link-active-highlight-height,
-		),
-	),
-	$nav-underline-link-show
-);
-
-$nav-underline-link: () !default;
-$nav-underline-link: map-deep-merge(
-	(
-		color: $nav-underline-link-color,
-		padding-bottom: $nav-underline-link-padding-y,
-		padding-left: $nav-underline-link-padding-x,
-		padding-right: $nav-underline-link-padding-x,
-		padding-top: $nav-underline-link-padding-y,
-		after: (
-			bottom: $nav-underline-link-highlight-bottom,
-			content: $nav-underline-link-highlight-content,
-			display: block,
-			height: $nav-underline-link-highlight-height,
-			position: absolute,
-			left: $nav-underline-link-highlight-left,
-			right: $nav-underline-link-highlight-right,
-			top: $nav-underline-link-highlight-top,
-			width: auto,
-		),
-		hover: (
-			color: $nav-underline-link-hover-color,
-		),
-		focus: (
-			color: $nav-underline-link-hover-color,
-		),
-		active-class: (
-			color: $nav-underline-link-active-color,
-			after: (
-				background-color: $nav-underline-link-active-highlight,
-				content: $nav-underline-link-active-content,
-				height: $nav-underline-link-active-highlight-height,
-			),
-		),
-		show: $nav-underline-link-show,
-		disabled: (
-			color: $nav-underline-link-disabled-color,
-			after: (
-				background-color: $nav-underline-link-disabled-highlight,
-			),
-		),
-	),
-	$nav-underline-link
-);
-
-// .nav-underline
+// Nav Variants
 
-$nav-underline: () !default;
-$nav-underline: map-deep-merge(
+$nav-palette: () !default;
+$nav-palette: map-deep-merge(
 	(
-		font-size: $nav-underline-font-size,
-		nav-link: $nav-underline-link,
+		nav-tabs-light: $nav-tabs-light,
 	),
-	$nav-underline
+	$nav-palette
 );

package/src/scss/variables/_resizer.scss

@@ -0,0 +1,22 @@
+$c-horizontal-resizer: () !default;
+$c-horizontal-resizer: map-merge(
+	(
+		background-color: transparent,
+		bottom: 0,
+		cursor: ew-resize,
+		margin-right: -0.25rem,
+		position: absolute,
+		right: 0,
+		top: 0,
+		user-select: none,
+		width: 0.5rem,
+		z-index: 10,
+		hover: (
+			background-color: $primary-l0,
+		),
+		focus: (
+			background-color: $primary-l0,
+		),
+	),
+	$c-horizontal-resizer
+);

package/src/scss/variables/_slideout.scss

@@ -56,6 +56,7 @@ $c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
+			overflow: visible,
 			position: relative,
 			width: $c-slideout-sidebar-width,
 		),
@@ -64,6 +65,9 @@ $c-slideout: map-deep-merge(
 		),
 		sidebar-c-slideout-transition: (
 			display: block,
+			c-horizontal-resizer: (
+				display: none,
+			),
 		),
 		tbar-stacked: (
 			display: none,
@@ -164,6 +168,10 @@ $c-slideout-end: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			right: 0,
 		),
+		c-horizontal-resizer: (
+			left: 0,
+			right: auto,
+		),
 	),
 	$c-slideout-end
 );

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

@@ -8,6 +8,7 @@ $treeview: map-merge(
 		margin-bottom: 0,
 		padding: 2px 0,
 		btn: (
+			color: inherit,
 			font-size: 12px,
 			line-height: 1,
 			padding: 6px 8px,
@@ -31,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,
@@ -60,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,
@@ -74,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,