liferay-frontend-theme-unstyled 6.0.74 → 6.0.76

package/css/clay/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.128.0
+ * Clay 3.135.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/_forms.scss

@@ -408,6 +408,7 @@ $form-control-select-palette: map-deep-merge(
 	(
 		form-control-select-secondary: (
 			background-color: $white,
+			border-color: $secondary-l0,
 			color: $gray-600,
 			hover: (
 				color: $gray-600,

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

@@ -63,6 +63,7 @@ $label: map-deep-merge($label, $label-base);
 $label-close: () !default;
 $label-close: map-deep-merge(
 	(
+		margin: -5px -4px,
 		disabled: (
 			color: inherit,
 		),

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

@@ -27,6 +27,7 @@ $modal-header: map-deep-merge(
 
 $modal-title-font-size: 1.25rem !default; // 20px
 $modal-title-font-weight: $font-weight-bold !default;
+$modal-title-line-height: $headings-line-height !default;
 
 // Modal Success
 

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

@@ -1,3 +1,7 @@
+.breadcrumb-bar {
+	@include clay-css($cadmin-breadcrumb-bar);
+}
+
 .breadcrumb {
 	@include clay-css($cadmin-breadcrumb);
 }

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

@@ -470,7 +470,7 @@
 // Card Page
 
 .card-page {
-	@extend %clay-custom-grid-wrapper !optional;
+	@include clay-map-to-css($cadmin-card-page);
 
 	&.card-page-equal-height {
 		.card-page-item,
@@ -499,15 +499,15 @@
 }
 
 .card-page-item-directory {
-	@include clay-custom-grid-columns($cadmin-card-page-item-directory);
+	@include clay-map-to-css($cadmin-card-page-item-directory);
 }
 
 .card-page-item-asset {
-	@include clay-custom-grid-columns($cadmin-card-page-item-asset);
+	@include clay-map-to-css($cadmin-card-page-item-asset);
 }
 
 .card-page-item-user {
-	@include clay-custom-grid-columns($cadmin-card-page-item-user);
+	@include clay-map-to-css($cadmin-card-page-item-user);
 }
 
 // Card Interactive

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

@@ -115,6 +115,16 @@
 	}
 }
 
+.dropdown-section-grid {
+	@extend %list-unstyled !optional;
+
+	display: grid;
+	gap: 0.5rem 0.75rem;
+	grid-template-columns: repeat(9, 1fr);
+	margin-bottom: 0;
+	padding: map-get($cadmin-dropdown-section, padding);
+}
+
 // Dropdown Footer
 
 .dropdown-footer {

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

@@ -159,20 +159,6 @@ fieldset[disabled] {
 	}
 }
 
-@each $key, $value in $cadmin-input-palette {
-	@if not clay-is-map-unset($value) {
-		$selector: if(
-			starts-with($key, '.') or starts-with($key, '#'),
-			$key,
-			str-insert($key, '.', 1)
-		);
-
-		#{$selector} {
-			@include clay-form-control-variant($value);
-		}
-	}
-}
-
 .form-control-hidden {
 	left: 0;
 	opacity: 0;
@@ -302,6 +288,22 @@ select.form-control[multiple] {
 	@include clay-select-variant($cadmin-input-select-multiple);
 }
 
+// Form Control Variants
+
+@each $key, $value in $cadmin-input-palette {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-form-control-variant($value);
+		}
+	}
+}
+
 // Form Control Select Variants
 
 @each $key, $value in $cadmin-form-control-select-palette {

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

@@ -234,6 +234,7 @@
 	}
 
 	%clay-custom-grid-wrapper {
+		container-type: inline-size;
 		display: flex;
 		flex-wrap: wrap;
 		list-style: none;

package/css/clay/cadmin/components/_input-groups.scss

@@ -193,7 +193,8 @@
 			}
 		}
 
-		.btn-monospaced {
+		.btn-monospaced,
+		.input-group-inset-icon {
 			@include clay-button-variant(
 				$cadmin-input-group-inset-item-btn-monospaced
 			);
@@ -210,6 +211,16 @@
 		}
 	}
 
+	.input-group-inset-icon {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+
+		.lexicon-icon {
+			margin-top: 0;
+		}
+	}
+
 	.input-group-item .input-group-inset-before.form-control {
 		@include border-left-radius(0);
 		@include border-right-radius($cadmin-input-border-radius);

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

@@ -130,11 +130,15 @@ mark.clay-dark,
 
 // Lists
 
-.list-unstyled {
+%list-unstyled {
 	list-style: none;
 	padding-left: 0;
 }
 
+.list-unstyled {
+	@extend %list-unstyled;
+}
+
 // Inline turns list items into inline-block
 
 .list-inline {

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

@@ -880,5 +880,14 @@
 
 	html#{$cadmin-selector} .c-prefers-reduced-motion .cadmin {
 		@include clay-css($cadmin-c-prefers-reduced-motion);
+
+		.loading-animation-squares {
+			@include clay-map-to-css(
+				map-deep-get(
+					$cadmin-loading-animation-squares,
+					'prefers-reduced-motion'
+				)
+			);
+		}
 	}
 }

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

@@ -155,3 +155,12 @@ $cadmin-breadcrumb-toggle: map-merge(
 	),
 	$cadmin-breadcrumb-toggle
 );
+
+$cadmin-breadcrumb-bar: () !default;
+$cadmin-breadcrumb-bar: map-deep-merge(
+	(
+		align-items: center,
+		display: flex,
+	),
+	$cadmin-breadcrumb-bar
+);

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

@@ -598,35 +598,45 @@ $cadmin-user-card: map-deep-merge(
 	$cadmin-user-card
 );
 
-// Card Page Item Asset
+$cadmin-card-page: () !default;
+$cadmin-card-page: map-deep-merge(
+	(
+		container-name: c-card-page,
+		container-type: inline-size,
+		extend: '%clay-custom-grid-wrapper',
+	),
+	$cadmin-card-page
+);
 
-// base: min-width 0, sm min-width: 576px, md: min-width: 768px,
-// lg: min-width: 992px
+// Card Page Item Asset
 
 $cadmin-card-page-item-asset: () !default;
 $cadmin-card-page-item-asset: map-deep-merge(
 	(
-		base: (
-			breakpoint: 0,
-			min-width: 193px,
-			padding-left: $cadmin-grid-gutter-width * 0.5,
-			padding-right: $cadmin-grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($cadmin-grid-breakpoints, sm),
+		flex-basis: 100%,
+		max-width: 100%,
+		padding-left: $cadmin-grid-gutter-width * 0.5,
+		padding-right: $cadmin-grid-gutter-width * 0.5,
+		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, sm)})':
+		(
 			flex-basis: 50%,
 			max-width: 50%,
 		),
-		md: (
-			breakpoint: map-get($cadmin-grid-breakpoints, md),
-			flex-basis: 33.3333%,
-			max-width: 33.3333%,
+		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, md)})':
+		(
+			flex-basis: 33.33333%,
+			max-width: 33.33333%,
 		),
-		lg: (
-			breakpoint: map-get($cadmin-grid-breakpoints, lg),
+		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, lg)})':
+		(
 			flex-basis: 25%,
 			max-width: 25%,
 		),
