@clayui/css 3.159.0 → 3.161.0

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

@@ -23,8 +23,8 @@ $clay-color-input-group-text: map-merge(
 		background-color:
 			setter(map-get($clay-color-input-group-text, bg), $white),
 		border-color: $clay-color-border-color,
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0rem,
+		padding-right: 0rem,
 	),
 	$clay-color-input-group-text
 );
@@ -53,7 +53,7 @@ $clay-color-dropdown-menu: map-deep-merge(
 	(
 		max-height: 500px,
 		max-width: none,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 1rem,
 		padding-right: 1rem,
 		padding-top: 1rem,
@@ -113,6 +113,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 			background-color: transparent,
 			color: $black,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			color: $black,
@@ -154,11 +155,12 @@ $clay-color-btn: map-deep-merge(
 	(
 		border-radius: 2px,
 		height: 1.5rem,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		width: 1.5rem,
+
 		active: (
 			box-shadow: $component-focus-box-shadow,
 		),
@@ -185,13 +187,14 @@ $clay-color-pointer: map-deep-merge(
 		border-style: solid,
 		border-width: 2px,
 		height: 0.875rem,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 0.875rem,
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -295,7 +298,7 @@ $clay-color-map-values-form-group: () !default;
 $clay-color-map-values-input: () !default;
 $clay-color-map-values-input: map-deep-merge(
 	(
-		padding-left: 0,
+		padding-left: 0rem,
 		padding-right: 10%,
 		text-align: right,
 	),
@@ -309,7 +312,7 @@ $clay-color-map-values-input-group-inset-item-before: map-merge(
 	(
 		font-weight: $font-weight-semi-bold,
 		padding-left: 10%,
-		padding-right: 0,
+		padding-right: 0rem,
 		min-width: 1.125rem,
 	),
 	$clay-color-map-values-input-group-inset-item-before
@@ -349,22 +352,25 @@ $clay-color-form-group: map-deep-merge(
 		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-left: 0rem,
 			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,
+				padding-right: 0rem,
 				min-width: 1.125rem,
 			),
 		),
@@ -379,11 +385,13 @@ $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,
@@ -391,20 +399,24 @@ $clay-color-slider: map-deep-merge(
 				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,
+				border-width: 0rem,
 				box-shadow: 0 0 0 0.125rem $white,
 				height: 0.625rem,
 				margin-top: -0.3125rem,
@@ -413,16 +425,19 @@ $clay-color-slider: map-deep-merge(
 				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,
@@ -439,6 +454,7 @@ $clay-color-slider-hue: map-deep-merge(
 	(
 		clay-range-input: (
 			color: #26affd,
+
 			clay-range-track: (
 				background-image:
 					linear-gradient(
@@ -462,6 +478,7 @@ $clay-color-slider-alpha: map-deep-merge(
 	(
 		clay-range-input: (
 			color: $black,
+
 			clay-range-track: (
 				background-color: $white,
 				background-image: #{linear-gradient(
@@ -486,6 +503,7 @@ $clay-color-slider-alpha: map-deep-merge(
 				-4px 0px},
 				background-size: 8px 8px,
 			),
+
 			form-control-range: (
 				background-image:
 					linear-gradient(90deg, transparent 0%, currentcolor 100%),
@@ -509,7 +527,7 @@ $clay-color-sm-input-group-inset-item-before: map-merge(
 $clay-color-sm-input-group-text: () !default;
 $clay-color-sm-input-group-text: map-merge(
 	(
-		padding: 0,
+		padding: 0rem,
 	),
 	$clay-color-sm-input-group-text
 );
@@ -519,7 +537,7 @@ $clay-color-sm-clay-color-btn: map-deep-merge(
 	(
 		border-radius: 2px,
 		height: 1.25rem,
-		padding: 0,
+		padding: 0rem,
 		width: 1.25rem,
 	),
 	$clay-color-sm-clay-color-btn

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

@@ -44,7 +44,7 @@ $custom-control-indicator-box-shadow: if(
 	$input-box-shadow,
 	inset 0 1px 1px rgba($black, 0.075)
 ) !default;
-$custom-control-indicator-position-top: 0 !default;
+$custom-control-indicator-position-top: 0px !default;
 
 $custom-control-indicator-focus-border-color: if(
 	variable-exists(input-focus-border-color),
@@ -61,8 +61,8 @@ $custom-control-indicator-active-bg: clay-lighten(
 	$component-active-bg,
 	0.35
 ) !default;
-$custom-control-indicator-active-box-shadow: none !default;
 $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
+$custom-control-indicator-active-box-shadow: none !default;
 $custom-control-indicator-active-color: $component-active-color !default;
 
 $custom-control-indicator-disabled-bg: if(
@@ -83,21 +83,25 @@ $custom-control-indicator-checked-box-shadow: none !default;
 /// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-bg` instead
 
 $custom-control-indicator-active-checked-bg: null !default;
+
 $custom-control-indicator-checked-active-bg: $custom-control-indicator-active-checked-bg !default;
 
 /// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-border-color` instead
 
 $custom-control-indicator-active-checked-border-color: null !default;
+
 $custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default;
 
 /// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-bg` instead
 
 $custom-control-indicator-disabled-checked-bg: rgba($primary, 0.5) !default;
+
 $custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disabled-checked-bg !default;
 
 /// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-border-color` instead
 
 $custom-control-indicator-disabled-checked-border-color: null !default;
+
 $custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;
 
 // .custom-control
@@ -162,9 +166,10 @@ $custom-control-label: map-deep-merge(
 		font-size: $custom-control-description-font-size,
 		font-weight: $custom-control-description-font-weight,
 		line-height: $custom-control-description-line-height,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 		position: static,
 		vertical-align: top,
+
 		before: (
 			background-color: $custom-control-indicator-bg,
 			border-color: $custom-control-indicator-border-color,
@@ -177,12 +182,13 @@ $custom-control-label: map-deep-merge(
 			float: left,
 			font-size: $custom-control-indicator-size,
 			height: $custom-control-indicator-size,
-			left: 0,
+			left: 0rem,
 			position: relative,
 			top: 0.25rem,
 			transition: clay-enable-transitions($custom-forms-transition),
 			width: $custom-control-indicator-size,
 		),
+
 		after: (
 			background: no-repeat 50% / #{$custom-control-indicator-bg-size},
 			border-radius: $rounded-circle-border-radius,
@@ -205,6 +211,7 @@ $custom-control-label-disabled: map-deep-merge(
 	(
 		color: $custom-control-label-disabled-color,
 		cursor: $custom-control-description-disabled-cursor,
+
 		before: (
 			background-color: $custom-control-indicator-disabled-bg,
 			border-color: $custom-control-indicator-disabled-border-color,
@@ -254,14 +261,16 @@ $custom-control: map-deep-merge(
 		min-height: $custom-control-min-height,
 		position: relative,
 		text-align: left,
+
 		only-child: (
-			margin-bottom: 0,
+			margin-bottom: 0rem,
 		),
+
 		label: (
 			cursor: map-get($custom-control-label, cursor),
 			display: inline,
 			font-size: $font-size-base,
-			margin-bottom: 0,
+			margin-bottom: 0rem,
 		),
 	),
 	$custom-control
@@ -285,16 +294,19 @@ $custom-control-input: map-deep-merge(
 		top: $custom-control-indicator-position-top,
 		width: 1.5rem,
 		z-index: 1,
+
 		focus: (
 			custom-control-label: (
 				before: (
 					border-color: $custom-control-indicator-focus-border-color,
 				),
+
 				after: (
 					box-shadow: $custom-control-indicator-focus-box-shadow,
 				),
 			),
 		),
+
 		active: (
 			custom-control-label: (
 				before: (
@@ -305,9 +317,11 @@ $custom-control-input: map-deep-merge(
 				),
 			),
 		),
+
 		disabled: (
 			custom-control-label: $custom-control-label-disabled,
 		),
+
 		checked: (
 			custom-control-label: (
 				before: (
@@ -320,6 +334,7 @@ $custom-control-input: map-deep-merge(
 					color: $custom-control-indicator-checked-color,
 				),
 			),
+
 			active: (
 				custom-control-label: (
 					before: (
@@ -330,8 +345,10 @@ $custom-control-input: map-deep-merge(
 					),
 				),
 			),
+
 			disabled: (
 				cursor: $custom-control-indicator-disabled-cursor,
+
 				custom-control-label: (
 					before: (
 						background-color: $custom-control-indicator-disabled-bg,
@@ -339,6 +356,7 @@ $custom-control-input: map-deep-merge(
 					),
 				),
 			),
+
 			readonly: (
 				custom-control-label: (
 					before: (
@@ -396,6 +414,7 @@ $custom-checkbox: map-deep-merge(
 						),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					after: (
@@ -405,6 +424,7 @@ $custom-checkbox: map-deep-merge(
 							$custom-checkbox-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -413,11 +433,13 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
-							background-color: $white,
+							background-color: $custom-control-indicator-bg,
 						),
+
 						after: (
 							background-image:
 								clay-svg-url(
@@ -427,6 +449,7 @@ $custom-checkbox: map-deep-merge(
 					),
 				),
 			),
+
 			indeterminate: (
 				custom-control-label: (
 					before: (
@@ -439,6 +462,7 @@ $custom-checkbox: map-deep-merge(
 								$custom-checkbox-indicator-indeterminate-box-shadow
 							),
 					),
+
 					after: (
 						background-image:
 							escape-svg(
@@ -448,6 +472,7 @@ $custom-checkbox: map-deep-merge(
 							$custom-checkbox-indicator-icon-indeterminate-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -458,12 +483,14 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
 							background-color: $custom-control-indicator-bg,
 							border-color: $custom-control-indicator-border-color,
 						),
+
 						after: (
 							background-image:
 								clay-svg-url(
@@ -492,6 +519,7 @@ $custom-radio-indicator-disabled-border-color: null !default;
 /// @deprecated as of v2.2.1 use `$custom-radio-indicator-checked-disabled-border-color` instead
 
 $custom-radio-indicator-disabled-checked-border-color: null !default;
+
 $custom-radio-indicator-checked-disabled-border-color: $custom-radio-indicator-disabled-checked-border-color !default;
 
 $custom-radio: () !default;
@@ -503,6 +531,7 @@ $custom-radio: map-deep-merge(
 					border-radius: $custom-radio-indicator-border-radius,
 				),
 			),
+
 			disabled: (
 				custom-control-label: (
 					before: (
@@ -511,6 +540,7 @@ $custom-radio: map-deep-merge(
 					),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					after: (
@@ -520,6 +550,7 @@ $custom-radio: map-deep-merge(
 							$custom-radio-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -546,6 +577,7 @@ $custom-control-outside: map-deep-merge(
 					#{$custom-control-indicator-size} + #{$custom-control-description-padding-left}
 				),
 		),
+
 		custom-control-input: (
 			custom-control-label: (
 				before: (
@@ -553,8 +585,9 @@ $custom-control-outside: map-deep-merge(
 				),
 			),
 		),
+
 		custom-control-label-text: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$custom-control-outside
@@ -564,11 +597,13 @@ $custom-control-outside: map-deep-merge(
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
+$custom-switch-width: calc(#{$custom-control-indicator-size} * 1.75) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !default;
+$custom-switch-indicator-border-radius: calc(
+	#{$custom-control-indicator-size} * 0.5
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -739,7 +774,7 @@ $custom-select-feedback-icon-padding-right: calc(
 /// @deprecated as of v3.x with no replacement
 
 $custom-select-feedback-icon-position: center right
-	($custom-select-padding-x + $custom-select-indicator-padding) !default;
+	calc(#{$custom-select-padding-x} + #{$custom-select-indicator-padding}) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -845,7 +880,7 @@ $custom-range-thumb-bg: $component-active-bg !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-range-thumb-border: 0 !default;
+$custom-range-thumb-border: 0px !default;
 
 /// @deprecated as of v3.x with no replacement
 

package/src/scss/variables/_date-picker.scss

@@ -5,15 +5,16 @@ $date-picker-dropdown-menu: map-deep-merge(
 	(
 		max-height: none,
 		max-width: 370px,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		width: 100%,
+
 		media-breakpoint-down: (
 			xs: (
 				font-size: 0.75rem,
-				margin: 0,
+				margin: 0rem,
 				max-height: 255px,
 				max-width: 264px,
 			),
@@ -39,12 +40,15 @@ $date-picker-nav-btn: map-deep-merge(
 	(
 		color: $gray-600,
 		transition: $component-transition,
+
 		hover: (
 			background-color: $gray-200,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 		),
+
 		disabled: (
 			background-color: transparent,
 			box-shadow: none,
@@ -58,10 +62,11 @@ $date-picker-nav-btn: map-deep-merge(
 $date-picker-nav-btn-monospaced: () !default;
 $date-picker-nav-btn-monospaced: map-deep-merge(
 	(
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 		margin-left: 0.125rem,
 		margin-right: 0.125rem,
-		margin-top: 0,
+		margin-top: 0rem,
+
 		media-breakpoint-down: (
 			xs: (
 				font-size: 0.75rem,
@@ -98,7 +103,8 @@ $date-picker-row: map-deep-merge(
 		list-style: none,
 		margin-bottom: 0.5rem,
 		margin-top: 0.5rem,
-		padding: 0,
+		padding: 0rem,
+
 		media-breakpoint-down: (
 			xs: (
 				margin-bottom: 0.25rem,
@@ -115,22 +121,27 @@ $date-picker-col: map-deep-merge(
 		display: flex,
 		flex-grow: 1,
 		justify-content: center,
+
 		c-selected: (
 			background-image: linear-gradient($primary-l3, $primary-l3),
 			background-repeat: no-repeat,
 		),
+
 		c-selected-first-child: (
 			border-bottom-left-radius: 100px,
 			border-top-left-radius: 100px,
 		),
+
 		c-selected-last-child: (
 			border-bottom-right-radius: 100px,
 			border-top-right-radius: 100px,
 		),
+
 		c-selected-start: (
 			background-position: right top,
 			background-size: 50% 100%,
 		),
+
 		c-selected-end: (
 			background-position: left top,
 			background-size: 50% 100%,
@@ -143,7 +154,8 @@ $date-picker-days-row: () !default;
 $date-picker-days-row: map-deep-merge(
 	(
 		margin-bottom: 1rem,
-		margin-top: 0,
+		margin-top: 0rem,
+
 		media-breakpoint-down: (
 			xs: (
 				margin-bottom: 0.25rem,
@@ -183,6 +195,7 @@ $date-picker-calendar-header-container: map-merge(
 		padding-left: 1rem,
 		padding-right: 1rem,
 		padding-top: 1rem,
+
 		media-breakpoint-down: (
 			xs: (
 				padding-bottom: 0.25rem,
@@ -201,6 +214,7 @@ $date-picker-calendar-body-container: map-merge(
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
 		padding-bottom: 0.5rem,
+
 		media-breakpoint-down: (
 			xs: (
 				padding-left: 0.375rem,
@@ -217,11 +231,12 @@ $date-picker-calendar-footer-container: map-merge(
 	(
 		border-color: $gray-400,
 		border-style: solid,
-		border-width: 1px 0 0 0,
+		border-width: 1px 0px 0px 0px,
 		padding-bottom: 0.5rem,
 		padding-left: 0.875rem,
 		padding-right: 0.875rem,
 		padding-top: 0.5rem,
+
 		media-breakpoint-down: (
 			xs: (
 				padding-left: 0.375rem,
@@ -249,17 +264,18 @@ $date-picker-calendar-item: map-deep-merge(
 		height: 2rem,
 		justify-content: center,
 		line-height: 1,
-		margin-left: 0,
-		margin-right: 0,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		margin-left: 0rem,
+		margin-right: 0rem,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		transition: $component-transition,
 		user-select: none,
 		vertical-align: middle,
 		white-space: nowrap,
 		width: 2rem,
+
 		media-breakpoint-down: (
 			xs: (
 				height: 1.5rem,
@@ -277,17 +293,21 @@ $date-picker-date: map-deep-merge(
 		color: $gray-600,
 		cursor: $link-cursor,
 		position: relative,
+
 		hover: (
 			background-color: $gray-200,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		active: (
 			background-color: $component-active-bg,
 			color: $component-active-color,
 		),
+
 		disabled: (
 			background-color: transparent,
 			box-shadow: none,
@@ -301,9 +321,11 @@ $date-picker-previous-month-date: () !default;
 $date-picker-previous-month-date: map-deep-merge(
 	(
 		opacity: 0.65,
+
 		focus: (
 			opacity: 1,
 		),
+
 		active: (
 			background-color: $primary-l1,
 			color: $primary-l3,
@@ -316,9 +338,11 @@ $date-picker-next-month-date: () !default;
 $date-picker-next-month-date: map-deep-merge(
 	(
 		opacity: 0.65,
+
 		focus: (
 			opacity: 1,
 		),
+
 		active: (
 			background-color: $primary-l1,
 			color: $primary-l3,
@@ -346,6 +370,7 @@ $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,