[libadwaita/wip/exalm/card: 3/14] stylesheet: Add a .card style class

[Alexander Mikhaylenko <alexm src gnome org>]

commit c7cc7496adad32f0fde33f1d1bdbd10f9fe47dfc
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Oct 19 16:28:32 2021 +0500

    stylesheet: Add a .card style class
    
    theme_base/text_color aren't the go-to colors for making these anymore, we
    should provide a pre-built way to do it.
    
    Support .card.activatable to also have hover and active styles on cards.

 src/stylesheet/widgets/_misc.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
---
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 2c88d1b2..6da2bde9 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -119,3 +119,27 @@ statuspage {
     }
   }
 }
+
+/* Cards */
+
+.card {
+  background-color: $card_bg_color;
+  background-clip: padding-box;
+  color: $card_fg_color;
+  border: 1px solid $card_border_color;
+  border-radius: $card_radius;
+
+  @include focus-ring($offset: -1px);
+
+  &.activatable {
+    transition: $button_transition;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &:active {
+      background-image: image(gtkalpha(currentColor, .08));
+    }
+  }
+}