@clayui/css 3.48.0 → 3.51.0

package/src/images/icons/percentage-banner.svg

@@ -0,0 +1,12 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-percentage-banner-line" d="M164.7,292.7c-14.6,14.6,8,37.2,22.6,22.6l160-160c14.6-14.6-8-37.2-22.6-22.6L164.7,292.7z"/>
+	<path class="lexicon-icon-outline lx-percentage-banner-border" d="M0,64c0,0,0,221.6,0,372.5c0,28.3,34.7,42.8,59,28.5c96.4-56.9,119.5,47,197,47c76,0,106.1-102.2,194.4-51.5c25.1,14.4,61.6,0.1,61.6-28.9V64c0-35.3-28.7-64-64-64H64C28.7,0,0,28.7,0,64z M256,448c-64,0-69.1-83.3-192-62.5V64h384v321.5C326.8,367.1,324.7,448,256,448z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<circle class="lexicon-icon-outline lx-percentage-banner-dot-1" cx="192" cy="160" r="32"/>
+	<circle class="lexicon-icon-outline lx-percentage-banner-dot-2" cx="320" cy="288" r="32"/>
+</svg>

package/src/images/icons/percentage-symbol.svg

@@ -0,0 +1,11 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-percentage-symbol-dot-1" d="M64.1,144c0,103.1,160,103.1,160,0C224,40.9,64.1,40.9,64.1,144z M112,144c0,41.3,64,41.3,64,0C176,102.8,112,102.8,112,144z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-percentage-symbol-line" d="M73.4,393.4l320-320c29.2-29.2,74.4,16.1,45.2,45.2l-320,320C89.5,467.7,44.3,422.5,73.4,393.4z"/>
+	<path class="lexicon-icon-outline lx-percentage-symbol-dot-2" d="M288,368c0-103.1,160-103.1,160,0C447.9,471.1,288,471.1,288,368z M336,368c0-41.3,64-41.3,64,0C400,409.2,336,409.2,336,368z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/price-tag.svg

@@ -0,0 +1,10 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-price-tag-border" d="M272.7,423.7c-12.7,12.7-33.4,12.7-46.1,0L88.3,285.4c-12.7-12.7-12.7-33.4,0-46.1L245.7,81.9c5.8-5.8,13.6-9.2,21.8-9.5l144.1-5.8c19-0.8,34.6,14.9,33.9,33.9l-5.8,144.1c-0.3,8.2-3.7,16-9.5,21.8L272.7,423.7z M208.6,26.8c11.6-11.6,27.1-18.4,43.5-19l192.1-7.7c38-1.5,69.3,29.7,67.8,67.8l-7.7,192.1c-0.7,16.4-7.5,31.9-19,43.5L295.8,492.9c-25.5,25.5-66.8,25.5-92.2,0L19.1,308.5c-25.5-25.5-25.5-66.8,0-92.2L208.6,26.8z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-price-tag-dollar" d="M341.8,146.4c14.9-14.9,37.9,8,22.9,22.9L352,182.2c7.5,11.9,11.3,25.5,10.6,38.9c-1.2,20-33.6,19.5-32.5-1.6c-7.5-58.1-84.5-48.5-45.5,7.6l0.1,0.1c46.6,53.1,4.5,130.8-70,92.2L203,331.1c-15.4,15.4-38.3-7.6-22.9-22.9l11.6-11.6c-7.6-11.9-16.8-33.4-16-46.9c1.2-19.6,33.8-19.2,32.5,1.8c5,61,102.2,67.1,45.3-13.6c-44.8-65.1,31-109.8,75.5-78.6L341.8,146.4z"/>
+</svg>

package/src/images/icons/ruler.svg

@@ -0,0 +1,9 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline" d="M279.2,21.2c23.1-23.3,61.2-33.9,97.6,2.8l107.3,108c42.2,42.4,32,60.6-1.3,94.1L227.5,483.6c-33.4,33.6-49.7,42.1-91.9-0.3l-107.3-108c-36.4-36.7-37.5-63.3-4.4-96.6L279.2,21.2z M326.7,64.5l113.1,113.9l-29.3,29.9l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2l-22.6,22.8l-54.6-55c-14.6-14.7-37.2,8.1-22.6,22.8l54.6,55L320,299.4l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2L274.7,345l-54.6-55c-14.6-14.7-37.2,8.1-22.6,22.8l54.6,55l-22.6,22.8l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2l-25.1,25.3L68.6,324.7L326.7,64.5z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/shopping-cart.svg

@@ -5,7 +5,7 @@
 * SPDX-License-Identifier: BSD-3-Clause
 -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<circle class="lexicon-icon-outline shopping-cart-wheel1" cx="144" cy="464" r="48"></circle>
