SWED-2336 refactor radio inputs

SwedbankPay · Apr 23, 2024 · 50d7dfb · 50d7dfb
1 parent 46e7959
commit 50d7dfb
Showing 1 changed file with 58 additions and 53 deletions.
diff --git a/src/less/components/radio.less b/src/less/components/radio.less
@@ -1,8 +1,7 @@
 @import "./form.less";
 @import "../global.less";
 
-// TODO: make sure checkmark still works if use <i> instead of span.checkmark-icon
-// TODO: refactor it all, so it makes more sense
+// TODO: next major release: remove support for `.radio.checkmark label i` and replace with `.radio.checkmark label .checkmark-icon` officially
 
 .radio {
 	--radio-height: 1.375rem;
@@ -103,11 +102,6 @@
 		background-color: transparent;
 	}
 
-	&:disabled {
-		border: 2px solid transparent;
-		margin: auto;
-	}
-
 	* {
 		pointer-events: all;
 	}
@@ -161,74 +155,85 @@
 		}
 	}
 
-	input[type="radio"]:hover:not(:disabled) + label {
-		background-color: var(--brown-medium);
-		color: var(--white);
-		border-radius: var(--border-radius, 8px);
-		border: 0 solid transparent;
-		outline: 1px solid var(--brown-medium);
-		box-shadow: none !important;
+	// checked state
+	input[type="radio"]:checked {
+		& + label {
+			border-radius: var(--border-radius, 8px);
+			outline-width: 3px;
+			outline-offset: -2px;
 
-		// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i> for now until next major release
-		i {
-			color: #f0f0f0;
+			// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i > for now until next major release i {
+			i {
+				color: #000000;
+			}
+		}
+
+		&:hover:not(:disabled) + label {
+			background-color: var(--brown-medium);
+			color: var(--white);
+
+			.checkmark-icon,
+			> i {
+				background-color: var(--white);
+
+				&::before {
+					border-color: var(--brown-medium);
+				}
+			}
 		}
 	}
 
+	// not checked state
 	input[type="radio"]:not(:checked) + label {
 		.checkmark-icon,
 		i {
 			visibility: hidden;
 		}
 	}
 
-	input[type="radio"]:checked:hover:not(:disabled) + label {
-		background-color: var(--brown-medium);
-		color: var(--white);
-
-		.checkmark-icon,
-		> i {
-			background-color: var(--white);
-
-			&::before {
-				border-color: var(--brown-medium);
-			}
-		}
-	}
-
-	input[type="radio"]:checked + label {
-		border-radius: var(--border-radius, 8px);
-		outline-width: 3px;
-		outline-offset: -2px;
+	// disabled state
+	input[type="radio"]:disabled {
+		border: 2px solid transparent;
+		margin: auto;
 
-		// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i > for now until next major release i {
-		i {
-			color: #000000;
+		& + label {
+			color: var(--brown-light);
+			outline: 1px solid var(--brown-light);
 		}
-	}
 
-	input[type="radio"]:disabled + label {
-		color: var(--brown-light);
-		outline: 1px solid var(--brown-light);
-	}
+		&:checked + label {
+			outline: 0;
+			background-color: var(--gray);
+			color: var(--brown-light);
 
-	input[type="radio"]:checked:disabled + label {
-		outline: 0;
-		background-color: var(--gray);
-		color: var(--brown-light);
+			.checkmark-icon,
+			& > i {
+				background-color: var(--brown-light);
 
-		.checkmark-icon,
-		& > i {
-			background-color: var(--brown-light);
+				&::before {
+					border-color: var(--gray);
+				}
+			}
 
-			&::before {
-				border-color: var(--gray);
+			// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i> for now until next major release
+			i {
+				visibility: hidden;
 			}
 		}
+	}
+
+	// not disabled state
+	input[type="radio"]:not(:disabled):hover + label {
+		background-color: var(--brown-medium);
+		color: var(--white);
+		border-radius: var(--border-radius, 8px);
+		border: 0 solid transparent;
+		outline: 1px solid var(--brown-medium);
+		box-shadow: none !important;
 
 		// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i> for now until next major release
 		i {
-			visibility: hidden;
+			color: #f0f0f0;
 		}
 	}