@clayui/css 3.104.0 → 3.105.1-alpha.0

package/src/scss/mixins/_forms.scss

@@ -601,6 +601,10 @@
 				}
 			}
 
+			&:focus-within:has(input:focus) {
+				@include clay-form-control-variant(map-get($map, focus-within));
+			}
+
 			&:active {
 				@include clay-css(map-get($map, active));
 			}
@@ -1699,8 +1703,6 @@
 				position:
 					setter(map-get($clay-range-thumb, position), absolute),
 				top: setter(map-get($clay-range-thumb, top), 50%),
-				visibility:
-					setter(map-get($clay-range-thumb, visibility), hidden),
 				width:
 					setter(
 						map-get($map, thumb-width),
@@ -2298,6 +2300,10 @@
 			map-deep-get($map, focus, clay-range-thumb),
 			()
 		);
+		$focus-clay-range-thumb: map-merge(
+			setter(map-get($focus, clay-range-thumb), ()),
+			$focus-clay-range-thumb
+		);
 		$focus-clay-range-thumb: map-merge(
 			$focus-clay-range-thumb,
 			(
@@ -2473,11 +2479,30 @@
 				}
 
 				// Webkit
+				&::-webkit-slider-container {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							form-control-range,
+							webkit-slider-container
+						)
+					);
+				}
 
 				&::-webkit-slider-runnable-track {
-					-webkit-appearance: none;
-					appearance: none;
-					height: 100%;
+					$webkit-slider-runnable-track: map-deep-get(
+						$map,
+						form-control-range,
+						webkit-slider-runnable-track
+					);
+
+					@if not($webkit-slider-runnable-track) {
+						-webkit-appearance: none;
+						appearance: none;
+						height: 100%;
+					} @else {
+						@include clay-css($webkit-slider-runnable-track);
+					}
 				}
 
 				&::-webkit-slider-thumb {
@@ -2631,3 +2656,197 @@
 		}
 	}
 }
