Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-14 09:25:43 +01:00
Code Issues Packages Projects Releases Activity

Implement focus for links and html buttons (#2160)

Browse Source 
When set programmatically, browsers don't always consistently show a focus indicator which is required for list navigation via keyboard to function properly. We already implemented a custom focus indicator for buttons which has now been expanded with slight tweaks to anchor tags as well. This is by no means a complete solution and will be revisited at a later date.
This commit is contained in:
Konstantin Schaper
2022-11-21 15:26:07 +01:00
committed by GitHub
parent 247d728943
commit 03bd5b117b
1 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
scm-ui/ui-styles/src/components/_main.scss
View File

@@ -316,6 +316,25 @@ a.has-text-secondary-most:focus {
} }
} }
a {
&:focus,
&.is-focused {
outline: $focus-outline-color 2px solid;
outline-offset: 1px;
}
}
button, .button {
&:focus,
&.is-focused {
outline: $focus-outline-color $focus-outline-style;
outline-offset: $focus-outline-offset;
&:not(:active) {
box-shadow: none !important;
}
}
}
// buttons // buttons
.button { .button {
padding-left: 1.5em; padding-left: 1.5em;
@@ -334,16 +353,6 @@ a.has-text-secondary-most:focus {
} }
} }
&:focus,
&.is-focused {
outline: $focus-outline-style;
outline-color: $focus-outline-color;
outline-offset: $focus-outline-offset;
&:not(:active) {
box-shadow: none !important;
}
}
&.is-primary:hover, &.is-primary:hover,
&.is-primary.is-hovered { &.is-primary.is-hovered {
background-color: scale-color($primary, $lightness: -10%); background-color: scale-color($primary, $lightness: -10%);