@clayui/css 3.103.1 → 3.105.0

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/_date-picker.scss

@@ -10,6 +10,14 @@ $date-picker-dropdown-menu: map-deep-merge(
 		padding-right: 0,
 		padding-top: 0,
 		width: 100%,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				margin: 0,
+				max-height: 255px,
+				max-width: 264px,
+			),
+		),
 	),
 	$date-picker-dropdown-menu
 );
@@ -20,8 +28,8 @@ $date-picker-nav-row: () !default;
 $date-picker-nav-row: map-deep-merge(
 	(
 		display: flex,
-		margin-left: -0.25rem,
-		margin-right: -0.25rem,
+		margin-left: -0.125rem,
+		margin-right: -0.125rem,
 	),
 	$date-picker-nav-row
 );
@@ -51,12 +59,34 @@ $date-picker-nav-btn-monospaced: () !default;
 $date-picker-nav-btn-monospaced: map-deep-merge(
 	(
 		margin-bottom: 0,
+		margin-left: 0.125rem,
+		margin-right: 0.125rem,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				height: 1.5rem,
+				max-height: 1.5rem,
+				max-width: 1.5rem,
+				min-width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-nav-btn-monospaced
 );
 
 $date-picker-nav-select: () !default;
+$date-picker-nav-select: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				height: 1.5rem,
+			),
+		),
+	),
+	$date-picker-nav-select
+);
 
 // Date Picker Row
 
@@ -69,6 +99,12 @@ $date-picker-row: map-deep-merge(
 		margin-bottom: 0.5rem,
 		margin-top: 0.5rem,
 		padding: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 0.25rem,
+				margin-top: 0.25rem,
+			),
+		),
 	),
 	$date-picker-row
 );
@@ -76,8 +112,9 @@ $date-picker-row: map-deep-merge(
 $date-picker-col: () !default;
 $date-picker-col: map-deep-merge(
 	(
-		padding-left: 0.5rem,
-		padding-right: 0.5rem,
+		display: flex,
+		flex-grow: 1,
+		justify-content: center,
 		c-selected: (
 			background-image: linear-gradient($primary-l3, $primary-l3),
 			background-repeat: no-repeat,
@@ -107,6 +144,11 @@ $date-picker-days-row: map-deep-merge(
 	(
 		margin-bottom: 1rem,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 0.25rem,
+			),
+		),
 	),
 	$date-picker-days-row
 );
@@ -141,6 +183,14 @@ $date-picker-calendar-header-container: map-merge(
 		padding-left: 1rem,
 		padding-right: 1rem,
 		padding-top: 1rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom: 0.25rem,
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-top: 0.5rem,
+			),
+		),
 	),
 	$date-picker-calendar-header-container
 );
@@ -148,9 +198,16 @@ $date-picker-calendar-header-container: map-merge(
 $date-picker-calendar-body-container: () !default;
 $date-picker-calendar-body-container: map-merge(
 	(
-		padding-left: 1rem,
-		padding-right: 1rem,
+		padding-left: 0.5rem,
+		padding-right: 0.5rem,
 		padding-bottom: 0.5rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-bottom: 0.25rem,
+			),
+		),
 	),
 	$date-picker-calendar-body-container
 );
@@ -161,10 +218,17 @@ $date-picker-calendar-footer-container: map-merge(
 		border-color: $gray-400,
 		border-style: solid,
 		border-width: 1px 0 0 0,
-		padding-bottom: 1rem,
-		padding-left: 1.5rem,
-		padding-right: 1.5rem,
-		padding-top: 1rem,
+		padding-bottom: 0.5rem,
+		padding-left: 0.875rem,
+		padding-right: 0.875rem,
+		padding-top: 0.5rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-top: 0.4375rem,
+			),
+		),
 	),
 	$date-picker-calendar-footer-container
 );
@@ -196,6 +260,12 @@ $date-picker-calendar-item: map-deep-merge(
 		vertical-align: middle,
 		white-space: nowrap,
 		width: 2rem,
+		media-breakpoint-down: (
+			xs: (
+				height: 1.5rem,
+				width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-calendar-item
 );
@@ -259,6 +329,14 @@ $date-picker-next-month-date: map-deep-merge(
 
 // Date Picker Input Group
 
+$date-picker-input-group-item: () !default;
+$date-picker-input-group-item: map-deep-merge(
+	(
+		margin-left: 0.125rem,
+	),
+	$date-picker-input-group-item
+);
+
 $date-picker-input-group-text: () !default;
 $date-picker-input-group-text: map-deep-merge(
 	(
@@ -268,6 +346,33 @@ $date-picker-input-group-text: map-deep-merge(
 		min-width: 2rem,
 		padding-left: 0.25rem,
 		padding-right: 0.25rem,
+		media-breakpoint-down: (
+			xs: (
+				font-size: inherit,
+				height: $input-height-sm,
+				min-width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-input-group-text
 );
+
+$date-picker-input-form-control: () !default;
+$date-picker-input-form-control: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				border-radius: clay-enable-rounded($input-border-radius-sm),
+				font-size: $input-font-size-sm,
+				height: $input-height-sm,
+				line-height: $input-line-height-sm,
+				min-height: $input-height-sm,
+				padding-bottom: $input-padding-y-sm,
+				padding-left: $input-padding-x-sm,
+				padding-right: $input-padding-x-sm,
+				padding-top: $input-padding-y-sm,
+			),
+		),
+	),
+	$date-picker-input-form-control
+);

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

package/src/scss/variables/_time.scss

@@ -31,6 +31,7 @@ $clay-time-form-control-inset: () !default;
 $clay-time-form-control-inset: map-deep-merge(
 	(
 		margin-bottom: 0,
+		margin-left: 0,
 		margin-top: 0,
 		text-align: center,
 		width: 1.25rem,