style: use outline for focused widgets (#62209)

This commit is contained in:
Frédéric Péters 2022-02-27 10:41:44 +01:00
parent 10f8a3f333
commit 2de4d57df3
2 changed files with 12 additions and 3 deletions

View File

@ -11,8 +11,8 @@ $widget-border: 1px solid #AAA;
$widget-focus-border: $widget-border; $widget-focus-border: $widget-border;
$widget-border-radius: 0; $widget-border-radius: 0;
$widget-color: black; $widget-color: black;
$widget-focus-color: black; $widget-focus-color: $widget-color;
$widget-focus-outline: none; $widget-focus-outline: 1px solid $primary-color;
$widget-focus-outline-offset: 0; $widget-focus-outline-offset: 0;
$data_uri_arrow-down: "arrow-down.svg"; $data_uri_arrow-down: "arrow-down.svg";
@ -209,8 +209,14 @@ input, input[type="text"], input[type="url"], input[type="email"], input[type="p
@include vendor-prefix('transition', 'background-size 0.2s ease'); @include vendor-prefix('transition', 'background-size 0.2s ease');
background: $widget-background; background: $widget-background;
color: $widget-color; color: $widget-color;
&:focus:not([readonly]) {
background-color: $widget-focus-background;
border: $widget-focus-border;
color: $widget-focus-color;
}
&:focus { &:focus {
border-bottom-color: $button-submit-color; outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
} }
&.disabled, &.disabled,
&[disabled] { &[disabled] {

View File

@ -474,6 +474,9 @@ div#main-content {
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
} }
form {
padding: 0 2px;
}
} }