@clayui/css 3.90.0 → 3.92.0

package/src/scss/cadmin/components/_treeview.scss

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

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

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

package/src/scss/cadmin/variables/_badges.scss

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

package/src/scss/cadmin/variables/_buttons.scss

@@ -203,7 +203,7 @@ $cadmin-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,
@@ -701,6 +701,19 @@ $cadmin-btn-palette: map-deep-merge(
 		light: $cadmin-btn-light,
 		dark: $cadmin-btn-dark,
 		link: $cadmin-btn-link,
+		btn-beta: (
+			background-color: $cadmin-light-l1,
+			color: $cadmin-info-d1,
+			text-transform: uppercase,
+			hover: (
+				background-color: $cadmin-light,
+				color: $cadmin-info-d1,
+			),
+			focus: (
+				background-color: $cadmin-light,
+				color: $cadmin-info-d1,
+			),
+		),
 	),
 	$cadmin-btn-palette
 );

package/src/scss/cadmin/variables/_clay-color.scss

@@ -186,7 +186,7 @@ $cadmin-clay-color-pointer: map-deep-merge(
 		transition: box-shadow 0.15s ease-in-out,
 		width: 14px,
 		focus: (
-			box-shadow: 0 0 0 2px $cadmin-primary-l1,
+			box-shadow: 0 0 0 2px $cadmin-primary-l0,
 			outline: 0,
 		),
 	),

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

@@ -266,6 +266,10 @@ $cadmin-date-picker-previous-month-date: () !default;
 $cadmin-date-picker-previous-month-date: map-deep-merge(
 	(
 		color: $cadmin-gray-500,
+		active: (
+			background-color: $cadmin-primary-l2,
+			color: $cadmin-primary-l3,
+		),
 	),
 	$cadmin-date-picker-previous-month-date
 );
@@ -274,6 +278,10 @@ $cadmin-date-picker-next-month-date: () !default;
 $cadmin-date-picker-next-month-date: map-deep-merge(
 	(
 		color: $cadmin-gray-500,
+		active: (
+			background-color: $cadmin-primary-l2,
+			color: $cadmin-primary-l3,
+		),
 	),
 	$cadmin-date-picker-next-month-date
 );

package/src/scss/cadmin/variables/_globals.scss

@@ -319,8 +319,8 @@ $cadmin-component-transition: color 0.15s ease-in-out,
 	box-shadow 0.15s ease-in-out !default;
 
 $cadmin-component-focus-box-shadow: #{0 0 0 2px $cadmin-white,
-	0 0 0 4px $cadmin-primary-l1} !default;
-$cadmin-component-focus-inset-box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
+	0 0 0 4px $cadmin-primary-l0} !default;
+$cadmin-component-focus-inset-box-shadow: #{inset 0 0 0 2px $cadmin-primary-l0,
 	inset 0 0 0 4px $cadmin-white} !default;
 
 $cadmin-component-active-bg: $cadmin-primary !default;

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

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

package/src/scss/cadmin/variables/_navbar.scss

@@ -44,6 +44,53 @@ $cadmin-navbar-underline-active-bg: clay-lighten(
 	22.94
 ) !default;
 
