refactor: radio and checkbox simplification and correction (#446)

mfranzke · web-flow · commit c52a643fa8bc · 2023-05-09T14:39:00.000+02:00
* refactor: code simplification

* fix: background-color change on hover is only supposed work if unchecked and enabled
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -36,13 +36,11 @@
 		}
 	}
 
-	&:not(:disabled) {
+	&:enabled {
 		&:hover {
 			background-color: rgba(40, 45, 55, 0.14);
-		}
 
-		&:checked {
-			&:hover {
+			&:checked {
 				background-color: $checkbox-hover-checked-backgroundColor;
 			}
 		}
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
@@ -23,12 +23,16 @@
 		vertical-align: sub;
 	}
 
-	&:hover {
-		background-color: rgba(40, 45, 55, 0.14);
-	}
+	&:enabled {
+		&:hover {
+			&:not(:checked) {
+				background-color: rgba(40, 45, 55, 0.14);
+			}
+		}
 
-	&:active {
-		background-color: rgba(40, 45, 55, 0.3);
+		&:active {
+			background-color: rgba(40, 45, 55, 0.3);
+		}
 	}
 
 	&:checked {

Original file line number	Diff line number	Diff line change
`@@ -36,13 +36,11 @@`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`
`39`		`- &:not(:disabled) {`
	`39`	`+ &:enabled {`
`40`	`40`	`&:hover {`
`41`	`41`	`background-color: rgba(40, 45, 55, 0.14);`
`42`		`- }`
`43`	`42`
`44`		`- &:checked {`
`45`		`- &:hover {`
	`43`	`+ &:checked {`
`46`	`44`	`background-color: $checkbox-hover-checked-backgroundColor;`
`47`	`45`	`}`
`48`	`46`	`}`