liferay-frontend-theme-unstyled 6.0.76 → 6.0.78

package/css/clay/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.135.0
+ * Clay 3.139.1
  *
  * 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/_date-picker.scss

@@ -94,6 +94,7 @@ $date-picker-previous-month-date: map-deep-merge(
 		),
 		active: (
 			background-color: $primary-l2,
+			color: $secondary,
 		),
 	),
 	$date-picker-previous-month-date

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

@@ -201,11 +201,10 @@ $form-feedback-indicator-margin-x: 0 !default;
 
 $input-danger-bg: $danger-l2 !default;
 $input-danger-border-color: $danger-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-danger-box-shadow: c-unset !default;
 $input-danger-color: $input-color !default;
 
-$input-danger-focus-box-shadow: $input-focus-box-shadow !default;
+$input-danger-focus-box-shadow: c-unset !default;
 
 $input-danger: () !default;
 $input-danger: map-deep-merge(
@@ -261,11 +260,10 @@ $input-danger-select: map-deep-merge(
 
 $input-warning-bg: $warning-l2 !default;
 $input-warning-border-color: $warning-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-warning-box-shadow: c-unset !default;
 $input-warning-color: $input-color !default;
 
-$input-warning-focus-box-shadow: $input-focus-box-shadow !default;
+$input-warning-focus-box-shadow: c-unset !default;
 
 $input-warning: () !default;
 $input-warning: map-deep-merge(
@@ -321,11 +319,10 @@ $input-warning-select: map-deep-merge(
 
 $input-success-bg: $success-l2 !default;
 $input-success-border-color: $success-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-success-box-shadow: c-unset !default;
 $input-success-color: $input-color !default;
 
-$input-success-focus-box-shadow: $input-focus-box-shadow !default;
+$input-success-focus-box-shadow: c-unset !default;
 
 $input-success: () !default;
 $input-success: map-deep-merge(

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

@@ -3,8 +3,7 @@
 $sidebar-header-component-title: () !default;
 $sidebar-header-component-title: map-deep-merge(
 	(
-		// 20px
-		font-size: 1.25rem
+		font-size: 1rem,
 	),
 	$sidebar-header-component-title
 );
@@ -14,7 +13,7 @@ $sidebar-header-component-title: map-deep-merge(
 $sidebar-header-component-subtitle: () !default;
 $sidebar-header-component-subtitle: map-deep-merge(
 	(
-		font-size: 0.75rem,
+		font-size: 0.875rem,
 		font-weight: $font-weight-normal,
 	),
 	$sidebar-header-component-subtitle
@@ -63,10 +62,6 @@ $sidebar-light: map-deep-merge(
 		box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
 		sidenav-start: (
 			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
-			focus: (
-				box-shadow: #{0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
-				$component-focus-inset-box-shadow},
-			),
 		),
 		sidebar-panel: (
 			background-color: $gray-200,
@@ -93,3 +88,13 @@ $sidebar-light: map-deep-merge(
 	),
 	$sidebar-light
 );
+
+$sidebar-c-slideout-start: () !default;
+$sidebar-c-slideout-start: map-deep-merge(
+	(
+		'.sidebar-light': (
+			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+		),
+	),
+	$sidebar-c-slideout-start
+);

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

@@ -20,6 +20,22 @@
 
 .form-text {
 	@include clay-css($cadmin-form-text);
+
+	$_blockquote: map-get($cadmin-form-text, blockquote);
+
+	@if ($_blockquote) {
+		&.blockquote {
+			@include clay-css($_blockquote);
+
+			$_before: map-get($_blockquote, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
+			}
+		}
+	}
 }
 
 // Non HTML5 Form Validator

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

@@ -31,6 +31,30 @@
 			map-get($sidebar-header, component-subtitle)
 		);
 	}
+
+	$_autofit-row: map-get($sidebar-header, autofit-row);
+
+	@if ($_autofit-row) {
+		.autofit-row {
+			@include clay-css($_autofit-row);
+
+			$_autofit-col: map-get($_autofit-row, autofit-col);
+
+			@if ($_autofit-col) {
+				> .autofit-col {
+					@include clay-css($_autofit-col);
+				}
+			}
+
+			$_autofit-col-expand: map-get($_autofit-row, autofit-col-expand);
+
+			@if ($_autofit-col-expand) {
+				> .autofit-col-expand {
+					@include clay-css($_autofit-col-expand);
+				}
+			}
+		}
+	}
 }
 
 .sidebar-footer {
@@ -121,3 +145,11 @@
 		}
 	}
 }
+
+.c-slideout-start {
+	@include clay-map-to-css($cadmin-sidebar-c-slideout-start);
+}
+
+.c-slideout-end {
+	@include clay-map-to-css($cadmin-sidebar-c-slideout-end);
+}

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

@@ -14,6 +14,18 @@
 	@include clay-css($cadmin-c-slideout-absolute);
 }
 
+.c-slideout-container {
+	@include clay-map-to-css($cadmin-c-slideout-container);
+}
+
+.c-slideout-push-start {
+	@include clay-css($cadmin-c-slideout-push-start);
+}
+
+.c-slideout-push-end {
+	@include clay-css($cadmin-c-slideout-push-end);
+}
+
 .c-slideout {
 	@include clay-slideout-variant($cadmin-c-slideout);
 

package/css/clay/cadmin/components/_utilities-functional-important.scss

@@ -463,6 +463,14 @@
 	z-index: $cadmin-zindex-fixed;
 }
 
+.sticky-bottom {
+	@supports (position: sticky) {
+		bottom: 0;
+		position: sticky;
+		z-index: $cadmin-zindex-sticky;
+	}
+}
+
 .sticky-top {
 	@supports (position: sticky) {
 		position: sticky;

package/css/clay/cadmin/variables/_clay-color.scss

@@ -478,6 +478,8 @@ $cadmin-clay-color-slider-alpha: map-deep-merge(
 				background-size: 8px 8px,
 			),
 			form-control-range: (
+				background-image:
+					linear-gradient(90deg, transparent 0%, currentcolor 100%),
 				color: inherit,
 			),
 			clay-range-progress: (

package/css/clay/cadmin/variables/_date-picker.scss

@@ -333,7 +333,7 @@ $cadmin-date-picker-previous-month-date: map-deep-merge(
 		color: $cadmin-gray-500,
 		active: (
 			background-color: $cadmin-primary-l2,
-			color: $cadmin-primary-l3,
+			color: $cadmin-secondary,
 		),
 	),
 	$cadmin-date-picker-previous-month-date

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

@@ -631,6 +631,24 @@ $cadmin-form-text: map-merge(
 		font-weight: $cadmin-form-text-font-weight,
 		margin-top: $cadmin-form-text-margin-top,
 		word-wrap: break-word,
+		blockquote: (
+			font-style: italic,
+			font-weight: $cadmin-font-weight-normal,
+			margin-bottom: 0,
+			margin-top: 12px,
+			padding-left: 12px,
+			position: relative,
+			before: (
+				background-color: $cadmin-secondary-l1,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				width: 2px,
+			),
+		),
 	),
 	$cadmin-form-text
 );
@@ -678,7 +696,7 @@ $cadmin-form-feedback-invalid-color: $cadmin-danger !default;
 
 $cadmin-input-danger-bg: $cadmin-danger-l2 !default;
 $cadmin-input-danger-border-color: $cadmin-danger-l1 !default;
-$cadmin-input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-danger-box-shadow: null !default;
 $cadmin-input-danger-color: $cadmin-input-color !default;
 
 $cadmin-input-danger-focus-bg: null !default;
@@ -699,6 +717,12 @@ $cadmin-input-danger: map-deep-merge(
 			box-shadow: $cadmin-input-danger-focus-box-shadow,
 			color: $cadmin-input-danger-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-danger-bg,
+			border-color: $cadmin-input-danger-border-color,
+			box-shadow: $cadmin-input-danger-box-shadow,
+			color: $cadmin-input-danger-color,
+		),
 	),
 	$cadmin-input-danger
 );
@@ -848,7 +872,7 @@ $cadmin-has-error: map-deep-merge(
 
 $cadmin-input-warning-bg: $cadmin-warning-l2 !default;
 $cadmin-input-warning-border-color: $cadmin-warning-l1 !default;
-$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-warning-box-shadow: null !default;
 $cadmin-input-warning-color: $cadmin-input-color !default;
 
 $cadmin-input-warning-focus-bg: null !default;
@@ -869,6 +893,12 @@ $cadmin-input-warning: map-deep-merge(
 			box-shadow: $cadmin-input-warning-focus-box-shadow,
 			color: $cadmin-input-warning-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-warning-bg,
+			border-color: $cadmin-input-warning-border-color,
+			box-shadow: $cadmin-input-warning-box-shadow,
+			color: $cadmin-input-warning-color,
+		),
 	),
 	$cadmin-input-warning
 );