+
+@mixin clay-range-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$clay-range-input: setter(map-get($map, clay-range-input), ());
+
+		$clay-range-thumb: setter(
+			map-get($clay-range-input, clay-range-thumb),
+			()
+		);
+		$clay-range-thumb: map-merge(
+			$clay-range-thumb,
+			(
+				margin-top:
+					setter(map-get($clay-range-thumb, margin-top), c-unset),
+				position: setter(map-get($clay-range-thumb, position), c-unset),
+				right: setter(map-get($clay-range-thumb, right), c-unset),
+				top: setter(map-get($clay-range-thumb, top), c-unset),
+			)
+		);
+
+		$moz-range-thumb: setter(
+			map-get($clay-range-input, moz-range-thumb),
+			()
+		);
+		$moz-range-thumb: map-merge(
+			$moz-range-thumb,
+			(
+				appearance:
+					setter(map-get($moz-range-thumb, appearance), c-unset),
+				position: setter(map-get($moz-range-thumb, position), c-unset),
+			)
+		);
+
+		$ms-thumb: setter(map-get($clay-range-input, ms-thumb), ());
+		$ms-thumb: map-merge(
+			$ms-thumb,
+			(
+				appearance: setter(map-get($ms-thumb, appearance), c-unset),
+			)
+		);
+
+		$webkit-slider-thumb: setter(
+			map-get($clay-range-input, webkit-slider-thumb),
+			()
+		);
+		$webkit-slider-thumb: map-merge(
+			$webkit-slider-thumb,
+			(
+				appearance:
+					setter(map-get($webkit-slider-thumb, appearance), c-unset),
+				position:
+					setter(map-get($webkit-slider-thumb, position), c-unset),
+			)
+		);
+
+		$clay-range-track: setter(
+			map-get($clay-range-input, clay-range-track),
+			()
+		);
+		$clay-range-track: map-merge(
+			$clay-range-track,
+			(
+				margin-top:
+					setter(map-get($clay-range-track, margin-top), c-unset),
+			)
+		);
+
+		$clay-range-progress: setter(
+			map-get($clay-range-input, clay-range-progress),
+			()
+		);
+		$clay-range-progress: map-merge(
+			$clay-range-progress,
+			(
+				margin-top:
+					setter(map-get($clay-range-progress, margin-top), c-unset),
+			)
+		);
+
+		$tooltip: setter(map-get($clay-range-input, tooltip), ());
+		$tooltip: map-merge(
+			$tooltip,
+			(
+				margin-left: setter(map-get($tooltip, margin-left), c-unset),
+			)
+		);
+
+		$clay-tooltip-bottom: setter(
+			map-get($clay-range-input, clay-tooltip-bottom),
+			()
+		);
+		$clay-tooltip-bottom: map-merge(
+			$clay-tooltip-bottom,
+			(
+				padding-top:
+					setter(
+						map-get($map, tooltip-arrow-offset),
+						map-get($clay-tooltip-bottom, padding-top),
+						c-unset
+					),
+				top: setter(map-get($clay-tooltip-bottom, top), c-unset),
+				transform:
+					setter(map-get($clay-tooltip-bottom, transform), c-unset),
+			)
+		);
+
+		$clay-tooltip-bottom-tooltip-arrow: setter(
+			map-get($clay-tooltip-bottom, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-bottom-tooltip-arrow: map-merge(
+			$clay-tooltip-bottom-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get(
+							$clay-tooltip-bottom-tooltip-arrow,
+							margin-left
+						),
+						c-unset
+					),
+			)
+		);
+
+		$clay-tooltip-bottom: map-deep-merge(
+			$clay-tooltip-bottom,
+			(
+				tooltip-arrow: $clay-tooltip-bottom-tooltip-arrow,
+			)
+		);
+
+		$clay-tooltip-top: setter(
+			map-get($clay-range-input, clay-tooltip-top),
+			()
+		);
+		$clay-tooltip-top: map-merge(
+			$clay-tooltip-top,
+			(
+				bottom: setter(map-get($clay-tooltip-top, bottom), c-unset),
+				padding-bottom:
+					setter(map-get($clay-tooltip-top, padding-bottom), c-unset),
+				transform:
+					setter(map-get($clay-tooltip-top, transform), c-unset),
+			)
+		);
+
+		$clay-tooltip-top-tooltip-arrow: setter(
+			map-get($clay-tooltip-top, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-top-tooltip-arrow: map-merge(
+			$clay-tooltip-top-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get($clay-tooltip-top-tooltip-arrow, margin-left),
+						c-unset
+					),
+			)
+		);
+
+		$clay-tooltip-top: map-deep-merge(
+			$clay-tooltip-top,
+			(
+				tooltip-arrow: $clay-tooltip-top-tooltip-arrow,
+			)
+		);
+
+		$clay-range-input: map-deep-merge(
+			$clay-range-input,
+			(
+				clay-range-thumb: $clay-range-thumb,
+				moz-range-thumb: $moz-range-thumb,
+				ms-thumb: $ms-thumb,
+				webkit-slider-thumb: $webkit-slider-thumb,
+				clay-range-track: $clay-range-track,
+				clay-range-progress: $clay-range-progress,
+				tooltip: $tooltip,
+				clay-tooltip-bottom: $clay-tooltip-bottom,
+				clay-tooltip-top: $clay-tooltip-top,
+			)
+		);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			.clay-range-input {
+				@include clay-range-input-variant($clay-range-input);
+			}
+		}
+	}
+}

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

@@ -299,8 +299,12 @@
 			}
 
 			&.focus {
+				@include clay-input-group-item-variant(map-get($map, focus));
+			}
+
+			&:focus-within:has(input:focus) {
 				@include clay-input-group-item-variant(
-					map-deep-get($map, focus)
+					map-get($map, focus-within)
 				);
 			}
 

package/src/scss/mixins/_links.scss

@@ -1039,7 +1039,7 @@
 			}
 
 			&[href],
-			[href] {
+			a[href] {
 				@include clay-link($href);
 			}
 		}

package/src/scss/mixins/_tables.scss

