@clayui/css 3.124.0 → 3.126.0

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/_multi-step-nav.scss

@@ -46,6 +46,12 @@
 	margin-bottom: $multi-step-item-margin-bottom;
 	position: relative;
 
+	&:last-child {
+		.multi-step-divider {
+			display: none;
+		}
+	}
+
 	&.active {
 		.multi-step-icon {
 			background-color: $multi-step-icon-active-bg;
@@ -181,8 +187,11 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector} {
+					box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -259,6 +268,7 @@
 	padding-left: $multi-step-icon-padding-left;
 	padding-right: $multi-step-icon-padding-right;
 	padding-top: $multi-step-icon-padding-top;
+	position: relative;
 
 	@include transition($multi-step-icon-transition);
 
@@ -270,12 +280,15 @@
 		text-decoration: $multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $multi-step-icon-focus-bg;
-		box-shadow: $multi-step-icon-focus-box-shadow;
-		color: $multi-step-icon-focus-color;
-		outline: $multi-step-icon-focus-outline;
-		text-decoration: $multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector} {
+			background-color: $multi-step-icon-focus-bg;
+			box-shadow: $multi-step-icon-focus-box-shadow;
+			color: $multi-step-icon-focus-color;
+			outline: $multi-step-icon-focus-outline;
+			text-decoration: $multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]::before {
@@ -315,6 +328,30 @@
 	}
 }
 