-	<circle class="lexicon-icon-outline shopping-cart-wheel2" cx="432" cy="464" r="48"></circle>
-	<path class="lexicon-icon-outline shopping-cart-basket" d="M495.9,352.1H192.5c-17.7,0-32.4-14.2-32.4-31.8s14.9-31.9,32.6-31.9c2.5,0,305-34.8,305-34.8c8.1-0.9,14.2-7.7,14.2-15.9V80.1c0-8.8-7.1-15.9-15.9-15.9H129.2l-20.8-53.9C106,4.1,100.1,0,93.5,0H16C-5.5,0.7-5.1,31.7,16.1,32h66.5l88.2,228.5c-24.4,9-42.6,32.2-42.6,59.7c0,35.3,29.2,63.8,64.5,63.8H496C517.9,382.5,516.6,353,495.9,352.1z M288.1,160.1v-64h94.5L384,160L288.1,160.1z M480.1,160H416l0.1-64h64V160z M256,96.1l0.1,63.9h-89.9l-24.7-63.9H256z"></path>
+	<path class="lexicon-icon-outline lx-shopping-cart-basket" d="M93.2,51.2L181,255.9h212.1l24.7-124.2c10.5-43.1,72.1-28.5,60.8,20.2l-31.8,145.3c-4,13.1-16.2,22.7-30.6,22.7H159.9c-13.4,0-24.9-8.2-29.7-19.9L34.3,76.5C20.3,39.8,73.2,11.6,93.2,51.2z"/>
+	<ellipse class="lexicon-icon-outline lx-shopping-cart-wheel-1" cx="143.9" cy="432" rx="48.1" ry="48"/>
+	<ellipse class="lexicon-icon-outline lx-shopping-cart-wheel-2" cx="400.2" cy="432" rx="48.1" ry="48"/>
 </svg>

package/src/images/icons/squares-clock.svg

@@ -0,0 +1,13 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-squares-clock-square-2" d="M153.1,512H70.9C40.6,512,16,487.4,16,457.1v-82.3c0-30.3,24.6-54.9,54.9-54.9h82.3c30.3,0,54.9,24.6,54.9,54.9v82.3C208,487.4,183.4,512,153.1,512z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-square-3" d="M409.1,512h-82.3c-30.3,0-54.9-24.6-54.9-54.9v-82.3c0-30.3,24.6-54.9,54.9-54.9h82.3c30.3,0,54.9,24.6,54.9,54.9v82.3C464,487.4,439.4,512,409.1,512z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-hands" d="M368,121.8h38.4c25.1,0,24.1,32,0,32H336V89.4c0-21.8,32-23.2,32,0V121.8z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-border" d="M496,128c0-172.6-256-168.8-256,0C240,297.5,496,299.9,496,128z M291.2,128c0-103,153.6-103.1,153.6,0C444.8,231.1,291.2,231.1,291.2,128z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-squares-clock-square-1" d="M187.2,64h-52.3C104.6,64,80,88.6,80,118.8v82.3c0,30.3,24.6,54.9,54.9,54.9h89.6C224.5,256,146.6,175.1,187.2,64z"/>
+</svg>

package/src/images/icons/squares.svg

@@ -0,0 +1,11 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-squares-1" d="M256,224h-96c-35.3,0-64-28.7-64-64V64c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C320,195.3,291.3,224,256,224z"/>
+	<path class="lexicon-icon-outline lx-squares-2" d="M160,512H64c-35.3,0-64-28.7-64-64v-96c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C224,483.3,195.3,512,160,512z"/>
+	<path class="lexicon-icon-outline lx-squares-3" d="M448,512h-96c-35.3,0-64-28.7-64-64v-96c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C512,483.3,483.3,512,448,512z"/>
+</svg>

package/src/images/icons/warehouse.svg

@@ -0,0 +1,12 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-warehouse-square-1" d="M176,215c0-18.2,14.3-33,32-33h32c17.7,0,32,14.8,32,33v33c0,18.2-14.3,33-32,33h-32c-17.7,0-32-14.8-32-33V215z"/>
+	<path class="lexicon-icon-outline lx-warehouse-square-2" d="M240,347.1c0-18.2-14.3-33-32-33h-32c-17.7,0-32,14.8-32,33v33c0,18.2,14.3,33,32,33h32c17.7,0,32-14.8,32-33V347.1z"/>
+	<path class="lexicon-icon-outline lx-warehouse-square-3" d="M336,314.1c17.7,0,32,14.8,32,33v33c0,18.2-14.3,33-32,33h-32c-17.7,0-32-14.8-32-33v-33c0-18.2,14.3-33,32-33H336z"/>
+	<path class="lexicon-icon-outline lx-warehouse-border" d="M217.6,13.5c22.8-17.6,54-17.6,76.8,0l192,148.6c16.1,12.5,25.6,32.1,25.6,52.9v297.3H0V215c0-20.8,9.5-40.4,25.6-52.9L217.6,13.5z M448,215L256,66.3L64,215v231.2h384V215z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/scss/atlas/variables/_forms.scss

