feat(@clayui/css): Cards form-check-card checkbox/radio input shoul…

…d be hidden unless position utilities are used fixes liferay#4544
pat270 · Jan 5, 2022 · 55f4e8b · 55f4e8b
1 parent b1302ac
commit 55f4e8b
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/components/_cards.scss b/packages/clay-css/src/scss/components/_cards.scss
@@ -591,6 +591,7 @@
 	}
 
 	.custom-control-label {
+		opacity: 0;
 		position: absolute;
 		z-index: 1;
 
@@ -603,6 +604,7 @@
 	.form-check-input {
 		margin-left: 0;
 		margin-top: 0;
+		opacity: 0;
 		position: absolute;
 		z-index: 1;
 	}
@@ -665,6 +667,7 @@
 	.form-check-input {
 		bottom: $checkbox-position;
 		left: $checkbox-position;
+		opacity: 1;
 		top: auto;
 		transform: none;
 	}
@@ -676,6 +679,7 @@
 	.form-check-input {
 		bottom: $checkbox-position;
 		left: auto;
+		opacity: 1;
 		right: $checkbox-position;
 		top: auto;
 		transform: none;
@@ -688,6 +692,7 @@
 	.form-check-input {
 		left: $checkbox-position;
 		margin-top: 0;
+		opacity: 1;
 		top: 50%;
 		transform: translateY(-50%);
 	}
@@ -699,6 +704,7 @@
 	.form-check-input {
 		left: auto;
 		margin-top: 0;
+		opacity: 1;
 		right: $checkbox-position;
 		top: 50%;
 		transform: translateY(-50%);
@@ -710,6 +716,7 @@
 	.custom-control-label,
 	.form-check-input {
 		left: $checkbox-position;
+		opacity: 1;
 		top: $checkbox-position;
 		transform: none;
 	}
@@ -720,6 +727,7 @@
 	.custom-control-label,
 	.form-check-input {
 		left: auto;
+		opacity: 1;
 		right: $checkbox-position;
 		top: $checkbox-position;
 		transform: none;