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-border-radius: 0;
$widget-color: black;
$widget-focus-color: black;
$widget-focus-outline: none;
$widget-focus-color: $widget-color;
$widget-focus-outline: 1px solid $primary-color;
$widget-focus-outline-offset: 0;
$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');
background: $widget-background;
color: $widget-color;
&:focus:not([readonly]) {
background-color: $widget-focus-background;
border: $widget-focus-border;
color: $widget-focus-color;
}
&:focus {
border-bottom-color: $button-submit-color;
outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
}
&.disabled,
&[disabled] {

View File

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