Merge branch 'wip/jimmac/button-shed' into 'master'

headerbar window controls & clean up flat button extend

Closes #3427

See merge request GNOME/gtk!2942

3 files changed, 54 insertions, 23 deletions

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index bf183a7866..958162c6f2 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -16,7 +16,7 @@ $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($s
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 $top_hilight: $borders_edge;
 $dark_fill: mix($borders_color, $bg_color, 50%);
-$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
+$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
 $menu_color: $base_color;
 $menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%));
 
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 2fb68a6f8e..845582650d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -484,23 +484,6 @@ button {
 
     @include focus-ring();
 
-    @at-root %button_basic_flat,
-    &.flat {
-      @include button(undecorated);
-      // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
-      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
-      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
-      // in this case the duration is increased.
-      transition: none;
-
-      &:hover {
-        transition: $button_transition;
-        transition-duration: 500ms;
-
-        &:active { transition: $button_transition; }
-      }
-    }
-
     &:hover {
       @include button(hover);
       -gtk-icon-filter: brightness(1.2);
@@ -532,9 +515,6 @@ button {
       }
     }
 
-    @at-root %button_basic_flat,
-    &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
-
     &:disabled {
       @include button(insensitive);
 
@@ -542,6 +522,27 @@ button {
       &:checked { @include button(insensitive-active); }
     }
 
+    @at-root %button_basic_flat,
+    &.flat {
+      @include button(undecorated);
+      // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
+      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+      // in this case the duration is increased.
+      transition: none;
+
+      &:hover {
+        @include button(undecorated-hover);
+        transition: $button_transition;
+        transition-duration: 500ms;
+      }
+      &:active {
+        @include button(undecorated-active);
+        transition: $button_transition;
+      }
+      &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
+    }
+
     &.image-button {
       min-width: 24px;
       padding-left: 5px;
@@ -1388,11 +1389,17 @@ windowcontrols {
 
     @extend %button_basic_flat;
 
+
     border-radius: 9999px;
     padding: 6px;
     margin: 0 2px;
     min-width: 0;
     min-height: 0;
+    &:hover {
+      //special case hover colors inside a headerbar
+      @include button(undecorated-hover,$c:$headerbar_bg_color);
+    }
+    &:active { @include button(undecorated-active,$c:$headerbar_bg_color); }
   }
 }
 
@@ -4062,7 +4069,7 @@ window {
       padding: 0;
       border: solid 1px $borders_color;
       border-radius: 0;
-      box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
+      box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight;
 
       &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
     }
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 78984e4409..dd45692767 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -413,9 +413,33 @@
     text-shadow: none;
     -gtk-icon-shadow: none;
   }
+  @else if $t==undecorated-hover {
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    text-shadow: none;
+    @if $variant == 'light' {
+      background-color: darken($c,26%);
+    }
+    @else {
+      background-color: darken($c,10%);
+    }
+  }
+  @else if $t==undecorated-active {
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    text-shadow: none;
+    @if $variant == 'light' {
+      background-color: darken($c,40%);
+    }
+    @else {
+      background-color: darken($c,14%);
+    }
+  }
 }
 
-@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
+@mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none) {
 //
 // headerbar fill
 //