754: fix radio button centering (#857)

ScottLogic · Mar 12, 2024 · ddcf704 · ddcf704
1 parent 80d4480
commit ddcf704
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/frontend/src/components/DefenceBox/DefenceConfigurationRadioButton.css b/frontend/src/components/DefenceBox/DefenceConfigurationRadioButton.css
@@ -1,17 +1,15 @@
 .defence-radio-button {
 	position: relative;
-	display: inline-block;
+	display: flex;
 	cursor: pointer;
+	gap: 0.75rem;
 }
 
 .defence-radio-button input {
+	margin-bottom: 0.5rem;
 	opacity: 0;
 }
 
-.defence-radio-button span {
-	margin-left: 1rem;
-}
-
 /* checkmark outer circle */
 .defence-radio-button input + span::before {
 	content: '';
@@ -42,5 +40,11 @@
 }
 
 .defence-radio-button input:focus + span::before {
-	box-shadow: 0 0 0 0.125rem;
+	outline: 0.25rem solid var(--accent-border-colour);
+	outline-offset: 0.125rem;
+}
+
+.defence-radio-button input:hover + span::before {
+	outline: 0.25rem solid var(--accent-border-colour);
+	outline-offset: 0.125rem;
 }