style: use outline for focused buttons (#62827)
This commit is contained in:
parent
74e159e084
commit
093cea5988
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue