[libadwaita/wip/exalm/buttons-5: 15/18] stylesheet: Slightly grow buttons on hover

[Alexander Mikhaylenko <alexm src gnome org>]

commit 68c8a6f745ac4d4a30e915e414625de3fcb1a9d2
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jun 10 23:28:42 2021 +0500

    stylesheet: Slightly grow buttons on hover
    
    Add a box shadow matching the background for hover only.

 src/stylesheet/widgets/_buttons.scss        | 38 ++++++++++++++++++++++++++++-
 src/stylesheet/widgets/_calendar.scss       |  4 +++
 src/stylesheet/widgets/_menus.scss          |  2 ++
 src/stylesheet/widgets/_message-dialog.scss |  5 +++-
 src/stylesheet/widgets/_view-switcher.scss  |  7 +++---
 5 files changed, 51 insertions(+), 5 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 75f1d352..745c1ec9 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -20,11 +20,17 @@ button {
 
     &:hover {
       background-color: $button_hover_color;
+      box-shadow: 0 0 0 1px $button_hover_color;
+      @include focus-ring($offset: -1px);
+      transition: $button_transition;
     }
 
     &.keyboard-activating,
     &:active {
       background-color: $button_active_color;
+      box-shadow: none;
+      @include focus-ring();
+      transition: $button_transition;
     }
 
     &:checked {
@@ -32,11 +38,13 @@ button {
 
       &:hover {
         background-color: $button_checked_hover_color;
+        box-shadow: 0 0 0 1px $button_checked_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
         background-color: $button_checked_active_color;
+        box-shadow: none;
       }
     }
 
@@ -90,12 +98,20 @@ button {
     &:hover {
       color: white;
       background-color: lighten($osd_bg_color, 10%);
+      box-shadow: 0 0 0 1px lighten($osd_bg_color, 10%);
+
+      @include focus-ring($outer: true, $offset: 2px);
+      transition: $button_transition;
     }
 
     &.keyboard-activating,
     &:active {
       color: white;
       background-color: lighten($osd_bg_color, 20%);
+      box-shadow: none;
+
+      @include focus-ring($outer: true, $offset: 1px);
+      transition: $button_transition;
     }
 
     &:checked {
@@ -103,11 +119,13 @@ button {
 
       &:hover {
         background-color: lighten($osd_bg_color, 25%);
+        box-shadow: 0 0 0 1px lighten($osd_bg_color, 25%);
       }
 
       &.keyboard-activating,
       &:active {
         background-color: lighten($osd_bg_color, 30%);
+        box-shadow: none;
       }
     }
   }
@@ -124,11 +142,17 @@ button {
 
       &:hover {
         background-color: shade($b_color, 0.95);
+        box-shadow: 0 0 0 1px shade($b_color, 0.95);
+        @include focus-ring($outer: true, $offset: 2px);
+        transition: $button_transition;
       }
 
       &.keyboard-activating,
       &:active {
         background-color: shade($b_color, 0.8);
+        box-shadow: none;
+        @include focus-ring($outer: true, $offset: 1px);
+        transition: $button_transition;
       }
 
       &:checked {
@@ -136,11 +160,13 @@ button {
 
         &:hover {
           background-color: shade($b_color, 0.8);
+          box-shadow: 0 0 0 1px shade($b_color, 0.8);
         }
 
         &.keyboard-activating,
         &:active {
           background-color: shade($b_color, 0.7);
+          box-shadow: none;
         }
       }
     }
@@ -149,28 +175,38 @@ button {
   @at-root %button_basic_flat,
   &.flat {
     background-color: transparent;
+    box-shadow: none;
     @include focus-ring();
     transition: $button_transition;
 
     &:hover {
       background-color: $view_hover_color;
+      box-shadow: 0 0 0 1px $view_hover_color;
+      @include focus-ring($offset: -1px);
+      transition: $button_transition;
     }
 
     &.keyboard-activating,
     &:active {
       background-color: $view_active_color;
+      box-shadow: none;
+      @include focus-ring();
+      transition: $button_transition;
     }
 
     &:checked {
       background-color: $view_selected_color;
+      transition: $button_transition;
 
       &:hover {
         background-color: $view_selected_hover_color;
+        box-shadow: 0 0 0 1px $view_selected_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
         background-color: $view_selected_active_color;
+        box-shadow: none;
       }
     }
 
@@ -280,7 +316,7 @@ button.outline {
   @extend %button_basic_flat;
   box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"};
 
-  &:hover, &:active, &:checked {
+  &:checked {
     box-shadow: none;
   }
 
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 7fce9169..baffb19b 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -8,6 +8,10 @@ calendar {
     > button {
       @extend %button_basic_flat;
       border-radius: 0;
+
+      &:hover, &:checked:hover {
+        box-shadow: none;
+      }
     }
   }
 
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 1cc8bed1..16c11653 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -17,6 +17,8 @@ popover.menu {
       &:selected {
         background-color: $view_selected_color;
 
+        &:hover { box-shadow: none; }
+
         &:active {
           background-color: $view_selected_active_color;
         }
diff --git a/src/stylesheet/widgets/_message-dialog.scss b/src/stylesheet/widgets/_message-dialog.scss
index 968b124f..13796a7c 100644
--- a/src/stylesheet/widgets/_message-dialog.scss
+++ b/src/stylesheet/widgets/_message-dialog.scss
@@ -31,9 +31,12 @@ window.dialog.message {
         @extend %button_basic_flat;
         padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
         border-radius: 0;
-        border: none;
         border-left: 1px solid $borders_color;
 
+        &, &:hover, &:checked:hover {
+          box-shadow: none;
+        }
+
         &:first-child {
           border-bottom-left-radius: $window_radius+1;
           border-left: none;
diff --git a/src/stylesheet/widgets/_view-switcher.scss b/src/stylesheet/widgets/_view-switcher.scss
index 08d6cf33..e91e485a 100644
--- a/src/stylesheet/widgets/_view-switcher.scss
+++ b/src/stylesheet/widgets/_view-switcher.scss
@@ -8,6 +8,7 @@ viewswitcher {
     border-radius: 0;
     border-top: none;
     border-bottom: none;
+    margin: 0 1px;
     font-size: 1rem;
 
     > stack > box {
@@ -17,13 +18,13 @@ viewswitcher {
         padding-bottom: 5px;
 
         label {
-          padding-left: 8px;
-          padding-right: 8px;
+          padding-left: 7px;
+          padding-right: 7px;
         }
       }
 
       &.wide {
-        padding: 8px 12px;
+        padding: 8px 11px;
 
         label {
           &:dir(ltr) {