Refactor KuiFlexGroup styles to use similar pattern to KuiFlexGrid. (#…

…13627)
elastic · Sep 19, 2017 · f42ebcb · f42ebcb
1 parent 710775a
commit f42ebcb
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 34 deletions.
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
@@ -746,14 +746,6 @@ table {
     -webkit-flex-basis: 0;
         -ms-flex-preferred-size: 0;
             flex-basis: 0; }
-  .kuiFlexGroup.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 8px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 16px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 24px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 40px; }
   .kuiFlexGroup.kuiFlexGroup--flexGrowZero > .kuiFlexItem {
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
@@ -782,6 +774,26 @@ table {
         -ms-flex-pack: end;
             justify-content: flex-end; }
 
+.kuiFlexGroup--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGroup--gutterSmall > .kuiFlexItem {
+    margin: 4px; }
+
+.kuiFlexGroup--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGroup--gutterMedium > .kuiFlexItem {
+    margin: 8px; }
+
+.kuiFlexGroup--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGroup--gutterLarge > .kuiFlexItem {
+    margin: 12px; }
+
+.kuiFlexGroup--gutterXLarge {
+  margin: -20px; }
+  .kuiFlexGroup--gutterXLarge > .kuiFlexItem {
+    margin: 20px; }
+
 @media only screen and (max-width: 768px) {
   .kuiFlexGroup {
     -webkit-flex-wrap: wrap;

diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
@@ -746,14 +746,6 @@ table {
     -webkit-flex-basis: 0;
         -ms-flex-preferred-size: 0;
             flex-basis: 0; }
-  .kuiFlexGroup.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 8px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 16px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 24px; }
-  .kuiFlexGroup.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: 40px; }
   .kuiFlexGroup.kuiFlexGroup--flexGrowZero > .kuiFlexItem {
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
@@ -782,6 +774,26 @@ table {
         -ms-flex-pack: end;
             justify-content: flex-end; }
 
+.kuiFlexGroup--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGroup--gutterSmall > .kuiFlexItem {
+    margin: 4px; }
+
+.kuiFlexGroup--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGroup--gutterMedium > .kuiFlexItem {
+    margin: 8px; }
+
+.kuiFlexGroup--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGroup--gutterLarge > .kuiFlexItem {
+    margin: 12px; }
+
+.kuiFlexGroup--gutterXLarge {
+  margin: -20px; }
+  .kuiFlexGroup--gutterXLarge > .kuiFlexItem {
+    margin: 20px; }
+
 @media only screen and (max-width: 768px) {
   .kuiFlexGroup {
     -webkit-flex-wrap: wrap;

diff --git a/ui_framework/src/components/flex/_flex_group.scss b/ui_framework/src/components/flex/_flex_group.scss
@@ -7,23 +7,6 @@
     flex-basis: 0;
   }
 
-  // Gutter Sizes
-  &.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem {
-    margin-left: $kuiSizeS;
-  }
-
-  &.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem {
-    margin-left: $kuiSize;
-  }
-
-  &.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: $kuiSizeL;
-  }
-
-  &.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem {
-    margin-left: $kuiSizeXXL;
-  }
-
   // Turn off item growth
   &.kuiFlexGroup--flexGrowZero > .kuiFlexItem {
     flex-grow: 0;
@@ -48,6 +31,24 @@
   }
 }
 
+$gutterTypes: (
+  gutterSmall: $kuiSizeS,
+  gutterMedium: $kuiSize,
+  gutterLarge: $kuiSizeL,
+  gutterXLarge: $kuiSizeXXL,
+);
+
+@each $gutterName, $gutterSize in $gutterTypes {
+  $halfGutterSize: $gutterSize * 0.5;
+
+  .kuiFlexGroup--#{$gutterName} {
+    margin: -$halfGutterSize;
+
+    & > .kuiFlexItem {
+      margin: $halfGutterSize;
+    }
+  }
+}
 
 @include screenXSmall {
   .kuiFlexGroup {

diff --git a/ui_framework/src/components/flex/flex_group.js b/ui_framework/src/components/flex/flex_group.js
@@ -7,7 +7,7 @@ const gutterSizeToClassNameMap = {
   small: 'kuiFlexGroup--gutterSmall',
   medium: 'kuiFlexGroup--gutterMedium',
   large: 'kuiFlexGroup--gutterLarge',
-  extraLarge: 'kuiFlexGroup--gutterExtraLarge',
+  extraLarge: 'kuiFlexGroup--gutterXLarge',
 };
 
 export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);