update card style, add card--state class

chloerei · Jul 13, 2024 · 97e9e2d · 97e9e2d
1 parent c068091
commit 97e9e2d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/site/components/card.md b/site/components/card.md
@@ -7,11 +7,11 @@ title: Card
 ## Elevated
 
 {% example %}
-<a href="#" class="card card--elevated">
+<div class="card card--elevated card--state">
   <div class="padding-3">
     Elevated
   </div>
-</a>
+</div>
 
 <div class="card card--elevated">
   <div class="padding-3">
@@ -33,11 +33,11 @@ title: Card
 ## Filled
 
 {% example %}
-<a href="#" class="card card--filled">
+<div class="card card--filled card--state">
   <div class="padding-3">
     Filled
   </div>
-</a>
+</div>
 
 <div class="card card--filled">
   <div class="padding-3">
@@ -59,11 +59,11 @@ title: Card
 ## Outlined
 
 {% example %}
-<a class="card card--outlined">
+<div class="card card--outlined card--state">
   <div class="padding-3">
     Outlined
   </div>
-</a>
+</div>
 
 <div class="card card--outlined">
   <div class="padding-3">
@@ -81,3 +81,13 @@ title: Card
   </div>
 </div>
 {% endexample %}
+
+## Custom
+
+{% example %}
+<div class="card background-surface-container">
+  <div class="padding-3">
+    Custom
+  </div>
+</div>
+{% endexample %}
diff --git a/src/css/components/_card.scss b/src/css/components/_card.scss
@@ -6,8 +6,21 @@
   border-radius: 12px;
 }
 
-a.card {
+.card--state {
+  cursor: pointer;
   @include state-layer;
+
+  &:hover {
+    box-shadow: var(--shadow-1);
+  }
+
+  &:focus {
+    box-shadow: var(--shadow-0);
+  }
+
+  &:active {
+    box-shadow: var(--shadow-0);
+  }
 }
 
 .card--elevated {
@@ -16,7 +29,7 @@ a.card {
   box-shadow: var(--shadow-1);
 }
 
-a.card--elevated {
+.card--elevated.card--state {
   &:hover {
     box-shadow: var(--shadow-2);
   }
@@ -35,22 +48,8 @@ a.card--elevated {
   background-color: var(--color-surface-container-highest);
 }
 
-a.card--filled {
-  &:hover {
-    box-shadow: var(--shadow-1);
-  }
-
-  &:focus {
-    box-shadow: var(--shadow-1);
-  }
-
-  &:active {
-    box-shadow: var(--shadow-0);
-  }
-}
-
 .card--outlined {
   color: var(--color-on-surface);
   background-color: var(--color-surface);
-  box-shadow: 0 0 0 1px var(--color-outline);
+  outline: 1px solid var(--color-outline-variant);
 }