entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

style: use outline for focused buttons (#62827)

This commit is contained in:
Frédéric Péters 2022-03-15 22:17:36 +01:00
parent 74e159e084
commit 093cea5988
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
gadjo/static/css/_forms.scss
View File

@ -1,10 +1,5 @@
@charset "UTF-8";
$button-color: $primary-color;
$button-cancel-color: darken(grayscale($button-color), 10%);
$button-delete-color: #CD2026;
$button-submit-color: #215D9C;
$widget-background: white;
$widget-focus-background: white;
$widget-border: 1px solid #AAA;
@ -15,6 +10,13 @@ $widget-focus-color: $widget-color;
$widget-focus-outline: 1px solid $primary-color;
$widget-focus-outline-offset: 0;
$button-color: $primary-color;
$button-cancel-color: darken(grayscale($button-color), 10%);
$button-delete-color: #CD2026;
$button-submit-color: #215D9C;
$button-focus-outline: $widget-focus-outline !default;
$button-focus-outline-offset: $widget-focus-outline-offset !default;
$data_uri_arrow-down: "arrow-down.svg";
input, select, button, textarea {
@ -106,8 +108,14 @@ a.button {
}
&:active { border-color: darken($button-color, 10%); }
&:focus {
border-color: darken($button-color, 20%);
@if $button-focus-outline == none {
outline: 1px dotted $button-background;
} @else {
outline: $button-focus-outline;
outline-offset: $button-focus-outline-offset;
}
}
&.disabled, &:disabled {
border-color: #888;
color: #888;
@ -136,6 +144,9 @@ a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.but
border-color: darken($button-cancel-color, 20%);
}
&:active { border-color: darken($button-cancel-color, 10%); }
&:focus {
outline-color: darken($button-cancel-color, 10%);
}
}
div.buttons {
@ -162,6 +173,9 @@ a.delete-button, button.delete-button, div.buttons .delete-button input, div.but
border-color: darken($button-delete-color, 20%);
}
&:active { border-color: darken($button-delete-color, 10%); }
&:focus {
outline-color: darken($button-delete-color, 10%);
}
}
a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button {