+$cadmin-navbar-underline: () !default;
+$cadmin-navbar-underline: map-deep-merge(
+	(
+		navbar-toggler-link: (
+			after: (
+				background-color: $cadmin-navbar-underline-active-bg,
+				bottom: math-sign($cadmin-navbar-padding-y),
+				content: '',
+				display: block,
+				height: 0.25rem,
+				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:
+											$cadmin-navbar-underline-active-bg,
+										bottom:
+											math-sign($cadmin-navbar-padding-y),
+										content: '',
+										display: block,
+										height: 0.25rem,
+										left: 0,
+										position: absolute,
+										right: 0,
+										width: auto,
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-navbar-underline
+);
+
 // Navbar Dark
 
 $cadmin-navbar-dark-color: $cadmin-white !default;

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -30,7 +30,7 @@ $cadmin-navigation-bar-base: map-deep-merge(
 		border-style: solid,
 		navbar-nav: (
 			nav-link: (
-				border-radius: 0,
+				border-radius: clay-enable-rounded($cadmin-border-radius),
 				border-width: 0,
 				outline: 0,
 				font-size: inherit,

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,
@@ -305,7 +304,7 @@ $cadmin-nav-tabs-font-size: 14px !default; // 14px
 
 // Nav Tabs Link
 
-$cadmin-nav-tabs-border-color: transparent !default;
+$cadmin-nav-tabs-border-color: $cadmin-gray-400 !default;
 $cadmin-nav-tabs-border-width: $cadmin-border-width !default;
 $cadmin-nav-tabs-border-radius: $cadmin-border-radius $cadmin-border-radius 0 0 !default;
 
@@ -316,14 +315,13 @@ $cadmin-nav-tabs-link-padding-y: 4.5px !default; // 4.5px
 $cadmin-nav-tabs-link-hover-border-color: transparent !default;
 
 $cadmin-nav-tabs-link-active-bg: $cadmin-white !default;
-$cadmin-nav-tabs-link-active-border-color: transparent transparent
+$cadmin-nav-tabs-link-active-border-color: $cadmin-gray-400 $cadmin-gray-400
 	$cadmin-body-bg !default;
 $cadmin-nav-tabs-link-active-color: $cadmin-gray-900 !default;
 
 $cadmin-nav-tabs-link-show-color: $cadmin-nav-tabs-link-active-color !default;
-$cadmin-nav-tabs-link-show-bg: transparent !default;
-$cadmin-nav-tabs-link-show-border-color: transparent transparent
-	$cadmin-nav-tabs-border-color transparent !default;
+$cadmin-nav-tabs-link-show-bg: $cadmin-white !default;
+$cadmin-nav-tabs-link-show-border-color: $cadmin-nav-tabs-link-active-border-color !default;
 
 // .nav-tabs .nav-link[aria-expanded="true"]
 
@@ -381,8 +379,13 @@ $cadmin-nav-tabs-link: map-deep-merge(
 $cadmin-nav-tabs: () !default;
 $cadmin-nav-tabs: map-deep-merge(
 	(
-		border-bottom: $cadmin-nav-tabs-border-width solid
-			$cadmin-nav-tabs-border-color,
+		background-color: $cadmin-gray-100,
+		border-color: $cadmin-gray-400,
+		border-style: solid,
+		border-width: 1px 0,
+		padding-left: 24px,
+		padding-right: 24px,
+		padding-top: 7px,
 		font-size: $cadmin-nav-tabs-font-size,
 		nav-item: (
 			margin-bottom: math-sign($cadmin-nav-tabs-border-width),
@@ -398,105 +401,6 @@ $cadmin-nav-tabs-tab-pane-bg: $cadmin-white !default;
 $cadmin-nav-tabs-tab-pane-border-radius: 4px !default;
 $cadmin-nav-tabs-tab-pane-padding: 32px !default;
 
-// Nav Underline Link Highlight
-
-$cadmin-nav-underline-link-highlight-content: null !default;
-$cadmin-nav-underline-link-highlight-height: null !default;
-$cadmin-nav-underline-link-highlight-bottom: 0 !default;
-$cadmin-nav-underline-link-highlight-left: 0 !default;
-$cadmin-nav-underline-link-highlight-right: 0 !default;
-$cadmin-nav-underline-link-highlight-top: null !default;
-
-$cadmin-nav-underline-link-active-highlight: $cadmin-primary-l0 !default;
-$cadmin-nav-underline-link-active-content: '' !default;
-$cadmin-nav-underline-link-active-highlight-height: 2px !default; // 2px
-
-$cadmin-nav-underline-link-disabled-highlight: null !default;
-
-// .nav-underline
-
-$cadmin-nav-underline-font-size: null !default;
-
-$cadmin-nav-underline-link-highlight-palette: null !default;
-
-$cadmin-nav-underline-link-color: $cadmin-gray-600 !default;
-$cadmin-nav-underline-link-padding-x: null !default;
-$cadmin-nav-underline-link-padding-y: null !default;
-
-$cadmin-nav-underline-link-hover-color: null !default;
-
-$cadmin-nav-underline-link-active-color: $cadmin-gray-900 !default;
-
-$cadmin-nav-underline-link-disabled-color: $cadmin-nav-link-disabled-color !default;
-
-// .nav-underline .nav-link[aria-expanded='true']
-
-$cadmin-nav-underline-link-show: () !default;
-$cadmin-nav-underline-link-show: map-deep-merge(
-	(
-		color: $cadmin-nav-underline-link-active-color,
-	),
-	$cadmin-nav-underline-link-show
-);
-
-$cadmin-nav-underline-link: () !default;
-$cadmin-nav-underline-link: map-deep-merge(
-	(
-		border-radius: 1px,
-		color: $cadmin-nav-underline-link-color,
-		font-weight: $cadmin-font-weight-semi-bold,
-		line-height: 1,
-		padding-bottom: 9px,
-		padding-left: $cadmin-nav-underline-link-padding-x,
-		padding-right: $cadmin-nav-underline-link-padding-x,
-		padding-top: 9px,
-		transition: box-shadow 0.15s ease-in-out,
-		after: (
-			bottom: $cadmin-nav-underline-link-highlight-bottom,
-			content: $cadmin-nav-underline-link-highlight-content,
-			display: block,
-			height: $cadmin-nav-underline-link-highlight-height,
-			position: absolute,
-			left: $cadmin-nav-underline-link-highlight-left,
-			right: $cadmin-nav-underline-link-highlight-right,
-			top: $cadmin-nav-underline-link-highlight-top,
-			width: auto,
-		),
-		hover: (
-			color: $cadmin-nav-underline-link-hover-color,
-		),
-		focus: (
-			box-shadow: $cadmin-component-focus-box-shadow,
-			color: $cadmin-nav-underline-link-hover-color,
-			outline: 0,
-		),
-		active-class: (
-			color: $cadmin-nav-underline-link-active-color,
-			after: (
-				background-color: $cadmin-nav-underline-link-active-highlight,
-				content: $cadmin-nav-underline-link-active-content,
-				height: $cadmin-nav-underline-link-active-highlight-height,
-			),
-		),
-		show: $cadmin-nav-underline-link-show,
-		disabled: (
-			box-shadow: none,
-			color: $cadmin-nav-underline-link-disabled-color,
-			after: (
-				background-color: $cadmin-nav-underline-link-disabled-highlight,
-			),
-		),
-	),
-	$cadmin-nav-underline-link
-);
-
-// .nav-underline
+// Nav Variants
 
-$cadmin-nav-underline: () !default;
-$cadmin-nav-underline: map-deep-merge(
-	(
-		font-size: $cadmin-nav-underline-font-size,
-		nav-link: $cadmin-nav-underline-link,
-	),
-	$cadmin-nav-underline
-);
+$cadmin-nav-palette: () !default;

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

@@ -0,0 +1,21 @@
+$cadmin-c-horizontal-resizer: () !default;
+$cadmin-c-horizontal-resizer: map-merge(
+	(
+		background-color: transparent,
+		bottom: 0,
+		cursor: ew-resize,
+		margin-right: -0.25rem,
+		position: absolute,
+		right: 0,
+		top: 0,
+		width: 0.5rem,
+		z-index: 10,
+		hover: (
+			background-color: $cadmin-primary-l0,
+		),
+		focus: (
+			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/_slideout.scss

@@ -64,6 +64,9 @@ $cadmin-c-slideout: map-deep-merge(
 		),
 		sidebar-c-slideout-transition: (
 			display: block,
+			c-horizontal-resizer: (
+				display: none,
+			),
 		),
 		tbar-stacked: (
 			display: none,
@@ -164,6 +167,10 @@ $cadmin-c-slideout-end: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			right: 0,
 		),
+		c-horizontal-resizer: (
+			left: 0,
+			right: auto,
+		),
 	),
 	$cadmin-c-slideout-end
 );

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

@@ -8,6 +8,7 @@ $cadmin-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 @@ $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,
@@ -60,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,
@@ -74,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/cadmin.scss

@@ -24,6 +24,7 @@ html#{$cadmin-selector} {
 
 		@import 'cadmin/components/_aspect-ratio';
 		@import 'cadmin/components/_buttons';
+		@import 'cadmin/components/_resizer';
 		@import 'cadmin/components/_transitions';
 
 		@import 'cadmin/components/_grid';

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;