AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-12-27 22:20:24 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: Regular focus ring for sidebar rows

Browse Source 
- style sidebar rows as regular items like buttons wrt focus
- define transition as part of the focus-ring(),
  only animate outline related properties rather than `all`

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/3708
This commit is contained in:
Jakub Steiner 2021-03-05 12:16:10 +01:00
parent 468242b13b
commit 11d6f2ddd0
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gtk/theme/Adwaita/_common.scss
View File

@ -3589,6 +3589,7 @@ stacksidebar {
}
row {
padding: 10px 4px;
@include focus-ring();
> label {
padding-left: 6px;
@ -3607,11 +3608,6 @@ stacksidebar {
&:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
background-color: darken($menu_selected_color,5%);
}
&:focus:focus-visible {
outline-width: 0;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&.activatable:active, &.activatable:selected:active {
box-shadow: none; // #3413
}
@ -3639,9 +3635,8 @@ separator.sidebar {
padding: 0 8px;
border-radius: $menu-margin;
margin: 0 $menu-margin 2px;
&:hover,
&:focus-visible:focus-within {
@include focus-ring($focus-state: 'focus-visible:focus-within');
&:hover {
background-color: darken($menu_selected_color, 5%);
}
@ -3653,12 +3648,6 @@ separator.sidebar {
background-color: darken($menu_selected_color,5%);
}
&:focus-visible:focus-within {
outline-width: 0;
color: $selected_fg_color;
background-color: $selected_bg_color;
&:hover { background-color: darken($selected_bg_color,10%); }
}
}
&:disabled { color: $insensitive_fg_color; }

3
gtk/theme/Adwaita/_drawing.scss
View File

@ -10,6 +10,9 @@
// If $within is true, use focus-within instead of focus:focus-visible
//
@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) {
transition-property: outline, outline-width, outline-offset, outline-color;
transition-duration: 300ms;
animation-timing-function: ease-in-out;
& #{$target} {
outline: 0 solid transparent;
outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);