@clayui/css 3.40.1 → 3.44.0

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

@@ -100,401 +100,437 @@
 /// );
 
 @mixin clay-custom-control-input-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	@if ($enabled) {
-		@include clay-css(setter($map, ()));
+		@if ($enabled) {
+			@include clay-css($map);
 
-		~ .custom-control-label::before {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label, before), ())
-			);
-		}
-
-		~ .custom-control-label::after {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label, after), ())
-			);
-		}
-
-		&:hover ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get($map, hover, custom-control-label, before),
-					()
-				)
-			);
-		}
-
-		&:hover ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get($map, hover, custom-control-label, after),
-					()
-				)
-			);
-		}
-
-		&:focus ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get($map, focus, custom-control-label, before),
-					()
-				)
-			);
-		}
-
-		&:focus ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get($map, focus, custom-control-label, after),
-					()
-				)
-			);
-		}
-
-		&:active ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get($map, active, custom-control-label, before),
-					()
-				)
-			);
-		}
-
-		&:active ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get($map, active, custom-control-label, after),
-					()
-				)
-			);
-		}
-
-		// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
-
-		&[disabled],
-		&:disabled {
-			@include clay-css(setter(map-deep-get($map, disabled), ()));
-
-			~ .custom-control-label {
+			~ .custom-control-label::before {
 				@include clay-css(
-					setter(
-						map-deep-get($map, disabled, custom-control-label),
-						()
-					)
+					map-deep-get($map, custom-control-label, before)
 				);
 			}
-		}
 
-		&[disabled] ~ .custom-control-label::before,
-		&:disabled ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get($map, disabled, custom-control-label, before),
-					()
-				)
-			);
-		}
-
-		&[disabled] ~ .custom-control-label::after,
-		&:disabled ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get($map, disabled, custom-control-label, after),
-					()
-				)
-			);
-		}
-
-		&:checked ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get($map, checked, custom-control-label, before),
-					()
-				)
-			);
-		}
-
-		&:checked ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get($map, checked, custom-control-label, after),
-					()
-				)
-			);
-		}
-
-		&:checked:hover ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						hover,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
-
-		&:checked:hover ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						hover,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
-
-		&:checked:focus ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						focus,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			~ .custom-control-label::after {
+				@include clay-css(
+					map-deep-get($map, custom-control-label, after)
+				);
+			}
 
-		&:checked:focus ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						focus,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			~ .card {
+				@include clay-card-variant(map-deep-get($map, card));
+			}
 
-		&:checked:active ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						active,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:hover {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get($map, hover, custom-control-label, before)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get($map, hover, custom-control-label, after)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(map-deep-get($map, hover, card));
+				}
+			}
 
-		&:checked:active ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						active,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			&:focus {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get($map, focus, custom-control-label, before)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get($map, focus, custom-control-label, after)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(map-deep-get($map, focus, card));
+				}
+			}
 
-		&:checked[disabled] ~ .custom-control-label::before,
-		&:checked:disabled ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						disabled,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:active {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get($map, active, custom-control-label, before)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get($map, active, custom-control-label, after)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, active, card)
+					);
+				}
+			}
 
-		&:checked[disabled] ~ .custom-control-label::after,
-		&:checked:disabled ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						checked,
-						disabled,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+
+			&[disabled],
+			&:disabled {
+				@include clay-css(map-deep-get($map, disabled));
+
+				~ .custom-control-label {
+					@include clay-css(
+						map-deep-get($map, disabled, custom-control-label)
+					);
+				}
+
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, disabled, card)
+					);
+				}
+			}
 
-		&:indeterminate ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:checked {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get($map, checked, custom-control-label, after)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, card)
+					);
+				}
+			}
 
-		&:indeterminate ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			&:checked:hover {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							hover,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							hover,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, hover, card)
+					);
+				}
+			}
 
-		&:indeterminate:hover ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						hover,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:checked:focus {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							focus,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							focus,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, focus, card)
+					);
+				}
+			}
 
-		&:indeterminate:hover ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						hover,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			&:checked:active {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							active,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							active,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, active, card)
+					);
+				}
+			}
 
-		&:indeterminate:focus ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						focus,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:checked[disabled],
+			&:checked:disabled {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, disabled, card)
+					);
+				}
+			}
 
-		&:indeterminate:focus ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						focus,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			&:indeterminate {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, card)
+					);
+				}
+			}
 
-		&:indeterminate:active ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						active,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:indeterminate:hover {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							hover,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							hover,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, hover, card)
+					);
+				}
+			}
 
-		&:indeterminate:active ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						active,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
-		}
+			&:indeterminate:focus {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							focus,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							focus,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, focus, card)
+					);
+				}
+			}
 
-		&:indeterminate[disabled] ~ .custom-control-label::before,
-		&:indeterminate:disabled ~ .custom-control-label::before {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						disabled,
-						custom-control-label,
-						before
-					),
-					()
-				)
-			);
-		}
+			&:indeterminate:active {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							active,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							active,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, active, card)
+					);
+				}
+			}
 
-		&:indeterminate[disabled] ~ .custom-control-label::after,
-		&:indeterminate:disabled ~ .custom-control-label::after {
-			@include clay-css(
-				setter(
-					map-deep-get(
-						$map,
-						indeterminate,
-						disabled,
-						custom-control-label,
-						after
-					),
-					()
-				)
-			);
+			&:indeterminate[disabled],
+			&:indeterminate:disabled {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, disabled, card)
+					);
+				}
+			}
 		}
 	}
 }
@@ -616,53 +652,50 @@
 /// );
 
 @mixin clay-custom-control-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	@include clay-css(setter($map, ()));
+		@include clay-css($map);
 
-	@if ($enabled) {
-		label {
-			@include clay-css(setter(map-deep-get($map, label), ()));
-		}
+		@if ($enabled) {
+			label {
+				@include clay-css(map-deep-get($map, label));
+			}
 
-		.custom-control-label {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label), ())
-			);
+			.custom-control-label {
+				@include clay-css(map-deep-get($map, custom-control-label));
 
-			&::before {
-				@include clay-css(
-					setter(map-deep-get($map, custom-control-label, before), ())
-				);
+				&::before {
+					@include clay-css(
+						map-deep-get($map, custom-control-label, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						map-deep-get($map, custom-control-label, after)
+					);
+				}
 			}
 
-			&::after {
+			.custom-control-label-text {
 				@include clay-css(
-					setter(map-deep-get($map, custom-control-label, after), ())
+					map-deep-get($map, custom-control-label-text)
 				);
-			}
-		}
 
-		.custom-control-label-text {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label-text), ())
-			);
+				small,
+				.small {
+					@include clay-css(
+						map-deep-get($map, custom-control-label-text, small)
+					);
+				}
+			}
 
-			small,
-			.small {
-				@include clay-css(
-					setter(
-						map-deep-get($map, custom-control-label-text, small),
-						()
-					)
+			.custom-control-input {
+				@include clay-custom-control-input-variant(
+					map-deep-get($map, custom-control-input)
 				);
 			}
 		}
-
-		.custom-control-input {
-			@include clay-custom-control-input-variant(
-				setter(map-deep-get($map, custom-control-input), ())
-			);
-		}
 	}
 }