liferay-frontend-theme-unstyled 6.0.81 → 6.0.82

package/css/clay/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.145.0
+ * Clay 3.149.2
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>

package/css/clay/atlas/variables/_globals.scss

@@ -40,6 +40,7 @@ $enable-caret: false !default;
 $enable-deprecation-messages: true !default;
 $enable-gradients: false !default;
 $enable-grid-classes: true !default;
+$enable-pagination-sizes: false !default;
 $enable-pointer-cursor-for-buttons: true !default;
 $enable-prefers-reduced-motion-media-query: true !default;
 $enable-print-styles: true !default;

package/css/clay/atlas/variables/_pagination.scss

@@ -223,13 +223,17 @@ $pagination-items-per-page-link: map-deep-merge(
 
 $pagination-results-color: $pagination-color !default;
 
-// Sizes
+// @deprecated Pagination Sizes as of v3.146.0
+
+// .pagination-sm
 
 $pagination-link-border-radius-sm: 0.3125rem !default;
 $pagination-font-size-sm: 0.75rem !default; // 12px
 $pagination-item-height-sm: 1.5rem !default; // 24px
 $pagination-padding-y-sm: 0 !default;
 
+// .pagination-lg
+
 $pagination-link-border-radius-lg: 0.3125rem !default; // 5px
 $pagination-font-size-lg: 1.125rem !default; // 18px
 $pagination-item-height-lg: 2.75rem !default; //44px

package/css/clay/cadmin/components/_form-validation.scss

@@ -38,6 +38,10 @@
 	}
 }
 
+.form-help-text {
+	@include clay-css($cadmin-form-help-text);
+}
+
 // Non HTML5 Form Validator
 
 .has-error {

package/css/clay/cadmin/components/_forms.scss

@@ -43,12 +43,31 @@ label {
 		@include clay-css($for);
 	}
 
+	$_form-feedback-group: map-get(
+		$cadmin-input-label,
+		'+ .form-feedback-group'
+	);
+
+	@if ($_form-feedback-group) {
+		+ .form-feedback-group {
+			@include clay-css($_form-feedback-group);
+		}
+	}
+
 	+ .form-text {
 		$form-text: setter(map-get($cadmin-input-label, form-text), ());
 
 		@include clay-css($form-text);
 	}
 
+	$_form-help-text: map-get($cadmin-input-label, form-help-text);
+
+	@if ($_form-help-text) {
+		.form-help-text {
+			@include clay-css($_form-help-text);
+		}
+	}
+
 	.reference-mark {
 		$reference-mark: setter(
 			map-get($cadmin-input-label, reference-mark),

package/css/clay/cadmin/components/_pagination.scss

@@ -58,12 +58,14 @@
 	@include clay-css($cadmin-pagination-results);
 }
 
-// Pagination Sizes
+// @deprecated Pagination Sizes as of v3.146.0
 
-.pagination-sm {
-	@include clay-pagination-variant($cadmin-pagination-sm);
-}
+@if ($cadmin-enable-pagination-sizes) {
+	.pagination-sm {
+		@include clay-pagination-variant($cadmin-pagination-sm);
+	}
 
-.pagination-lg {
-	@include clay-pagination-variant($cadmin-pagination-lg);
+	.pagination-lg {
+		@include clay-pagination-variant($cadmin-pagination-lg);
+	}
 }

package/css/clay/cadmin/components/_slideout.scss

@@ -28,26 +28,14 @@
 
 .c-slideout {
 	@include clay-slideout-variant($cadmin-c-slideout);
-
-	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
-		@include clay-slideout-variant($cadmin-c-slideout-sm-down);
-	}
 }
 
 .c-slideout-start {
 	@include clay-slideout-variant($cadmin-c-slideout-start);
-
-	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
-		@include clay-slideout-variant($cadmin-c-slideout-start-sm-down);
-	}
 }
 
 .c-slideout-end {
 	@include clay-slideout-variant($cadmin-c-slideout-end);
-
-	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
-		@include clay-slideout-variant($cadmin-c-slideout-end-sm-down);
-	}
 }
 
 .c-slideout-height-full {

package/css/clay/cadmin/components/_utilities.scss

@@ -19,6 +19,10 @@
 	}
 }
 
