@clayui/css 3.45.0 → 3.48.0

package/src/scss/components/_aspect-ratio.scss

@@ -158,44 +158,31 @@
 	@extend %aspect-ratio-item-center-middle;
 }
 
-// 3 to 2
-
-%aspect-ratio-3-to-2 {
-	@include clay-aspect-ratio(3, 2);
-}
-
-.aspect-ratio-3-to-2 {
-	@extend %aspect-ratio-3-to-2;
-}
-
-// 4 to 3
-
-%aspect-ratio-4-to-3 {
-	@include clay-aspect-ratio(4, 3);
-}
-
-.aspect-ratio-4-to-3 {
-	@extend %aspect-ratio-4-to-3;
-}
-
-// 8 to 5
-
-%aspect-ratio-8-to-5 {
-	@include clay-aspect-ratio(8, 5);
-}
-
-.aspect-ratio-8-to-5 {
-	@extend %aspect-ratio-8-to-5;
-}
-
-// 16 to 9
-
-%aspect-ratio-16-to-9 {
-	@include clay-aspect-ratio(16, 9);
-}
-
-.aspect-ratio-16-to-9 {
-	@extend %aspect-ratio-16-to-9;
+// aspect-ratio-#-to-#
+
+@each $selector, $value in $aspect-ratio-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	$placeholder: str-insert(
+		str-slice($selector, 2, str-length($selector)),
+		'%',
+		1
+	);
+
+	#{$placeholder} {
+		@include clay-aspect-ratio(
+			map-get($value, width),
+			map-get($value, height)
+		);
+	}
+
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Bg Contain

package/src/scss/components/_cards.scss

@@ -1,112 +1,50 @@
 .card,
 .card-horizontal {
-	background-color: $card-bg;
-	border-color: $card-border-color;
-	border-style: $card-border-style;
-	border-width: $card-border-width;
-
-	@include border-radius($card-border-radius);
-	@include box-shadow($card-box-shadow);
-
-	display: block;
-	height: $card-height;
-	margin-bottom: $card-margin-bottom;
-
-	// See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-
-	min-width: 0;
-	position: relative;
-	word-wrap: break-word;
+	@include clay-card-variant($card);
 
 	.autofit-col {
 		&:first-child {
-			@include border-left-radius($card-inner-border-radius);
+			border-bottom-left-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
+			border-top-left-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
 		}
 
 		&:last-child {
-			@include border-right-radius($card-inner-border-radius);
+			border-bottom-right-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
+			border-top-right-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
 		}
 	}
 
-	.aspect-ratio {
-		.label {
-			@include clay-css($card-aspect-ratio-label);
-		}
-	}
-
-	.aspect-ratio-item-top-left {
-		@include clay-css($card-aspect-ratio-item-top-left);
-	}
-
-	.aspect-ratio-item-top-center {
-		@include clay-css($card-aspect-ratio-item-top-center);
-	}
-
-	.aspect-ratio-item-top-right {
-		@include clay-css($card-aspect-ratio-item-top-right);
-	}
-
-	.aspect-ratio-item-right-middle {
-		@include clay-css($card-aspect-ratio-item-right-middle);
-	}
-
-	.aspect-ratio-item-bottom-right {
-		@include clay-css($card-aspect-ratio-item-bottom-right);
-	}
-
-	.aspect-ratio-item-bottom-center {
-		@include clay-css($card-aspect-ratio-item-bottom-center);
-	}
-
-	.aspect-ratio-item-bottom-left {
-		@include clay-css($card-aspect-ratio-item-bottom-left);
-	}
-
-	> hr {
-		margin-left: 0;
-		margin-right: 0;
-	}
-
 	> .list-group:first-child {
 		.list-group-item:first-child {
-			@include border-top-radius($card-border-radius);
+			border-top-left-radius: clay-enable-rounded($card-border-radius);
+			border-top-right-radius: clay-enable-rounded($card-border-radius);
 		}
 	}
 
 	> .list-group:last-child {
 		.list-group-item:last-child {
-			@include border-bottom-radius($card-border-radius);
+			border-bottom-left-radius: clay-enable-rounded($card-border-radius);
+			border-bottom-right-radius: clay-enable-rounded(
+				$card-border-radius
+			);
 		}
 	}
 }
 
 .card-body {
-	color: $card-color;
-
-	// Enable `flex-grow: 1` for decks and groups so that card blocks take up
-	// as much space as possible, ensuring footers are aligned to the bottom.
-
-	flex: 1 1 auto;
-
-	// Workaround for the image size bug in IE
-	// See: https://github.com/twbs/bootstrap/pull/28855
-
-	min-height: 1px;
-
-	padding-bottom: $card-body-padding-bottom;
-	padding-left: $card-body-padding-left;
-	padding-right: $card-body-padding-right;
-	padding-top: $card-body-padding-top;
+	@include clay-css($card-body);
 }
 
 .card-section-header {
-	color: $card-section-header-color;
-	font-size: $card-section-header-font-size;
-	font-weight: $card-section-header-font-weight;
-	line-height: $card-section-header-line-height;
-	margin-bottom: $card-section-header-margin-bottom;
-	padding: $card-section-header-padding;
-	text-transform: $card-section-header-text-transform;
+	@include clay-css($card-section-header);
 }
 
 // Card Title
