fix: radio buttons

platform-coop-toolkit · May 26, 2020 · 3a3dc34 · 3a3dc34
1 parent 9c6eb14
commit 3a3dc34
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/assets/styles/components/_input.scss b/src/assets/styles/components/_input.scss
@@ -264,10 +264,6 @@ input[type="checkbox"] + label
 	font-weight: $font-weight-normal;
 }
 
-input[type="radio"]::before {
-	border-radius: 100%;
-}
-
 input[type="radio"]::before,
 input[type="checkbox"]::before,
 [role="checkbox"]::before {
@@ -282,15 +278,21 @@ input[type="checkbox"]::before,
 	transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
 	width: rem(18);
 
-	&:focus {
-		outline: none;
-	}
-
 	@media (prefers-reduced-motion: reduce) {
 		transition: none;
 	}
 }
 
+input[type="radio"]::before {
+	border-radius: 100%;
+}
+
+input[type="radio"]::before:focus,
+input[type="checkbox"]::before:focus,
+[role="checkbox"]::before:focus {
+	outline: none;
+}
+
 input[type="radio"]:disabled + label,
 input[type="checkbox"]:disabled + label {
 	color: var(--text-value-color-disabled);