@clayui/css 3.122.0 → 3.126.0

package/src/scss/cadmin/components/_menubar.scss

@@ -8,6 +8,14 @@
 	display: none;
 }
 
+.menubar-primary {
+	@include clay-menubar-vertical-variant($cadmin-menubar-primary);
+
+	.nav .nav .nav > li > .nav-link {
+		margin-left: 16px;
+	}
+}
+
 // Menubar Vertical MD
 
 .menubar-vertical-expand-md {

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

@@ -38,6 +38,12 @@
 	margin-bottom: $cadmin-multi-step-item-margin-bottom;
 	position: relative;
 
+	&:last-child {
+		.multi-step-divider {
+			display: none;
+		}
+	}
+
 	&.active {
 		.multi-step-icon {
 			background-color: $cadmin-multi-step-icon-active-bg;
@@ -167,8 +173,11 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector} {
+					box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -249,6 +258,7 @@
 	padding-left: $cadmin-multi-step-icon-padding-left;
 	padding-right: $cadmin-multi-step-icon-padding-right;
 	padding-top: $cadmin-multi-step-icon-padding-top;
+	position: relative;
 
 	@include transition($cadmin-multi-step-icon-transition);
 
@@ -260,12 +270,15 @@
 		text-decoration: $cadmin-multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $cadmin-multi-step-icon-focus-bg;
-		box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
-		color: $cadmin-multi-step-icon-focus-color;
-		outline: $cadmin-multi-step-icon-focus-outline;
-		text-decoration: $cadmin-multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector} {
+			background-color: $cadmin-multi-step-icon-focus-bg;
+			box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
+			color: $cadmin-multi-step-icon-focus-color;
+			outline: $cadmin-multi-step-icon-focus-outline;
+			text-decoration: $cadmin-multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]:before {
@@ -305,6 +318,37 @@
 	}
 }
 
+.multi-step-nav-center {
+	@include clay-css($cadmin-multi-step-nav-center);
+
+	.multi-step-item {
+		$_item: setter(
+			map-get($cadmin-multi-step-nav-center, multi-step-item),
+			()
+		);
+
+		@include clay-css($_item);
+	}
+
+	.multi-step-divider {
+		@include clay-css(
+			map-get($cadmin-multi-step-nav-center, multi-step-divider)
+		);
+	}
+
+	.multi-step-indicator {
+		@include clay-css(
+			map-get($cadmin-multi-step-nav-center, multi-step-indicator)
+		);
+	}
+
+	.multi-step-title {
+		@include clay-css(
+			map-get($cadmin-multi-step-nav-center, multi-step-title)
+		);
+	}
+}
+
 .multi-step-nav-collapse-sm {
 	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
 		flex-wrap: nowrap;
@@ -331,6 +375,29 @@
 			}
 		}
 