@@ -425,20 +425,21 @@ $form-control-label-size: () !default;
 $form-control-label-size: map-deep-merge(
 	(
 		border-width: 0.0625rem,
-		font-size: map-get($label-lg, font-size),
+		font-size: 0.75rem,
 		height: auto,
 		margin-bottom: 0.3125rem,
 		margin-right: 0.625rem,
 		margin-top: 0.3125rem,
 		min-height: 1.5rem,
-		padding-x: map-get($label-lg, padding-x),
-		padding-y: map-get($label-lg, padding-y),
+		padding-bottom: 0.3125rem,
+		padding-left: 0.5rem,
+		padding-right: 0.5rem,
+		padding-top: 0.3125rem,
 		text-transform: none,
-		item-spacer-y: map-get($label-lg, item-spacer-y),
-		lexicon-icon-height: map-get($label-lg, lexicon-icon-height),
-		lexicon-icon-width: map-get($label-lg, lexicon-icon-width),
-		sticker-size: map-get($label-lg, sticker-size),
-		close: map-get($label-lg, close),
+		label-item: (
+			margin-bottom: -0.0625rem,
+			margin-top: -0.0625rem,
+		),
 	),
 	$form-control-label-size
 );

package/src/scss/atlas/variables/_globals.scss

@@ -358,9 +358,27 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-base: 1rem !default; // 16px
-$font-size-lg: 1.125rem !default; // 18px
-$font-size-sm: 0.875rem !default; // 14px
+$font-scale: () !default;
+$font-scale: map-merge(
+	(
+		1: 0.625rem,
+		2: 0.75rem,
+		3: 0.875rem,
+		4: 1rem,
+		5: 1.125rem,
+		6: 1.25rem,
+		7: 1.5rem,
+		8: 1.75rem,
+		9: 2rem,
+		10: 2.25rem,
+		11: 2.5rem,
+	),
+	$font-scale
+);
+
+$font-size-base: map-get($font-scale, 4) !default; // 16px
+$font-size-lg: map-get($font-scale, 5) !default; // 18px
+$font-size-sm: map-get($font-scale, 3) !default; // 14px
 
 $font-size-base-mobile: $font-size-base !default;
 $font-size-lg-mobile: $font-size-lg !default;
@@ -503,7 +521,7 @@ $display3-weight: 300 !default;
 $display4-size: 3.5rem !default;
 $display4-weight: 300 !default;
 
-$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -512,7 +530,7 @@ $text-muted: $gray-500 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;

package/src/scss/atlas/variables/_utilities.scss

@@ -21,14 +21,18 @@ $close: map-deep-merge(
 	(
 		color: $gray-900,
 		opacity: 1,
-		hover-color: $gray-900,
-		hover-opacity: 1,
-		focus-box-shadow: $btn-focus-box-shadow,
-		focus-opacity: 1,
-		focus-outline: 0,
-		disabled-color: $gray-600,
-		disabled-opacity: $btn-disabled-opacity,
-		btn-focus-box-shadow: $btn-focus-box-shadow,
+		hover: (
+			color: $gray-900,
+			opacity: 1,
+			outline: 0,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+		),
+		disabled: (
+			color: $gray-600,
+			opacity: 0.65,
+		),
 	),
 	$close
 );

package/src/scss/cadmin/variables/_forms.scss

@@ -318,20 +318,21 @@ $cadmin-form-control-label-size: () !default;
 $cadmin-form-control-label-size: map-deep-merge(
 	(
 		border-width: 1px,
-		font-size: map-get($cadmin-label-lg, font-size),
+		font-size: 12px,
 		height: auto,
 		margin-bottom: 5px,
 		margin-right: 10px,
 		margin-top: 5px,
 		min-height: 24px,
-		padding-x: map-get($cadmin-label-lg, padding-x),
-		padding-y: map-get($cadmin-label-lg, padding-y),
+		padding-bottom: 5px,
+		padding-left: 8px,
+		padding-right: 8px,
+		padding-top: 5px,
 		text-transform: none,
-		item-spacer-y: map-get($cadmin-label-lg, item-spacer-y),
-		lexicon-icon-height: map-get($cadmin-label-lg, lexicon-icon-height),
-		lexicon-icon-width: map-get($cadmin-label-lg, lexicon-icon-width),
-		sticker-size: map-get($cadmin-label-lg, sticker-size),
-		close: map-get($cadmin-label-lg, close),
+		label-item: (
+			margin-bottom: -1px,
+			margin-top: -1px,
+		),
 	),
 	$cadmin-form-control-label-size
 );

