@clayui/css 3.95.2 → 3.98.0

package/src/scss/cadmin/components/_date-picker.scss

@@ -28,6 +28,10 @@
 	select.form-control {
 		@include clay-select-variant($cadmin-date-picker-nav-select);
 	}
+
+	.form-control-select {
+		@include clay-select-variant($cadmin-date-picker-nav-select);
+	}
 }
 
 .date-picker-nav-item {

package/src/scss/cadmin/components/_forms.scss

@@ -142,31 +142,7 @@ fieldset[disabled] .form-control {
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-	background-clip: border-box;
-	background-color: transparent;
-	border-color: transparent;
-	border-style: solid;
-
-	border-bottom-width: $cadmin-input-border-bottom-width;
-	border-left-width: $cadmin-input-border-left-width;
-	border-right-width: $cadmin-input-border-right-width;
-	border-top-width: $cadmin-input-border-top-width;
-	color: $cadmin-input-plaintext-color;
-	display: block;
-	font-size: $cadmin-input-font-size;
-	height: $cadmin-input-height;
-	line-height: $cadmin-input-line-height;
-
-	// match inputs if this class comes on inputs with default margins
-
-	margin-bottom: 0;
-	min-width: 0;
-	padding-bottom: $cadmin-input-padding-y;
-	padding-left: 0;
-	padding-right: 0;
-	padding-top: $cadmin-input-padding-y;
-	text-overflow: ellipsis;
-	width: 100%;
+	@include clay-form-control-variant($cadmin-input-plaintext);
 
 	@include clay-scale-component {
 		font-size: $cadmin-input-font-size-mobile;

package/src/scss/cadmin/components/_grid.scss

@@ -248,18 +248,6 @@
 	.container-form-lg,
 	&.container-form-lg {
 		@include clay-container($cadmin-container-form-lg);
-
-		.menubar-vertical-expand-lg {
-			$cadmin-container-form-lg-breakpoint-down: clay-breakpoint-prev(
-				map-get($cadmin-container-form-lg, breakpoint-up)
-			);
-
-			@include media-breakpoint-down(
-				$cadmin-container-form-lg-breakpoint-down
-			) {
-				margin-top: -(map-get($cadmin-container-form-lg, padding-top-mobile));
-			}
-		}
 	}
 
 	.container-view,

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

@@ -31,17 +31,7 @@
 }
 
 .multi-step-title-center {
-	.multi-step-title {
-		margin-left: $cadmin-multi-step-icon-size * 0.5;
-		max-width: $cadmin-multi-step-title-max-width;
-		overflow: hidden;
-		position: relative;
-		text-align: center;
-		text-overflow: ellipsis;
-		transform: translateX(-50%);
-		white-space: nowrap;
-		width: auto;
-	}
+	@include clay-map-to-css($cadmin-multi-step-title-center);
 }
 
 .multi-step-item {

package/src/scss/cadmin/components/_navbar.scss

@@ -135,12 +135,7 @@
 }
 
 .navbar-text-truncate {
-	display: inline-block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: bottom;
-	white-space: nowrap;
+	@include clay-map-to-css($cadmin-navbar-text-truncate);
 }
 
 // Navbar Toggler

package/src/scss/cadmin/components/_progress-bars.scss

@@ -61,6 +61,12 @@
 				animation: none;
 			}
 		}
+
+		@at-root {
+			#{clay-insert-before('.cadmin', '.c-prefers-reduced-motion ')} {
+				animation: none;
+			}
+		}
 	}
 }
 

package/src/scss/cadmin/components/_type.scss

@@ -301,24 +301,3 @@ strong {
 .c-kbd-dark {
 	@include clay-css($cadmin-c-kbd-dark);
 }
-
-// Text Truncate
-
-.text-truncate {
-	display: block;
-}
-
-.text-truncate-inline {
-	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;
-	}
-}

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -194,10 +194,6 @@
 	display: none !important;
 }
 
-// Display C Reduced Motion
-
-@include clay-map-to-css($cadmin-displays-c-prefers-reduced-motion);
-
 // Display Print
 
 @media print {
@@ -678,10 +674,14 @@
 	white-space: nowrap !important;
 }
 
+// Text Truncate
+
 .text-truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css($cadmin-text-truncate);
+}
+
+.text-truncate-inline {
+	@include clay-map-to-css($cadmin-text-truncate-inline);
 }
 
 // Responsive Text Alignment
