refactor(item): update item part 2

eea · Nov 15, 2022 · 9812ae2 · 9812ae2
1 parent 2fd91c4
commit 9812ae2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -280,7 +280,7 @@ FlexGroup.args = {
       imageUrl: DataAnalytics,
       icon: 'ri-pie-chart-line',
       description:
-        'Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
+        'This is an exmple of an item having bigger description text. Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
     },
     {
       childKey: 3,

diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides
@@ -152,6 +152,7 @@
 .ui.items.flex-items-wrapper {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 
   .item {
     width: @mobileFlexItemWidth;
@@ -194,12 +195,8 @@
   }
 
   // Flex wrapper for list of items
-  .ui.items.flex-items-wrapper {
-    gap: @tabletFlexGroupGap;
-
-    .item {
-      width: @tabletFlexItemWidth;
-    }
+  .ui.items.flex-items-wrapper .item {
+    width: @tabletFlexItemWidth;
   }
 }
 
@@ -227,8 +224,8 @@
   }
 
   // Flex wrapper for list of items
-  .ui.items.flex-items-wrapper {
-    gap: @desktopFlexGroupGap;
+  .ui.items.flex-items-wrapper .item {
+    width: @desktopFlexItemWidth;
   }
 }
 

diff --git a/theme/themes/eea/views/item.variables b/theme/themes/eea/views/item.variables
@@ -9,10 +9,6 @@
 /* Group */
 @groupMargin: @rem-space-6 0em;
 
-/* Flex group */
-@tabletFlexGroupGap: 0 @rem-space-3-5;
-@desktopFlexGroupGap: 0 @rem-space-4;
-
 /* Item */
 @display: flex;
 @background: transparent;
@@ -152,7 +148,8 @@
 
 /* Flex item */
 @mobileFlexItemWidth: 100%;
-@tabletFlexItemWidth: 49%;
+@tabletFlexItemWidth: 48.8%;
+@desktopFlexItemWidth: 49%;
 
 /* Relaxed */
 @relaxedItemSpacing: 1.5em;