From 87682d2c9f2392896f27bbd1a36433e9c96918a3 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 6 Jan 2022 11:34:00 -0800
Subject: [PATCH] feat(@clayui/css): Mixins `clay-custom-control-input-variant`
 add option to customize card

---
 .../src/scss/mixins/_custom-forms.scss        | 597 +++++++++++-------
 1 file changed, 359 insertions(+), 238 deletions(-)

diff --git a/packages/clay-css/src/scss/mixins/_custom-forms.scss b/packages/clay-css/src/scss/mixins/_custom-forms.scss
index 90b10700df..37cdc94442 100644
--- a/packages/clay-css/src/scss/mixins/_custom-forms.scss
+++ b/packages/clay-css/src/scss/mixins/_custom-forms.scss
@@ -118,40 +118,64 @@
 				);
 			}
 
-			&:hover ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get($map, hover, custom-control-label, before)
-				);
+			~ .card {
+				@include clay-card-variant(map-deep-get($map, card));
 			}
 
-			&:hover ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get($map, hover, custom-control-label, after)
-				);
-			}
+			&:hover {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get($map, hover, custom-control-label, before)
+					);
+				}
 
-			&: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, hover, custom-control-label, after)
+					);
+				}
 
-			&:focus ~ .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, hover, card));
+				}
 			}
 
-			&:active ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get($map, active, custom-control-label, before)
-				);
+			&: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));
+				}
 			}
 
-			&:active ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get($map, active, custom-control-label, after)
-				);
+			&: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)
+					);
+				}
 			}
 
 			// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
@@ -165,250 +189,347 @@
 						map-deep-get($map, disabled, custom-control-label)
 					);
 				}
-			}
 
-			&[disabled] ~ .custom-control-label::before,
-			&:disabled ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get($map, disabled, custom-control-label, before)
-				);
-			}
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&[disabled] ~ .custom-control-label::after,
-			&:disabled ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get($map, disabled, custom-control-label, after)
-				);
-			}
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
 
-			&:checked ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get($map, checked, custom-control-label, before)
-				);
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, disabled, card)
+					);
+				}
 			}
 
-			&:checked ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get($map, checked, custom-control-label, after)
-				);
-			}
+			&:checked {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&: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, custom-control-label, after)
+					);
+				}
 
-			&:checked:hover ~ .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, card)
+					);
+				}
 			}
 
-			&:checked:focus ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						checked,
-						focus,
-						custom-control-label,
-						before
-					)
-				);
-			}
+			&:checked:hover {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							hover,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&:checked:focus ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						checked,
-						focus,
-						custom-control-label,
-						after
-					)
-				);
-			}
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							hover,
+							custom-control-label,
+							after
+						)
+					);
+				}
 
-			&:checked:active ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						checked,
-						active,
-						custom-control-label,
-						before
-					)
-				);
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, hover, card)
+					);
+				}
 			}
 
-			&:checked:active ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						checked,
-						active,
-						custom-control-label,
-						after
-					)
-				);
-			}
+			&:checked:focus {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							focus,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&:checked[disabled] ~ .custom-control-label::before,
-			&: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,
+							focus,
+							custom-control-label,
+							after
+						)
+					);
+				}
 
-			&:checked[disabled] ~ .custom-control-label::after,
-			&:checked:disabled ~ .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, focus, card)
+					);
+				}
 			}
 
-			&:indeterminate ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						indeterminate,
-						custom-control-label,
-						before
-					)
-				);
-			}
+			&:checked:active {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							active,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&:indeterminate ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						indeterminate,
-						custom-control-label,
-						after
-					)
-				);
-			}
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							active,
+							custom-control-label,
+							after
+						)
+					);
+				}
 
-			&:indeterminate:hover ~ .custom-control-label::before {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						indeterminate,
-						hover,
-						custom-control-label,
-						before
-					)
-				);
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, active, card)
+					);
+				}
 			}
 
-			&:indeterminate:hover ~ .custom-control-label::after {
-				@include clay-css(
-					map-deep-get(
-						$map,
-						indeterminate,
-						hover,
-						custom-control-label,
-						after
-					)
-				);
-			}
+			&:checked[disabled],
+			&:checked:disabled {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
 
-			&: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,
+							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(
-					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(
-					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(
-					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(
-					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(
-					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)
+					);
+				}
 			}
 		}
 	}