+		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, xl)})':
+		(
+			flex-basis: 20%,
+			max-width: 20%,
+		),
 	),
 	$cadmin-card-page-item-asset
 );
@@ -637,26 +647,7 @@ $cadmin-card-page-item-asset: map-deep-merge(
 
 $cadmin-card-page-item-user: () !default;
 $cadmin-card-page-item-user: map-deep-merge(
-	(
-		base: (
-			breakpoint: 0,
-			flex-basis: 50%,
-			max-width: 50%,
-			padding-left: $cadmin-grid-gutter-width * 0.5,
-			padding-right: $cadmin-grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($cadmin-grid-breakpoints, sm),
-			flex-basis: 33.33333%,
-			max-width: 33.33333%,
-			min-width: 200px,
-		),
-		lg: (
-			breakpoint: map-get($cadmin-grid-breakpoints, lg),
-			flex-basis: 20%,
-			max-width: 20%,
-		),
-	),
+	$cadmin-card-page-item-asset,
 	$cadmin-card-page-item-user
 );
 

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

@@ -538,7 +538,7 @@ $cadmin-custom-control-outside: () !default;
 $cadmin-custom-control-outside: map-deep-merge(
 	(
 		label: (
-			display: block,
+			display: inline-block,
 			padding-left:
 				calc(
 					#{$cadmin-custom-control-indicator-size} + #{$cadmin-custom-control-description-padding-left}

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

@@ -122,6 +122,16 @@ $cadmin-input: map-deep-merge(
 // Form Control Variants
 
 $cadmin-input-palette: () !default;
+$cadmin-input-palette: map-deep-merge(
+	(
+		'.form-control-shrink': (
+			max-width: 100%,
+			white-space: nowrap,
+			width: min-content,
+		),
+	),
+	$cadmin-input-palette
+);
 
 // Form Control Plaintext
 
@@ -1266,6 +1276,7 @@ $cadmin-form-control-select-palette: map-deep-merge(
 	(
 		form-control-select-secondary: (
 			background-color: $cadmin-white,
+			border-color: $cadmin-secondary-l0,
 			color: $cadmin-gray-600,
 			hover: (
 				color: $cadmin-gray-600,
@@ -1285,6 +1296,10 @@ $cadmin-form-control-select-palette: map-deep-merge(
 				color: $cadmin-gray-900,
 			),
 		),
+		'.form-control-select-shrink': (
+			max-width: 100%,
+			width: min-content,
+		),
 	),
 	$cadmin-form-control-select-palette
 );

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

@@ -127,15 +127,14 @@ $cadmin-label-dismissible: map-merge(
 $cadmin-label-close: () !default;
 $cadmin-label-close: map-deep-merge(
 	(
-		border-radius: 1px,
+		border-radius: 5000px,
 		color: inherit,
 		display: inline-flex,
 		font-size: 16px,
-		height: auto,
-		margin-bottom: -2px,
-		margin-top: -2px,
+		height: 24px,
+		margin: -5px -4px,
 		opacity: 1,
-		width: auto,
+		width: 24px,
 		hover: (
 			color: inherit,
 			opacity: 1,

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

@@ -98,6 +98,54 @@ $cadmin-loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+		'prefers-reduced-motion': (
+			display: block,
+			height: 1em,
+			margin-left: auto,
+			margin-right: auto,
+			overflow: hidden,
+			position: relative,
+			text-align: left,
+			vertical-align: middle,
+			width: 1em,
+			'&::before': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: transparent,
+				border-radius: 50%,
+				box-shadow: -0.03125em -0.375em 0 0 currentColor,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 0.25em,
+				left: 50%,
+				margin-left: -0.125em,
+				margin-top: -0.125em,
+				opacity: inherit,
+				position: absolute,
+				top: 50%,
+				transform: none,
+				width: 0.25em,
+			),
+			'&::after': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: currentColor,
+				border-radius: 50%,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 1em,
+				left: auto,
+				-webkit-mask: #{conic-gradient(transparent 10%, #000),
+				linear-gradient(#000 0 0) content-box},
+				-webkit-mask-composite: source-out,
+				mask-composite: subtract,
+				padding: 0.25em,
+				position: relative,
+				top: auto,
+				transform: none,
+				width: 1em,
+			),
+		),
 	),
 	$cadmin-loading-animation-squares
 );

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

@@ -101,6 +101,10 @@ $cadmin-modal-header: map-deep-merge(
 		padding: $cadmin-modal-header-padding,
 		padding-bottom: 0,
 		padding-top: 0,
+		'.modal-title': (
+			margin-bottom: 0,
+			margin-top: 0,
+		),
 		mobile: (
 			height: $cadmin-modal-header-height-mobile,
 		),
@@ -129,6 +133,17 @@ $cadmin-modal-body: map-deep-merge(
 		overflow-wrap: break-word,
 		padding: $cadmin-modal-inner-padding,
 		position: relative,
+		'.aspect-ratio': (
+			margin-left: math-sign($cadmin-modal-inner-padding),
+			margin-right: math-sign($cadmin-modal-inner-padding),
+			top: math-sign($cadmin-modal-inner-padding),
+		),
+		'.close': (
+			position: absolute,
+			right: 1rem,
+			top: 1rem,
+			z-index: 1,
+		),
 		'&.inline-scroller': (
 			max-height: none,
 			-webkit-overflow-scrolling: touch,
@@ -226,7 +241,7 @@ $cadmin-modal-item-shrink: map-deep-merge(
 
 $cadmin-modal-title-font-size: 20px !default; // 20px
 $cadmin-modal-title-font-weight: $cadmin-font-weight-bold !default;
-$cadmin-modal-title-line-height: $cadmin-line-height-base !default;
+$cadmin-modal-title-line-height: $cadmin-headings-line-height !default;
 $cadmin-modal-title-text-align: null !default;
 $cadmin-modal-title-font-size-mobile: null !default;
 
@@ -354,7 +369,8 @@ $cadmin-modal: map-deep-merge(
 			font-size: $cadmin-modal-title-font-size,
 			font-weight: $cadmin-modal-title-font-weight,
 			line-height: $cadmin-modal-title-line-height,
-			margin-bottom: 0,
+			margin-bottom: 24px,
+			margin-top: 16px,
 			overflow: hidden,
 			text-align: $cadmin-modal-title-text-align,
 			text-overflow: ellipsis,

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

@@ -258,6 +258,13 @@ $cadmin-bg-theme-colors: map-deep-merge(
 				background-color: clay-darken($cadmin-primary, 10%) !important,
 			),
 		),
+		'primary-l3': (
+			background-color: $cadmin-primary-l3 !important,
+			hover: (
+				background-color: clay-darken($cadmin-primary-l3, 10%)
+					!important,
+			),
+		),
 		'secondary': (
 			background-color: $cadmin-secondary !important,
 			hover: (

package/css/clay/components/_breadcrumbs.scss

@@ -1,3 +1,7 @@
+.breadcrumb-bar {
+	@include clay-css($breadcrumb-bar);
+}
+
 .breadcrumb {
 	@include clay-css($breadcrumb);
 }

package/css/clay/components/_cards.scss

@@ -535,7 +535,7 @@
 // Card Page
 
 .card-page {
-	@extend %clay-custom-grid-wrapper !optional;
+	@include clay-map-to-css($card-page);
 
 	&.card-page-equal-height {
 		.card-page-item,
@@ -564,15 +564,15 @@
 }
 
 .card-page-item-directory {
-	@include clay-custom-grid-columns($card-page-item-directory);
+	@include clay-map-to-css($card-page-item-directory);
 }
 
 .card-page-item-asset {
-	@include clay-custom-grid-columns($card-page-item-asset);
+	@include clay-map-to-css($card-page-item-asset);
 }
 
 .card-page-item-user {
-	@include clay-custom-grid-columns($card-page-item-user);
+	@include clay-map-to-css($card-page-item-user);
 }
 
 // Card Interactive

package/css/clay/components/_dropdowns.scss

@@ -99,6 +99,16 @@
 	}
 }
 
+.dropdown-section-grid {
+	@extend %list-unstyled !optional;
+
+	display: grid;
+	gap: 0.5rem 0.75rem;
+	grid-template-columns: repeat(9, 1fr);
+	margin-bottom: 0;
+	padding: map-get($dropdown-section, padding);
+}
+
 // Dropdown Footer
 
 .dropdown-footer {

package/css/clay/components/_forms.scss

@@ -136,20 +136,6 @@ fieldset[disabled] {
 	}
 }
 
-@each $key, $value in $input-palette {
-	@if not clay-is-map-unset($value) {
-		$selector: if(
-			starts-with($key, '.') or starts-with($key, '#'),
-			$key,
-			str-insert($key, '.', 1)
-		);
-
-		#{$selector} {
-			@include clay-form-control-variant($value);
-		}
-	}
-}
-
 .form-control-hidden {
 	left: 0;
 	opacity: 0;
@@ -273,6 +259,22 @@ select.form-control[multiple] {
 	@include clay-select-variant($input-select-multiple);
 }
 
+// Form Control Variants
+
+@each $key, $value in $input-palette {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-form-control-variant($value);
+		}
+	}
+}
+
 // Form Control Select Variants
 
 @each $key, $value in $form-control-select-palette {

package/css/clay/components/_grid.scss

@@ -201,6 +201,7 @@
 	}
 
 	%clay-custom-grid-wrapper {
+		container-type: inline-size;
 		display: flex;
 		flex-wrap: wrap;
 		list-style: none;

package/css/clay/components/_input-groups.scss

@@ -245,7 +245,8 @@
 			}
 		}
 
-		.btn-monospaced {
+		.btn-monospaced,
+		.input-group-inset-icon {
 			@include clay-button-variant(
 				$input-group-inset-item-btn-monospaced
 			);
@@ -260,6 +261,16 @@
 		}
 	}
 
+	.input-group-inset-icon {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+
+		.lexicon-icon {
+			margin-top: 0;
+		}
+	}
+
 	.input-group-item .input-group-inset-before.form-control {
 		@include border-left-radius(0);
 		@include border-right-radius($input-border-radius);

package/css/clay/components/_type.scss

@@ -130,11 +130,15 @@ mark.clay-dark,
 
 // Lists
 
-.list-unstyled {
+%list-unstyled {
 	list-style: none;
 	padding-left: 0;
 }
 
+.list-unstyled {
+	@extend %list-unstyled;
+}
+
 // Inline turns list items into inline-block
 
 .list-inline {

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

@@ -855,4 +855,10 @@
 
 .c-prefers-reduced-motion {
 	@include clay-css($c-prefers-reduced-motion);
+
+	.loading-animation-squares {
+		@include clay-map-to-css(
+			map-deep-get($loading-animation-squares, 'prefers-reduced-motion')
+		);
+	}
 }