+		&.multi-step-nav-center {
+			.multi-step-item {
+				flex-grow: 0;
+				width: auto;
+			}
+
+			.multi-step-item-expand {
+				flex-grow: 1;
+				width: 75px;
+			}
+
+			.multi-step-divider {
+				left: auto;
+				margin-left: $cadmin-multi-step-icon-size;
+				width: auto;
+			}
+
+			.multi-step-indicator {
+				left: auto;
+				transform: none;
+			}
+		}
+
 		.active {
 			&.multi-step-item {
 				position: static;

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

@@ -79,11 +79,12 @@ $cadmin-blue-d4: #004799 !default;
 $cadmin-blue-d3: #0053b3 !default;
 $cadmin-blue-d2: #005fcc !default;
 $cadmin-blue-d1: #006be6 !default;
-$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
+$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #006eff, #0b5fff) !default;
 $cadmin-blue-l1: #338fff !default;
 $cadmin-blue-l2: #66abff !default;
 $cadmin-blue-l3: #97c5ff !default;
 $cadmin-blue-l4: #cce3ff !default;
+$cadmin-blue-l5: #e5f1ff !default;
 
 $cadmin-indigo-d4: #0017e5 !default;
 $cadmin-indigo-d3: #001aff !default;
@@ -91,13 +92,14 @@ $cadmin-indigo-d2: #1a30ff !default;
 $cadmin-indigo-d1: #3347ff !default;
 $cadmin-indigo: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#7785ff,
+	#4d5fff,
 	#6610f2
 ) !default;
 $cadmin-indigo-l1: #808cff !default;
 $cadmin-indigo-l2: #99a3ff !default;
 $cadmin-indigo-l3: #b2baff !default;
 $cadmin-indigo-l4: #ccd1ff !default;
+$cadmin-indigo-l5: #e5e8ff !default;
 
 $cadmin-purple-d4: #7700cc !default;
 $cadmin-purple-d3: #8600e6 !default;
@@ -105,33 +107,36 @@ $cadmin-purple-d2: #9500ff !default;
 $cadmin-purple-d1: #9f1aff !default;
 $cadmin-purple: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#af78ff,
+	#aa33ff,
 	#6f42c1
 ) !default;
 $cadmin-purple-l1: #bf66ff !default;
 $cadmin-purple-l2: #ca80ff !default;
 $cadmin-purple-l3: #d499ff !default;
 $cadmin-purple-l4: #dfb3ff !default;
+$cadmin-purple-l5: #f2e5ff !default;
 
 $cadmin-pink-d4: #800048 !default;
 $cadmin-pink-d3: #990057 !default;
 $cadmin-pink-d2: #b30065 !default;
 $cadmin-pink-d1: #cc0074 !default;
-$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default;
+$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #e50082, #e83e8c) !default;
 $cadmin-pink-l1: #ff4db2 !default;
 $cadmin-pink-l2: #ff80c8 !default;
 $cadmin-pink-l3: #ff99d3 !default;
 $cadmin-pink-l4: #ffb3de !default;
+$cadmin-pink-l5: #ffe5f4 !default;
 
 $cadmin-red-d4: #800000 !default;
 $cadmin-red-d3: #990000 !default;
 $cadmin-red-d2: #b30000 !default;
 $cadmin-red-d1: #cc0000 !default;
-$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #ff5f5f, #da1414) !default;
+$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #e60000, #da1414) !default;
 $cadmin-red-l1: #ff4d4d !default;
 $cadmin-red-l2: #ff6666 !default;
 $cadmin-red-l3: #ff8080 !default;
 $cadmin-red-l4: #ff9999 !default;
+$cadmin-red-l5: #ffe5e5 !default;
 
 $cadmin-orange-d4: #662700 !default;
 $cadmin-orange-d3: #803100 !default;
@@ -139,13 +144,14 @@ $cadmin-orange-d2: #993b00 !default;
 $cadmin-orange-d1: #b34400 !default;
 $cadmin-orange: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#ffb46e,
+	#cc4e00,
 	#b95000
 ) !default;
 $cadmin-orange-l1: #ff6200 !default;
 $cadmin-orange-l2: #ff8133 !default;
 $cadmin-orange-l3: #ffa166 !default;
 $cadmin-orange-l4: #ffc099 !default;
+$cadmin-orange-l5: #fff0e5 !default;
 
 $cadmin-yellow-d4: #997000 !default;
 $cadmin-yellow-d3: #b38900 !default;
@@ -153,13 +159,14 @@ $cadmin-yellow-d2: #cc9600 !default;
 $cadmin-yellow-d1: #e6a800 !default;
 $cadmin-yellow: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#ffd76e,
+	#ffbb00,
 	#ffc107
 ) !default;
 $cadmin-yellow-l1: #ffc933 !default;
 $cadmin-yellow-l2: #ffd666 !default;
 $cadmin-yellow-l3: #ffe499 !default;
 $cadmin-yellow-l4: #fff1cc !default;
