From 4516bfbc88f23c2f72c471e91e9e07e40993aa89 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Thu, 16 Apr 2020 08:30:29 -0400 Subject: [PATCH] Adwaita: Some adjustments for :focus-within Use :focus-within for focus in entries, since the actual focus is on the text within, and :focus for notebooks, since we don't want to draw an outline around the notebook when the focus is in content. --- gtk/theme/Adwaita/_common.scss | 40 +++++++++++++++++----------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index d776620b39..7943da00b9 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -114,7 +114,7 @@ treeview:focus-visible { } } -notebook:focus-visible { +notebook:focus:focus-visible { outline-color: $focus_border_color; outline-style: solid; outline-offset: -1px; @@ -383,7 +383,7 @@ entry { } &.flat { - &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & { + &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & { min-height: 0; padding: 2px; background-color: transparent; @@ -392,7 +392,7 @@ entry { } } - &:focus { + &:focus-within { @include entry(focus); > placeholder { opacity: 0; /* We hide placeholders on focus */ @@ -418,7 +418,7 @@ entry { color: $e_color; border-color: entry_focus_border($e_color); - &:focus { @include entry(focus, $e_color); } + &:focus-within { @include entry(focus, $e_color); } > selection { background-color: $e_color; } } @@ -439,7 +439,7 @@ entry { } &:drop(active) { - &:focus, & { + &:focus-within, & { border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } @@ -448,7 +448,7 @@ entry { .osd & { @include entry(osd); - &:focus { @include entry(osd-focus); } + &:focus-within { @include entry(osd-focus); } &:backdrop { @include entry(osd-backdrop); } @@ -474,13 +474,13 @@ entry { // linked entries .linked:not(.vertical) > & { @extend %linked; } - .linked:not(.vertical) > &:focus + &, - .linked:not(.vertical) > &:focus + button, - .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } + .linked:not(.vertical) > &:focus-within + &, + .linked:not(.vertical) > &:focus-within + button, + .linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus_border(); } - .linked:not(.vertical) > &:focus.error + &, - .linked:not(.vertical) > &:focus.error + button, - .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); } + .linked:not(.vertical) > &:focus-within.error + &, + .linked:not(.vertical) > &:focus-within.error + button, + .linked:not(.vertical) > &:focus-within.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); } .linked:not(.vertical) > &:drop(active) + &, .linked:not(.vertical) > &:drop(active) + button, @@ -505,25 +505,25 @@ entry { // color back the top border of a linked focused entry following another entry. // :not(:only-child) is a specificity bump hack. - + %entry:focus:not(:only-child), - + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } + + %entry:focus-within:not(:only-child), + + entry:focus-within:not(:only-child) { border-top-color: entry_focus_border(); } - + %entry:focus.error:not(:only-child), - + entry:focus.error:not(:only-child) { border-top-color: entry_focus_border($error_color); } + + %entry:focus-within.error:not(:only-child), + + entry:focus-within.error:not(:only-child) { border-top-color: entry_focus_border($error_color); } + %entry:drop(active):not(:only-child), + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } // this takes care of coloring the top border of the focused entry subsequent widget. // :not(:only-child) is a specificity bump hack. - &:focus:not(:only-child) { + &:focus-within:not(:only-child) { + %entry, + entry, + button, + combobox > box > button.combo { border-top-color: entry_focus_border(); } } - &:focus.error:not(:only-child) { + &:focus-within.error:not(:only-child) { + %entry, + entry, + button, @@ -540,7 +540,7 @@ entry { } treeview entry { - &:focus { + &:focus-within { &:dir(rtl), &:dir(ltr) { // specificity bump hack background-color: $base_color; transition-property: color, background; @@ -552,7 +552,7 @@ treeview entry { background-image: none; background-color: $base_color; - &:focus { border-color: $selected_bg_color; } + &:focus-within { border-color: $selected_bg_color; } } }