[gtk/wip/exalm/entries] Adwaita: Convert entries to the new focus rings



commit d2b5beffbfa3d8d8dc5f04424ad235b524c2b17b
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon May 4 19:23:49 2020 +0500

    Adwaita: Convert entries to the new focus rings

 gtk/theme/Adwaita/_common.scss  | 36 ++++--------------------------------
 gtk/theme/Adwaita/_drawing.scss | 21 ++++++---------------
 2 files changed, 10 insertions(+), 47 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index ba1e6738dd..ac06013bcb 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -291,6 +291,8 @@ entry {
 
     @include entry(normal);
 
+    @include focus-ring($within: true);
+
     > image { // icons inside the entry
       &.left { margin-right: 6px; }
       &.right { margin-left: 6px; }
@@ -338,7 +340,8 @@ entry {
                                (warning, $warning_color) {
       &.#{$e_type} {
         color: $e_color;
-        border-color: entry_focus_border($e_color);
+
+        @include focus-ring($within: true, $fc: $e_color);
 
         &:focus-within { @include entry(focus, $e_color); }
 
@@ -396,13 +399,6 @@ entry {
 
    // linked entries
   .linked:not(.vertical) > & { @extend %linked; }
-  .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-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,
@@ -425,33 +421,9 @@ entry {
     &:disabled + %entry:disabled,
     &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
 
-    // color back the top border of a linked focused entry following another entry.
-    // :not(:only-child) is a specificity bump hack.
-    + %entry:focus-within:not(:only-child),
-    + entry:focus-within:not(:only-child) { border-top-color: entry_focus_border(); }
-
-    + %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-within:not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + combobox > box > button.combo { border-top-color: entry_focus_border(); }
-    }
-
-    &:focus-within.error:not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + combobox > box > button.combo { border-top-color: entry_focus_border($error_color); }
-    }
-
     &:drop(active):not(:only-child) {
       + %entry,
       + entry,
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index d505e43e57..7e9e68ca31 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -7,15 +7,18 @@
 //
 // If $target is specified, the focus ring is applied to the specified child element.
 // If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
+// If $within is true, use focus-within instead of focus:focus-visible
 //
-@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false) {
+@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $within: false, $fc: 
$focus_border_color) {
   & #{$target} {
     outline: 0 solid transparent;
     outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
   }
 
-  &:focus:focus-visible #{$target} {
-    outline-color: $focus_border_color;
+  $focus-state: if($within, "focus-within", "focus:focus-visible");
+
+  &:#{$focus-state} #{$target} {
+    outline-color: $fc;
     outline-width: $width;
     outline-offset: $offset;
   }
@@ -41,11 +44,6 @@
 }
 
 // entries
-@function entry_focus_border($fc:$focus_border_color) {
-  @return $fc;
-}
-
-@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
 
 @mixin entry($t, $fc:$focus_border_color, $edge: none) {
 //
@@ -67,14 +65,8 @@
     color: $text_color;
     border-color: $borders_color;
     background-color: $base_color;
-    @include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
     // for the transition to work the number of shadows in different states needs to match, hence the 
transparent shadow here.
   }
-  @if $t==focus {
-    @include _shadows(entry_focus_shadow($fc), $_entry_edge);
-    border-color: entry_focus_border($fc);
-    outline: none;
-  }
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
@@ -107,7 +99,6 @@
     border-color: $selected_bg_color;
     background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
     background-clip: padding-box;
-    box-shadow: entry_focus_shadow($fc);
     text-shadow: 0 1px black;
     -gtk-icon-shadow: 0 1px black;
   }


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]