Merge pull request #962 from Shopify/Card-padding

[Card] Adjust padding of Card.Section, footer and header

Author: elileto

UNRELEASED.md

@@ -21,6 +21,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed the `DataTable` sort direction not reversing on second sort of the initially sorted column ([#918](https://github.com/Shopify/polaris-react/pull/918)) (thanks [@tabrez96](https://github.com/tabrez96) for the [issue report](https://github.com/Shopify/polaris-react/issues/873))
 - Allow `null` being passed to `value` in `TextField` ([#964](https://github.com/Shopify/polaris-react/pull/964)) (thanks [@mbaumbach](https://github.com/mbaumbach) for the [original issue](https://github.com/Shopify/polaris-react/issues/959))
 - Changed the default value for `showHidden` prop on `ResourcePicker` for backward compatibility with legacy EASDK ([#981](https://github.com/Shopify/polaris-react/pull/981))
+- Adjusted top and bottom padding to the header, footer and sections in `Card` to add space between action buttons in the header and footer and the card sections. ([#962](https://github.com/Shopify/polaris-react/pull/962))
 
 ### Documentation
 

src/components/Card/Card.scss

@@ -17,18 +17,19 @@
 }
 
 .Header {
-  padding: spacing() spacing() 0;
+  padding: spacing() spacing() rem(12px) spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: spacing(loose) spacing(loose) 0;
+    padding-right: spacing(loose);
+    padding-left: spacing(loose);
   }
 }
 
 .Section {
   padding: spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: spacing(loose);
+    padding: spacing() spacing(loose);
   }
 
   + .Section {
@@ -42,6 +43,7 @@
 
 .Section-subdued {
   background-color: color('sky', 'lighter');
+  border-top: border-width() solid color('sky');
 }
 
 .SectionHeader {
@@ -61,9 +63,14 @@
 .Footer {
   display: flex;
   justify-content: flex-end;
-  padding: 0 spacing() spacing();
+  padding: rem(12px) spacing() spacing() spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: 0 spacing(loose) spacing(loose);
+    padding-right: spacing(loose);
+    padding-left: spacing(loose);
+  }
+
+  .Section-subdued + & {
+    border-top: border-width() solid color('sky');
   }
 }