diff --git a/mailpoet/assets/css/src/generic/_forms-checkbox.scss b/mailpoet/assets/css/src/generic/_forms-checkbox.scss index 1292f1fc59..b5cf02546e 100644 --- a/mailpoet/assets/css/src/generic/_forms-checkbox.scss +++ b/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; } } } diff --git a/mailpoet/assets/css/src/generic/_forms-radio.scss b/mailpoet/assets/css/src/generic/_forms-radio.scss index 705738ce63..412dcdd530 100644 --- a/mailpoet/assets/css/src/generic/_forms-radio.scss +++ b/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; } } } diff --git a/mailpoet/assets/css/src/generic/_forms-toggle.scss b/mailpoet/assets/css/src/generic/_forms-toggle.scss index 0e38903183..03e2d7cda7 100644 --- a/mailpoet/assets/css/src/generic/_forms-toggle.scss +++ b/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; + } + } } } diff --git a/mailpoet/assets/css/src/generic/_forms-yesno.scss b/mailpoet/assets/css/src/generic/_forms-yesno.scss index 9043c31caf..c3fb430ee4 100644 --- a/mailpoet/assets/css/src/generic/_forms-yesno.scss +++ b/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; + } + } } } diff --git a/mailpoet/assets/css/src/settings/_colors.scss b/mailpoet/assets/css/src/settings/_colors.scss index 8434f2fcb8..4c6dd65101 100644 --- a/mailpoet/assets/css/src/settings/_colors.scss +++ b/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;