@@ -68,7 +68,7 @@
 				th {
 					@include clay-css(map-deep-get($map, thead, th));
 
-					[href] {
+					a[href] {
 						@include clay-link(map-deep-get($map, thead, th, href));
 					}
 				}
@@ -78,7 +78,7 @@
 			td {
 				@include clay-css(map-get($map, table-cell));
 
-				[href] {
+				a[href] {
 					@include clay-link(map-deep-get($map, table-cell, href));
 				}
 			}
@@ -330,7 +330,7 @@
 						map-deep-get($map, table-disabled, table-cell)
 					);
 
-					[href] {
+					a[href] {
 						@include clay-link(
 							map-deep-get($map, table-disabled, table-cell, href)
 						);
@@ -366,6 +366,30 @@
 				}
 			}
 
+			.autofit-col-checkbox {
+				@include clay-css(map-get($map, autofit-col-checkbox));
+			}
+
+			.autofit-col-icon {
+				@include clay-css(map-get($map, autofit-col-icon));
+			}
+
+			.autofit-col-toggle {
+				@include clay-css(map-get($map, autofit-col-toggle));
+			}
+
+			.component-action {
+				@include clay-link(map-get($map, component-action));
+			}
+
+			.component-drag {
+				@include clay-link(map-get($map, component-drag));
+			}
+
+			.component-toggle {
+				@include clay-link(map-get($map, component-toggle));
+			}
+
 			.custom-control,
 			.form-check {
 				@include clay-custom-control-variant(

package/src/scss/variables/_clay-color.scss

@@ -51,7 +51,7 @@ $clay-color-input-group-inset-item-before: map-merge(
 $clay-color-dropdown-menu: () !default;
 $clay-color-dropdown-menu: map-deep-merge(
 	(
-		max-height: 400px,
+		max-height: 500px,
 		max-width: none,
 		padding-bottom: 0,
 		padding-left: 1rem,
@@ -340,6 +340,162 @@ $clay-color-range-pointer: map-deep-merge(
 	$clay-color-range-pointer
 );
 
+// Clay Color Form Group
+
+$clay-color-form-group: () !default;
+$clay-color-form-group: map-deep-merge(
+	(
+		display: flex,
+		align-items: center,
+		margin-top: 0.25rem,
+		margin-bottom: 1rem,
+		clay-range: (
+			flex-grow: 1,
+			flex-shrink: 0,
+			margin-right: 1rem,
+			width: 144px,
+		),
+		form-control: (
+			padding-left: 0,
+			padding-right: 10%,
+			text-align: right,
+		),
+		input-group: (
+			input-group-inset-item-before: (
+				font-weight: $font-weight-semi-bold,
+				padding-left: 10%,
+				padding-right: 0,
+				min-width: 1.125rem,
+			),
+		),
+	),
+	$clay-color-form-group
+);
+
+// Clay Color Slider
+
+$clay-color-slider: () !default;
+$clay-color-slider: map-deep-merge(
+	(
+		clay-range-input: (
+			border-radius: 100px,
+			clay-range-track: (
+				border-radius: inherit,
+				height: 0.5rem,
+				margin-top: -0.25rem,
+			),
+			clay-range-progress: (
+				background-color: transparent,
+				border-radius: inherit,
+				height: 0.5rem,
+				margin-top: -0.25rem,
+				width: 100%,
+			),
+			ms-thumb: (
+				visibility: visible,
+			),
+			moz-range-thumb: (
+				height: 0.625rem,
+				visibility: visible,
+				width: 0.625rem,
+			),
+			webkit-slider-thumb: (
+				visibility: visible,
+			),
+			clay-range-thumb: (
+				background-color: currentColor,
+				border-width: 0,
+				box-shadow: 0 0 0 0.125rem $white,
+				height: 0.625rem,
+				margin-top: -0.3125rem,
+				transition:
+					clay-enable-transitions(box-shadow 0.15s ease-in-out),
+				visibility: hidden,
+				width: 0.625rem,
+			),
+			form-control-range: (
+				background-color: inherit,
+				border-radius: inherit,
+				color: inherit,
+				height: 0.5rem,
+				webkit-slider-runnable-track: (
+					-webkit-appearance: none,
+					appearance: none,
+				),
+			),
+			focus: (
+				clay-range-thumb: (
+					box-shadow: #{0 0 0 0.125rem $white,
+					0 0 0 0.25rem $primary-l1},
+				),
+			),
+		),
+	),
+	$clay-color-slider
+);
+
+$clay-color-slider-hue: () !default;
+$clay-color-slider-hue: map-deep-merge(
+	(
+		clay-range-input: (
+			color: #26affd,
+			clay-range-track: (
+				background-image:
+					linear-gradient(
+						270deg,
+						#fc0d1b 0%,
+						#fc22d6 18.23%,
+						#1824fb 34.25%,
+						#2bf6fd 50.28%,
+						#2bfd2e 67.58%,
+						#fcfd37 81.22%,
+						#fc121b 100%
+					),
+			),
+		),
+	),
+	$clay-color-slider-hue
+);
+
+$clay-color-slider-alpha: () !default;
+$clay-color-slider-alpha: map-deep-merge(
+	(
+		clay-range-input: (
+			color: $black,
+			clay-range-track: (
+				background-color: $white,
+				background-image: #{linear-gradient(
+						45deg,
+						#e7e7ed 25%,
+						transparent 25%
+					),
+				linear-gradient(
+					-45deg,
+					#e7e7ed 25%,
+					transparent 25%,
+				),
+				linear-gradient(
+					45deg,
+					transparent 75%,
+					#e7e7ed 75%,
+				),
+				linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)},
+				background-position: #{0 0,
+				0 4px,
+				4px -4px,
+				-4px 0px},
+				background-size: 8px 8px,
+			),
+			form-control-range: (
+				background-image:
+					linear-gradient(90deg, transparent 0%, currentcolor 100%),
+				color: inherit,
+			),
+		),
+	),
+	$clay-color-slider-alpha
+);
+
 // Clay Color Sm
 
 $clay-color-sm-input-group-inset-item-before: () !default;

package/src/scss/variables/_custom-forms.scss

@@ -5,6 +5,25 @@
 $custom-forms-transition: background-color 0.15s ease-in-out,
 	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
+// Form File
+
+$form-file: () !default;
+$form-file: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius),
+		display: flex,
+		position: relative,
+		transition: clay-enable-transitions($input-transition),
+		focus-within: (
+			background-color: $input-focus-bg,
+			box-shadow: $input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+		),
+	),
+	$form-file
+);
+
 // Custom Control Indicator
 
 $custom-control-indicator-size: 1rem !default;
