@clayui/css 3.95.2 → 3.98.0

package/src/scss/mixins/_globals.scss

@@ -241,6 +241,18 @@
 
 		$enabled: setter(map-get($map, enabled), true);
 
+		$_prefers-reduced-motion-media-query: if(
+			variable-exists(enable-prefers-reduced-motion-media-query),
+			$enable-prefers-reduced-motion-media-query,
+			if(
+				variable-exists(
+					cadmin-enable-prefers-reduced-motion-media-query
+				),
+				$cadmin-enable-prefers-reduced-motion-media-query,
+				true
+			)
+		);
+
 		@if ($enabled) {
 			@each $key, $value in $map {
 				@if ($value == clay-unset or $value == c-unset) {
@@ -264,19 +276,20 @@
 					animation: $value;
 
 					@if ($value != 'none' and $value != null) {
+						@if ($_prefers-reduced-motion-media-query) {
+							@media (prefers-reduced-motion: reduce) {
+								animation: none;
+							}
+						}
+
 						@at-root {
 							$selector: '.c-prefers-reduced-motion &';
 
 							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-after(
-									'.cadmin ',
+								$selector: clay-insert-before(
+									'.cadmin',
 									'.c-prefers-reduced-motion '
 								);
-								$selector: clay-insert-after(
-									'.cadmin.',
-									'c-prefers-reduced-motion.',
-									$selector
-								);
 							}
 
 							#{$selector} {
@@ -292,27 +305,43 @@
 				} @else if ($key == 'overflow-wrap') {
 					overflow-wrap: $value;
 					word-wrap: $value;
+				} @else if ($key == 'text-overflow') {
+					@if ($value == 'ellipsis') {
+						text-overflow: $value;
+
+						@at-root {
+							$selector: '.c-prefers-expanded-text &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-before(
+									'.cadmin',
+									'.c-prefers-expanded-text '
+								);
+							}
+
+							#{$selector} {
+								@extend %c-prefers-expanded-text !optional;
+							}
+						}
+					}
 				} @else if ($key == 'transition') {
 					transition: $value;
 
 					@if ($value != 'none' and $value != null) {
-						@media (prefers-reduced-motion: reduce) {
-							transition: none;
+						@if ($_prefers-reduced-motion-media-query) {
+							@media (prefers-reduced-motion: reduce) {
+								transition: none;
+							}
 						}
 
 						@at-root {
 							$selector: '.c-prefers-reduced-motion &';
 
 							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-after(
-									'.cadmin ',
+								$selector: clay-insert-before(
+									'.cadmin',
 									'.c-prefers-reduced-motion '
 								);
-								$selector: clay-insert-after(
-									'.cadmin.',
-									'c-prefers-reduced-motion.',
-									$selector
-								);
 							}
 
 							#{$selector} {
@@ -344,7 +373,7 @@
 	@each $key, $value in $map {
 		@if not clay-is-map-unset($value) {
 			@if (type-of($value) == 'map') {
-				$valid-prefixes: '#', '&', '.', '>', '@';
+				$valid-prefixes: '#', '&', '.', '>', '@', '~', '+', '[';
 
 				$selector: if(
 					index($valid-prefixes, str-slice($key, 1, 1)),

package/src/scss/mixins/_input-groups.scss

@@ -300,6 +300,14 @@
 		@if ($enabled) {
 			@include clay-css($map);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
 			&.focus {
 				@include clay-input-group-item-variant(
 					map-deep-get($map, focus)

package/src/scss/mixins/_links.scss

@@ -845,6 +845,50 @@
 				&::after {
 					@include clay-css(map-get($show, after));
 				}
+
+				&:hover {
+					$_show-hover: setter(map-get($show, hover), ());
+
+					@include clay-css($_show-hover);
+
+					&::before {
+						@include clay-css(map-get($_show-hover, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_show-hover, after));
+					}
+				}
+
+				&:focus {
+					$_show-focus: setter(map-get($show, focus), ());
+
+					@include clay-css($_show-focus);
+
+					&::before {
+						@include clay-css(map-get($_show-focus, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_show-focus, after));
+					}
+				}
+
+				.inline-item {
+					@include clay-css(map-get($show, inline-item));
+				}
+
+				.inline-item-before {
+					@include clay-css(map-get($show, inline-item-before));
+				}
+
+				.inline-item-middle {
+					@include clay-css(map-get($show, inline-item-middle));
+				}
+
+				.inline-item-after {
+					@include clay-css(map-get($show, inline-item-after));
+				}
 			}
 
 			@if (map-get($c-inner, enabled)) {

package/src/scss/mixins/_transition.scss

@@ -37,15 +37,10 @@
 			$selector: '.c-prefers-reduced-motion &';
 
 			@if (variable-exists(cadmin-selector)) {
-				$selector: clay-insert-after(
-					'.cadmin ',
+				$selector: clay-insert-before(
+					'.cadmin',
 					'.c-prefers-reduced-motion '
 				);
-				$selector: clay-insert-after(
-					'.cadmin.',
-					'c-prefers-reduced-motion.',
-					$selector
-				);
 			}
 
 			#{$selector} {

package/src/scss/mixins/_type.scss

@@ -50,9 +50,13 @@
 /// A Bootstrap 4 mixin for displaying ellipsis if text overflows its container. Requires other CSS properties to function properly depending on the `display` property. Clay CSS `truncate-text-inline` with `text-truncate` is a more fail safe pattern.
 
 @mixin text-truncate() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css(
+		(
+			overflow: hidden,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		)
+	);
 }
 
 // Highlight inline text

package/src/scss/variables/_buttons.scss

@@ -45,6 +45,7 @@ $btn: map-deep-merge(
 		font-family: $btn-font-family,
 		font-size: $btn-font-size,
 		font-weight: $btn-font-weight,
+		letter-spacing: inherit,
 		line-height: $btn-line-height,
 		padding-bottom: $btn-padding-y,
 		padding-left: $btn-padding-x,
@@ -350,6 +351,7 @@ $btn-unstyled: map-deep-merge(
 		cursor: $btn-cursor,
 		font-size: inherit,
 		font-weight: inherit,
+		letter-spacing: inherit,
 		line-height: inherit,
 		max-width: 100%,
 		padding: 0,

package/src/scss/variables/_dropdowns.scss

@@ -969,6 +969,55 @@ $dropdown-menu-palette: map-deep-merge(
 					padding-right: 1.5rem,
 				),
 			),
+			dropdown-item-scroll: (
+				font-size: 1rem,
+				height: 2rem,
+				padding: 0,
+				position: absolute,
+				text-align: center,
+				z-index: 1,
+				hover: (
+					background-color: $dropdown-link-hover-bg,
+					background-image: none,
+					color: $dropdown-link-hover-color,
+				),
+				focus: (
+					background-color: $dropdown-link-hover-bg,
+					background-image: none,
+					color: $dropdown-link-hover-color,
+				),
+				active: (
+					background-color: $dropdown-link-active-bg,
+					background-image: none,
+					color: $dropdown-link-active-color,
+				),
+				disabled: (
+					background-color: transparent,
+					background-image: none,
+					color: $dropdown-link-disabled-color,
+					cursor: $dropdown-item-disabled-cursor,
+				),
+			),
+			dropdown-item-scroll-up: (
+				background-image: (
+					linear-gradient(
+						to bottom,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				top: $dropdown-padding-y,
+			),
+			dropdown-item-scroll-down: (
+				background-image: (
+					linear-gradient(
+						to top,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				bottom: $dropdown-padding-y,
+			),
 			dropdown-divider: (
 				margin: 0.3125rem 0,
 			),
@@ -985,6 +1034,11 @@ $dropdown-menu-palette: map-deep-merge(
 				),
 			),
 		),
+		'.dropdown-menu-select.dropdown-menu-height-lg': (
+			inline-scroller: (
+				max-height: 432px,
+			),
+		),
 	),
 	$dropdown-menu-palette
 );

package/src/scss/variables/_forms.scss

@@ -70,13 +70,14 @@ $input: map-deep-merge(
 		font-size: $input-font-size,
 		font-weight: $input-font-weight,
 		height: $input-height,
+		letter-spacing: inherit,
 		line-height: $input-line-height,
 		min-width: 0,
 		padding-bottom: $input-padding-y,
 		padding-left: $input-padding-x,
 		padding-right: $input-padding-x,
 		padding-top: $input-padding-y,
-		transition: $input-transition,
+		transition: clay-enable-transitions($input-transition),
 		width: 100%,
 		mobile: (
 			font-size: $input-font-size-mobile,
@@ -118,6 +119,36 @@ $input-palette: () !default;
 
 $input-plaintext-color: $body-color !default;
 
+$input-plaintext: () !default;
+$input-plaintext: map-deep-merge(
+	(
+		background-clip: border-box,
+		background-color: transparent,
+		border-bottom-width: $input-border-bottom-width,
+		border-color: transparent,
+		border-left-width: $input-border-left-width,
+		border-right-width: $input-border-right-width,
+		border-style: solid,
+		border-top-width: $input-border-top-width,
+		color: $input-plaintext-color,
+		display: block,
+		font-size: $input-font-size,
+		height: $input-height,
+		letter-spacing: inherit,
+		line-height: $input-line-height,
+		// match inputs if this class comes on inputs with default margins
+		margin-bottom: 0,
+		min-width: 0,
+		padding-bottom: $input-padding-y,
+		padding-left: 0,
+		padding-right: 0,
+		padding-top: $input-padding-y,
+		text-overflow: ellipsis,
+		width: 100%,
+	),
+	$input-plaintext
+);
+
 /// @deprecated with no replacement
 
 $input-height-border: calc(
@@ -339,7 +370,7 @@ $input-plaintext-readonly: map-deep-merge(
 	(
 		border-radius: $input-border-radius,
 		outline: 0,
-		transition: $input-transition,
+		transition: clay-enable-transitions($input-transition),
 		focus: (
 			box-shadow: $input-focus-box-shadow,
 		),
@@ -1433,9 +1464,23 @@ $input-group-item: map-deep-merge(
 		margin-left: $input-group-item-margin-left,
 		width: 1%,
 		word-wrap: break-word,
+		after: (
+			border-radius: inherit,
+			bottom: 0,
+			content: '',
+			display: block,
+			left: 0,
+			pointer-events: none,
+			position: absolute,
+			right: 0,
+			top: 0,
+			transition: clay-enable-transitions($input-transition),
+		),
 		focus: (
 			border-radius: clay-enable-rounded($input-border-radius),
-			box-shadow: $input-focus-box-shadow,
+			after: (
+				box-shadow: $input-focus-box-shadow,
+			),
 			input-group-prepend: (
 				border-bottom-right-radius: clay-enable-rounded(0),
 				border-top-right-radius: clay-enable-rounded(0),

package/src/scss/variables/_icons.scss

@@ -65,7 +65,7 @@ $collapse-icon-position-bottom: null !default;
 $collapse-icon-position-left: null !default;
 $collapse-icon-position-right: 0.9375rem !default; // 15px
 $collapse-icon-position-top: clay-collapse-icon-align(
-	$nav-link-padding-y,
+	if(variable-exists(nav-link-padding-y), $nav-link-padding-y, 0.5rem),
 	0.0625rem,
 	0.9375em
 ) !default;

package/src/scss/variables/_menubar.scss

@@ -9,9 +9,7 @@ $menubar-vertical-expand-md: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			sm: (
-				margin-bottom: 1.5rem,
-				margin-left: math-sign($grid-gutter-width * 0.5),
-				margin-right: math-sign($grid-gutter-width * 0.5),
+				margin-bottom: 1rem,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
@@ -38,11 +36,13 @@ $menubar-vertical-expand-md: map-deep-merge(
 					border-color: transparent,
 					border-style: solid,
 					border-width: 0.0625rem,
-					display: flex,
+					display: inline-flex,
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
 					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -75,7 +75,6 @@ $menubar-vertical-transparent-md: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			sm: (
-				background-color: $gray-100,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,
@@ -174,9 +173,7 @@ $menubar-vertical-expand-lg: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			md: (
-				margin-bottom: 1.5rem,
-				margin-left: math-sign($grid-gutter-width * 0.5),
-				margin-right: math-sign($grid-gutter-width * 0.5),
+				margin-bottom: 1rem,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
@@ -203,11 +200,13 @@ $menubar-vertical-expand-lg: map-deep-merge(
 					border-color: transparent,
 					border-style: solid,
 					border-width: 0.0625rem,
-					display: flex,
+					display: inline-flex,
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
 					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -240,7 +239,6 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			md: (
-				background-color: $gray-100,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,

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;