@@ -857,8 +857,28 @@
 	visibility: hidden !important;
 }
 
-// Transitions
+@at-root {
+	// C Prefers Link Underline
+
+	html#{$cadmin-selector} {
+		@include clay-map-to-css($cadmin-c-prefers-link-underline);
+	}
 
-.c-prefers-reduced-motion {
-	@include clay-css($cadmin-c-prefers-reduced-motion);
+	// C Prefers Letter Spacing
+
+	html#{$cadmin-selector} {
+		@include clay-map-to-css($cadmin-c-prefers-letter-spacing);
+	}
+
+	// Display C Reduced Motion
+
+	html#{$cadmin-selector} {
+		@include clay-map-to-css($cadmin-displays-c-prefers-reduced-motion);
+	}
+
+	// C Prefers Reduced Motion
+
+	html#{$cadmin-selector} .c-prefers-reduced-motion .cadmin {
+		@include clay-css($cadmin-c-prefers-reduced-motion);
+	}
 }

package/src/scss/cadmin/variables/_buttons.scss

@@ -24,7 +24,7 @@ $cadmin-btn-active-box-shadow: null !default;
 $cadmin-btn-disabled-cursor: $cadmin-disabled-cursor !default;
 $cadmin-btn-disabled-opacity: $cadmin-component-disabled-opacity !default;
 
-$cadmin-btn-inline-item-font-size: 16px !default; // 16px
+$cadmin-btn-inline-item-font-size: null !default;
 
 $cadmin-btn-section-font-size: 11px !default; // 11px
 $cadmin-btn-section-font-weight: $cadmin-font-weight-semi-bold !default;
@@ -45,6 +45,7 @@ $cadmin-btn: map-deep-merge(
 		font-family: $cadmin-btn-font-family,
 		font-size: $cadmin-btn-font-size,
 		font-weight: $cadmin-btn-font-weight,
+		letter-spacing: inherit,
 		line-height: $cadmin-btn-line-height,
 		padding-bottom: $cadmin-btn-padding-y,
 		padding-left: $cadmin-btn-padding-x,
@@ -104,6 +105,9 @@ $cadmin-btn: map-deep-merge(
 			font-weight: $cadmin-btn-section-font-weight,
 			line-height: $cadmin-btn-section-line-height,
 		),
+		lexicon-icon: (
+			font-size: 16px,
+		),
 	),
 	$cadmin-btn
 );
@@ -115,7 +119,7 @@ $cadmin-btn-font-size-lg: $cadmin-font-size-lg !default; // 18px
 $cadmin-btn-line-height-lg: $cadmin-input-btn-line-height-lg !default;
 $cadmin-btn-padding-x-lg: 24px !default; // 24px
 $cadmin-btn-padding-y-lg: 9.5px !default; // 9.5px
-$cadmin-btn-inline-item-font-size-lg: $cadmin-font-size-lg !default; // 18px
+$cadmin-btn-inline-item-font-size-lg: null !default; // 18px
 $cadmin-btn-section-font-size-lg: 13px !default; // 13px
 
 $cadmin-btn-font-size-lg-mobile: null !default;
@@ -145,6 +149,9 @@ $cadmin-btn-lg: map-deep-merge(
 		btn-section: (
 			font-size: $cadmin-btn-section-font-size-lg,
 		),
+		lexicon-icon: (
+			font-size: $cadmin-font-size-lg,
+		),
 	),
 	$cadmin-btn-lg
 );
@@ -331,6 +338,9 @@ $cadmin-btn-monospaced-sizes: map-deep-merge(
 			font-size: map-deep-get($cadmin-btn-sizes, btn-xs, font-size),
 			height: 1.5rem,
 			width: 1.4rem,
+			lexicon-icon: (
+				font-size: inherit,
+			),
 		),
 		btn-monospaced: $cadmin-btn-monospaced,
 		btn-monospaced-lg: $cadmin-btn-monospaced-lg,

package/src/scss/cadmin/variables/_forms.scss

