rubiline
/
Glitch-Shrike
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] change column link to add a better keyboard focus indicator 

Port 6308dca76a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
shrike
Trevor Wolf 2023-08-03 03:33:41 +10:00 committed by Claire
parent c1e28c8913
commit 7565a328d0
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/styles/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) {

16
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -245,6 +245,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,
@ -256,6 +258,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;
@ -424,6 +431,10 @@ $ui-header-height: 55px;
color: lighten($darker-text-color, 7%); color: lighten($darker-text-color, 7%);
} }
&:focus-visible {
outline: $ui-button-focus-outline;
}
&.active { &.active {
color: $primary-text-color; color: $primary-text-color;
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
@ -434,11 +445,6 @@ $ui-header-height: 55px;
} }
} }
// glitch - added focus ring for keyboard navigation
&:focus {
text-shadow: 0 0 4px darken($ui-highlight-color, 5%);
}
&:disabled { &:disabled {
color: $dark-text-color; color: $dark-text-color;
cursor: default; cursor: default;

4
app/javascript/flavours/glitch/styles/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