@clayui/css 3.95.1 → 3.97.0

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

@@ -40,6 +40,8 @@ $multi-step-divider-spacer-x: 0 !default;
 $multi-step-divider-top: ($multi-step-divider-height * 0.5) +
 	($multi-step-icon-size * 0.5) !default;
 
+// Multi Step Indicator
+
 $multi-step-indicator-width: $multi-step-icon-size +
 	($multi-step-divider-spacer-x * 2) !default;
 
@@ -48,6 +50,29 @@ $multi-step-indicator-label-font-size: $font-size-base !default;
 $multi-step-indicator-label-font-weight: null !default;
 $multi-step-indicator-label-max-width: 100px !default;
 
+$multi-step-indicator: () !default;
+$multi-step-indicator: map-deep-merge(
+	(
+		position: relative,
+		width: $multi-step-indicator-width,
+		multi-step-indicator-label: (
+			color: $multi-step-indicator-label-color,
+			font-size: $multi-step-indicator-label-font-size,
+			font-weight: $multi-step-indicator-label-font-weight,
+			left: 50%,
+			max-width: $multi-step-indicator-label-max-width,
+			overflow: hidden,
+			position: absolute,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+		),
+	),
+	$multi-step-indicator
+);
+
+// Multi Step Title
+
 $multi-step-title-color: null !default;
 $multi-step-title-font-size: $font-size-base !default;
 $multi-step-title-font-weight: null !default;
@@ -58,6 +83,24 @@ $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
 
