bida/bastodon
6
0
Fork 0
Code Issues 7 Pull requests Releases Wiki Activity

change column link to add a better keyboard focus indicator (#26278)

Browse source
This commit is contained in:
Trevor Wolf 2023-08-03 03:33:41 +10:00 committed by GitHub
parent e258b4cb64
commit 6308dca76a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/styles/mastodon/basics.scss
View file

@ -164,7 +164,7 @@ body {
a { a {
&:focus { &:focus {
border-radius: 4px; border-radius: 4px;
outline: $ui-button-icon-focus-outline; outline: $ui-button-focus-outline;
} }
&:focus:not(:focus-visible) { &:focus:not(:focus-visible) {

9
app/javascript/styles/mastodon/components.scss
View file

@ -3283,6 +3283,8 @@ $ui-header-height: 55px;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
border: 0;
border-left: 4px solid transparent;
&:hover, &:hover,
&:focus, &:focus,
@ -3294,6 +3296,11 @@ $ui-header-height: 55px;
outline: 0; outline: 0;
} }
&:focus-visible {
border-color: $ui-button-focus-outline-color;
border-radius: 0;
}
&--transparent { &--transparent {
background: transparent; background: transparent;
color: $ui-secondary-color; color: $ui-secondary-color;
@ -3958,7 +3965,7 @@ a.status-card {
} }
&:focus-visible { &:focus-visible {
outline: $ui-button-icon-focus-outline; outline: $ui-button-focus-outline;
} }
&.active { &.active {

4
app/javascript/styles/mastodon/variables.scss
View file

@ -43,6 +43,8 @@ $ui-highlight-color: $classic-highlight-color !default;
$ui-button-color: $white !default; $ui-button-color: $white !default;
$ui-button-background-color: $blurple-500 !default; $ui-button-background-color: $blurple-500 !default;
$ui-button-focus-background-color: $blurple-600 !default; $ui-button-focus-background-color: $blurple-600 !default;
$ui-button-focus-outline-color: $blurple-400 !default;
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
$ui-button-secondary-color: $grey-100 !default; $ui-button-secondary-color: $grey-100 !default;
$ui-button-secondary-border-color: $grey-100 !default; $ui-button-secondary-border-color: $grey-100 !default;
@ -57,7 +59,7 @@ $ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default; $ui-button-destructive-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !default; $ui-button-destructive-focus-background-color: $red-600 !default;
$ui-button-icon-focus-outline: solid 2px $blurple-400 !default; $ui-button-icon-focus-outline: $ui-button-focus-outline !default;
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default; $ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
// Variables for texts // Variables for texts