@clayui/css 3.158.0 → 3.160.0

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

@@ -9,8 +9,8 @@ $cadmin-clay-color-input-group-text: map-merge(
 				$cadmin-white
 			),
 		border-color: $cadmin-input-border-color,
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0px,
+		padding-right: 0px,
 	),
 	$cadmin-clay-color-input-group-text
 );
@@ -39,7 +39,7 @@ $cadmin-clay-color-dropdown-menu: map-deep-merge(
 	(
 		max-height: 500px,
 		max-width: none,
-		padding-bottom: 0,
+		padding-bottom: 0px,
 		padding-left: 16px,
 		padding-right: 16px,
 		padding-top: 16px,
@@ -94,15 +94,19 @@ $cadmin-clay-color-dropdown-menu-close: map-deep-merge(
 		color: $cadmin-gray-600,
 		font-size: 16px,
 		opacity: 1,
+
 		hover: (
 			background-color: rgba($cadmin-gray-900, 0.03),
 		),
+
 		focus: (
 			background-color: rgba($cadmin-gray-900, 0.03),
 		),
+
 		active: (
 			background-color: rgba($cadmin-gray-900, 0.06),
 		),
+
 		disabled: (
 			background-color: transparent,
 		),
@@ -147,11 +151,12 @@ $cadmin-clay-color-btn: map-deep-merge(
 	(
 		border-radius: 2px,
 		height: 24px,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0px,
+		padding-left: 0px,
+		padding-right: 0px,
+		padding-top: 0px,
 		width: 24px,
+
 		active: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 		),
@@ -178,13 +183,14 @@ $cadmin-clay-color-pointer: map-deep-merge(
 		border-style: solid,
 		border-width: 2px,
 		height: 14px,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0px,
+		padding-left: 0px,
+		padding-right: 0px,
+		padding-top: 0px,
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 14px,
+
 		focus: (
 			box-shadow: 0 0 0 2px $cadmin-primary-l0,
 			outline: 0,
@@ -288,7 +294,7 @@ $cadmin-clay-color-map-values-form-group: () !default;
 $cadmin-clay-color-map-values-input: () !default;
 $cadmin-clay-color-map-values-input: map-deep-merge(
 	(
-		padding-left: 0,
+		padding-left: 0px,
 		padding-right: 10%,
 		text-align: right,
 	),
@@ -302,7 +308,7 @@ $cadmin-clay-color-map-values-input-group-inset-item-before: map-deep-merge(
 	(
 		font-weight: $cadmin-font-weight-semi-bold,
 		padding-left: 10%,
-		padding-right: 0,
+		padding-right: 0px,
 		min-width: 18px,
 	),
 	$cadmin-clay-color-map-values-input-group-inset-item-before
@@ -342,22 +348,25 @@ $cadmin-clay-color-form-group: map-deep-merge(
 		align-items: center,
 		margin-top: 4px,
 		margin-bottom: 16px,
+
 		clay-range: (
 			flex-grow: 1,
 			flex-shrink: 0,
 			margin-right: 16px,
 			width: 144px,
 		),
+
 		form-control: (
-			padding-left: 0,
+			padding-left: 0px,
 			padding-right: 10%,
 			text-align: right,
 		),
+
 		input-group: (
 			input-group-inset-item-before: (
 				font-weight: $cadmin-font-weight-semi-bold,
 				padding-left: 10%,
-				padding-right: 0,
+				padding-right: 0px,
 				min-width: 18px,
 			),
 		),
@@ -372,11 +381,13 @@ $cadmin-clay-color-slider: map-deep-merge(
 	(
 		clay-range-input: (
 			border-radius: 100px,
+
 			clay-range-track: (
 				border-radius: inherit,
 				height: 8px,
 				margin-top: -4px,
 			),
+
 			clay-range-progress: (
 				background-color: transparent,
 				border-radius: inherit,
@@ -384,18 +395,22 @@ $cadmin-clay-color-slider: map-deep-merge(
 				margin-top: -4px,
 				width: 100%,
 			),
+
 			ms-thumb: (
 				visibility: visible,
 			),
+
 			moz-range-thumb: (
 				visibility: visible,
 			),
+
 			webkit-slider-thumb: (
 				visibility: visible,
 			),
+
 			clay-range-thumb: (
 				background-color: currentColor,
-				border-width: 0,
+				border-width: 0px,
 				box-shadow: 0 0 0 2px $cadmin-white,
 				height: 10px,
 				margin-top: -5px,
@@ -404,16 +419,19 @@ $cadmin-clay-color-slider: map-deep-merge(
 				visibility: hidden,
 				width: 10px,
 			),
+
 			form-control-range: (
 				background-color: inherit,
 				border-radius: inherit,
 				color: inherit,
 				height: 8px,
+
 				webkit-slider-runnable-track: (
 					-webkit-appearance: none,
 					appearance: none,
 				),
 			),
+
 			focus: (
 				clay-range-thumb: (
 					box-shadow: #{0 0 0 2px $cadmin-white,
@@ -430,6 +448,7 @@ $cadmin-clay-color-slider-hue: map-deep-merge(
 	(
 		clay-range-input: (
 			color: #26affd,
+
 			clay-range-track: (
 				background-image:
 					linear-gradient(
@@ -453,6 +472,7 @@ $cadmin-clay-color-slider-alpha: map-deep-merge(
 	(
 		clay-range-input: (
 			color: $cadmin-black,
+
 			clay-range-track: (
 				background-color: $cadmin-white,
 				background-image: #{linear-gradient(
@@ -477,11 +497,13 @@ $cadmin-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%),
 				color: inherit,
 			),
+
 			clay-range-progress: (
 				background-image:
 					linear-gradient(90deg, transparent 0%, currentcolor 100%),
@@ -504,7 +526,7 @@ $cadmin-clay-color-sm-input-group-inset-item-before: map-merge(
 $cadmin-clay-color-sm-input-group-text: () !default;
 $cadmin-clay-color-sm-input-group-text: map-merge(
 	(
-		padding: 0,
+		padding: 0px,
 	),
 	$cadmin-clay-color-sm-input-group-text
 );
@@ -514,7 +536,7 @@ $cadmin-clay-color-sm-clay-color-btn: map-deep-merge(
 	(
 		border-radius: 2px,
 		height: 20px,
-		padding: 0,
+		padding: 0px,
 		width: 20px,
 	),
 	$cadmin-clay-color-sm-clay-color-btn

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

@@ -32,12 +32,12 @@ $cadmin-custom-control-indicator-border-color: $cadmin-gray-600 !default;
 $cadmin-custom-control-indicator-border-style: solid !default;
 $cadmin-custom-control-indicator-border-width: 1px !default; // 1px
 $cadmin-custom-control-indicator-box-shadow: none !default;
-$cadmin-custom-control-indicator-position-top: 0 !default;
+$cadmin-custom-control-indicator-position-top: 0px !default;
 
 $cadmin-custom-control-indicator-focus-border-color: $cadmin-custom-control-indicator-border-color !default;
 $cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
 
-$cadmin-custom-control-indicator-active-bg: $cadmin-white !default;
+$cadmin-custom-control-indicator-active-bg: $cadmin-custom-control-indicator-bg !default;
 $cadmin-custom-control-indicator-active-box-shadow: c-unset !default;
 $cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-indicator-border-color !default;
 $cadmin-custom-control-indicator-active-color: $cadmin-component-active-color !default;
@@ -56,11 +56,13 @@ $cadmin-custom-control-indicator-checked-box-shadow: null !default;
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-bg` instead
 
 $cadmin-custom-control-indicator-active-checked-bg: $cadmin-component-active-bg !default;
+
 $cadmin-custom-control-indicator-checked-active-bg: $cadmin-custom-control-indicator-active-checked-bg !default;
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-border-color` instead
 
 $cadmin-custom-control-indicator-active-checked-border-color: $cadmin-custom-control-indicator-checked-active-bg !default;
+
 $cadmin-custom-control-indicator-checked-active-border-color: $cadmin-custom-control-indicator-active-checked-border-color !default;
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-bg` instead
@@ -69,11 +71,13 @@ $cadmin-custom-control-indicator-disabled-checked-bg: clay-lighten(
 	$cadmin-component-active-bg,
 	32.94
 ) !default;
+
 $cadmin-custom-control-indicator-checked-disabled-bg: $cadmin-custom-control-indicator-disabled-checked-bg !default;
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-border-color` instead
 
 $cadmin-custom-control-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-bg !default;
+
 $cadmin-custom-control-indicator-checked-disabled-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;
 
 // Custom Control
@@ -134,9 +138,10 @@ $cadmin-custom-control-label: map-deep-merge(
 		font-size: $cadmin-custom-control-description-font-size,
 		font-weight: $cadmin-custom-control-description-font-weight,
 		line-height: $cadmin-custom-control-description-line-height,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 		position: static,
 		vertical-align: top,
+
 		before: (
 			background-color: $cadmin-custom-control-indicator-bg,
 			border-color: $cadmin-custom-control-indicator-border-color,
@@ -149,13 +154,14 @@ $cadmin-custom-control-label: map-deep-merge(
 			float: left,
 			font-size: $cadmin-custom-control-indicator-size,
 			height: $cadmin-custom-control-indicator-size,
-			left: 0,
+			left: 0px,
 			position: relative,
 			top: 4px,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
 			z-index: 0,
 		),
+
 		after: (
 			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
 			border-radius: $cadmin-rounded-circle-border-radius,
@@ -179,6 +185,7 @@ $cadmin-custom-control-label-disabled: map-deep-merge(
 	(
 		color: $cadmin-custom-control-label-disabled-color,
 		cursor: $cadmin-custom-control-description-disabled-cursor,
+
 		before: (
 			background-color: $cadmin-custom-control-indicator-disabled-bg,
 			border-color: $cadmin-custom-control-indicator-disabled-border-color,
@@ -229,14 +236,16 @@ $cadmin-custom-control: map-deep-merge(
 		min-height: $cadmin-custom-control-min-height,
 		position: relative,
 		text-align: left,
+
 		only-child: (
-			margin-bottom: 0,
+			margin-bottom: 0px,
 		),
+
 		label: (
 			cursor: map-get($cadmin-custom-control-label, cursor),
 			display: inline,
 			font-size: $cadmin-font-size-base,
-			margin-bottom: 0,
+			margin-bottom: 0px,
 			position: static,
 		),
 	),
@@ -256,18 +265,21 @@ $cadmin-custom-control-input: map-deep-merge(
 		top: $cadmin-custom-control-indicator-position-top,
 		width: 24px,
 		z-index: 1,
+
 		focus: (
 			custom-control-label: (
 				before: (
 					border-color:
 						$cadmin-custom-control-indicator-focus-border-color,
 				),
+
 				after: (
 					box-shadow:
 						$cadmin-custom-control-indicator-focus-box-shadow,
 				),
 			),
 		),
+
 		active: (
 			custom-control-label: (
 				before: (
@@ -280,10 +292,12 @@ $cadmin-custom-control-input: map-deep-merge(
 				),
 			),
 		),
+
 		disabled: (
 			cursor: $cadmin-custom-control-indicator-disabled-cursor,
 			custom-control-label: $cadmin-custom-control-label-disabled,
 		),
+
 		readonly: (
 			custom-control-label: (
 				color: $cadmin-gray-900,
@@ -292,12 +306,14 @@ $cadmin-custom-control-input: map-deep-merge(
 					border-color: $cadmin-secondary-l3,
 				),
 			),
+
 			disabled: (
 				custom-control-label: (
 					color: $cadmin-custom-control-label-disabled-color,
 				),
 			),
 		),
+
 		checked: (
 			custom-control-label: (
 				before: (
@@ -312,6 +328,7 @@ $cadmin-custom-control-input: map-deep-merge(
 					color: $cadmin-custom-control-indicator-checked-color,
 				),
 			),
+
 			active: (
 				custom-control-label: (
 					before: (
@@ -322,6 +339,7 @@ $cadmin-custom-control-input: map-deep-merge(
 					),
 				),
 			),
+
 			disabled: (
 				custom-control-label: (
 					before: (
@@ -353,7 +371,7 @@ $cadmin-custom-checkbox-indicator-border-radius: 2px !default; // 2px
 
 $cadmin-custom-checkbox-indicator-icon-checked: clay-icon(
 	check-small,
-	$cadmin-white
+	$cadmin-custom-control-indicator-checked-color
 ) !default;
 $cadmin-custom-checkbox-indicator-icon-checked-bg-size: 16px !default;
 
@@ -383,6 +401,7 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					after: (
@@ -392,6 +411,7 @@ $cadmin-custom-checkbox: map-deep-merge(
 							$cadmin-custom-checkbox-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -400,22 +420,27 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
-							background-color: $cadmin-white,
+							background-color:
+								$cadmin-custom-control-indicator-bg,
 							border-color: $cadmin-secondary-l2,
 						),
+
 						after: (
 							background-image:
 								clay-icon(check-small, $cadmin-secondary),
 						),
 					),
+
 					disabled: (
 						custom-control-label: (
 							before: (
 								opacity: 0.4,
 							),
+
 							after: (
 								opacity: 0.4,
 							),
@@ -423,6 +448,7 @@ $cadmin-custom-checkbox: map-deep-merge(
 					),
 				),
 			),
+
 			indeterminate: (
 				custom-control-label: (
 					before: (
@@ -435,6 +461,7 @@ $cadmin-custom-checkbox: map-deep-merge(
 								$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
 							),
 					),
+
 					after: (
 						background-image:
 							$cadmin-custom-checkbox-indicator-icon-indeterminate,
@@ -442,6 +469,7 @@ $cadmin-custom-checkbox: map-deep-merge(
 							$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -452,21 +480,26 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
-							background-color: $cadmin-white,
+							background-color:
+								$cadmin-custom-control-indicator-bg,
 							border-color: $cadmin-secondary-l2,
 						),
+
 						after: (
 							background-image: clay-icon(hr, $cadmin-secondary),
 						),
 					),
+
 					disabled: (
 						custom-control-label: (
 							before: (
 								opacity: 0.4,
 							),
+
 							after: (
 								opacity: 0.4,
 							),
@@ -494,6 +527,7 @@ $cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-ind
 // @deprecated as of v2.2.1 use `$cadmin-custom-radio-indicator-checked-disabled-border-color` instead
 
 $cadmin-custom-radio-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;
+
 $cadmin-custom-radio-indicator-checked-disabled-border-color: $cadmin-custom-radio-indicator-disabled-checked-border-color !default;
 
 $cadmin-custom-radio: () !default;
@@ -505,6 +539,7 @@ $cadmin-custom-radio: map-deep-merge(
 					border-radius: $cadmin-custom-radio-indicator-border-radius,
 				),
 			),
+
 			disabled: (
 				custom-control-label: (
 					before: (
@@ -513,6 +548,7 @@ $cadmin-custom-radio: map-deep-merge(
 					),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					after: (
@@ -522,6 +558,7 @@ $cadmin-custom-radio: map-deep-merge(
 							$cadmin-custom-radio-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -548,6 +585,7 @@ $cadmin-custom-control-outside: map-deep-merge(
 					#{$cadmin-custom-control-indicator-size} + #{$cadmin-custom-control-description-padding-left}
 				),
 		),
+
 		custom-control-input: (
 			custom-control-label: (
 				before: (
@@ -555,8 +593,9 @@ $cadmin-custom-control-outside: map-deep-merge(
 				),
 			),
 		),
+
 		custom-control-label-text: (
-			padding-left: 0,
+			padding-left: 0px,
 		),
 	),
 	$cadmin-custom-control-outside