package/src/scss/components/_custom-forms.scss

@@ -171,14 +171,16 @@ label.custom-control-label {
 					$custom-forms-transition
 				);
 
-				top: add(
+				top: calc(
 					(
-							$font-size-base *
-								$line-height-base -
-								$custom-control-indicator-size
-						) *
-						0.5,
-					$custom-control-indicator-border-width * 2
+							(
+									#{$font-size-base} *
+										#{$line-height-base} -
+										#{$custom-control-indicator-size}
+								) *
+								0.5
+						) +
+						(#{$custom-control-indicator-border-width} * 2)
 				);
 				width: $custom-switch-indicator-size;
 			}

package/src/scss/components/_tables.scss

@@ -394,12 +394,6 @@ caption {
 
 				overflow-x: auto;
 				width: 100%;
-
-				// Prevent double border on horizontal scroll due to use of `display: block;`
-
-				> .table-bordered {
-					border-width: 0;
-				}
 			}
 		}
 	}
@@ -423,16 +417,20 @@ caption {
 			th:first-child,
 			td:first-child,
 			.table-cell-start {
-				border-top-left-radius: clay-enable-rounded(
-					$table-list-border-radius
+				@include clay-css(
+					map-deep-get(
+						$c-table-list,
+						table-row-start,
+						table-cell-start
+					)
 				);
 			}
 
 			th:last-child,
 			td:last-child,
-			.table-cell-start {
-				border-top-right-radius: clay-enable-rounded(
-					$table-list-border-radius
+			.table-cell-end {
+				@include clay-css(
+					map-deep-get($c-table-list, table-row-start, table-cell-end)
 				);
 			}
 		}
@@ -455,16 +453,24 @@ caption {
 				th:first-child,
 				td:first-child,
 				.table-cell-start {
-					border-bottom-left-radius: clay-enable-rounded(
-						$table-list-border-radius
+					@include clay-css(
+						map-deep-get(
+							$c-table-list,
+							table-row-end,
+							table-cell-start
+						)
 					);
 				}
 
 				th:last-child,
 				td:last-child,
 				.table-cell-end {
-					border-bottom-right-radius: clay-enable-rounded(
-						$table-list-border-radius
+					@include clay-css(
+						map-deep-get(
+							$c-table-list,
+							table-row-end,
+							table-cell-end
+						)
 					);
 				}
 			}
@@ -520,28 +526,28 @@ caption {
 
 	.table-row-start {
 		.table-cell-start {
-			border-top-left-radius: clay-enable-rounded(
-				$table-list-border-radius
+			@include clay-css(
+				map-deep-get($c-table-list, table-row-start, table-cell-start)
 			);
 		}
 
 		.table-cell-end {
-			border-top-right-radius: clay-enable-rounded(
-				$table-list-border-radius
+			@include clay-css(
+				map-deep-get($c-table-list, table-row-start, table-cell-end)
 			);
 		}
 	}
 
 	.table-row-end {
 		.table-cell-start {
-			border-bottom-left-radius: clay-enable-rounded(
-				$table-list-border-radius
+			@include clay-css(
+				map-deep-get($c-table-list, table-row-end, table-cell-start)
 			);
 		}
 
 		.table-cell-end {
-			border-bottom-right-radius: clay-enable-rounded(
-				$table-list-border-radius
+			@include clay-css(
+				map-deep-get($c-table-list, table-row-end, table-cell-end)
 			);
 		}
 	}

package/src/scss/functions/_global-functions.scss

@@ -822,3 +822,21 @@
 
 	@return clay-svg-url(map-get($lx-icons, $name));
 }
+
+/// A function that returns the inner border radius based on the outer border radius minus the border width.
+/// @param {Number | String} $radius - The outer border-radius
+/// @param {Number | String} $width - The outer border-width
+
+@function clay-border-radius-inner(
+	$radius: $border-radius,
+	$width: $border-width
+) {
+	@if not(type-of($radius) == 'number' or type-of($radius) == 'string') {
+		@error 'The parameter `$radius` in the function `clay-border-radius-inner` cannot be a `#{type-of($radius)}`. It must be a number or a string.';
+	} @else if not (type-of($width) == 'number' or type-of($width) == 'string')
+	{
+		@error 'The parameter `$width` in the function `clay-border-radius-inner` cannot be a `#{type-of($width)}`. It must be a number or a string.';
+	}
+
+	@return calc(#{$radius} - #{$width});
+}