Lerking/gtk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Focus improvements

Browse Source 
- add tab and treeview
- change focus variables: use alt_ prefix instead of coloured_ and descend focus_border_color from selected_bg_color
This commit is contained in:
frederik.feichtmeier
2020-04-08 20:26:14 +02:00
committed by Jakub Steiner
parent dfd4eef39e
commit d4dd25891f
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gtk/theme/Adwaita/_colors.scss
View File

@@ -76,5 +76,5 @@ $progress_border_color: $selected_borders_color;
$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
$checkradio_fg_color: $selected_fg_color;
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
$focus_border_color: transparentize(#3584e4, 0.3);
$coloured_focus_border_color: transparentize(white, 0.3);
$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3));
$alt_focus_border_color: transparentize(white, 0.5);

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

@@ -53,7 +53,7 @@ flowboxchild:focus(visible) {
outline-style: solid;
outline-offset: -1px;
outline-width: 2px;
:selected & { outline-color: $coloured_focus_border_color; }
:selected & { outline-color: $alt_focus_border_color; }
}
// Widgets that draw their focus indicator outset and not inset
@@ -70,9 +70,9 @@ button:focus(visible), modelbutton:focus(visible) {
outline-offset: -2px;
outline-width: 2px;
row:selected & { outline-color: $coloured_focus_border_color; }
row:selected & { outline-color: $alt_focus_border_color; }
&.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $coloured_focus_border_color; } }
&.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $alt_focus_border_color; } }
}
// Draw the "outline" around the whole switch not the slider
@@ -81,16 +81,17 @@ switch:focus(visible) {
&:focus {
box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
}
row:selected & { outline-color: $coloured_focus_border_color; }
row:selected & { outline-color: $alt_focus_border_color; }
}
checkbutton:focus(visible),
radiobutton:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: 1px;
outline-offset: 3px;
outline-width: 2px;
row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
border-radius: 3px;
row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
}
row:focus(visible) {
@@ -98,15 +99,28 @@ row:focus(visible) {
outline-offset: -2px;
outline-style: solid;
&:selected {
outline-color: $coloured_focus_border_color;
outline-color: $alt_focus_border_color;
}
}
treeview:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-width: 2px;
&:selected {
outline-color: $coloured_focus_border_color;
outline-color: $alt_focus_border_color;
}
}
notebook > header {
tabs {
&, &:hover, &:backdrop {
&, &.right, &.left, &.top, &.bottom {
tab:focus(visible), tab:checked:focus(visible) {
color: $focus_border_color;
}
}
}
}
}
@@ -2428,7 +2442,6 @@ switch {
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
padding: 2px 0;
outline-offset: 0;
border-spacing: 4px;
}