Adwaita: flat button :hover and :active

- special case undecorated button hovers

2 files changed, 45 insertions, 17 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 7694920d83..1d2f8b6396 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; }
-      &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
-    }
-
     &:hover {
       @include button(hover);
       -gtk-icon-filter: brightness(1.2);
@@ -539,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;
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index c80fcb5ec0..dd45692767 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -413,6 +413,30 @@
     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_bg_color, $hc:$top_hilight, $ov: none) {