+.c-focus-trap {
+	@include clay-map-to-css($cadmin-c-focus-trap);
+}
+
 // Autofit Row
 
 %autofit-row {

package/css/clay/cadmin/variables/_forms.scss

@@ -264,10 +264,21 @@ $cadmin-input-label: map-deep-merge(
 		for: (
 			cursor: $cadmin-input-label-for-cursor,
 		),
+		'+ .form-feedback-group': (
+			margin-bottom: 12px,
+		),
 		form-text: (
 			margin-bottom: $cadmin-input-label-margin-bottom,
 			margin-top: 0,
 		),
+		form-help-text: (
+			color: $cadmin-secondary-l0,
+			display: inline,
+			font-size: 14px,
+			font-weight: $cadmin-font-weight-normal,
+			margin-left: 8px,
+			margin-top: 0,
+		),
 		reference-mark: (
 			color: $cadmin-input-label-reference-mark-color,
 			font-size: $cadmin-input-label-reference-mark-font-size,
@@ -653,6 +664,17 @@ $cadmin-form-text: map-merge(
 	$cadmin-form-text
 );
 
+$cadmin-form-help-text: () !default;
+$cadmin-form-help-text: map-deep-merge(
+	(
+		color: $cadmin-secondary,
+		display: block,
+		font-size: 14px,
+		margin-top: 4px,
+	),
+	$cadmin-form-help-text
+);
+
 // .form-feedback-item
 
 $cadmin-form-feedback-font-size: 14px !default;

package/css/clay/cadmin/variables/_globals.scss

@@ -31,17 +31,18 @@ $cadmin-scaling-breakpoint-down: sm !default;
 $cadmin-enable-clay-color-functions-process-fallback: true !default;
 
 $cadmin-enable-caret: false !default;
-$cadmin-enable-rounded: true !default;
-$cadmin-enable-shadows: true !default;
+$cadmin-enable-deprecation-messages: true !default;
 $cadmin-enable-gradients: false !default;
-$cadmin-enable-transitions: true !default;
-$cadmin-enable-prefers-reduced-motion-media-query: true !default;
 $cadmin-enable-grid-classes: true !default;
+$cadmin-enable-pagination-sizes: false !default;
 $cadmin-enable-pointer-cursor-for-buttons: true !default;
+$cadmin-enable-prefers-reduced-motion-media-query: true !default;
 $cadmin-enable-print-styles: true !default;
 $cadmin-enable-responsive-font-sizes: false !default;
+$cadmin-enable-rounded: true !default;
+$cadmin-enable-shadows: true !default;
+$cadmin-enable-transitions: true !default;
 $cadmin-enable-validation-icons: false !default;
-$cadmin-enable-deprecation-messages: true !default;
 
 // Deprecated, no longer affects any compiled CSS
 

package/css/clay/cadmin/variables/_pagination.scss

@@ -486,6 +486,8 @@ $cadmin-pagination-results: map-deep-merge(
 	$cadmin-pagination-results
 );
 
+// @deprecated Pagination Sizes as of v3.146.0
+
 // .pagination-sm
 
 $cadmin-pagination-font-size-sm: 12px !default; // 12px

package/css/clay/cadmin/variables/_sidebar.scss

@@ -235,11 +235,11 @@ $cadmin-sidebar-light: map-deep-merge(
 		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		color: $cadmin-gray-900,
 		sidebar-header: (
-			background-color: inherit,
+			background-color: $cadmin-white,
 			border: 0px solid $cadmin-gray-300,
 		),
 		sidebar-footer: (
-			background-color: inherit,
+			background-color: $cadmin-white,
 			border: 0px solid $cadmin-gray-300,
 		),
 		sidenav-start: (

package/css/clay/cadmin/variables/_slideout.scss

@@ -6,6 +6,10 @@ $cadmin-c-slideout-tbar-stacked-min-width: 40px !default;
 
 $cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 
+$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;
+
+$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;
+
 // C Slideout Transitions
 
 $cadmin-c-slideout-transition-in: () !default;
@@ -81,6 +85,16 @@ $cadmin-c-slideout-push-end: map-deep-merge(
 
 // C Slideout Base
 
+$cadmin-c-slideout-sm-down: () !default;
+$cadmin-c-slideout-sm-down: map-deep-merge(
+	(
+		sidebar: (
+			width: $cadmin-c-slideout-sidebar-width-mobile,
+		),
+	),
+	$cadmin-c-slideout-sm-down
+);
+
 $cadmin-c-slideout: () !default;
 $cadmin-c-slideout: map-deep-merge(
 	(
@@ -102,6 +116,16 @@ $cadmin-c-slideout: map-deep-merge(
 			sidebar-footer: (
 				border-top-width: 1px,
 			),
+			'@supports (position: sticky)': (
+				'@media (max-height: 700px)': (
+					'.sidebar-header.sticky-top': (
+						position: static,
+					),
+					'.sidebar-footer.sticky-bottom': (
+						position: static,
+					),
+				),
+			),
 		),
 		sidebar-c-slideout-show: (
 			display: flex,
@@ -128,22 +152,76 @@ $cadmin-c-slideout: map-deep-merge(
 		tbar-stacked-c-slideout-transition: (
 			display: block,
 		),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-sm-down,
+		),
 	),
 	$cadmin-c-slideout
 );
 
-$cadmin-c-slideout-sm-down: () !default;
-$cadmin-c-slideout-sm-down: map-deep-merge(
+$cadmin-c-slideout-fluid: () !default;
+$cadmin-c-slideout-fluid: map-deep-merge(
 	(
+		'&.c-slideout-push-start': (
+			padding-left: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		'&.c-slideout-push-end': (
+			padding-right: $cadmin-c-slideout-fluid-sidebar-width,
+		),
 		sidebar: (
-			width: $cadmin-c-slideout-sidebar-width-mobile,
+			max-width: $cadmin-c-slideout-fluid-sidebar-width,
+			width: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		media-breakpoint-down: (
+			md: (
+				'&.c-slideout-push-start': (
+					padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				sidebar: (
+					max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
+					width: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+			),
+			sm: (
+				'&.c-slideout-push-start': (
+					padding-left: 0,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: 0,
+				),
+				sidebar: (
+					max-width: none,
+					width: 100vw,
+				),
+			),
 		),
 	),
-	$cadmin-c-slideout-sm-down
+	$cadmin-c-slideout-fluid
 );
 
 // C Slideout Start
 
+$cadmin-c-slideout-start-sm-down: () !default;
+$cadmin-c-slideout-start-sm-down: map-deep-merge(
+	(
+		c-slideout-tbar-shown-sidebar: (
+			left: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+		),
+		sidebar: (
+			left: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
+				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
+			width: $cadmin-c-slideout-sidebar-width-mobile,
+		),
+		tbar-stacked: (
+			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+		),
+	),
+	$cadmin-c-slideout-start-sm-down
+);
+
 $cadmin-c-slideout-start: () !default;
 $cadmin-c-slideout-start: map-deep-merge(
 	(
@@ -167,30 +245,32 @@ $cadmin-c-slideout-start: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			left: 0,
 		),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-start-sm-down,
+		),
 	),
 	$cadmin-c-slideout-start
 );
 
-$cadmin-c-slideout-start-sm-down: () !default;
-$cadmin-c-slideout-start-sm-down: map-deep-merge(
+// C Slideout End
+
+$cadmin-c-slideout-end-sm-down: () !default;
+$cadmin-c-slideout-end-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+			right: math-sign($cadmin-c-slideout-sidebar-width-mobile),
 		),
 		sidebar: (
-			left: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
+			right: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
 				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
-			width: $cadmin-c-slideout-sidebar-width-mobile,
 		),
 		tbar-stacked: (
-			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
 		),
 	),
-	$cadmin-c-slideout-start-sm-down
+	$cadmin-c-slideout-end-sm-down
 );
 
-// C Slideout End
-
 $cadmin-c-slideout-end: () !default;
 $cadmin-c-slideout-end: map-deep-merge(
 	(
@@ -217,25 +297,11 @@ $cadmin-c-slideout-end: map-deep-merge(
 			left: 0,
 			right: auto,
 		),
-	),
-	$cadmin-c-slideout-end
-);
-
-$cadmin-c-slideout-end-sm-down: () !default;
-$cadmin-c-slideout-end-sm-down: map-deep-merge(
-	(
-		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($cadmin-c-slideout-sidebar-width-mobile),
-		),
-		sidebar: (
-			right: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
-		),
-		tbar-stacked: (
-			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-end-sm-down,
 		),
 	),
-	$cadmin-c-slideout-end-sm-down
+	$cadmin-c-slideout-end
 );
 
 $cadmin-c-slideout-height-full: () !default;

package/css/clay/cadmin/variables/_stickers.scss

@@ -92,6 +92,20 @@ $cadmin-sticker-xl: map-deep-merge(
 	$cadmin-sticker-xl
 );
 
+$cadmin-sticker-xxl: () !default;
+$cadmin-sticker-xxl: map-deep-merge(
+	(
+		font-size: 2.5rem,
+		height: 5rem,
+		line-height: 5rem,
+		width: 5rem,
+		lexicon-icon: (
+			font-size: 1.5rem,
+		),
+	),
+	$cadmin-sticker-xxl
+);
+
 $cadmin-sticker-sizes: () !default;
 $cadmin-sticker-sizes: map-deep-merge(
 	(
@@ -104,6 +118,7 @@ $cadmin-sticker-sizes: map-deep-merge(
 		sticker-sm: $cadmin-sticker-sm,
 		sticker-lg: $cadmin-sticker-lg,
 		sticker-xl: $cadmin-sticker-xl,
+		sticker-xxl: $cadmin-sticker-xxl,
 	),
 	$cadmin-sticker-sizes
 );

package/css/clay/cadmin/variables/_utilities.scss

@@ -1,5 +1,16 @@
 $cadmin-bg-checkered-fg: $cadmin-gray-300 !default;
 
+$cadmin-c-focus-trap: () !default;
+$cadmin-c-focus-trap: map-merge(
+	(
+		background: inherit,
+		color: inherit,
+		display: contents,
+		font: inherit,
+	),
+	$cadmin-c-focus-trap
+);
+
 // .inline-scroller
 
 $cadmin-inline-scroller-max-height: 125px !default;

package/css/clay/components/_form-validation.scss

@@ -60,6 +60,10 @@
 	}
 }
 
+.form-help-text {
+	@include clay-css($form-help-text);
+}
+
 @if ($enable-bs4-deprecated) {
 	.was-validated .form-control:valid,
 	.was-validated .form-control.is-valid {

package/css/clay/components/_forms.scss

@@ -33,10 +33,26 @@ label {
 		@include clay-css(map-get($input-label, for));
 	}
 
+	$_form-feedback-group: map-get($input-label, '+ .form-feedback-group');
+
+	@if ($_form-feedback-group) {
+		+ .form-feedback-group {
+			@include clay-css($_form-feedback-group);
+		}
+	}
+
 	+ .form-text {
 		@include clay-css(map-get($input-label, form-text));
 	}
 
+	$_form-help-text: map-get($input-label, form-help-text);
+
+	@if ($_form-help-text) {
+		.form-help-text {
+			@include clay-css($_form-help-text);
+		}
+	}
+
 	.reference-mark {
 		@include clay-css(map-get($input-label, reference-mark));
 	}

package/css/clay/components/_pagination.scss

@@ -56,12 +56,14 @@
 	@include clay-css($pagination-results);
 }
 
-// Pagination Sizes
+/// @deprecated Pagination Sizes as of v3.146.0
 
-.pagination-sm {
-	@include clay-pagination-variant($pagination-sm);
-}
+@if ($enable-pagination-sizes) {
+	.pagination-sm {
+		@include clay-pagination-variant($pagination-sm);
+	}
 
-.pagination-lg {
-	@include clay-pagination-variant($pagination-lg);
+	.pagination-lg {
+		@include clay-pagination-variant($pagination-lg);
+	}
 }

package/css/clay/components/_slideout.scss

@@ -28,26 +28,18 @@
 
 .c-slideout {
 	@include clay-slideout-variant($c-slideout);
+}
 
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-sm-down);
-	}
+.c-slideout-fluid {
+	@include clay-slideout-variant($c-slideout-fluid);
 }
 
 .c-slideout-start {
 	@include clay-slideout-variant($c-slideout-start);
-
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-start-sm-down);
-	}
 }
 
 .c-slideout-end {
 	@include clay-slideout-variant($c-slideout-end);
-
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-end-sm-down);
-	}
 }
 
 .c-slideout-height-full {

package/css/clay/components/_utilities.scss

@@ -19,6 +19,10 @@
 	}
 }
 
+.c-focus-trap {
+	@include clay-map-to-css($c-focus-trap);
+}
+
 // Autofit Row
 
 %autofit-row {

package/css/clay/functions/_global-functions.scss

@@ -362,6 +362,10 @@
 			str-length($var) - 1
 		);
 
+		@if (is-css-var($fallback-value)) {
+			$fallback-value: clay-get-fallback($fallback-value);
+		}
+
 		$units: 'px'
 			'cm'
 			'mm'
@@ -379,7 +383,7 @@
 			'vmax';
 
 		@each $unit in $units {
-			@if (str-index($fallback-value, $unit)) {
+			@if (str-index('#{$fallback-value}', $unit)) {
 				@return to-number($fallback-value);
 			}
 		}

package/css/clay/mixins/_globals.scss

@@ -451,6 +451,14 @@
 							}
 						}
 					}
+				} @else if (starts-with($selector, '@supports ')) {
+					@supports #{clay-str-replace(
+							'#{$selector}',
+							'@supports ',
+							''
+						)} {
+						@include clay-map-to-css($value);
+					}
 				} @else {
 					#{$selector} {
 						@include clay-map-to-css($value);