+$multi-step-title-center: () !default;
+$multi-step-title-center: map-deep-merge(
+	(
+		multi-step-title: (
+			margin-left: calc(#{$multi-step-icon-size} * 0.5),
+			max-width: $multi-step-title-max-width,
+			overflow: hidden,
+			position: relative,
+			text-align: center,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+			width: auto,
+		),
+	),
+	$multi-step-title-center
+);
+
 // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
 
 $multi-step-item-error: () !default;
@@ -67,7 +110,6 @@ $multi-step-item-error: map-deep-merge(
 			background-color: $danger,
 			background-image: clay-icon(times, $white),
 			color: $white,
-			text-indent: -100px,
 			data-multi-step-icon: (
 				before: (
 					content: none,

package/src/scss/variables/_navbar.scss

@@ -15,6 +15,20 @@ $navbar-title-text-transform: null !default;
 $navbar-text-truncate-spacer-right: 1.5625rem !default; // 25px
 $navbar-text-truncate-max-width: 12.5rem !default; // 200px
 
+$navbar-text-truncate: () !default;
+$navbar-text-truncate: map-deep-merge(
+	(
+		display: inline-block,
+		max-width: 100%,
+		overflow: hidden,
+		text-decoration: inherit,
+		text-overflow: ellipsis,
+		vertical-align: bottom,
+		white-space: nowrap,
+	),
+	$navbar-text-truncate
+);
+
 // Navbar Brand
 
 $navbar-brand-font-size: $font-size-lg !default;

package/src/scss/variables/_utilities.scss

@@ -360,41 +360,6 @@ $border-theme-colors: map-deep-merge(
 $displays: none, inline, inline-block, block, grid, contents, table, table-row,
 	table-cell, flex, inline-flex !default;
 
-$displays-c-prefers-reduced-motion: () !default;
-$displays-c-prefers-reduced-motion: map-deep-merge(
-	(
-		d-block-c-prefers-reduced-motion: (
-			display: none !important,
-		),
-		d-inline-block-c-prefers-reduced-motion: (
-			display: none !important,
-		),
-		'@media (prefers-reduced-motion: reduce)': (
-			d-none-c-prefers-reduced-motion: (
-				display: none !important,
-			),
-			d-block-c-prefers-reduced-motion: (
-				display: block !important,
-			),
-			d-inline-block-c-prefers-reduced-motion: (
-				display: inline-block !important,
-			),
-		),
-		c-prefers-reduced-motion: (
-			d-none-c-prefers-reduced-motion: (
-				display: none !important,
-			),
-			d-block-c-prefers-reduced-motion: (
-				display: block !important,
-			),
-			d-inline-block-c-prefers-reduced-motion: (
-				display: inline-block !important,
-			),
-		),
-	),
-	$displays-c-prefers-reduced-motion
-);
-
 // Overflow
 
 $overflows: auto, hidden !default;
@@ -561,7 +526,117 @@ $text-decorations: map-deep-merge(
 	$text-decorations
 );
 
-// Transitions
+// Text Truncate
+
+$text-truncate: () !default;
+$text-truncate: map-merge(
+	(
+		display: block,
+		overflow: hidden,
+		text-overflow: ellipsis,
+		white-space: nowrap,
+	),
+	$text-truncate
+);
+
+// Text Truncate Inline
+
+$text-truncate-inline: () !default;
+$text-truncate-inline: map-deep-merge(
+	(
+		display: inline-flex,
+		max-width: 100%,
+		text-truncate: (
+			display: inline-block,
+			max-width: 100%,
+			overflow: hidden,
+			text-overflow: ellipsis,
+			vertical-align: bottom,
+			white-space: nowrap,
+			word-wrap: normal,
+		),
+	),
+	$text-truncate-inline
+);
+
+// C Prefers
+
+$c-prefers-link-underline: () !default;
+$c-prefers-link-underline: map-deep-merge(
+	(
+		'.c-prefers-link-underline': (
+			'[href]:not(.disabled):not([role="button"])': (
+				text-decoration: underline !important,
+			),
+			'.btn-monospaced, .nav-btn-monospaced, .nav-link-monospaced': (
+				'&[href]:not(.disabled):not([role="button"]):not([role="tab"])::after':
+				(
+					content: '\00a0\00a0\00a0',
+					position: absolute,
+					text-decoration: underline !important,
+				),
+			),
+			'.multi-step-item.active, .multi-step-item.complete, .multi-step-item.error, .dropdown':
+			(
+				'.multi-step-icon[href]:not([role="button"])::after': (
+					content: '\00a0\00a0\00a0',
+					position: absolute,
+					text-decoration: underline !important,
+				),
+			),
+			'.multi-step-item.disabled .multi-step-icon[href]:not([role="button"])::after':
+			(
+				text-decoration: none !important,
+			),
+		),
+	),
+	$c-prefers-link-underline
+);
+
+$c-prefers-letter-spacing: () !default;
+$c-prefers-letter-spacing: map-deep-merge(
+	(
+		'.c-prefers-letter-spacing-1': (
+			letter-spacing: 1px !important,
+		),
+	),
+	$c-prefers-letter-spacing
+);
+
+$displays-c-prefers-reduced-motion: () !default;
+$displays-c-prefers-reduced-motion: map-deep-merge(
+	(
+		d-block-c-prefers-reduced-motion: (
+			display: none !important,
+		),
+		d-inline-block-c-prefers-reduced-motion: (
+			display: none !important,
+		),
+		'@media (prefers-reduced-motion: reduce)': (
+			d-none-c-prefers-reduced-motion: (
+				display: none !important,
+			),
+			d-block-c-prefers-reduced-motion: (
+				display: block !important,
+			),
+			d-inline-block-c-prefers-reduced-motion: (
+				display: inline-block !important,
+			),
+		),
+		c-prefers-reduced-motion: (
+			d-none-c-prefers-reduced-motion: (
+				display: none !important,
+			),
+			d-block-c-prefers-reduced-motion: (
+				display: block !important,
+			),
+			d-inline-block-c-prefers-reduced-motion: (
+				display: inline-block !important,
+			),
+		),
+	),
+	$displays-c-prefers-reduced-motion
+);
 
 $c-prefers-reduced-motion: () !default;
 $c-prefers-reduced-motion: map-merge(