@clayui/css 3.47.0 → 3.50.0

package/src/scss/mixins/_alerts.scss

@@ -1,3 +1,7 @@
+////
+/// @group Alerts
+////
+
 /// This is Bootstrap 4's Alert Variant Mixin.
 /// @deprecated use the mixin `clay-alert-variant` instead
 /// @param {Color} $background
@@ -22,153 +26,216 @@
 /// A mixin to create alert variants.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
-/// hr: {Map | Null}, // See mixin `clay-css`
-/// alert-btn: {Map | Null}, // See mixin `clay-button-variant`
-/// btn-group: {Map | Null}, // See mixin `clay-container`
-/// btn-group-item: {Map | Null}, // See mixin `clay-container`
-/// close: {Map | Null}, // See mixin `clay-close`
-/// lead: {Map | Null}, // See mixin `clay-css`
-/// alert-link: {Map | Null}, // See mixin `clay-link`
-/// component-title: {Map | Null}, // See mixin `clay-text-typography`
-/// component-subtitle: {Map | Null}, // See mixin `clay-text-typography`
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .alert
+/// 	first-child: (
+/// 		// .alert:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .alert:last-child
+/// 	),
+/// 	hr: (
+/// 		// .alert hr
+/// 	),
+/// 	alert-dismissible: (
+/// 		// .alert.alert-dismissible
+/// 		container-fluid: (
+/// 			// .alert.alert-dismissible .container, .alert.alert-dismissible .container-fluid
+/// 		),
+/// 	),
+/// 	alert-indicator: (
+/// 		// .alert .alert-indicator
+/// 		lexicon-icon: (
+/// 			// .alert .alert-indicator .lexicon-icon
+/// 		),
+/// 		lead: (
+/// 			// .alert .alert-indicator + .lead
+/// 		),
+/// 	),
+/// 	alert-btn: (
+/// 		// .alert .alert-btn
+/// 	),
+/// 	btn-group: (
+/// 		// .alert .btn-group
+/// 	),
+/// 	btn-group-item: (
+/// 		// .alert .btn-group-item
+/// 	),
+/// 	close: (
+/// 		// .alert .close
+/// 	),
+/// 	container-fluid: (
+/// 		// .alert .container, .alert .container-fluid
+/// 	),
+/// 	lead: (
+/// 		// .alert .lead
+/// 	),
+/// 	alert-link: (
+/// 		// .alert .alert-link
+/// 	),
+/// 	component-title: (
+/// 		// .alert .component-title
+/// 	),
+/// 	component-subtitle: (
+/// 		// .alert .component-subtitle
+/// 	),
+/// )
 
 @mixin clay-alert-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-		)
-	);
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+			)
+		);
 
-	$hr: setter(map-get($map, hr), ());
+		$hr: setter(map-get($map, hr), ());
 
-	$alert-indicator: setter(map-get($map, alert-indicator), ());
+		$alert-indicator: setter(map-get($map, alert-indicator), ());
 
-	$alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
+		$alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
 
-	$alert-btn: setter(map-get($map, alert-btn), ());
+		$alert-btn: setter(map-get($map, alert-btn), ());
 
-	$btn-group: setter(map-get($map, btn-group), ());
+		$btn-group: setter(map-get($map, btn-group), ());
 
-	$btn-group-item: setter(map-get($map, btn-group-item), ());
+		$btn-group-item: setter(map-get($map, btn-group-item), ());
 
-	$close: setter(map-get($map, close), ());
-	$close: map-deep-merge(
-		$close,
-		(
-			color: setter(map-get($map, close-color), map-get($close, color)),
-			hover: (
+		$close: setter(map-get($map, close), ());
+		$close: map-deep-merge(
+			$close,
+			(
 				color:
-					setter(
-						map-get($map, close-hover-color),
-						map-deep-get($close, hover, color)
-					),
-			),
-		)
-	);
-
-	$lead: setter(map-get($map, lead), ());
-	$lead: map-deep-merge(
-		$lead,
-		(
-			color: setter(map-get($map, lead-color), map-get($lead, color)),
-		)
-	);
-
-	$alert-link: setter(map-get($map, alert-link), ());
-	$alert-link: map-deep-merge(
-		$alert-link,
-		(
-			color:
-				setter(map-get($map, link-color), map-get($alert-link, color)),
-			hover: (
+					setter(map-get($map, close-color), map-get($close, color)),
+				hover: (
+					color:
+						setter(
+							map-get($map, close-hover-color),
+							map-deep-get($close, hover, color)
+						),
+				),
+			)
+		);
+
+		$lead: setter(map-get($map, lead), ());
+		$lead: map-deep-merge(
+			$lead,
+			(
+				color: setter(map-get($map, lead-color), map-get($lead, color)),
+			)
+		);
+
+		$alert-link: setter(map-get($map, alert-link), ());
+		$alert-link: map-deep-merge(
+			$alert-link,
+			(
 				color:
 					setter(
-						map-get($map, link-hover-color),
-						map-deep-get($alert-link, hover, color)
+						map-get($map, link-color),
+						map-get($alert-link, color)
 					),
-			),
-		)
-	);
+				hover: (
+					color:
+						setter(
+							map-get($map, link-hover-color),
+							map-deep-get($alert-link, hover, color)
+						),
+				),
+			)
+		);
 