@@ -72,6 +72,7 @@ $cadmin-input: map-deep-merge(
 		font-size: $cadmin-input-font-size,
 		font-weight: $cadmin-input-font-weight,
 		height: $cadmin-input-height,
+		letter-spacing: inherit,
 		line-height: $cadmin-input-line-height,
 		min-width: 0,
 		padding-bottom: $cadmin-input-padding-y,
@@ -120,6 +121,36 @@ $cadmin-input-palette: () !default;
 
 $cadmin-input-plaintext-color: $cadmin-body-color !default;
 
+$cadmin-input-plaintext: () !default;
+$cadmin-input-plaintext: map-deep-merge(
+	(
+		background-clip: border-box,
+		background-color: transparent,
+		border-bottom-width: $cadmin-input-border-bottom-width,
+		border-color: transparent,
+		border-left-width: $cadmin-input-border-left-width,
+		border-right-width: $cadmin-input-border-right-width,
+		border-style: solid,
+		border-top-width: $cadmin-input-border-top-width,
+		color: $cadmin-input-plaintext-color,
+		display: block,
+		font-size: $cadmin-input-font-size,
+		height: $cadmin-input-height,
+		letter-spacing: inherit,
+		line-height: $cadmin-input-line-height,
+		// match inputs if this class comes on inputs with default margins
+		margin-bottom: 0,
+		min-width: 0,
+		padding-bottom: $cadmin-input-padding-y,
+		padding-left: 0,
+		padding-right: 0,
+		padding-top: $cadmin-input-padding-y,
+		text-overflow: ellipsis,
+		width: 100%,
+	),
+	$cadmin-input-plaintext
+);
+
 // Deprecated
 
 $cadmin-input-height-border: calc(

package/src/scss/cadmin/variables/_menubar.scss

@@ -9,22 +9,14 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			sm: (
-				align-items: center,
-				display: flex,
-				flex-wrap: wrap,
-				justify-content: space-between,
-				margin-bottom: 24px,
-				margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
-				margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
+				margin-bottom: 16px,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
 					border-width: 1px,
 					display: none,
-					left: -1px,
-					position: absolute,
-					right: -1px,
+					position: relative,
 					top: 100%,
 					z-index:
 						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
@@ -50,6 +42,8 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 					padding-left: 8px,
 					padding-right: 8px,
 					c-inner: (
+						margin-left: -8px,
+						margin-right: -8px,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -67,21 +61,34 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 	(
 		nav-link: (
 			border-radius: $cadmin-border-radius,
+			color: $cadmin-gray-600,
+			letter-spacing: 0.02em,
+			margin-bottom: 4px,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
-			color: $cadmin-gray-600,
-			margin-bottom: 0.25rem,
+			before: (
+				border-radius: $cadmin-border-radius 0 0 $cadmin-border-radius,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+			),
 			hover: (
 				background-color: rgba($cadmin-gray-900, 0.04),
-				box-shadow: inset 0.125rem 0 0 0 $cadmin-secondary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				letter-spacing: 0,
+				before: (
+					background: $cadmin-secondary-l0,
+					width: 3px,
+				),
 			),
 			focus: (
 				background-color: c-unset,
-				box-shadow: $cadmin-component-focus-inset-box-shadow,
 				color: $cadmin-gray-900,
 				outline: 0,
 				after: (
@@ -97,33 +104,53 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 					top: 0,
 				),
 			),
-			active: (
-				color: rgba($cadmin-black, 0.9),
-			),
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
-				box-shadow: inset 0.25rem 0 0 0 $cadmin-primary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				letter-spacing: 0,
+				before: (
+					background-color: $cadmin-primary-l0,
+					width: 4px,
+				),
 			),
 			disabled: (
-				box-shadow: clay-enable-shadows(none),
+				background-color: transparent,
+				box-shadow: none,
 				color: rgba($cadmin-black, 0.3),
+				font-weight: $cadmin-font-weight-normal,
+				letter-spacing: 0.02em,
+				before: (
+					content: none,
+				),
+				after: (
+					content: none,
+				),
 			),
 			show: (
-				background-color: c-unset,
-				box-shadow: c-unset,
+				background-color: transparent,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				before: (
+					background-color: transparent,
+				),
+				hover: (
+					before: (
+						background-color: $cadmin-secondary-l0,
+						width: 3px,
+					),
+				),
 			),
 		),
 		media-breakpoint-down: (
 			sm: (
-				background-color: $cadmin-white,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
 					margin-bottom: 0,
+					before: (
+						content: none,
+					),
 					hover: (
 						background-color: rgba($cadmin-gray-900, 0.04),
 						box-shadow: none,
@@ -159,8 +186,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
 				menubar-toggler: (
-					box-shadow: $cadmin-component-focus-box-shadow,
-					color: $cadmin-gray-900,
+					color: $cadmin-gray-600,
 					font-size: 14px,
 					font-weight: $cadmin-font-weight-semi-bold,
 					text-decoration: none,
@@ -249,22 +275,14 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			md: (
-				align-items: center,
-				display: flex,
-				flex-wrap: wrap,
-				justify-content: space-between,
-				margin-bottom: 24px,
-				margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
-				margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
+				margin-bottom: 16px,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
 					border-style: solid,
 					border-width: 1px,
 					display: none,
-					left: -1px,
-					position: absolute,
-					right: -1px,
+					position: relative,
 					top: 100%,
 					z-index:
 						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
@@ -290,6 +308,8 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 					padding-left: 8px,
 					padding-right: 8px,
 					c-inner: (
+						margin-left: -8px,
+						margin-right: -8px,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -307,19 +327,33 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 	(
 		nav-link: (
 			border-radius: $cadmin-border-radius,
+			color: $cadmin-gray-600,
+			letter-spacing: 0.02em,
+			margin-bottom: 4px,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
-			color: $cadmin-gray-600,
+			before: (
+				border-radius: $cadmin-border-radius 0 0 $cadmin-border-radius,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+			),
 			hover: (
 				background-color: rgba($cadmin-gray-900, 0.04),
-				box-shadow: inset 0.125rem 0 0 0 $cadmin-secondary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				letter-spacing: 0,
+				before: (
+					background: $cadmin-secondary-l0,
+					width: 3px,
+				),
 			),
 			focus: (
-				background-color: rgba($cadmin-primary, 0.04),
 				color: $cadmin-gray-900,
 				outline: 0,
 				after: (
@@ -334,32 +368,53 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 					top: 0,
 				),
 			),
-			active: (
-				color: rgba($cadmin-black, 0.9),
-			),
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
-				box-shadow: inset 0.25rem 0 0 0 $cadmin-primary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				letter-spacing: 0,
+				before: (
+					background-color: $cadmin-primary-l0,
+					width: 4px,
+				),
 			),
 			disabled: (
-				box-shadow: clay-enable-shadows(none),
+				background-color: transparent,
+				box-shadow: none,
 				color: rgba($cadmin-black, 0.3),
+				font-weight: $cadmin-font-weight-normal,
+				letter-spacing: 0.02em,
+				before: (
+					content: none,
+				),
+				after: (
+					content: none,
+				),
 			),
 			show: (
-				background-color: c-unset,
+				background-color: transparent,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
+				before: (
+					background-color: transparent,
+				),
+				hover: (
+					before: (
+						background-color: $cadmin-secondary-l0,
+						width: 3px,
+					),
+				),
 			),
 		),
 		media-breakpoint-down: (
 			md: (
-				background-color: $cadmin-white,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
 					margin-bottom: 0,
+					before: (
+						content: none,
+					),
 					hover: (
 						background-color: rgba($cadmin-gray-900, 0.04),
 						box-shadow: none,
@@ -394,7 +449,7 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
 				menubar-toggler: (
-					color: $cadmin-gray-900,
+					color: $cadmin-gray-600,
 					font-size: 14px,
 					font-weight: $cadmin-font-weight-semi-bold,
 					text-decoration: none,

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

@@ -48,6 +48,24 @@ $cadmin-multi-step-title-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-multi-step-title-margin-bottom: 10px !default; // 10px
 $cadmin-multi-step-title-max-width: 100px !default;
 
+$cadmin-multi-step-title-center: () !default;
+$cadmin-multi-step-title-center: map-deep-merge(
+	(
+		multi-step-title: (
+			margin-left: calc(#{$cadmin-multi-step-icon-size} * 0.5),
+			max-width: $cadmin-multi-step-title-max-width,
+			overflow: hidden,
+			position: relative,
+			text-align: center,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+			width: auto,
+		),
+	),
+	$cadmin-multi-step-title-center
+);
+
 $cadmin-multi-step-item-margin-bottom: 10px !default;
 $cadmin-multi-step-item-width: 75px !default;
 $cadmin-multi-step-item-fixed-width: 150px !default;

package/src/scss/cadmin/variables/_navbar.scss

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