Merge pull request #1082 from Shopify/card-subdued-spacing

[Card] Fix subdued section spacing issues
Shopify · Mar 1, 2019 · dc91c87 · dc91c87
2 parents d926b0f + acee905
commit dc91c87
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Fixed missing rounded corners on `Tag` button states ([#1078](https://github.com/Shopify/polaris-react/pull/1078))
 - Removed reference to `window.Polaris`, which in some cases could be undefined ([#1104](https://github.com/Shopify/polaris-react/issues/1104))
+- Added padding and margin to `subdued` sections for proper spacing between the header and footer ([#1082](https://github.com/Shopify/polaris-react/pull/1082))
 
 ### Documentation
 

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -42,6 +42,11 @@
 
 .Section-subdued {
   background-color: color('sky', 'lighter');
+
+  .Header + & {
+    border-top: border-width() solid color('sky');
+    margin-top: spacing(loose);
+  }
 }
 
 .SectionHeader {
@@ -66,4 +71,9 @@
   @include page-content-when-not-fully-condensed {
     padding: 0 spacing(loose) spacing(loose);
   }
+
+  .Section-subdued + & {
+    border-top: border-width() solid color('sky');
+    padding: spacing(loose);
+  }
 }