-	$component-title: setter(map-get($map, component-title), ());
+		$component-title: setter(map-get($map, component-title), ());
 
-	$component-subtitle: setter(map-get($map, component-subtitle), ());
+		$component-subtitle: setter(map-get($map, component-subtitle), ());
 
-	@if ($enabled) {
-		@include clay-css($base);
-
-		hr {
-			@include clay-css($hr);
-		}
+		@if ($enabled) {
+			@include clay-css($base);
 
-		&.alert-dismissible {
-			@include clay-css(setter(map-get($map, alert-dismissible), ()));
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
 
-			.container,
-			.container-fluid {
-				@include clay-css(
-					setter(
-						map-deep-get($map, alert-dismissible, container-fluid),
-						()
-					)
-				);
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
 			}
-		}
 
-		.alert-indicator {
-			@include clay-css($alert-indicator);
+			hr {
+				@include clay-css($hr);
+			}
 
-			.lexicon-icon {
-				@include clay-css(
-					setter(map-get($alert-indicator, lexicon-icon), ())
-				);
+			&.alert-dismissible {
+				@include clay-css(setter(map-get($map, alert-dismissible), ()));
+
+				.container,
+				.container-fluid {
+					@include clay-css(
+						setter(
+							map-deep-get(
+								$map,
+								alert-dismissible,
+								container-fluid
+							),
+							()
+						)
+					);
+				}
 			}
 
-			+ .lead {
-				@include clay-css($alert-indicator-lead);
+			.alert-indicator {
+				@include clay-css($alert-indicator);
+
+				.lexicon-icon {
+					@include clay-css(
+						setter(map-get($alert-indicator, lexicon-icon), ())
+					);
+				}
+
+				+ .lead {
+					@include clay-css($alert-indicator-lead);
+				}
 			}
-		}
 
-		.alert-btn {
-			@include clay-button-variant($alert-btn);
-		}
+			.alert-btn {
+				@include clay-button-variant($alert-btn);
+			}
 
-		.btn-group {
-			@include clay-container($btn-group);
-		}
+			.btn-group {
+				@include clay-container($btn-group);
+			}
 
-		.btn-group-item {
-			@include clay-container($btn-group-item);
-		}
+			.btn-group-item {
+				@include clay-container($btn-group-item);
+			}
 
-		.close {
-			@include clay-close($close);
-		}
+			.close {
+				@include clay-close($close);
+			}
 
-		.container,
-		.container-fluid {
-			@include clay-css(setter(map-get($map, container-fluid), ()));
-		}
+			.container,
+			.container-fluid {
+				@include clay-css(setter(map-get($map, container-fluid), ()));
+			}
 
-		.lead {
-			@include clay-css($lead);
-		}
+			.lead {
+				@include clay-css($lead);
+			}
 
-		.alert-link {
-			@include clay-link($alert-link);
-		}
+			.alert-link {
+				@include clay-link($alert-link);
+			}
 
-		.component-title {
-			@include clay-text-typography($component-title);
-		}
+			.component-title {
+				@include clay-text-typography($component-title);
+			}
 
-		.component-subtitle {
-			@include clay-text-typography($component-subtitle);
+			.component-subtitle {
+				@include clay-text-typography($component-subtitle);
+			}
 		}
 	}
 }

package/src/scss/mixins/_dropdown-menu.scss

@@ -20,6 +20,15 @@
 /// 	show: (
 /// 		// .dropdown-menu.show
 /// 	),
+/// 	dropdown-item: (
+/// 		// .dropdown-menu .dropdown-item
+/// 	),
+/// 	alert: (
+/// 		// .dropdown-menu .alert
+/// 	),
+/// 	alert-fluid: (
+/// 		// .dropdown-menu .alert-fluid
+/// 	),
 /// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -95,6 +104,14 @@
 					map-deep-get($map, dropdown-item)
 				);
 			}
+
+			.alert {
+				@include clay-alert-variant(map-get($map, alert));
+			}
+
+			.alert-fluid {
+				@include clay-alert-variant(map-get($map, alert-fluid));
+			}
 		}
 	}
 }

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

@@ -761,8 +761,23 @@ $custom-file-button-bg: $input-group-addon-bg !default;
 
 $custom-file-button-color: $custom-file-color !default;
 
