AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

css: use :focus-visible instead of :focus(visible)

Browse Source 
This is aligning our language with
https://www.w3.org/TR/selectors-4/
This commit is contained in:
Matthias Clasen 2020-04-15 23:09:36 -04:00
parent 3d988d5fe9
commit 03080f29b9
4 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
gtk/gtkcssselector.c
View File

@ -1282,6 +1282,7 @@ gtk_css_selector_parse_selector_pseudo_class (GtkCssParser *parser,
{ "link", GTK_STATE_FLAG_LINK, }, { "link", GTK_STATE_FLAG_LINK, },
{ "visited", GTK_STATE_FLAG_VISITED, }, { "visited", GTK_STATE_FLAG_VISITED, },
{ "checked", GTK_STATE_FLAG_CHECKED, }, { "checked", GTK_STATE_FLAG_CHECKED, },
{ "focus-visible", GTK_STATE_FLAG_FOCUS_VISIBLE, },
}; };
guint i; guint i;
@ -1448,19 +1449,6 @@ gtk_css_selector_parse_selector_pseudo_class (GtkCssParser *parser,
selector); selector);
selector->state.state = GTK_STATE_FLAG_DROP_ACTIVE; selector->state.state = GTK_STATE_FLAG_DROP_ACTIVE;
} }
else if (gtk_css_token_is_function (token, "focus"))
{
if (!gtk_css_parser_consume_function (parser, 1, 1, parse_identifier_arg, (gpointer) "visible"))
{
if (selector)
_gtk_css_selector_free (selector);
return NULL;
}
selector = gtk_css_selector_new (negate ? &GTK_CSS_SELECTOR_NOT_PSEUDOCLASS_STATE
: &GTK_CSS_SELECTOR_PSEUDOCLASS_STATE,
selector);
selector->state.state = GTK_STATE_FLAG_FOCUS_VISIBLE;
}
else else
{ {
gtk_css_parser_error (parser, gtk_css_parser_error (parser,

2
gtk/gtkcsstypes.c
View File

@ -232,7 +232,7 @@ gtk_css_pseudoclass_name (GtkStateFlags state)
"visited", "visited",
"checked", "checked",
"drop(active)", "drop(active)",
"focus(visible)" "focus-visible"
}; };
guint i; guint i;

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

@ -42,10 +42,10 @@ dnd {
* Outlines * * Outlines *
********/ ********/
:focus(visible) link, :focus-visible link,
label:focus(visible):not(.link), label:focus-visible:not(.link),
row:focus(visible), row:focus-visible,
flowboxchild:focus(visible) { flowboxchild:focus-visible {
// We use the outline properties to signal the focus properties // We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster, // to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now. // and we don't use any outlines for now.
@ -58,15 +58,15 @@ flowboxchild:focus(visible) {
} }
// Widgets that draw their focus indicator outset and not inset // Widgets that draw their focus indicator outset and not inset
plane:focus(visible), plane:focus-visible,
scale:focus(visible) > trough { scale:focus-visible > trough {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-style: solid; outline-style: solid;
outline-offset: 10px; outline-offset: 10px;
outline-width: 2px; outline-width: 2px;
} }
button:focus(visible), modelbutton:focus(visible) { button:focus-visible, modelbutton:focus-visible {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-style: solid; outline-style: solid;
outline-offset: -2px; outline-offset: -2px;
@ -78,7 +78,7 @@ button:focus(visible), modelbutton:focus(visible) {
} }
// Draw the "outline" around the whole switch not the slider // Draw the "outline" around the whole switch not the slider
switch:focus(visible) { switch:focus-visible {
&, &:hover { slider { outline-color: transparent; } } &, &:hover { slider { outline-color: transparent; } }
&:focus { &:focus {
box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color); box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
@ -86,8 +86,8 @@ switch:focus(visible) {
row:selected & { outline-color: $alt_focus_border_color; } row:selected & { outline-color: $alt_focus_border_color; }
} }
checkbutton:focus(visible), checkbutton:focus-visible,
radiobutton:focus(visible) { radiobutton:focus-visible {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-style: solid; outline-style: solid;
outline-offset: 2px; outline-offset: 2px;
@ -96,7 +96,7 @@ radiobutton:focus(visible) {
row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; } row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
} }
row:focus(visible) { row:focus-visible {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-offset: -2px; outline-offset: -2px;
outline-style: solid; outline-style: solid;
@ -105,7 +105,7 @@ row:focus(visible) {
} }
} }
treeview:focus(visible) { treeview:focus-visible {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-style: solid; outline-style: solid;
outline-width: 2px; outline-width: 2px;
@ -114,7 +114,7 @@ treeview:focus(visible) {
} }
} }
notebook:focus(visible) { notebook:focus-visible {
outline-color: $focus_border_color; outline-color: $focus_border_color;
outline-style: solid; outline-style: solid;
outline-offset: -1px; outline-offset: -1px;
@ -3979,7 +3979,7 @@ colorswatch {
} }
} }
&:focus(visible) { &:focus-visible {
outline-offset: -2px; outline-offset: -2px;
outline-width: 2px; outline-width: 2px;
outline-style: solid; outline-style: solid;

2
tests/testwidgetfocus.c
View File

@ -47,7 +47,7 @@ const char *css =
" background-color: white;" " background-color: white;"
" box-shadow: none;" " box-shadow: none;"
"}" "}"
"focuswidget button:focus(visible) {" "focuswidget button:focus-visible {"
" outline-width: 4px;" " outline-width: 4px;"
" outline-color: yellow;" " outline-color: yellow;"
"}" "}"