@clayui/css 3.45.0 → 3.48.0

package/src/scss/variables/_list-group.scss

@@ -47,6 +47,8 @@ $list-group-header-bg: $list-group-bg !default;
 $list-group-header-padding-x: $list-group-item-padding-x !default;
 $list-group-header-padding-y: $list-group-item-padding-y !default;
 
+// .list-group-header-title
+
 $list-group-header-title: () !default;
 $list-group-header-title: map-deep-merge(
 	(
@@ -58,14 +60,16 @@ $list-group-header-title: map-deep-merge(
 	$list-group-header-title
 );
 
-// List Group Title
+// .list-group-title
 
 $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge(
 	(
 		color: $gray-900,
 		max-width: 100%,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-title-link
 );
@@ -79,20 +83,22 @@ $list-group-title: map-deep-merge(
 		line-height: $line-height-base,
 		margin-bottom: 0,
 		margin-top: $list-group-item-flex-list-group-title-offset-top,
-		clay-link: $list-group-title-link
+		href: $list-group-title-link
 	),
 	$list-group-title
 );
 
 $list-group-title-active-color: $list-group-active-color !default;
 
-// List Group Subtitle
+// .list-group-subtitle
 
 $list-group-subtitle-link: () !default;
 $list-group-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtitle-link
 );
@@ -102,18 +108,20 @@ $list-group-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtitle-link,
+		href: $list-group-subtitle-link,
 	),
 	$list-group-subtitle
 );
 
-// List Group Text
+// .list-group-text
 
 $list-group-text-link: () !default;
 $list-group-text-link: map-deep-merge(
 	(
 		color: $gray-900,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-text-link
 );
@@ -123,20 +131,22 @@ $list-group-text: map-deep-merge(
 	(
 		color: $gray-900,
 		margin-bottom: 0,
-		clay-link: $list-group-text-link,
+		href: $list-group-text-link,
 	),
 	$list-group-text
 );
 
 $list-group-text-active-color: $list-group-active-color !default;
 
-// List Group Subtext
+// .list-group-subtext
 
 $list-group-subtext-link: () !default;
 $list-group-subtext-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtext-link
 );
@@ -146,7 +156,7 @@ $list-group-subtext: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtext-link,
+		href: $list-group-subtext-link,
 	),
 	$list-group-subtext
 );

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/_sidebar.scss

@@ -3,21 +3,21 @@ $sidebar-padding-left: 1rem !default; // 16px
 $sidebar-padding-right: 1rem !default; // 16px
 $sidebar-padding-top: 1rem !default; // 16px
 
-// Sidebar Header Title
+// .sidebar-header .component-title
 
 $sidebar-header-component-title: () !default;
 $sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 1.5rem,
 		font-weight: $font-weight-semi-bold,
-		clay-link: (
+		href: (
 			color: $gray-900,
 		),
 	),
 	$sidebar-header-component-title
 );
 
-// Sidebar Header Subtitle
+// .sidebar-header .component-subtitle
 
 $sidebar-header-component-subtitle: () !default;
 $sidebar-header-component-subtitle: map-deep-merge(

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

@@ -177,6 +177,13 @@ $table-title-link: map-deep-merge(
 	$table-title-link
 );
 
+$table-title: map-deep-merge(
+	$table-title,
+	(
+		href: $table-title-link,
+	)
+);
+
 // Table Link
 
 $table-link: () !default;
@@ -386,6 +393,13 @@ $table-list-title-link: map-deep-merge(
 	$table-list-title-link
 );
 
+$table-list-title: map-deep-merge(
+	$table-list-title,
+	(
+		href: $table-list-title-link,
+	)
+);
+
 // Table List Link
 
 $table-list-link: () !default;

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: (

package/src/scss/variables/_treeview.scss

@@ -52,6 +52,7 @@ $treeview: map-merge(
 			),
 		),
 		treeview-link: (
+			background-color: transparent,
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -62,6 +63,7 @@ $treeview: map-merge(
 			min-width: 100%,
 			padding: 0,
 			position: relative,
+			text-align: left,
 			user-select: none,
 			treeview-dropping-bottom: (
 				box-shadow: 0 2px 0 0 $primary-l1,
@@ -80,6 +82,9 @@ $treeview: map-merge(
 				box-shadow: $component-focus-inset-box-shadow,
 				outline: 0,
 			),
+			disabled: (
+				cursor: $disabled-cursor,
+			),
 		),
 		component-action: (
 			display: none,
@@ -160,6 +165,10 @@ $treeview-light: map-deep-merge(
 			hover: (
 				color: $primary,
 			),
+			disabled: (
+				color: $secondary,
+				opacity: 0.5,
+			),
 			btn-secondary: (
 				background-color: $white,
 			),
@@ -178,6 +187,10 @@ $treeview-light: map-deep-merge(
 				background-color: $gray-200,
 				color: $gray-900,
 			),
+			disabled: (
+				background-color: transparent,
+				color: rgba($gray-600, 0.5),
+			),
 			show: (
 				background-color: null,
 				color: null,
@@ -195,6 +208,10 @@ $treeview-dark: map-deep-merge(
 			hover: (
 				color: $primary-l1,
 			),
+			disabled: (
+				color: $secondary-l1,
+				opacity: 0.5,
+			),
 		),
 		treeview-link: (
 			color: $secondary-l1,
@@ -207,7 +224,7 @@ $treeview-dark: map-deep-merge(
 			),
 			disabled: (
 				background-color: transparent,
-				color: rgba($secondary-l1, 0.04),
+				color: rgba($secondary-l1, 0.5),
 			),
 			show: (
 				background-color: null,
@@ -216,6 +233,9 @@ $treeview-dark: map-deep-merge(
 		),
 		component-action: (
 			color: $secondary-l1,
+			disabled: (
+				color: $secondary-l1,
+			),
 		),
 	),
 	$treeview-dark

package/src/scss/variables/_utilities.scss

@@ -305,6 +305,48 @@ $overflows: auto, hidden !default;
 
 $positions: static, relative, absolute, fixed, sticky !default;
 
+// Font Sizes
+
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+	(
+		text-1: (
+			font-size: 0.625rem,
+		),
+		text-2: (
+			font-size: 0.75rem,
+		),
+		text-3: (
+			font-size: 0.875rem,
+		),
+		text-4: (
+			font-size: 1rem,
+		),
+		text-5: (
+			font-size: 1.125rem,
+		),
+		text-6: (
+			font-size: 1.25rem,
+		),
+		text-7: (
+			font-size: 1.5rem,
+		),
+		text-8: (
+			font-size: 1.75rem,
+		),
+		text-9: (
+			font-size: 2rem,
+		),
+		text-10: (
+			font-size: 2.25rem,
+		),
+		text-11: (
+			font-size: 2.5rem,
+		),
+	),
+	$font-sizes
+);
+
 // Text
 
 $text-theme-colors: () !default;