-/// @deprecated as of v3.x with no replacement
+// .custom-file-label::after
 
-$custom-file-text: (
-	en: 'Browse',
-) !default;
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
+
+$custom-file-label-after-content: unquote("'\\FEFF Browse'") !default;
+
+$custom-file-text: () !default;
+
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
+
+$custom-file-text: map-deep-merge(
+	(
+		en: unquote("'\\FEFF Browse'"),
+	),
+	$custom-file-text
+);
+
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457.
+
+$custom-file-text-data-browse: unquote("'\\FEFF' attr(data-browse)") !default;

package/src/scss/variables/_dropdowns.scss

@@ -888,3 +888,48 @@ $dropdown-alert-line-height: normal !default;
 $dropdown-alert-margin: $spacer * 0.5 !default;
 $dropdown-alert-padding-x: $dropdown-header-padding-x !default;
 $dropdown-alert-padding-y: $dropdown-header-padding-y !default;
+
+$dropdown-menu-alert: () !default;
+$dropdown-menu-alert: map-deep-merge(
+	(
+		font-size: $dropdown-alert-font-size,
+		line-height: $dropdown-alert-line-height,
+		margin: $dropdown-alert-margin,
+		padding: $dropdown-alert-padding-y $dropdown-alert-padding-x,
+		first-child: (
+			margin-top: 0,
+		),
+		last-child: (
+			margin-bottom: 0,
+		),
+	),
+	$dropdown-menu-alert
+);
+
+$dropdown-menu-alert-fluid: () !default;
+$dropdown-menu-alert-fluid: map-deep-merge(
+	(
+		margin-left: 0,
+		margin-right: 0,
+		first-child: (
+			margin-top: math-sign($dropdown-padding-y),
+		),
+		last-child: (
+			margin-bottom: math-sign($dropdown-padding-y),
+		),
+	),
+	$dropdown-menu-alert-fluid
+);
+
+$dropdown-menu: map-deep-merge(
+	(
+		alert:
+			map-deep-merge($dropdown-menu-alert, map-get($dropdown-menu, alert)),
+		alert-fluid:
+			map-deep-merge(
+				$dropdown-menu-alert-fluid,
+				map-get($dropdown-menu, alert-fluid)
+			),
+	),
+	$dropdown-menu
+);

package/src/scss/variables/_multi-step-nav.scss

@@ -28,6 +28,12 @@ $multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
 $multi-step-icon-focus-outline: 0 !default;
 $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;
 
+// See https://issues.liferay.com/browse/LPS-147457.
+
+$data-multi-step-icon-before-content: unquote(
+	"'\\FEFF' attr(data-multi-step-icon)"
+) !default;
+
 $multi-step-divider-bg: $gray-200 !default;
 $multi-step-divider-height: 0.25rem !default;
 $multi-step-divider-spacer-x: 0 !default;

package/src/scss/variables/_range.scss

@@ -45,6 +45,8 @@ $clay-range-title: map-deep-merge(
 	$clay-range-title
 );
 
