@clayui/css 3.38.0 → 3.41.0

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

@@ -18,7 +18,8 @@ $cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-s
 
 $cadmin-custom-control-indicator-active-bg: $cadmin-white !default;
 $cadmin-custom-control-indicator-active-box-shadow: inset 0 0 0 1px
-	rgba(0, 0, 0, 0.1) !default;
+		rgba(0, 0, 0, 0.1),
+	$cadmin-custom-control-indicator-focus-box-shadow !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;
 
@@ -31,7 +32,7 @@ $cadmin-custom-control-indicator-disabled-cursor: $cadmin-disabled-cursor !defau
 $cadmin-custom-control-indicator-checked-bg: $cadmin-component-active-bg !default;
 $cadmin-custom-control-indicator-checked-color: $cadmin-component-active-color !default;
 $cadmin-custom-control-indicator-checked-border-color: $cadmin-custom-control-indicator-checked-bg !default;
-$cadmin-custom-control-indicator-checked-box-shadow: none !default;
+$cadmin-custom-control-indicator-checked-box-shadow: null !default;
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-bg` instead
 
@@ -75,22 +76,7 @@ $cadmin-custom-control-margin-top: null !default;
 $cadmin-custom-control-min-height: $cadmin-custom-control-indicator-size +
 	($cadmin-custom-control-indicator-position-top * 2) !default;
 
-$cadmin-custom-control: () !default;
-$cadmin-custom-control: map-deep-merge(
-	(
-		cursor: $cadmin-custom-control-cursor,
-		display: block,
-		line-height: 1,
-		margin-bottom: $cadmin-custom-control-margin-bottom,
-		margin-top: $cadmin-custom-control-margin-top,
-		min-height: $cadmin-custom-control-min-height,
-		position: relative,
-		text-align: left,
-	),
-	$cadmin-custom-control
-);
-
-// Custom Description
+// .custom-control-label
 
 // @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead
 
@@ -133,6 +119,34 @@ $cadmin-custom-control-label: map-deep-merge(
 		margin-bottom: 0,
 		position: static,
 		vertical-align: top,
+		before: (
+			background-color: $cadmin-custom-control-indicator-bg,
+			border-color: $cadmin-custom-control-indicator-border-color,
+			border-style: $cadmin-custom-control-indicator-border-style,
+			border-width: $cadmin-custom-control-indicator-border-width,
+			box-shadow:
+				clay-enable-shadows($cadmin-custom-control-indicator-box-shadow),
+			content: '',
+			display: block,
+			float: left,
+			font-size: $cadmin-custom-control-indicator-size,
+			height: $cadmin-custom-control-indicator-size,
+			left: 0,
+			position: relative,
+			top: $cadmin-custom-control-indicator-position-top,
+			transition: clay-enable-transitions($cadmin-custom-forms-transition),
+			width: $cadmin-custom-control-indicator-size,
+		),
+		after: (
+			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
+			content: '',
+			display: block,
+			height: $cadmin-custom-control-indicator-size,
+			left: 0,
+			position: absolute,
+			top: $cadmin-custom-control-indicator-position-top,
+			width: $cadmin-custom-control-indicator-size,
+		),
 	),
 	$cadmin-custom-control-label
 );
@@ -144,10 +158,27 @@ $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,
+			box-shadow: none,
+		),
 	),
 	$cadmin-custom-control-label-disabled
 );
 
+// label.custom-control-label
+
+$cadmin-label-custom-control-label: () !default;
+$cadmin-label-custom-control-label: map-deep-merge(
+	(
+		font-size: map-get($cadmin-custom-control-label, font-size),
+	),
+	$cadmin-label-custom-control-label
+);
+
+// .custom-control-label-text
+
 $cadmin-custom-control-label-text: () !default;
 $cadmin-custom-control-label-text: map-deep-merge(
 	(
@@ -156,6 +187,8 @@ $cadmin-custom-control-label-text: map-deep-merge(
 	$cadmin-custom-control-label-text
 );
 
+// .custom-control-label-text small, .custom-control-label-text .small
+
 $cadmin-custom-control-label-text-small: () !default;
 $cadmin-custom-control-label-text-small: map-deep-merge(
 	(
@@ -164,6 +197,108 @@ $cadmin-custom-control-label-text-small: map-deep-merge(
 	$cadmin-custom-control-label-text-small
 );
 
+$cadmin-custom-control: () !default;
+$cadmin-custom-control: map-deep-merge(
+	(
+		cursor: $cadmin-custom-control-cursor,
+		display: block,
+		line-height: 1,
+		margin-bottom: $cadmin-custom-control-margin-bottom,
+		margin-top: $cadmin-custom-control-margin-top,
+		min-height: $cadmin-custom-control-min-height,
+		position: relative,
+		text-align: left,
+		only-child: (
+			margin-bottom: 0,
+		),
+		label: (
+			cursor: map-get($cadmin-custom-control-label, cursor),
+			display: inline,
+			font-size: $cadmin-font-size-base,
+			margin-bottom: 0,
+		),
+	),
+	$cadmin-custom-control
+);
+
+// .custom-control-input
+
+$cadmin-custom-control-input: () !default;
+$cadmin-custom-control-input: map-deep-merge(
+	(
+		cursor: $cadmin-form-check-input-cursor,
+		height: $cadmin-custom-control-indicator-size,
+		left: 0,
+		opacity: 0,
+		position: absolute,
+		top: $cadmin-custom-control-indicator-position-top,
+		width: $cadmin-custom-control-indicator-size,
+		z-index: 1,
+		focus: (
+			custom-control-label: (
+				before: (
+					border-color:
+						$cadmin-custom-control-indicator-focus-border-color,
+					box-shadow:
+						$cadmin-custom-control-indicator-focus-box-shadow,
+				),
+			),
+		),
+		active: (
+			custom-control-label: (
+				before: (
+					background-color: $cadmin-custom-control-indicator-active-bg,
+					border-color:
+						$cadmin-custom-control-indicator-active-border-color,
+					box-shadow:
+						$cadmin-custom-control-indicator-active-box-shadow,
+					color: $cadmin-custom-control-indicator-active-color,
+				),
+			),
+		),
+		disabled: (
+			cursor: $cadmin-custom-control-indicator-disabled-cursor,
+			custom-control-label: $cadmin-custom-control-label-disabled,
+		),
+		checked: (
+			custom-control-label: (
+				before: (
+					background-color:
+						$cadmin-custom-control-indicator-checked-bg,
+					border-color:
+						$cadmin-custom-control-indicator-checked-border-color,
+					box-shadow:
+						clay-enable-shadows(
+							$cadmin-custom-control-indicator-checked-box-shadow
+						),
+					color: $cadmin-custom-control-indicator-checked-color,
+				),
+			),
+			active: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-control-indicator-checked-active-bg,
+						border-color:
+							$cadmin-custom-control-indicator-checked-active-border-color,
+					),
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-control-indicator-checked-disabled-bg,
+						border-color:
+							$cadmin-custom-control-indicator-checked-disabled-border-color,
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-control-input
+);
+
 // Custom Control Primary
 
 $cadmin-custom-control-primary-label-text: () !default;
@@ -174,7 +309,7 @@ $cadmin-custom-control-primary-label-text: map-deep-merge(
 	$cadmin-custom-control-primary-label-text
 );
 
-// Custom Checkbox
+// .custom-checkbox
 
 $cadmin-custom-checkbox-indicator-border-radius: 2px !default; // 2px
 
@@ -198,7 +333,72 @@ $cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
 ) !default;
 $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 100% !default;
 
-// Custom Radio
+$cadmin-custom-checkbox: () !default;
+$cadmin-custom-checkbox: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius:
+						clay-enable-rounded(
+							$cadmin-custom-checkbox-indicator-border-radius
+						),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							$cadmin-custom-checkbox-indicator-icon-checked,
+						background-size:
+							$cadmin-custom-checkbox-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+						),
+					),
+				),
+			),
+			indeterminate: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-checkbox-indicator-indeterminate-bg,
+						border-color:
+							$cadmin-custom-control-indicator-indeterminate-border-color,
+						box-shadow:
+							clay-enable-shadows(
+								$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
+							),
+					),
+					after: (
+						background-image:
+							$cadmin-custom-checkbox-indicator-icon-indeterminate,
+						background-size:
+							$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$cadmin-custom-control-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-checkbox
+);
+
+// .custom-radio
 
 $cadmin-custom-radio-indicator-border-radius: 50% !default;
 
@@ -214,3 +414,45 @@ $cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-ind
 
 $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;
+$cadmin-custom-radio: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius: $cadmin-custom-radio-indicator-border-radius,
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					before: (
+						border-color:
+							$cadmin-custom-radio-indicator-disabled-border-color,
+					),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							$cadmin-custom-radio-indicator-icon-checked,
+						background-size:
+							$cadmin-custom-radio-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$cadmin-custom-radio-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-radio
+);