[libadwaita/wip/exalm/card: 1/2] stylesheet: Allow .card on buttons as well

[Alexander Mikhaylenko <alexm src gnome org>]

commit 50b90886bec8030621b320c0d71395550ff712dd
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Oct 22 21:04:47 2021 +0500

    stylesheet: Allow .card on buttons as well

 src/stylesheet/widgets/_buttons.scss | 36 ++++++++++++++++++++++++++++++++++++
 src/stylesheet/widgets/_misc.scss    |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 636b9b29..d89ca72c 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -291,6 +291,42 @@ button {
     padding: 10px 32px;
     border-radius: 9999px;
   }
+
+  &.card {
+    background-color: $card_bg_color;
+    background-clip: padding-box;
+    font-weight: inherit;
+    box-shadow: none;
+    padding: 0;
+
+    transition: $button_transition;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(gtkalpha(currentColor, .08));
+    }
+
+    &:checked {
+      background-color: $card_bg_color;
+      background-image: image($view_selected_color);
+
+      &:hover { background-image: image($view_selected_hover_color); }
+
+      &.keyboard-activating,
+      &:active { background-image: image($view_selected_active_color); }
+
+      &.has-open-popup { background-image: image($view_selected_hover_color); }
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
 }
 
 %undecorated_button {
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 6da2bde9..31218c3d 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -129,7 +129,7 @@ statuspage {
   border: 1px solid $card_border_color;
   border-radius: $card_radius;
 
-  @include focus-ring($offset: -1px);
+  @include focus-ring($offset: -2px);
 
   &.activatable {
     transition: $button_transition;