+.multi-step-nav-center {
+	@include clay-css($multi-step-nav-center);
+
+	.multi-step-item {
+		$_item: setter(map-get($multi-step-nav-center, multi-step-item), ());
+
+		@include clay-css($_item);
+	}
+
+	.multi-step-divider {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-divider));
+	}
+
+	.multi-step-indicator {
+		@include clay-css(
+			map-get($multi-step-nav-center, multi-step-indicator)
+		);
+	}
+
+	.multi-step-title {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-title));
+	}
+}
+
 .multi-step-nav-collapse-sm {
 	@include media-breakpoint-down(sm) {
 		flex-wrap: nowrap;
@@ -341,6 +378,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: $multi-step-icon-size;
+				width: auto;
+			}
+
+			.multi-step-indicator {
+				left: auto;
+				transform: none;
+			}
+		}
+
 		.active {
 			&.multi-step-item {
 				position: static;

package/src/scss/functions/_lx-icons-generated.scss

@@ -494,6 +494,8 @@
 
 	'full-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline full-size-bottom-right" d="M384 382.804H224V448h160c35.2 0 64-28.8 64-64V224h-64v158.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-left" d="M128 126.804h160v-64H128c-35.2 0-64 28.8-64 64V288h64V126.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-right" d="M502.524 9.475A32.315 32.315 0 0 0 479.614 0H378.357c-17.96 0-32.457 14.496-32.386 32.385 0 8.91 3.606 17.042 9.475 22.91a32.338 32.338 0 0 0 22.91 9.476h23.618l-80.469 80.469 45.255 45.254 80.469-80.468v23.617c0 17.96 14.495 32.456 32.385 32.386 17.96 0 32.456-14.496 32.386-32.386V32.386c0-8.627-3.394-16.83-9.476-22.91z" fill="#{$color}"/><path class="lexicon-icon-outline fullsize-bottom-left" d="m145.24 321.505-80.469 80.47v-23.618c0-17.96-14.495-32.456-32.385-32.386-17.96 0-32.456 14.496-32.386 32.386v101.257c0 8.627 3.394 16.83 9.476 22.91A32.315 32.315 0 0 0 32.386 512h101.257c17.96 0 32.457-14.496 32.386-32.386 0-8.909-3.606-17.04-9.475-22.91a32.338 32.338 0 0 0-22.91-9.475h-23.618l80.469-80.469-45.255-45.255z" fill="#{$color}"/></svg>',
 
+	'gallery': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="lexicon-icon-outline" d="M0 14.7a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H6.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7h-2.6a.7.7 0 0 1-.7-.7v-.6Zm2-2.7H2c-1 0-2-1.197-2-2.4V2.4C0 1.206 1 0 2 0h12c1 0 2 1.197 2 2.4v7.2c0 1.201-1 2.4-2 2.4ZM2 2v8h12V2H2Z" fill="#{$color}"/></svg>',
+
 	'geolocation': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 191.3c0 106.3 96 224.5 192 320.7 96-96.2 192-214.4 192-320.7 0-257.1-384-253.1-384 0zm96 0c0-125.9 192-124.7 192 0 0 124-192 127.2-192 0z" fill="#{$color}"/></svg>',
 
 	'globe-lines': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 256.9c0-343.6 512-341.4 512 0 0 337.7-512 342.6-512 0zm420.2 99.7H379c5.2-25.9 8.5-53.8 9.4-83.1h58.9c-2.6 30.2-12.1 58.4-27.1 83.1zm27.1-116.3h-58.9c-.9-29.2-4.2-57.2-9.4-83.1h41.2c15 24.6 24.5 52.8 27.1 83.1zM272.6 65.2c14.6 1.3 28.7 4.1 42.2 8.5 7.9 13.9 15.4 31.2 21.4 50.3h-63.7V65.2zm-75.4 8.5c13.5-4.3 27.6-7.2 42.2-8.5V124h-63.7c6.1-19.1 13.6-36.3 21.5-50.3zm-80 50.3c9.9-10.4 21-19.7 33.1-27.7-3.3 8.8-6.4 18.1-9.2 27.7h-23.9zM64.7 240.3c2.6-30.2 12.1-58.5 27.1-83.1H133c-5.2 25.9-8.5 53.8-9.4 83.1H64.7zm27.1 116.3c-14.9-24.6-24.5-52.8-27.1-83.1h58.9c.9 29.2 4.2 57.2 9.4 83.1H91.8zm58.5 60.9c-12-8-23.1-17.3-33.1-27.7h23.9c2.8 9.6 5.8 18.8 9.2 27.7zm89.1 31c-14.6-1.3-28.7-4.1-42.2-8.5-7.9-13.9-15.4-31.2-21.4-50.3h63.7v58.8zm75.4-8.5c-13.5 4.3-27.6 7.2-42.2 8.5v-58.7h63.7c-6.1 19-13.6 36.3-21.5 50.2zm46.9-22.5c3.3-8.8 6.4-18.1 9.2-27.7h23.9c-9.9 10.4-21 19.7-33.1 27.7zm0-321.2c12 8 23.1 17.3 33.1 27.7h-23.9c-2.8-9.6-5.8-18.9-9.2-27.7zm-6.5 177.2c-1 29.7-4.5 57.7-10.1 83.1h-72.5v-83.1h82.6zm-10.1-116.3c5.6 25.4 9.1 53.4 10.1 83.1h-82.6v-83.1h72.5zm-188.3 83.1c1-29.7 4.5-57.7 10.1-83.1h72.5v83.1h-82.6zm10.1 116.3c-5.6-25.4-9.1-53.4-10.1-83.1h82.6v83.1h-72.5z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',

package/src/scss/variables/_globals.scss

@@ -87,6 +87,7 @@ $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
+$blue-l5: #e5f1ff !default;
 
 $indigo-d4: #0017e5 !default;
 $indigo-d3: #001aff !default;
@@ -97,6 +98,7 @@ $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
+$indigo-l5: #e5e8ff !default;
 
 $purple-d4: #7700cc !default;
 $purple-d3: #8600e6 !default;
@@ -107,6 +109,7 @@ $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
+$purple-l5: #f2e5ff !default;
 
 $pink-d4: #800048 !default;
 $pink-d3: #990057 !default;
@@ -117,6 +120,7 @@ $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
+$pink-l5: #ffe5f4 !default;
 
 $red-d4: #800000 !default;
 $red-d3: #990000 !default;
@@ -127,6 +131,7 @@ $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
+$red-l5: #ffe5e5 !default;
 
 $orange-d4: #662700 !default;
 $orange-d3: #803100 !default;
@@ -137,6 +142,7 @@ $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
+$orange-l5: #fff0e5 !default;
 
 $yellow-d4: #997000 !default;
 $yellow-d3: #b38900 !default;
@@ -147,6 +153,7 @@ $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
+$yellow-l5: #fff8e5 !default;
 
 $green-d4: #162d06 !default;
 $green-d3: #22430a !default;
@@ -157,6 +164,7 @@ $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
+$green-l5: #f1fce9 !default;
 
 $teal-d4: #092a25 !default;
 $teal-d3: #0d3f37 !default;
@@ -167,6 +175,7 @@ $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
+$teal-l5: #eafbf8 !default;
 
 $cyan-d4: #00334d !default;
 $cyan-d3: #004466 !default;
@@ -177,6 +186,7 @@ $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
 $cyan-l4: #99ddff !default;
+$cyan-l5: #e5f6ff !default;
 
 $colors: () !default;
 $colors: map-merge(

package/src/scss/variables/_menubar.scss

@@ -65,7 +65,6 @@ $menubar-primary: map-deep-merge(
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $font-weight-normal,
-				letter-spacing: 0.016rem,
 				before: (
 					content: none,
 				),

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

@@ -96,6 +96,32 @@ $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
 
+$multi-step-nav-center: () !default;
+$multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+		multi-step-item: (
+			flex-grow: 1,
+			width: $multi-step-item-width,
+		),
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$multi-step-icon-size}),
+		),
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$multi-step-nav-center
+);
+
 $multi-step-title-center: () !default;
 $multi-step-title-center: map-deep-merge(
 	(

package/src/scss/variables/_stickers.scss

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

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

@@ -497,7 +497,7 @@ $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: (
@@ -515,9 +515,8 @@ $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: (