Card padding in mobile is now 16px instead of 20px

Shopify · Nov 13, 2018 · 5f595a1 · 5f595a1
1 parent a8a8854
commit 5f595a1
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -17,11 +17,19 @@
 }
 
 .Header {
-  padding: spacing(loose) spacing(loose) 0;
+  padding: spacing() spacing() 0;
+
+  @include page-content-when-not-fully-condensed {
+    padding: spacing(loose) spacing(loose) 0;
+  }
 }
 
 .Section {
-  padding: spacing(loose);
+  padding: spacing();
+
+  @include page-content-when-not-fully-condensed {
+    padding: spacing(loose);
+  }
 
   + .Section {
     border-top: border-width() solid color('sky');
@@ -40,13 +48,22 @@
   padding-bottom: spacing(tight);
 
   .Section-fullWidth & {
-    padding-left: spacing(loose);
-    padding-right: spacing(loose);
+    padding-left: spacing();
+    padding-right: spacing();
+
+    @include page-content-when-not-fully-condensed {
+      padding-left: spacing(loose);
+      padding-right: spacing(loose);
+    }
   }
 }
 
 .Footer {
   display: flex;
   justify-content: flex-end;
-  padding: 0 spacing(loose) spacing(loose);
+  padding: 0 spacing() spacing();
+
+  @include page-content-when-not-fully-condensed {
+    padding: 0 spacing(loose) spacing(loose);
+  }
 }