Unify focus states in <Checkbox>, <Radio>, <Toggle>, and <YesNo> components

[MAILPOET-4546]

mailpoet/assets/css/src/generic/_forms-checkbox.scss

@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-checkbox-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }

mailpoet/assets/css/src/generic/_forms-radio.scss

@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-radio-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }

mailpoet/assets/css/src/generic/_forms-toggle.scss

@@ -12,6 +12,12 @@
     opacity: 0;
     position: absolute;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-toggle-control {
+        border-color: $color-input-border-focus;
+      }
+    }
   }
 }
 

mailpoet/assets/css/src/generic/_forms-yesno.scss

@@ -25,6 +25,13 @@
     opacity: 0;
     position: absolute;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-yesno-control {
+        box-shadow: 0 0 0 1px $color-input-border-focus;
+        z-index: 1;
+      }
+    }
   }
 }
 

mailpoet/assets/css/src/settings/_colors.scss

@@ -31,6 +31,7 @@ $color-tertiary-hover: darken($color-tertiary, 10%);
 $color-tertiary-light: #dcdcde;
 $color-grey-0: #f6f7f7;
 $color-tertiary-light-hover: darken($color-tertiary-light, 10%);
+$color-tertiary-light-focus: #777;
 $color-tertiary-light-background: rgba($color-tertiary-light, 0.3);
 $color-destructive: #b52727;
 $color-destructive-hover: #a02222;
@@ -46,6 +47,7 @@ $color-text-dark: #2c3338;
 // Form colors
 $color-input-background: #fdfdff;
 $color-input-border: $color-tertiary-light-hover;
+$color-input-border-focus: $color-tertiary-light-focus;
 $color-input-error: #f00;
 $color-input-success: #7ed321;