[libadwaita/wip/exalm/active: 1/4] stylesheet: Stop using :hover:active

[Alexander Mikhaylenko <alexm src gnome org>]

commit a154a0b771ff07c253b16351d1869bdbfd3ac06f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue May 24 05:21:15 2022 +0400

    stylesheet: Stop using :hover:active
    
    This breaks on touch, use just :active instead.

 src/stylesheet/widgets/_checks.scss        | 19 +++++++++----------
 src/stylesheet/widgets/_emoji-chooser.scss | 12 ++++++------
 src/stylesheet/widgets/_header-bar.scss    |  2 +-
 src/stylesheet/widgets/_menus.scss         | 11 +++++++----
 src/stylesheet/widgets/_scrolling.scss     |  6 +++---
 src/stylesheet/widgets/_switch.scss        | 14 ++++----------
 src/stylesheet/widgets/_tab-view.scss      | 18 ++++--------------
 src/stylesheet/widgets/_toolbars.scss      |  2 +-
 8 files changed, 35 insertions(+), 49 deletions(-)
---
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1e09c64c..e5807061 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -29,11 +29,13 @@ radio {
     box-shadow: inset 0 0 0 2px $trough_color;
   }
 
-  &:not(:checked):not(:indeterminate):hover {
-    @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 2px gtkalpha(currentColor, .6);
-    } @else {
-      box-shadow: inset 0 0 0 2px $trough_hover_color;
+  &:not(:checked):not(:indeterminate) {
+    &:hover {
+      @if $contrast == 'high' {
+        box-shadow: inset 0 0 0 2px gtkalpha(currentColor, .6);
+      } @else {
+        box-shadow: inset 0 0 0 2px $trough_hover_color;
+      }
     }
 
     &:active {
@@ -52,11 +54,8 @@ radio {
     color: $fill_text_color;
     box-shadow: none;
 
-    &:hover {
-      background-image: image(gtkalpha(currentColor, .1));
-
-      &:active { background-image: image(transparentize(black, .8)); }
-    }
+    &:hover { background-image: image(gtkalpha(currentColor, .1)); }
+    &:active { background-image: image(transparentize(black, .8)); }
   }
 
   &:disabled {
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index 9c7f161b..cfdae27c 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -28,10 +28,10 @@ popover.emoji-picker emoji {
   &:focus,
   &:hover {
     background: $view_selected_color;
+  }
 
-    &:active {
-      background: $view_active_color;
-    }
+  &:active {
+    background: $view_active_color;
   }
 }
 
@@ -72,9 +72,9 @@ emoji-completion-row {
   &:hover {
     background-color: $view_selected_color;
     color: $view_fg_color;
+  }
 
-    &:active {
-      background-color: $view_active_color; // matching buttons
-    }
+  &:active {
+    background-color: $view_active_color; // matching buttons
   }
 }
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 3bfee745..14ea24e7 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -114,7 +114,7 @@ windowcontrols {
     }
 
     &:hover > image { background-color: $button_hover_color; }
-    &:hover:active > image { background-color: $button_active_color; }
+    &:active > image { background-color: $button_active_color; }
   }
 
   > .icon {
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 85fda979..fa518e40 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -82,7 +82,10 @@ popover.menu {
     &,
     &:hover:checked,
     &:hover:indeterminate,
-    &:hover:not(:checked):not(:indeterminate) {
+    &:hover:not(:checked):not(:indeterminate),
+    &:active:checked,
+    &:active:indeterminate,
+    &:active:not(:checked):not(:indeterminate), {
       background: none;
       box-shadow: none;
       color: inherit;
@@ -127,10 +130,10 @@ popover.menu {
     &:hover,
     &:selected {
       background-color: $view_selected_color;
+    }
 
-      &:active {
-        background-color: $view_selected_active_color; // matching buttons
-      }
+    &:active {
+      background-color: $view_selected_active_color; // matching buttons
     }
 
     arrow {
diff --git a/src/stylesheet/widgets/_scrolling.scss b/src/stylesheet/widgets/_scrolling.scss
index 6f04ebe2..eaba4b40 100644
--- a/src/stylesheet/widgets/_scrolling.scss
+++ b/src/stylesheet/widgets/_scrolling.scss
@@ -33,13 +33,13 @@ scrollbar {
 
         &:hover { background-color: gtkalpha(currentColor, .6); }
 
-        &:hover:active { background-color: currentColor; }
+        &:active { background-color: currentColor; }
       } @else {
         background-color: gtkalpha(currentColor, .2);
 
         &:hover { background-color: gtkalpha(currentColor, .4); }
 
-        &:hover:active { background-color: gtkalpha(currentColor, .6); }
+        &:active { background-color: gtkalpha(currentColor, .6); }
       }
 
       &:disabled { opacity: 0; }
@@ -156,7 +156,7 @@ scrollbar {
   &.vertical > range > trough > slider { min-height: $_slider_min_length; }
 
   > range.fine-tune > trough > slider {
-    &, &:hover, &:hover:active {
+    &, &:hover, &:active {
       background-color: if($contrast == 'high', $accent_color, gtkalpha($accent_color, .6));
     }
   }
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index 3d585352..8654ffb4 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -7,11 +7,8 @@ switch {
 
   background-color: $trough_color;
 
-  &:hover:not(:checked) {
-    background-color: $trough_hover_color;
-
-    &:active { background-color: $trough_active_color; }
-  }
+  &:hover { background-color: $trough_hover_color; }
+  &:active { background-color: $trough_active_color; }
 
   > image { color: if($contrast == 'high', white, transparent); }
 
@@ -41,11 +38,8 @@ switch {
     color: $fill_text_color;
     background-color: $fill_color;
 
-    &:hover {
-      background-image: image(gtkalpha(currentColor, .1));
-
-      &:active { background-image: image(transparentize(black, .8)); }
-    }
+    &:hover { background-image: image(gtkalpha(currentColor, .1)); }
+    &:active { background-image: image(transparentize(black, .8)); }
 
     > slider {
       background-color: $slider_hover_color;
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index e4beff08..ad4ebb66 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -43,22 +43,12 @@ tabbar {
     &:selected {
       background-color: $view_selected_color;
 
-      &:hover {
-        background-color: $view_selected_hover_color;
-
-        &:active {
-          background-color: $view_selected_active_color;
-        }
-      }
+      &:hover { background-color: $view_selected_hover_color; }
+      &:active { background-color: $view_selected_active_color; }
     }
 
-    &:hover {
-      background-color: $view_hover_color;
-
-      &:active {
-        background-color: $view_active_color;
-      }
-    }
+    &:hover { background-color: $view_hover_color; }
+    &:active { background-color: $view_active_color; }
   }
 
   .start-action,
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index d2494362..9fd63a86 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -195,7 +195,7 @@ infobar {
     background-image: image(gtkalpha(currentColor, .05));
   }
 
-  &.action:hover:active > revealer > box {
+  &.action:active > revealer > box {
     background-image: image(gtkalpha(currentColor, .1));
   }