@@ -115,24 +53,16 @@
 	@include clay-text-typography($card-title);
 }
 
-.card-title a {
-	@include clay-link($card-title-link);
-}
-
 // Card Subtitle
 
 .card-subtitle {
 	@include clay-text-typography($card-subtitle);
 }
 
-.card-subtitle a {
-	@include clay-link($card-subtitle-link);
-}
-
 // Card Text
 
-.card-text:last-child {
-	margin-bottom: 0;
+.card-text {
+	@include clay-text-typography($card-text);
 }
 
 // Card Link
@@ -149,32 +79,16 @@
 	}
 }
 
+// Card Divider
+
 .card-divider {
-	background-color: $card-divider-bg;
-	height: $card-divider-height;
-	margin-bottom: $card-divider-spacer-y;
-	margin-left: $card-divider-spacer-x;
-	margin-right: $card-divider-spacer-x;
-	margin-top: $card-divider-spacer-y;
+	@include clay-css($card-divider);
 }
 
 // Card Header
 
 .card-header {
-	background-color: $card-cap-bg;
-	border-bottom: $card-border-width solid $card-border-color;
-	color: $card-cap-color;
-
-	// Removes the default margin-bottom of <hN> (h1 - h6)
-
-	margin-bottom: 0;
-	padding: $card-spacer-y $card-spacer-x;
-
-	&:first-child {
-		@include border-radius(
-			$card-inner-border-radius $card-inner-border-radius 0 0
-		);
-	}
+	@include clay-card-section-variant($card-header);
 
 	+ .list-group {
 		.list-group-item:first-child {
@@ -200,15 +114,7 @@
 // Card Footer
 
 .card-footer {
-	background-color: $card-cap-bg;
-	border-top: $card-border-width solid $card-border-color;
-	padding: $card-spacer-y $card-spacer-x;
-
-	&:last-child {
-		@include border-radius(
-			0 0 $card-inner-border-radius $card-inner-border-radius
-		);
-	}
+	@include clay-card-section-variant($card-footer);
 }
 
 @if ($enable-bs4-deprecated) {

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/components/_type.scss

@@ -12,65 +12,51 @@ h6,
 .h4,
 .h5,
 .h6 {
-	color: $headings-color;
-	font-family: $headings-font-family;
-	font-weight: $headings-font-weight;
-	line-height: $headings-line-height;
-	margin-bottom: $headings-margin-bottom;
+	@include clay-css($headings);
+
+	@include clay-generate-media-breakpoints($headings);
 }
 
 h1,
 .h1 {
-	font-size: $h1-font-size;
+	@include clay-css($h1);
 
-	@include clay-scale-component {
-		font-size: $h1-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h1);
 }
 
 h2,
 .h2 {
-	font-size: $h2-font-size;
+	@include clay-css($h2);
 
-	@include clay-scale-component {
-		font-size: $h2-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h2);
 }
 
 h3,
 .h3 {
-	font-size: $h3-font-size;
+	@include clay-css($h3);
 
-	@include clay-scale-component {
-		font-size: $h3-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h3);
 }
 
 h4,
 .h4 {
-	font-size: $h4-font-size;
+	@include clay-css($h4);
 
-	@include clay-scale-component {
-		font-size: $h4-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h4);
 }
 
 h5,
 .h5 {
-	font-size: $h5-font-size;
+	@include clay-css($h5);
 
-	@include clay-scale-component {
-		font-size: $h5-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h5);
 }
 
 h6,
 .h6 {
-	font-size: $h6-font-size;
+	@include clay-css($h6);
 
-	@include clay-scale-component {
-		font-size: $h6-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h6);
 }
 
 .lead {
@@ -81,27 +67,27 @@ h6,
 // Type display classes
 
 .display-1 {
-	font-size: $display1-size;
-	font-weight: $display1-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-1);
+
+	@include clay-generate-media-breakpoints($display-1);
 }
 
 .display-2 {
-	font-size: $display2-size;
-	font-weight: $display2-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-2);
+
+	@include clay-generate-media-breakpoints($display-2);
 }
 
 .display-3 {
-	font-size: $display3-size;
-	font-weight: $display3-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-3);
+
+	@include clay-generate-media-breakpoints($display-3);
 }
 
 .display-4 {
-	font-size: $display4-size;
-	font-weight: $display4-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-4);
+
+	@include clay-generate-media-breakpoints($display-4);
 }
 
 // Horizontal rules