@clayui/css 3.46.0 → 3.49.0

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

@@ -332,7 +332,7 @@ label.custom-control-label {
 		}
 
 		~ .custom-file-label[data-browse]::after {
-			content: attr(data-browse);
+			content: $custom-file-text-data-browse;
 		}
 	}
 
@@ -366,7 +366,7 @@ label.custom-control-label {
 
 			bottom: 0;
 			color: $custom-file-button-color;
-			content: 'Browse';
+			content: $custom-file-label-after-content;
 			display: block;
 			height: $custom-file-height-inner;
 			line-height: $custom-file-line-height;

package/src/scss/components/_dropdowns.scss

@@ -113,34 +113,6 @@
 .dropdown-menu {
 	@include clay-dropdown-menu-variant($dropdown-menu);
 
-	.alert {
-		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;
-		}
-	}
-
-	.alert-fluid {
-		margin-left: 0;
-		margin-right: 0;
-
-		&:first-child {
-			margin-top: math-sign($dropdown-padding-y);
-		}
-
-		&:last-child {
-			margin-bottom: math-sign($dropdown-padding-y);
-		}
-	}
-
 	.form-group {
 		margin-bottom: 0;
 	}

package/src/scss/components/_empty-state.scss

@@ -2,6 +2,10 @@
 	@include clay-css($c-empty-state);
 }
 
+.c-empty-state-sm {
+	@include clay-css($c-empty-state-sm);
+}
+
 .c-empty-state-animation {
 	@include clay-css($c-empty-state-animation);
 }
@@ -33,3 +37,29 @@
 .c-empty-state-footer {
 	@include clay-css($c-empty-state-footer);
 }
+
+// C Empty State Small
+
+.c-empty-state-sm {
+	@include clay-css($c-empty-state-sm);
+
+	&.c-empty-state-animation {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-animation));
+	}
+
+	.c-empty-state-image {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-image));
+	}
+
+	.c-empty-state-title {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-title));
+	}
+
+	.c-empty-state-text {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-text));
+	}
+
+	.c-empty-state-footer {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-footer));
+	}
+}

package/src/scss/components/_links.scss

@@ -48,18 +48,10 @@ button.link-outline {
 
 .component-title {
 	@include clay-text-typography($component-title);
-
-	a {
-		@include clay-link($component-title-link);
-	}
 }
 
 .component-subtitle {
 	@include clay-text-typography($component-subtitle);
-
-	a {
-		@include clay-link($component-subtitle-link);
-	}
 }
 
 .component-action {
@@ -67,7 +59,7 @@ button.link-outline {
 }
 
 .component-text {
-	@include clay-css($component-text);
+	@include clay-text-typography($component-text);
 }
 
 .component-icon {

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

@@ -62,7 +62,9 @@
 			@if ($multi-step-icon-active-bg-image) {
 				&[data-multi-step-icon] {
 					&:before {
-						content: normal;
+						// https://issues.liferay.com/browse/LPS-147457
+
+						content: none;
 					}
 				}
 			}
@@ -100,7 +102,9 @@
 
 				&[data-multi-step-icon] {
 					&:before {
-						content: normal;
+						// https://issues.liferay.com/browse/LPS-147457
+
+						content: none;
 					}
 				}
 
@@ -135,7 +139,9 @@
 			@if ($multi-step-icon-disabled-bg-image) {
 				&[data-multi-step-icon] {
 					&:before {
-						content: normal;
+						// https://issues.liferay.com/browse/LPS-147457
+
+						content: none;
 					}
 				}
 			}
@@ -244,8 +250,8 @@
 		text-decoration: $multi-step-icon-focus-text-decoration;
 	}
 
-	&[data-multi-step-icon]:before {
-		content: attr(data-multi-step-icon);
+	&[data-multi-step-icon]::before {
+		content: $data-multi-step-icon-before-content;
 		height: $multi-step-icon-size;
 		line-height: $multi-step-icon-size;
 		text-align: center;

package/src/scss/components/_tables.scss

@@ -362,10 +362,6 @@ caption {
 	@include clay-text-typography($table-title);
 }
 
-.table-title a {
-	@include clay-link($table-title-link);
-}
-
 // Table Link
 
 .table-link {
@@ -663,10 +659,6 @@ caption {
 	@include clay-text-typography($table-list-title);
 }
 
-.table-list-title a {
-	@include clay-link($table-list-title-link);
-}
-
 // Table List Link
 
 .table-list-link {

package/src/scss/components/_treeview.scss

@@ -139,7 +139,14 @@
 	&.focus,
 	&:focus {
 		.component-action {
-			display: block;
+			display: flex;
+		}
+	}
+
+	&:disabled,
+	&.disabled {
+		.component-action {
+			display: none;
 		}
 	}
 
@@ -234,6 +241,31 @@
 
 	.treeview-link {
 		@include clay-link(map-get($treeview-light, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-light,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$treeview-light,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
 	}
 
 	.component-action {
@@ -294,6 +326,31 @@
 
 	.treeview-link {
 		@include clay-link(map-get($treeview-dark, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-dark,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$treeview-dark,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
 	}
 
 	.component-action {

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);
+			}
 		}
 	}
 }