+// `data-label-before-content` and `data-label-after-content`, see https://issues.liferay.com/browse/LPS-147457
+
 $clay-range-input: () !default;
 $clay-range-input: map-deep-merge(
 	(
@@ -92,8 +94,8 @@ $clay-range-input: map-deep-merge(
 		data-label-text-align: center,
 		data-label-top: 0,
 		data-label-width: 1.5rem,
-		data-label-before-content: attr(data-label-min),
-		data-label-after-content: attr(data-label-max),
+		data-label-before-content: unquote("'\\FEFF' attr(data-label-min)"),
+		data-label-after-content: unquote("'\\FEFF' attr(data-label-max)"),
 		data-label-after-right: 0,
 		hover-cursor: $link-cursor,
 		focus-outline: 0,

package/src/scss/variables/_stickers.scss

@@ -79,7 +79,7 @@ $sticker-sm: map-deep-merge(
 				bottom: -0.75rem,
 				top: auto,
 			),
-			sticker-bottomr-right: (
+			sticker-bottom-right: (
 				bottom: -0.75rem,
 				left: auto,
 				right: -0.75rem,
@@ -110,7 +110,7 @@ $sticker-lg: map-deep-merge(
 				bottom: -1.25rem,
 				top: auto,
 			),
-			sticker-bottomr-right: (
+			sticker-bottom-right: (
 				bottom: -1.25rem,
 				left: auto,
 				right: -1.25rem,
@@ -141,7 +141,7 @@ $sticker-xl: map-deep-merge(
 				bottom: -1.5rem,
 				top: auto,
 			),
-			sticker-bottomr-right: (
+			sticker-bottom-right: (
 				bottom: -1.5rem,
 				left: auto,
 				right: -1.5rem,

package/src/scss/variables/_tables.scss

@@ -241,12 +241,12 @@ $table-border-level: -6 !default;
 
 $table-list-bg: $white !default;
 $table-list-border-color: $table-border-color !default;
+$table-list-border-radius: $border-radius !default;
+
 $table-list-border-x-width: 0.0625rem !default;
 $table-list-border-y-width: 0.0625rem !default;
 
 $table-list-border-width: $table-list-border-y-width $table-list-border-x-width !default;
-
-$table-list-border-radius: $border-radius !default;
 $table-list-color: null !default;
 $table-list-font-size: null !default;
 $table-list-margin-bottom: $table-list-border-y-width !default;
@@ -264,6 +264,46 @@ $c-table-list: map-merge(
 		font-size: $table-list-font-size,
 		margin-bottom: $table-list-margin-bottom,
 		margin-top: $table-list-margin-top,
+		table-row-start: (
+			table-cell-start: (
+				border-top-left-radius:
+					clay-enable-rounded(
+						clay-border-radius-inner(
+							$table-list-border-radius,
+							$table-list-border-y-width
+						)
+					),
+			),
+			table-cell-end: (
+				border-top-right-radius:
+					clay-enable-rounded(
+						clay-border-radius-inner(
+							$table-list-border-radius,
+							$table-list-border-y-width
+						)
+					),
+			),
+		),
+		table-row-end: (
+			table-cell-start: (
+				border-bottom-left-radius:
+					clay-enable-rounded(
+						clay-border-radius-inner(
+							$table-list-border-radius,
+							$table-list-border-y-width
+						)
+					),
+			),
+			table-cell-end: (
+				border-bottom-right-radius:
+					clay-enable-rounded(
+						clay-border-radius-inner(
+							$table-list-border-radius,
+							$table-list-border-y-width
+						)
+					),
+			),
+		),
 	),
 	$c-table-list
 );
@@ -316,7 +356,17 @@ $table-list-head-link: () !default;
 $c-table-list-thead: () !default;
 $c-table-list-thead: map-merge(
 	(
-		background-color: $table-list-head-bg,
+		background-color: $white,
+		border-top-left-radius:
+			clay-border-radius-inner(
+				$table-list-border-radius,
+				$table-list-border-y-width
+			),
+		border-top-right-radius:
+			clay-border-radius-inner(
+				$table-list-border-radius,
+				$table-list-border-y-width
+			),
 	),
 	$c-table-list-thead
 );
@@ -327,6 +377,16 @@ $c-table-list-tbody: () !default;
 $c-table-list-tbody: map-merge(
 	(
 		background-color: $white,
+		border-bottom-left-radius:
+			clay-border-radius-inner(
+				$table-list-border-radius,
+				$table-list-border-y-width
+			),
+		border-bottom-right-radius:
+			clay-border-radius-inner(
+				$table-list-border-radius,
+				$table-list-border-y-width
+			),
 	),
 	$c-table-list-tbody
 );

package/src/scss/variables/_toggle-switch.scss

@@ -34,6 +34,12 @@ $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default;
 $toggle-switch-button-font-size-mobile: $toggle-switch-button-font-size !default; // null
 $toggle-switch-button-icon-color: $input-color !default;
 
+// See https://issues.liferay.com/browse/LPS-147457.
+
+$toggle-switch-handle-after-content: unquote(
+	"'\\FEFF' attr(data-label-off)"
+) !default;
+
 // Toggle Switch On
 
 $toggle-switch-bar-on-bg: $component-active-bg !default;
@@ -45,6 +51,12 @@ $toggle-switch-button-on-border-color: $toggle-switch-bar-on-bg !default;
 $toggle-switch-button-on-border-radius: 0 3px 3px 0 !default;
 $toggle-switch-button-on-icon-color: $toggle-switch-bar-on-bg !default;
 
+// See https://issues.liferay.com/browse/LPS-147457.
+
+$toggle-switch-handle-on-after-content: unquote(
+	"'\\FEFF' attr(data-label-on)"
+) !default;
+
 // Toggle Switch Disabled
 
 $toggle-switch-disabled-cursor: $disabled-cursor !default;
@@ -179,7 +191,7 @@ $toggle-switch-check: map-deep-merge(
 						clay-enable-transitions($toggle-switch-transition),
 				),
 				after: (
-					content: attr(data-label-off),
+					content: $toggle-switch-handle-after-content,
 					margin-left:
 						clay-data-label-text-position(
 							$toggle-switch-bar-width,
@@ -253,7 +265,7 @@ $toggle-switch-check: map-deep-merge(
 				),
 				toggle-switch-handle: (
 					after: (
-						content: attr(data-label-on),
+						content: $toggle-switch-handle-on-after-content,
 					),
 				),
 				toggle-switch-icon: (