liferay-frontend-theme-unstyled 6.0.80 → 6.0.82

package/css/clay/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.142.2
+ * 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/_custom-forms.scss

@@ -3,7 +3,7 @@ $custom-control-indicator-border-color: $gray-600 !default;
 $custom-control-indicator-border-style: solid !default;
 $custom-control-indicator-border-width: 0.0625rem !default; // 1px
 $custom-control-indicator-box-shadow: none !default;
-$custom-control-indicator-position-top: 0.125rem !default;
+$custom-control-indicator-position-top: 0 !default;
 
 $custom-control-indicator-focus-border-color: $custom-control-indicator-border-color !default;
 $custom-control-indicator-focus-box-shadow: $component-focus-box-shadow !default;
@@ -56,7 +56,7 @@ $custom-control-indicator-indeterminate-border-color: $custom-control-indicator-
 
 // @deprecated after of v3.5.0 use the Sass map `$custom-control` instead
 
-$custom-control-margin-bottom: 1rem !default;
+$custom-control-margin-bottom: 0.5rem !default;
 
 // Custom Control Description
 
@@ -96,7 +96,10 @@ $custom-control-label: map-deep-merge(
 			border-width: $custom-control-indicator-border-width,
 			box-shadow:
 				clay-enable-shadows($custom-control-indicator-box-shadow),
-			top: $custom-control-indicator-position-top,
+			top: 0.125rem,
+		),
+		after: (
+			top: -0.125rem,
 		),
 	),
 	$custom-control-label
@@ -143,6 +146,8 @@ $custom-control-input: map-deep-merge(
 			custom-control-label: (
 				before: (
 					border-color: $custom-control-indicator-focus-border-color,
+				),
+				after: (
 					box-shadow: $custom-control-indicator-focus-box-shadow,
 				),
 			),
@@ -202,8 +207,8 @@ $custom-checkbox-indicator-icon-checked: clay-icon(
 	check-small,
 	$white
 ) !default;
-$custom-checkbox-indicator-icon-checked-bg-size: 100% !default;
-$custom-checkbox-indicator-icon-indeterminate-bg-size: 100% !default;
+$custom-checkbox-indicator-icon-checked-bg-size: 1rem !default;
+$custom-checkbox-indicator-icon-indeterminate-bg-size: 1rem !default;
 
 $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
 $custom-checkbox-indicator-indeterminate-box-shadow: c-unset !default;
@@ -327,7 +332,7 @@ $custom-checkbox: map-deep-merge(
 // .custom-radio
 
 $custom-radio-indicator-icon-checked: clay-icon(circle, $white) !default;
-$custom-radio-indicator-icon-checked-bg-size: 50% !default;
+$custom-radio-indicator-icon-checked-bg-size: 0.5rem !default;
 
 $custom-radio-indicator-disabled-border-color: $custom-control-indicator-disabled-bg !default;
 

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/_cards.scss

@@ -334,11 +334,6 @@
 	.custom-control-label {
 		position: absolute;
 		z-index: 1;
-
-		&::before,
-		&::after {
-			top: 0;
-		}
 	}
 
 	.form-check-input {

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/_list-group.scss

@@ -25,35 +25,6 @@
 	}
 }
 
-.list-group-bordered {
-	.list-group-item-flex {
-		padding: 0;
-
-		&.active {
-			.autofit-col {
-				border-color: $cadmin-list-group-active-border-color;
-			}
-		}
-	}
-
-	.autofit-col {
-		border-left: $cadmin-list-group-border-width solid
-			$cadmin-list-group-border-color;
-		border-right: $cadmin-list-group-border-width solid
-			$cadmin-list-group-border-color;
-		margin-left: math-sign($cadmin-list-group-border-width);
-		padding: $cadmin-list-group-item-padding-y
-			$cadmin-list-group-item-padding-x;
-
-		&:first-child,
-		&:last-child {
-			border-left-width: 0;
-			border-right-width: 0;
-			margin-left: 0;
-		}
-	}
-}
-
 // List Group Header
 
 .list-group-header {
@@ -357,33 +328,6 @@
 	@extend %list-group-flush !optional;
 }
 
-// List Group Item Variants
-
-@each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-	@if not clay-is-map-unset($cadmin-value) {
-		.list-group-item-#{$cadmin-color} {
-			background-color: theme-color-level($cadmin-color, -9);
-			color: theme-color-level($cadmin-color, 6);
-
-			&.list-group-item-action {
-				@include hover-focus() {
-					background-color: clay-darken(
-						theme-color-level($cadmin-color, -9),
-						5%
-					);
-					color: theme-color-level($cadmin-color, 6);
-				}
-
-				&.active {
-					background-color: theme-color-level($cadmin-color, 6);
-					border-color: theme-color-level($cadmin-color, 6);
-					color: $cadmin-white;
-				}
-			}
-		}
-	}
-}
-
 // Show Quick Action
 
 .show-quick-actions-on-hover {
@@ -413,13 +357,6 @@
 	}
 }
 
