@clayui/css 3.104.0 → 3.105.0

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/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;

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
+);