[libadwaita/wip/exalm/borderless: 4/13] stylesheet: Extract style for raised buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit c09a121a56bacbd08a20fc77d6e2e554e944a427
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Sep 6 18:19:10 2021 +0500

    stylesheet: Extract style for raised buttons
    
    When raising or flattening buttons, we only want to change their
    background, we don't want to also specificity bump their round corners
    etc. For example, we may want to raise linked buttons, and changing
    border-radius there will break them.

 src/stylesheet/widgets/_buttons.scss | 37 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 473fb4de..541df798 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,35 +11,38 @@ button {
     min-width: 16px;
     padding: 5px 10px;
     border-radius: $button_radius;
-    background-color: $button_color;
     font-weight: bold;
 
-    @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 1px $borders_color;
-    }
-
     @include focus-ring();
     transition: $button_transition;
 
-    &:hover {
-      background-color: $button_hover_color;
-    }
-
-    &.keyboard-activating,
-    &:active {
-      background-color: $button_active_color;
-    }
+    @at-root %button_basic_raised, & {
+      background-color: $button_color;
 
-    &:checked {
-      background-color: $button_checked_color;
+      @if $contrast == 'high' {
+        box-shadow: inset 0 0 0 1px $borders_color;
+      }
 
       &:hover {
-        background-color: $button_checked_hover_color;
+        background-color: $button_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
-        background-color: $button_checked_active_color;
+        background-color: $button_active_color;
+      }
+
+      &:checked {
+        background-color: $button_checked_color;
+
+        &:hover {
+          background-color: $button_checked_hover_color;
+        }
+
+        &.keyboard-activating,
+        &:active {
+          background-color: $button_checked_active_color;
+        }
       }
     }