theme: Regain focus ring in %bubble_button

Instead of removing all button shadows forcibly with
`box-shadow: none !important`, remove only the drop shadows selectively
with button(). This allows %bubble_button to preserve the focus ring
while eliminating the drop shadows.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/2088

2 files changed, 13 insertions, 11 deletions

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index d01428368..aea0dbbc3 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -156,19 +156,18 @@ stage {
 
 // buttons in dialogs
 %bubble_button {
-  @include button(normal);
+  @include button(normal, $shadow: none);
   padding: $base_padding * 2;
   border-color: $bubble_borders_color;
   border-style: solid;
   border-width: 1px;
   border-left-width: 0;
   border-bottom-width: 0;
-  box-shadow:none !important;
 
-  &:insensitive { @include button(insensitive);}
-  &:hover { @include button(hover);}
-  &:focus { @include button(focus);}
-  &:active { @include button(active);}
+  &:insensitive { @include button(insensitive, $shadow: none); }
+  &:hover { @include button(hover, $shadow: none); }
+  &:focus { @include button(focus, $shadow: none); }
+  &:active { @include button(active, $shadow: none); }
 
   // radius is 2 pixel less to fit in bubble
   &:first-child {
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 63f9f6c83..03ce04353 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -110,7 +110,7 @@
   }
 }
 
-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
 //
 // Button drawing function
 //
@@ -119,6 +119,8 @@
 // $tc:   optional text color for colored* types
 // $edge: set to none to not draw the bottom edge or specify a color to not
 //        use the default one
+// $shadow: set to none to not draw the drop shadow or specify a color to not
+//          use the default one
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
@@ -129,13 +131,14 @@
   $hilight_color: draw_button_hilight_color($c);
   $button_edge: if($edge == none, none, draw_widget_edge($edge));
   $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
+  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
 
   // normal button
   @if $t==normal {
     color: $tc;
     background-color: lighten($c, 3%) !important;
     border-color: draw_border_color($c);
-    @include draw_shadows(0 1px 1px 0 $shadow_color);
+    @include draw_shadows($button_shadow);
     // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
     text-shadow: 0 1px $text_shadow_color;
     icon-shadow: 0 1px $text_shadow_color;
@@ -150,17 +153,17 @@
     //border-color: $selected_bg_color;
   }
 
-  // hover osd button
+  // hover button
   @else if $t==hover {
     color: $tc;
     background-color: lighten($c, if($variant == 'light', 8%, 5%)) !important;
     border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
-    @include draw_shadows(0 1px 1px 0 $shadow_color);
+    @include draw_shadows($button_shadow);
     text-shadow: 0 1px $text_shadow_color;
     icon-shadow: 0 1px $text_shadow_color;
   }
 
-  // active osd button
+  // active button
   @else if $t==active {
     color: $tc;
     background-color: darken($c,3%) !important;