@@ -1018,7 +1048,7 @@ $cadmin-has-warning: map-deep-merge(
 
 $cadmin-input-success-bg: $cadmin-success-l2 !default;
 $cadmin-input-success-border-color: $cadmin-success-l1 !default;
-$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-success-box-shadow: null !default;
 $cadmin-input-success-color: $cadmin-input-color !default;
 
 $cadmin-input-success-focus-bg: null !default;
@@ -1039,6 +1069,12 @@ $cadmin-input-success: map-deep-merge(
 			box-shadow: $cadmin-input-success-focus-box-shadow,
 			color: $cadmin-input-success-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-success-bg,
+			border-color: $cadmin-input-success-border-color,
+			box-shadow: $cadmin-input-success-box-shadow,
+			color: $cadmin-input-success-color,
+		),
 	),
 	$cadmin-input-success
 );

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

@@ -138,7 +138,7 @@ $cadmin-modal-body: map-deep-merge(
 			margin-right: math-sign($cadmin-modal-inner-padding),
 			top: math-sign($cadmin-modal-inner-padding),
 		),
-		'.close': (
+		'> .close': (
 			position: absolute,
 			right: 1rem,
 			top: 1rem,

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

@@ -1,14 +1,14 @@
-$cadmin-sidebar-padding-bottom: 16px !default; // 16px
-$cadmin-sidebar-padding-left: 16px !default; // 16px
-$cadmin-sidebar-padding-right: 16px !default; // 16px
-$cadmin-sidebar-padding-top: 16px !default; // 16px
+$cadmin-sidebar-padding-bottom: 16px !default;
+$cadmin-sidebar-padding-left: 24px !default;
+$cadmin-sidebar-padding-right: 24px !default;
+$cadmin-sidebar-padding-top: 16px !default;
 
 // Sidebar Header Title
 
 $cadmin-sidebar-header-component-title: () !default;
 $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
-		font-size: 20px,
+		font-size: 16px,
 		href: (
 			color: $cadmin-gray-900,
 		),
@@ -21,7 +21,7 @@ $cadmin-sidebar-header-component-title: map-deep-merge(
 $cadmin-sidebar-header-component-subtitle: () !default;
 $cadmin-sidebar-header-component-subtitle: map-deep-merge(
 	(
-		font-size: 12px,
+		font-size: 14px,
 		font-weight: $cadmin-font-weight-normal,
 		margin-bottom: 0,
 	),
@@ -86,10 +86,19 @@ $cadmin-sidebar: map-deep-merge(
 		sidebar-header: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
-			padding-right: $cadmin-sidebar-padding-right,
+			padding-right: 16px,
 			padding-top: $cadmin-sidebar-padding-top,
 			component-title: $cadmin-sidebar-header-component-title,
 			component-subtitle: $cadmin-sidebar-header-component-subtitle,
+			autofit-row: (
+				margin-left: -4px,
+				margin-right: -4px,
+				width: auto,
+				autofit-col: (
+					padding-left: 4px,
+					padding-right: 4px,
+				),
+			),
 		),
 		sidebar-footer: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
@@ -200,6 +209,14 @@ $cadmin-sidebar-light: map-deep-merge(
 		border-left-width: 0,
 		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		color: $cadmin-gray-900,
+		sidebar-header: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
+		sidebar-footer: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
 		sidenav-start: (
 			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		),
@@ -293,6 +310,18 @@ $cadmin-sidebar-dark: map-deep-merge(
 	$cadmin-sidebar-dark
 );
 
+$cadmin-sidebar-c-slideout-start: () !default;
+$cadmin-sidebar-c-slideout-start: map-deep-merge(
+	(
+		'.sidebar-light': (
+			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+		),
+	),
+	$cadmin-sidebar-c-slideout-start
+);
+
+$cadmin-sidebar-c-slideout-end: () !default;
+
 $cadmin-sidebar-palette: () !default;
 $cadmin-sidebar-palette: map-deep-merge(
 	(

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

@@ -11,6 +11,7 @@ $cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 $cadmin-c-slideout-transition-in: () !default;
 $cadmin-c-slideout-transition-in: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.3s ease-in-out,
 	),
 	$cadmin-c-slideout-transition-in
@@ -19,6 +20,7 @@ $cadmin-c-slideout-transition-in: map-merge(
 $cadmin-c-slideout-transition-out: () !default;
 $cadmin-c-slideout-transition-out: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.2s ease-in,
 	),
 	$cadmin-c-slideout-transition-out
@@ -42,6 +44,41 @@ $cadmin-c-slideout-fixed: map-merge(
 	$cadmin-c-slideout-fixed
 );
 
+$cadmin-c-slideout-container: () !default;
+$cadmin-c-slideout-container: map-deep-merge(
+	(
+		min-height: 480px,
+		position: relative,
+	),
+	$cadmin-c-slideout-container
+);
+
+$cadmin-c-slideout-push-start: () !default;
+$cadmin-c-slideout-push-start: map-deep-merge(
+	(
+		padding-left: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-left: 0,
+			),
+		),
+	),
+	$cadmin-c-slideout-push-start
+);
+
+$cadmin-c-slideout-push-end: () !default;
+$cadmin-c-slideout-push-end: map-deep-merge(
+	(
+		padding-right: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-right: 0,
+			),
+		),
+	),
+	$cadmin-c-slideout-push-end
+);
+
 // C Slideout Base
 
 $cadmin-c-slideout: () !default;
@@ -56,15 +93,26 @@ $cadmin-c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
-			overflow: visible,
 			position: relative,
 			width: $cadmin-c-slideout-sidebar-width,
+			sidebar-header: (
+				border-bottom-width: 1px,
+			),
+			sidebar-body: (
+				flex-grow: 1,
+				overflow: visible,
+			),
+			sidebar-footer: (
+				border-top-width: 1px,
+			),
 		),
 		sidebar-c-slideout-show: (
-			display: block,
+			display: flex,
+			flex-direction: column,
 		),
 		sidebar-c-slideout-transition: (
-			display: block,
+			display: flex,
+			flex-direction: column,
 			c-horizontal-resizer: (
 				display: none,
 			),

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

@@ -95,6 +95,12 @@ $cadmin-sticker-xl: map-deep-merge(
 $cadmin-sticker-sizes: () !default;
 $cadmin-sticker-sizes: map-deep-merge(
 	(
+		sticker-xs: (
+			font-size: 0.5rem,
+			height: 1rem,
+			line-height: 1rem,
+			width: 1rem,
+		),
 		sticker-sm: $cadmin-sticker-sm,
 		sticker-lg: $cadmin-sticker-lg,
 		sticker-xl: $cadmin-sticker-xl,

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

@@ -42,6 +42,22 @@
 
 .form-text {
 	@include clay-css($form-text);
+
+	$_blockquote: map-get($form-text, blockquote);
+
+	@if ($_blockquote) {
+		&.blockquote {
+			@include clay-css($_blockquote);
+
+			$_before: map-get($_blockquote, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
+			}
+		}
+	}
 }
 
 @if ($enable-bs4-deprecated) {

package/css/clay/components/_sidebar.scss

@@ -30,6 +30,30 @@
 			map-get($sidebar-header, component-subtitle)
 		);
 	}
+
+	$_autofit-row: map-get($sidebar-header, autofit-row);
+
+	@if ($_autofit-row) {
+		.autofit-row {
+			@include clay-css($_autofit-row);
+
+			$_autofit-col: map-get($_autofit-row, autofit-col);
+
+			@if ($_autofit-col) {
+				> .autofit-col {
+					@include clay-css($_autofit-col);
+				}
+			}
+
+			$_autofit-col-expand: map-get($_autofit-row, autofit-col-expand);
+
+			@if ($_autofit-col-expand) {
+				> .autofit-col-expand {
+					@include clay-css($_autofit-col-expand);
+				}
+			}
+		}
+	}
 }
 
 .sidebar-footer {
@@ -119,3 +143,11 @@
 		}
 	}
 }
+
+.c-slideout-start {
+	@include clay-map-to-css($sidebar-c-slideout-start);
+}
+
+.c-slideout-end {
+	@include clay-map-to-css($sidebar-c-slideout-end);
+}

package/css/clay/components/_slideout.scss

@@ -14,6 +14,18 @@
 	@include clay-css($c-slideout-absolute);
 }
 
+.c-slideout-container {
+	@include clay-map-to-css($c-slideout-container);
+}
+
+.c-slideout-push-start {
+	@include clay-css($c-slideout-push-start);
+}
+
+.c-slideout-push-end {
+	@include clay-css($c-slideout-push-end);
+}
+
 .c-slideout {
 	@include clay-slideout-variant($c-slideout);
 

package/css/clay/components/_utilities-functional-important.scss

@@ -445,6 +445,14 @@
 	z-index: $zindex-fixed;
 }
 
+.sticky-bottom {
+	@supports (position: sticky) {
+		bottom: 0;
+		position: sticky;
+		z-index: $zindex-sticky;
+	}
+}
+
 .sticky-top {
 	@supports (position: sticky) {
 		position: sticky;