@clayui/css 3.91.0 → 3.93.0

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,17 @@
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
+
+		@at-root {
+			$selector: if(
+				variable-exists(cadmin-selector),
+				clay-insert-after('.cadmin ', '.c-prefers-reduced-motion '),
+				'.c-prefers-reduced-motion &'
+			);
+
+			#{$selector} {
+				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/_sheets.scss

@@ -27,6 +27,23 @@ $sheet-plus-sheet: map-merge(
 	$sheet-plus-sheet
 );
 
+// Sheet Row
+
+$sheet-row: () !default;
+$sheet-row: map-merge(
+	(
+		margin-left: math-sign($sheet-padding-left),
+		margin-right: math-sign($sheet-padding-right),
+		media-breakpoint-down: (
+			sm: (
+				margin-left: math-sign($sheet-padding-left-mobile),
+				margin-right: math-sign($sheet-padding-right-mobile),
+			),
+		),
+	),
+	$sheet-row
+);
+
 // Sheet Header
 
 $sheet-header-margin-bottom: 3rem !default; // 48px

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
+);