Unify focus states in <Checkbox>, <Radio>, <Toggle>, and <YesNo> components
[MAILPOET-4546]
This commit is contained in:
committed by
Ján Mikláš
parent
712481c426
commit
43f95d21fd
@ -21,7 +21,7 @@
|
||||
|
||||
&:focus {
|
||||
~ .mailpoet-form-checkbox-control {
|
||||
border: 2px solid $color-input-border;
|
||||
border-color: $color-input-border-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -21,7 +21,7 @@
|
||||
|
||||
&:focus {
|
||||
~ .mailpoet-form-radio-control {
|
||||
border: 2px solid $color-input-border;
|
||||
border-color: $color-input-border-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -12,6 +12,12 @@
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
&:focus {
|
||||
~ .mailpoet-form-toggle-control {
|
||||
border-color: $color-input-border-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
Reference in New Issue
Block a user