liferay-frontend-theme-unstyled 6.0.81 → 6.0.83

package/css/clay/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.145.0
+ * Clay 3.153.0
  *
  * 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/_buttons.scss

@@ -71,7 +71,7 @@ $btn-lg: map-deep-merge(
 // Button Sm
 
 $btn-font-size-sm: $font-size-sm !default; // 14px
-$btn-line-height-sm: 1.15 !default;
+$btn-line-height-sm: 1 !default;
 $btn-padding-x-sm: 0.75rem !default; // 12px
 $btn-padding-y-sm: 0.4375rem !default; // 7px
 

package/css/clay/atlas/variables/_custom-forms.scss

@@ -96,10 +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: 0.125rem,
+			top: 0.25rem,
 		),
 		after: (
-			top: -0.125rem,
+			top: $custom-control-indicator-position-top,
 		),
 	),
 	$custom-control-label

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/_button-groups.scss

@@ -148,3 +148,43 @@
 		}
 	}
 }
+
+%clay-btn-group-divider {
+	$_not-first-of-type: map-get(
+		$cadmin-clay-btn-group-divider,
+		'&:not(:first-of-type)'
+	);
+
+	@if ($_not-first-of-type) {
+		&:not(:first-of-type) {
+			@include clay-css($_not-first-of-type);
+		}
+	}
+
+	$_not-last-of-type: map-get(
+		$cadmin-clay-btn-group-divider,
+		'&:not(:last-of-type)'
+	);
+
+	@if ($_not-last-of-type) {
+		&:not(:last-of-type) {
+			@include clay-css($_not-last-of-type);
+		}
+	}
+}
+
+.btn-group {
+	@each $name, $value in $cadmin-btn-group-palette {
+		@if not clay-is-map-unset($value) {
+			$selector: if(
+				starts-with($name, 'btn'),
+				str-insert($name, '.', 1),
+				$name
+			);
+
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		}
+	}
+}

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/_input-groups.scss

@@ -209,6 +209,11 @@
 				);
 			}
 		}
+
+		.sticker {
+			margin-left: 12px;
+			margin-right: 8px;
+		}
 	}
 
 	.input-group-inset-icon {

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

@@ -157,7 +157,7 @@ $cadmin-btn-lg: map-deep-merge(
 
 $cadmin-btn-border-radius-sm: $cadmin-border-radius-sm !default;
 $cadmin-btn-font-size-sm: $cadmin-font-size-sm !default; // 14px
-$cadmin-btn-line-height-sm: 1.15 !default;
+$cadmin-btn-line-height-sm: 1 !default;
 $cadmin-btn-padding-x-sm: 12px !default; // 12px
 $cadmin-btn-padding-y-sm: 7px !default; // 7px
 $cadmin-btn-inline-item-font-size-sm: null !default;
@@ -394,6 +394,44 @@ $cadmin-btn-group-spaced: map-merge(
 	$cadmin-btn-group-spaced
 );
 
+$cadmin-clay-btn-group-divider: () !default;
+$cadmin-clay-btn-group-divider: map-deep-merge(
+	(
+		'&:not(:first-of-type)': (
+			border-left-color: $cadmin-white,
+		),
+		'&:not(:last-of-type)': (
+			border-right-color: $cadmin-white,
+		),
+	),
+	$cadmin-clay-btn-group-divider
+);
+
+$cadmin-btn-group-palette: () !default;
+$cadmin-btn-group-palette: map-deep-merge(
+	(
+		'> .btn-primary': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-info': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-success': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-warning': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-danger': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-dark': (
+			extend: '%clay-btn-group-divider',
+		),
+	),
+	$cadmin-btn-group-palette
+);
+
 // Button Toolbar
 
 $cadmin-btn-toolbar-spacer-x: 8px !default; // 8px

package/css/clay/cadmin/variables/_custom-forms.scss

@@ -149,7 +149,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			height: $cadmin-custom-control-indicator-size,
 			left: 0,
 			position: relative,
-			top: 2px,
+			top: 4px,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
 			z-index: 0,
@@ -162,7 +162,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			height: 24px,
 			left: -4px,
 			position: absolute,
-			top: -2px,
+			top: $cadmin-custom-control-indicator-position-top,
 			width: 24px,
 			z-index: 0,
 		),

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;
@@ -1608,8 +1630,8 @@ $cadmin-input-group-item-focusable: map-deep-merge(
 // Input Group Inset
 
 $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;
-$cadmin-input-group-inset-item-padding-left: 5px !default;
-$cadmin-input-group-inset-item-padding-right: 5px !default;
+$cadmin-input-group-inset-item-padding-left: 4px !default;
+$cadmin-input-group-inset-item-padding-right: 4px !default;
 
 $cadmin-input-group-inset-item-btn: () !default;
 $cadmin-input-group-inset-item-btn: map-deep-merge(
@@ -1619,8 +1641,8 @@ $cadmin-input-group-inset-item-btn: map-deep-merge(
 		height: 75%,
 		justify-content: center,
 		line-height: 1,
-		margin-left: 3px,
-		margin-right: 3px,
+		margin-left: 4px,
+		margin-right: 4px,
 		padding-bottom: 0,
 		padding-left: 8px,
 		padding-right: 8px,

package/css/clay/cadmin/variables/_globals-z-index.scss

@@ -1,5 +1,5 @@
 $cadmin-zindex-dropdown: 1000 !default;
-$cadmin-zindex-sticky: 1020 !default;
+$cadmin-zindex-sticky: 989 !default;
 $cadmin-zindex-fixed: 1030 !default;
 $cadmin-zindex-modal-backdrop: 1040 !default;
 $cadmin-zindex-modal: 1050 !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;