+$cadmin-yellow-l5: #fff8e5 !default;
 
 $cadmin-green-d4: #162d06 !default;
 $cadmin-green-d3: #22430a !default;
@@ -167,33 +174,36 @@ $cadmin-green-d2: #2e590d !default;
 $cadmin-green-d1: #397010 !default;
 $cadmin-green: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#9be169,
+	#458613,
 	#287d3d
 ) !default;
 $cadmin-green-l1: #53a117 !default;
 $cadmin-green-l2: #67c91d !default;
 $cadmin-green-l3: #81e236 !default;
 $cadmin-green-l4: #9de963 !default;
+$cadmin-green-l5: #f1fce9 !default;
 
 $cadmin-teal-d4: #092a25 !default;
 $cadmin-teal-d3: #0d3f37 !default;
 $cadmin-teal-d2: #125449 !default;
 $cadmin-teal-d1: #16695b !default;
-$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
+$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #1b7e6e, #20c997) !default;
 $cadmin-teal-l1: #24a892 !default;
 $cadmin-teal-l2: #42d7be !default;
 $cadmin-teal-l3: #6ce0cc !default;
 $cadmin-teal-l4: #96e9db !default;
+$cadmin-teal-l5: #eafbf8 !default;
 
 $cadmin-cyan-d4: #00334d !default;
 $cadmin-cyan-d3: #004466 !default;
 $cadmin-cyan-d2: #005580 !default;
 $cadmin-cyan-d1: #006699 !default;
-$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
+$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #0077b3, #17a2b8) !default;
 $cadmin-cyan-l1: #0099e6 !default;
 $cadmin-cyan-l2: #33bbff !default;
 $cadmin-cyan-l3: #66ccff !default;
 $cadmin-cyan-l4: #99ddff !default;
+$cadmin-cyan-l5: #e5f6ff !default;
 
 $cadmin-colors: () !default;
 $cadmin-colors: map-merge(
@@ -927,7 +937,7 @@ $cadmin-clay-dark-mark: map-deep-merge(
 
 $cadmin-dt-font-weight: $cadmin-font-weight-bold !default;
 
-$cadmin-code-color: #e83e8c !default;
+$cadmin-code-color: $cadmin-red !default;
 $cadmin-code-font-size: 87.5% !default;
 
 $cadmin-kbd-bg: $cadmin-gray-900 !default;

package/src/scss/cadmin/variables/_menubar.scss

@@ -1,3 +1,125 @@
+$cadmin-menubar-primary: () !default;
+$cadmin-menubar-primary: map-deep-merge(
+	(
+		nav-item: (
+			position: relative,
+		),
+		nav-link: (
+			border-radius: 0,
+			color: $cadmin-gray-900,
+			line-height: 24px,
+			transition: #{color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out},
+			before: (
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				transition: $cadmin-transition-base,
+			),
+			hover: (
+				background-color: $cadmin-primary-l3,
+				color: $cadmin-gray-900,
+				letter-spacing: 0,
+				before: (
+					background: $cadmin-secondary-l0,
+					width: 2px,
+				),
+			),
+			focus: (
+				background-color: c-unset,
+				box-shadow: none,
+				color: $cadmin-gray-900,
+				outline: 0,
+				after: (
+					bottom: 0,
+					box-shadow: $cadmin-component-focus-inset-box-shadow,
+					content: '',
+					display: block,
+					left: 0,
+					pointer-events: none,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
+			),
+			active-class: (
+				background-color: $cadmin-primary-l3,
+				color: $cadmin-gray-900,
+				font-weight: $cadmin-font-weight-semi-bold,
+				before: (
+					background-color: $cadmin-primary,
+					width: 6px,
+				),
+				focus: (
+					before: (
+						display: none,
+					),
+				),
+			),
+			disabled: (
+				background-color: transparent,
+				box-shadow: none,
+				font-weight: $cadmin-font-weight-normal,
+				before: (
+					content: none,
+				),
+				after: (
+					content: none,
+				),
+			),
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $cadmin-gray-900,
+				before: (
+					background-color: transparent,
+					width: 0,
+				),
+				hover: (
+					before: (
+						background-color: $cadmin-secondary-l0,
+						width: 2px,
+					),
+				),
+			),
+			autofit-row: (
+				align-items: center,
+				margin-left: -4px,
+				margin-right: -4px,
+				autofit-col: (
+					padding-left: 4px,
+					padding-right: 4px,
+				),
+			),
+			collapse-icon: (
+				font-size: 12px,
+				font-weight: $cadmin-font-weight-semi-bold,
+				text-transform: uppercase,
+				collapse-icon-closed: (
+					top: calc(22px - (1em / 2)),
+				),
+				collapse-icon-open: (
+					top: calc(22px - (1em / 2)),
+				),
+			),
+		),
+		menubar-actions-1: (
+			padding-right: 64px,
+		),
+		menubar-action: (
+			position: absolute,
+			top: 10px,
+			right: 32px,
+		),
+	),
+	$cadmin-menubar-primary
+);
+
 // Menubar Vertical MD
 
 $cadmin-menubar-vertical-expand-md: () !default;

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

@@ -83,6 +83,32 @@ $cadmin-multi-step-item-margin-bottom: 10px !default;
 $cadmin-multi-step-item-width: 75px !default;
 $cadmin-multi-step-item-fixed-width: 150px !default;
 
+$cadmin-multi-step-nav-center: () !default;
+$cadmin-multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+		multi-step-item: (
+			flex-grow: 1,
+			width: $cadmin-multi-step-item-width,
+		),
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$cadmin-multi-step-icon-size}),
+		),
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$cadmin-multi-step-nav-center
+);
+
 // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
 
 $cadmin-multi-step-item-error: () !default;

