treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

lolsob-rspec
Trevor Wolf 2023-08-03 03:33:41 +10:00 committed by GitHub
parent e395939ead
commit 8b1bd9a80f
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