@clayui/css 3.158.0 → 3.160.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,16 +597,20 @@ $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
 
-$custom-switch-indicator-size: $custom-control-indicator-size -
-	($custom-control-indicator-border-width * 4) !default;
+$custom-switch-indicator-size: calc(
+	#{$custom-control-indicator-size} - (#{$custom-control-indicator-border-width} *
+				4)
+) !default;
 
 // Custom Select
 
@@ -737,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
 
@@ -843,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