package/src/scss/cadmin/variables/_stickers.scss

@@ -338,6 +338,106 @@ $cadmin-sticker-dark: map-deep-merge(
 	$cadmin-sticker-dark
 );
 
+$cadmin-sticker-outline-0: () !default;
+$cadmin-sticker-outline-0: map-deep-merge(
+	(
+		background-color: $cadmin-light,
+		border: 1px solid $cadmin-dark,
+		color: $cadmin-dark,
+	),
+	$cadmin-sticker-outline-0
+);
+
+$cadmin-sticker-outline-1: () !default;
+$cadmin-sticker-outline-1: map-deep-merge(
+	(
+		background-color: $cadmin-purple-l5,
+		border: 1px solid $cadmin-purple,
+		color: $cadmin-purple,
+	),
+	$cadmin-sticker-outline-1
+);
+
+$cadmin-sticker-outline-2: () !default;
+$cadmin-sticker-outline-2: map-deep-merge(
+	(
+		background-color: $cadmin-yellow-l5,
+		border: 1px solid $cadmin-yellow-d3,
+		color: $cadmin-yellow-d3,
+	),
+	$cadmin-sticker-outline-2
+);
+
+$cadmin-sticker-outline-3: () !default;
+$cadmin-sticker-outline-3: map-deep-merge(
+	(
+		background-color: $cadmin-green-l5,
+		border: 1px solid $cadmin-green,
+		color: $cadmin-green,
+	),
+	$cadmin-sticker-outline-3
+);
+
+$cadmin-sticker-outline-4: () !default;
+$cadmin-sticker-outline-4: map-deep-merge(
+	(
+		background-color: $cadmin-red-l5,
+		border: 1px solid $cadmin-red,
+		color: $cadmin-red,
+	),
+	$cadmin-sticker-outline-4
+);
+
+$cadmin-sticker-outline-5: () !default;
+$cadmin-sticker-outline-5: map-deep-merge(
+	(
+		background-color: $cadmin-orange-l5,
+		border: 1px solid $cadmin-orange,
+		color: $cadmin-orange,
+	),
+	$cadmin-sticker-outline-5
+);
+
+$cadmin-sticker-outline-6: () !default;
+$cadmin-sticker-outline-6: map-deep-merge(
+	(
+		background-color: $cadmin-teal-l5,
+		border: 1px solid $cadmin-teal,
+		color: $cadmin-teal,
+	),
+	$cadmin-sticker-outline-6
+);
+
+$cadmin-sticker-outline-7: () !default;
+$cadmin-sticker-outline-7: map-deep-merge(
+	(
+		background-color: $cadmin-cyan-l5,
+		border: 1px solid $cadmin-cyan,
+		color: $cadmin-cyan,
+	),
+	$cadmin-sticker-outline-7
+);
+
+$cadmin-sticker-outline-8: () !default;
+$cadmin-sticker-outline-8: map-deep-merge(
+	(
+		background-color: $cadmin-pink-l5,
+		border: 1px solid $cadmin-pink,
+		color: $cadmin-pink-d4,
+	),
+	$cadmin-sticker-outline-8
+);
+
+$cadmin-sticker-outline-9: () !default;
+$cadmin-sticker-outline-9: map-deep-merge(
+	(
+		background-color: $cadmin-white,
+		border: 1px solid $cadmin-dark-l2,
+		color: $cadmin-dark-l2,
+	),
+	$cadmin-sticker-outline-9
+);
+
 $cadmin-sticker-palette: () !default;
 $cadmin-sticker-palette: map-deep-merge(
 	(
@@ -349,6 +449,16 @@ $cadmin-sticker-palette: map-deep-merge(
 		danger: $cadmin-sticker-danger,
 		light: $cadmin-sticker-light,
 		dark: $cadmin-sticker-dark,
+		'.sticker-outline-0': $cadmin-sticker-outline-0,
+		'.sticker-outline-1': $cadmin-sticker-outline-1,
+		'.sticker-outline-2': $cadmin-sticker-outline-2,
+		'.sticker-outline-3': $cadmin-sticker-outline-3,
+		'.sticker-outline-4': $cadmin-sticker-outline-4,
+		'.sticker-outline-5': $cadmin-sticker-outline-5,
+		'.sticker-outline-6': $cadmin-sticker-outline-6,
+		'.sticker-outline-7': $cadmin-sticker-outline-7,
+		'.sticker-outline-8': $cadmin-sticker-outline-8,
+		'.sticker-outline-9': $cadmin-sticker-outline-9,
 	),
 	$cadmin-sticker-palette
 );

package/src/scss/cadmin/variables/_toggle-switch.scss

@@ -479,7 +479,7 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
 		toggle-switch-sm: (
 			simple-toggle-switch: (
 				toggle-switch-label: (
-					max-width: calc(100% - 38px),
+					max-width: calc(100% - 34px),
 				),
 			),
 			toggle-switch-check: (
@@ -500,9 +500,8 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
-						max-width: 30px,
 						after: (
-							margin-left: 38px,
+							margin-left: 34px,
 						),
 					),
 					toggle-switch-icon: (

package/src/scss/components/_icons.scss

@@ -29,7 +29,8 @@
 // Collapse Icon
 
 a.collapse-icon,
-button.collapse-icon {
+button.collapse-icon,
+.collapse-icon[tabindex] {
 	padding-left: $collapse-icon-padding-left;
 	padding-right: $collapse-icon-padding-right;
 

package/src/scss/components/_menubar.scss

@@ -8,6 +8,14 @@
 	display: none;
 }
 
+.menubar-primary {
+	@include clay-menubar-vertical-variant($menubar-primary);
+
+	.nav .nav .nav > li > .nav-link {
+		margin-left: 1rem;
+	}
+}
+
 // Menubar Vertical MD
 
 .menubar-vertical-expand-md {