Added margin to Card Footer

Shopify · Feb 6, 2019 · 7ff7e36 · 7ff7e36
1 parent 09d3291
commit 7ff7e36
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -14,6 +14,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Adjusted padding to `Card`'s sections, header, and footer to separate actions in header and footer actions in footer ([#962](https://github.com/Shopify/polaris-react/pull/962))
+
 ### Documentation
 
 - Updated docs about App Bridge usage in AppProvider ([#945](https://github.com/Shopify/polaris-react/pull/945))

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -20,7 +20,7 @@
   padding: spacing() spacing() 0;
 
   @include page-content-when-not-fully-condensed {
-    padding: spacing(loose) spacing(loose) 0;
+    padding: spacing(loose) spacing(loose) spacing();
   }
 }
 
@@ -42,6 +42,11 @@
 
 .Section-subdued {
   background-color: color('sky', 'lighter');
+  border-top: border-width() solid color('sky');
+
+  + .Footer {
+    border-top: border-width() solid color('sky');
+  }
 }
 
 .SectionHeader {
@@ -61,9 +66,9 @@
 .Footer {
   display: flex;
   justify-content: flex-end;
-  padding: 0 spacing() spacing();
+  padding: spacing() spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: 0 spacing(loose) spacing(loose);
+    padding: spacing() spacing(loose) spacing(loose);
   }
 }