fix: ImageCard spacing

carbon-design-system · Aug 27, 2020 · 5d417b9 · 5d417b9
1 parent 8dca154
commit 5d417b9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js b/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js
@@ -42,13 +42,16 @@ export default class ImageCard extends React.Component {
       [`${prefix}--image-card--dark`]: hoverColor === 'dark',
     });
 
-    const aspectRatioClassNames = classnames([`${prefix}--aspect-ratio`], {
-      [`${prefix}--aspect-ratio--2x1`]: aspectRatio === '2:1',
-      [`${prefix}--aspect-ratio--1x2`]: aspectRatio === '1:2',
-      [`${prefix}--aspect-ratio--1x1`]: aspectRatio === '1:1',
-      [`${prefix}--aspect-ratio--16x9`]: aspectRatio === '16:9',
-      [`${prefix}--aspect-ratio--4x3`]: aspectRatio === '4:3',
-    });
+    const aspectRatioClassNames = classnames(
+      [`${prefix}--aspect-ratio`, `${prefix}--image-card__spacing`],
+      {
+        [`${prefix}--aspect-ratio--2x1`]: aspectRatio === '2:1',
+        [`${prefix}--aspect-ratio--1x2`]: aspectRatio === '1:2',
+        [`${prefix}--aspect-ratio--1x1`]: aspectRatio === '1:1',
+        [`${prefix}--aspect-ratio--16x9`]: aspectRatio === '16:9',
+        [`${prefix}--aspect-ratio--4x3`]: aspectRatio === '4:3',
+      }
+    );
 
     const carbonTileclassNames = classnames([`${prefix}--tile`], {
       [`${prefix}--tile--clickable`]: href !== undefined,

diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss b/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss
@@ -85,12 +85,6 @@
   width: 100%;
   height: 100%;
   max-width: 100% !important;
-  top: -1px;
-  left: 0px;
-
-  @include carbon--breakpoint('md') {
-    left: -1px;
-  }
 }
 
 .#{$prefix}--image-card__img:after {
@@ -105,6 +99,15 @@
   transition: opacity $duration--fast-01;
 }
 
+.#{$prefix}--image-card__spacing {
+  margin-right: 1px;
+  margin-bottom: 1px;
+
+  @include carbon--breakpoint-down('md') {
+    margin-right: 0px;
+  }
+}
+
 .#{$prefix}--image-card
   .#{$prefix}--tile:hover
   .#{$prefix}--image-card__img:after {