refactor(item): adjust margins to match figma designs

eea · May 24, 2022 · 6334581 · 6334581
1 parent 7b21cb2
commit 6334581
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -79,14 +79,14 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
       <Grid>
         <Grid.Row>
           <Grid.Column mobile={12} tablet={6} computer={6}>
-            <Item.Group className="row">
+            <Item.Group unstackable className="row">
               {ColumnLeft.map((item) => (
                 <SingleItem key={item.childKey} {...item}></SingleItem>
               ))}
             </Item.Group>
           </Grid.Column>
           <Grid.Column mobile={12} tablet={6} computer={6}>
-            <Item.Group className="row">
+            <Item.Group unstackable className="row">
               {ColumnRight.map((item) => (
                 <SingleItem key={item.childKey} {...item}></SingleItem>
               ))}

diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides
@@ -8,26 +8,38 @@
 }
 
 .item .default.image {
-  width: 50px;
-  height: auto;
+  width: @defaultImageWidth;
+  height: @defaultImageHeight;
+}
+
+.ui.items.row > .item {
+  margin: @mobileRowItemMargin;
+}
+
+// As semantic does for non unstacable items
+// so columns does not affect margin in mobiles
+.ui.items.row > .item:last-child {
+  margin-bottom: 0;
 }
 
-// 
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {
     flex-direction: row;
   }
 
-  /*
-  .ui.items.row > .item > .image,
-  .ui.items.row > .item > .image > img {
-    max-width: none !important;
-    max-height: none !important;
-    width: inherit !important;
-  }
-  */
-
   .ui.items.row > .item > .image + .content {
     padding: 0em 0em 0em @mobileContentImageDistance;
   }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.items.row > .item {
+    margin: @tabletRowItemMargin;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.items.row > .item {
+    margin: @desktopRowItemMargin;
+  }
 }
diff --git a/theme/themes/eea/views/item.variables b/theme/themes/eea/views/item.variables
@@ -24,16 +24,16 @@
 /* Responsive */
 @itemSpacing: 1em;
 @imageWidth: 175px;
-@contentImageDistance: 1.5em;
+@contentImageDistance: 2rem;
 
 @tabletItemSpacing: 1em;
 @tabletImageWidth: 150px;
-@tabletContentImageDistance: 1em;
+@tabletContentImageDistance: 2rem;
 
 @mobileItemSpacing: 2em;
 @mobileImageWidth: auto;
 @mobileImageMaxHeight: 250px;
-@mobileContentImageDistance: 1.5em;
+@mobileContentImageDistance: 1.5rem;
 
 
 /*-------------------
@@ -52,6 +52,10 @@
 @imageBoxShadow: none;
 @imageBorder: none;
 
+/* Default Image */
+@defaultImageWidth: 50px;
+@defaultImageHeight: auto;
+
 /* Content */
 @contentDisplay: block;
 @contentVerticalAlign: top;
@@ -155,3 +159,8 @@
 /* Unstackable */
 @unstackableMobileImageWidth: 125px;
 
+/* Row */
+@mobileRowItemMargin  : 1rem 0;
+@tabletRowItemMargin  : 1.5rem 0;
+@desktopRowItemMargin : 2rem 0;
+