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

Shopify · Nov 13, 2018 · 8f950e1 · 8f950e1
1 parent a8a8854
commit 8f950e1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -9,6 +9,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed `Autocomplete` empty state example Markdown not parsing correctly ([#592](https://github.com/Shopify/polaris-react/pull/592))
+- Fixed `Card` spacing in small devices ([#608](https://github.com/shopify/polaris-react/pull/608))
 
 ### Documentation
 

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);
+  }
 }