-.list-group-bordered .quick-action-menu {
-	margin-bottom: 0;
-	margin-top: 0;
-	padding-bottom: $cadmin-list-group-item-padding-y;
-	padding-top: $cadmin-list-group-item-padding-y;
-}
-
 .list-group-item-flex.active {
 	.quick-action-menu {
 		background-color: $cadmin-list-group-active-bg;
@@ -433,13 +370,6 @@
 // List Group Notification
 
 .list-group-notification {
-	&.list-group-bordered {
-		.quick-action-menu {
-			margin-bottom: $cadmin-list-group-notification-item-border-bottom-width;
-			margin-top: $cadmin-list-group-notification-item-border-top-width;
-		}
-	}
-
 	.list-group-item {
 		border-width: 0;
 

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/_custom-forms.scss

@@ -25,12 +25,12 @@ $cadmin-form-file: map-deep-merge(
 $cadmin-custom-control-indicator-size: 16px !default;
 
 $cadmin-custom-control-indicator-bg: $cadmin-white !default;
-$cadmin-custom-control-indicator-bg-size: 50% 50% !default;
+$cadmin-custom-control-indicator-bg-size: 8px 8px !default;
 $cadmin-custom-control-indicator-border-color: $cadmin-gray-600 !default;
 $cadmin-custom-control-indicator-border-style: solid !default;
 $cadmin-custom-control-indicator-border-width: 1px !default; // 1px
 $cadmin-custom-control-indicator-box-shadow: none !default;
-$cadmin-custom-control-indicator-position-top: 2px !default;
+$cadmin-custom-control-indicator-position-top: 0 !default;
 
 $cadmin-custom-control-indicator-focus-border-color: $cadmin-custom-control-indicator-border-color !default;
 $cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
@@ -82,7 +82,7 @@ $cadmin-custom-control-spacer-x: 16px !default;
 
 // @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead
 
-$cadmin-custom-control-margin-bottom: 16px !default;
+$cadmin-custom-control-margin-bottom: 8px !default;
 
 // @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead
 
@@ -90,8 +90,7 @@ $cadmin-custom-control-margin-top: null !default;
 
 // @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead
 
-$cadmin-custom-control-min-height: $cadmin-custom-control-indicator-size +
-	($cadmin-custom-control-indicator-position-top * 2) !default;
+$cadmin-custom-control-min-height: 24px !default;
 
 // .custom-control-label
 
@@ -150,20 +149,21 @@ $cadmin-custom-control-label: map-deep-merge(
 			height: $cadmin-custom-control-indicator-size,
 			left: 0,
 			position: relative,
-			top: $cadmin-custom-control-indicator-position-top,
+			top: 2px,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
 			z-index: 0,
 		),
 		after: (
 			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
+			border-radius: $cadmin-rounded-circle-border-radius,
 			content: '',
 			display: block,
-			height: $cadmin-custom-control-indicator-size,
-			left: 0,
+			height: 24px,
+			left: -4px,
 			position: absolute,
-			top: $cadmin-custom-control-indicator-position-top,
-			width: $cadmin-custom-control-indicator-size,
+			top: -2px,
+			width: 24px,
 			z-index: 0,
 		),
 	),
@@ -247,18 +247,20 @@ $cadmin-custom-control-input: () !default;
 $cadmin-custom-control-input: map-deep-merge(
 	(
 		cursor: $cadmin-form-check-input-cursor,
-		height: $cadmin-custom-control-indicator-size,
-		left: 0,
+		height: 24px,
+		left: -4px,
 		opacity: 0,
 		position: absolute,
 		top: $cadmin-custom-control-indicator-position-top,
-		width: $cadmin-custom-control-indicator-size,
+		width: 24px,
 		z-index: 1,
 		focus: (
 			custom-control-label: (
 				before: (
 					border-color:
 						$cadmin-custom-control-indicator-focus-border-color,
+				),
+				after: (
 					box-shadow:
 						$cadmin-custom-control-indicator-focus-box-shadow,
 				),
@@ -351,7 +353,7 @@ $cadmin-custom-checkbox-indicator-icon-checked: clay-icon(
 	check-small,
 	$cadmin-white
 ) !default;
-$cadmin-custom-checkbox-indicator-icon-checked-bg-size: 100% !default;
+$cadmin-custom-checkbox-indicator-icon-checked-bg-size: 16px !default;
 
 $cadmin-custom-checkbox-indicator-indeterminate-bg: $cadmin-component-active-bg !default;
 $cadmin-custom-checkbox-indicator-indeterminate-border-color: $cadmin-custom-checkbox-indicator-indeterminate-bg !default;
@@ -365,7 +367,7 @@ $cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
 	hr,
 	$cadmin-custom-checkbox-indicator-indeterminate-color
 ) !default;
-$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 100% !default;
+$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 16px !default;
 
 $cadmin-custom-checkbox: () !default;
 $cadmin-custom-checkbox: map-deep-merge(
@@ -483,7 +485,7 @@ $cadmin-custom-radio-indicator-icon-checked: clay-icon(
 	circle,
 	$cadmin-white
 ) !default;
-$cadmin-custom-radio-indicator-icon-checked-bg-size: 50% !default;
+$cadmin-custom-radio-indicator-icon-checked-bg-size: 8px !default;
 
 $cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-indicator-disabled-bg !default;
 

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: (