@@ -208,7 +227,11 @@ $label-custom-control-label: map-deep-merge(
 $custom-control-label-text: () !default;
 $custom-control-label-text: map-deep-merge(
 	(
-		padding-left: $custom-control-description-padding-left,
+		display: block,
+		padding-left:
+			calc(
+				#{$custom-control-indicator-size} + #{$custom-control-description-padding-left}
+			),
 	),
 	$custom-control-label-text
 );

package/src/scss/variables/_dropdowns.scss

@@ -437,6 +437,12 @@ $dropdown-section-custom-control-label: () !default;
 /// @deprecated as of v3.x use map $dropdown-section instead
 
 $dropdown-section-custom-control-label-text: () !default;
+$dropdown-section-custom-control-label-text: map-deep-merge(
+	(
+		padding-left: 2rem,
+	),
+	$dropdown-section-custom-control-label-text
+);
 
 /// @deprecated as of v3.x use map $dropdown-section instead
 

package/src/scss/variables/_forms.scss

@@ -97,6 +97,12 @@ $input: map-deep-merge(
 				color: $input-placeholder-focus-color,
 			),
 		),
+		focus-within: (
+			background-color: $input-focus-bg,
+			border-color: $input-focus-border-color,
+			box-shadow: $input-focus-box-shadow,
+			color: $input-focus-color,
+		),
 		disabled: (
 			background-color: $input-disabled-bg,
 			border-color: $input-disabled-border-color,
@@ -1526,6 +1532,31 @@ $input-group-item-shrink: map-deep-merge(
 	$input-group-item-shrink
 );
 
+// .input-group-item-focusable
+
+$input-group-item-focusable: () !default;
+$input-group-item-focusable: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius),
+		transition: clay-enable-transitions($input-transition),
+		focus-within: (
+			background-color: $input-focus-bg,
+			box-shadow: $input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+			input-group-append: (
+				border-top-left-radius: 0,
+				border-bottom-left-radius: 0,
+			),
+			input-group-prepend: (
+				border-top-right-radius: 0,
+				border-bottom-right-radius: 0,
+			),
+		),
+	),
+	$input-group-item-focusable
+);
+
 // Input Group Inset
 
 $input-group-inset-item-color: $input-group-addon-color !default;

package/src/scss/variables/_globals.scss

@@ -587,13 +587,19 @@ $link-hover-decoration: underline !default;
 $link: () !default;
 $link: map-deep-merge(
 	(
+		border-radius: 1px,
 		color: $link-color,
 		text-decoration: $link-decoration,
 		text-underline-offset: 0.23em,
+		transition: clay-enable-transitions($component-transition),
 		hover: (
 			color: $link-hover-color,
 			text-decoration: $link-hover-decoration,
 		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$link
 );

package/src/scss/variables/_range.scss

@@ -66,9 +66,17 @@ $clay-range-input: map-deep-merge(
 			position: absolute,
 			right: -0.75rem,
 			top: 50%,
-			visibility: hidden,
 			width: 1.5rem,
 		),
+		ms-thumb: (
+			visibility: hidden,
+		),
+		moz-range-thumb: (
+			visibility: hidden,
+		),
+		webkit-slider-thumb: (
+			visibility: hidden,
+		),
 		clay-range-track: (
 			appearance: none,
 			background-color: $gray-300,
@@ -172,3 +180,27 @@ $clay-range-input: map-deep-merge(
 	),
 	$clay-range-input
 );
+
+$clay-range-progress-none: () !default;
+$clay-range-progress-none: map-deep-merge(
+	(
+		clay-range-input: (
+			ms-thumb: (
+				visibility: visible,
+			),
+			moz-range-thumb: (
+				visibility: visible,
+			),
+			webkit-slider-thumb: (
+				visibility: visible,
+			),
+			clay-range-thumb: (
+				visibility: hidden,
+			),
+			clay-range-progress: (
+				visibility: hidden,
+			),
+		),
+	),
+	$clay-range-progress-none
+);