tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Improve hover and focus style in columns settings

Browse Source 
Port 900481b7fa to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Mélanie Chauvel
2021-10-01 00:55:51 +02:00
committed by Claire
parent 079ed6c26d
commit cef109e046
4 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -437,12 +437,17 @@
}
.column-header__setting-btn {
&:hover {
&:hover,
&:focus {
color: $darker-text-color;
text-decoration: underline;
}
}
.column-header__collapsible__extra + .column-header__setting-btn {
padding-top: 5px;
}
.column-header__permission-btn {
display: inline;
font-weight: inherit;
@ -453,10 +458,15 @@
float: right;
.column-header__setting-btn {
padding: 0 10px;
padding: 5px;
&:first-child {
padding-right: 7px;
}
&:last-child {
padding-right: 0;
padding-left: 7px;
margin-left: 5px;
}
}
}

4
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -829,7 +829,7 @@
transition: background-color 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
background-color: darken($ui-base-color, 10%);
}
@ -837,7 +837,7 @@
background-color: $ui-highlight-color;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
background-color: lighten($ui-highlight-color, 10%);
}