[UI FRAMEWORK][K7]: Flex Group and Flex Grid components (#13603)

FlexGroup and FlexGrid allows for layout and positioning inside content.
elastic · Sep 19, 2017 · 1e4e0ae · 1e4e0ae
1 parent 91397c0
commit 1e4e0ae
Show file tree

Hide file tree

Showing 25 changed files with 1,088 additions and 0 deletions.
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
@@ -729,6 +729,189 @@ table {
           transform: translateY(2px);
   /* 1 */ }
 
+.kuiFlexGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch; }
+  .kuiFlexGroup .kuiFlexItem {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+    -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;
+        -ms-flex-positive: 0;
+            flex-grow: 0;
+    -webkit-flex-basis: auto;
+        -ms-flex-preferred-size: auto;
+            flex-basis: auto; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceBetween {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceAround {
+    -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+            justify-content: space-around; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentCenter {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentFlexEnd {
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end; }
+
+@media only screen and (max-width: 768px) {
+  .kuiFlexGroup {
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; } }
+
+.kuiFlexGrid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  margin-bottom: 0; }
+  .kuiFlexGrid > .kuiFlexItem {
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+        -ms-flex-positive: 0;
+            flex-grow: 0; }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(25% - 8px);
+        -ms-flex-preferred-size: calc(25% - 8px);
+            flex-basis: calc(25% - 8px); }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(33.3% - 8px);
+        -ms-flex-preferred-size: calc(33.3% - 8px);
+            flex-basis: calc(33.3% - 8px); }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(50% - 8px);
+        -ms-flex-preferred-size: calc(50% - 8px);
+            flex-basis: calc(50% - 8px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(25% - 16px);
+        -ms-flex-preferred-size: calc(25% - 16px);
+            flex-basis: calc(25% - 16px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(33.3% - 16px);
+        -ms-flex-preferred-size: calc(33.3% - 16px);
+            flex-basis: calc(33.3% - 16px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(50% - 16px);
+        -ms-flex-preferred-size: calc(50% - 16px);
+            flex-basis: calc(50% - 16px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(25% - 24px);
+        -ms-flex-preferred-size: calc(25% - 24px);
+            flex-basis: calc(25% - 24px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(33.3% - 24px);
+        -ms-flex-preferred-size: calc(33.3% - 24px);
+            flex-basis: calc(33.3% - 24px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(50% - 24px);
+        -ms-flex-preferred-size: calc(50% - 24px);
+            flex-basis: calc(50% - 24px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(25% - 32px);
+        -ms-flex-preferred-size: calc(25% - 32px);
+            flex-basis: calc(25% - 32px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(33.3% - 32px);
+        -ms-flex-preferred-size: calc(33.3% - 32px);
+            flex-basis: calc(33.3% - 32px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(50% - 32px);
+        -ms-flex-preferred-size: calc(50% - 32px);
+            flex-basis: calc(50% - 32px); }
+
+@media only screen and (max-width: 768px) {
+  .kuiFlexItem {
+    width: 100% !important;
+    -webkit-flex-basis: 100% !important;
+        -ms-flex-preferred-size: 100% !important;
+            flex-basis: 100% !important;
+    margin-left: 0 !important;
+    margin-bottom: 16px !important; } }
+
 /**
  * 1. Override invalid state with focus state.
  */

diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
@@ -729,6 +729,189 @@ table {
           transform: translateY(2px);
   /* 1 */ }
 
+.kuiFlexGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch; }
+  .kuiFlexGroup .kuiFlexItem {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+    -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;
+        -ms-flex-positive: 0;
+            flex-grow: 0;
+    -webkit-flex-basis: auto;
+        -ms-flex-preferred-size: auto;
+            flex-basis: auto; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceBetween {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentSpaceAround {
+    -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+            justify-content: space-around; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentCenter {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  .kuiFlexGroup.kuiFlexGroup--justifyContentFlexEnd {
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end; }
+
+@media only screen and (max-width: 768px) {
+  .kuiFlexGroup {
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; } }
+
+.kuiFlexGrid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  margin-bottom: 0; }
+  .kuiFlexGrid > .kuiFlexItem {
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+        -ms-flex-positive: 0;
+            flex-grow: 0; }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(25% - 8px);
+        -ms-flex-preferred-size: calc(25% - 8px);
+            flex-basis: calc(25% - 8px); }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(33.3% - 8px);
+        -ms-flex-preferred-size: calc(33.3% - 8px);
+            flex-basis: calc(33.3% - 8px); }
+
+.kuiFlexGrid--gutterSmall {
+  margin: -4px; }
+  .kuiFlexGrid--gutterSmall.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 4px;
+    -webkit-flex-basis: calc(50% - 8px);
+        -ms-flex-preferred-size: calc(50% - 8px);
+            flex-basis: calc(50% - 8px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(25% - 16px);
+        -ms-flex-preferred-size: calc(25% - 16px);
+            flex-basis: calc(25% - 16px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(33.3% - 16px);
+        -ms-flex-preferred-size: calc(33.3% - 16px);
+            flex-basis: calc(33.3% - 16px); }
+
+.kuiFlexGrid--gutterMedium {
+  margin: -8px; }
+  .kuiFlexGrid--gutterMedium.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 8px;
+    -webkit-flex-basis: calc(50% - 16px);
+        -ms-flex-preferred-size: calc(50% - 16px);
+            flex-basis: calc(50% - 16px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(25% - 24px);
+        -ms-flex-preferred-size: calc(25% - 24px);
+            flex-basis: calc(25% - 24px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(33.3% - 24px);
+        -ms-flex-preferred-size: calc(33.3% - 24px);
+            flex-basis: calc(33.3% - 24px); }
+
+.kuiFlexGrid--gutterLarge {
+  margin: -12px; }
+  .kuiFlexGrid--gutterLarge.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 12px;
+    -webkit-flex-basis: calc(50% - 24px);
+        -ms-flex-preferred-size: calc(50% - 24px);
+            flex-basis: calc(50% - 24px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--fourths > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(25% - 32px);
+        -ms-flex-preferred-size: calc(25% - 32px);
+            flex-basis: calc(25% - 32px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--thirds > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(33.3% - 32px);
+        -ms-flex-preferred-size: calc(33.3% - 32px);
+            flex-basis: calc(33.3% - 32px); }
+
+.kuiFlexGrid--gutterXLarge {
+  margin: -16px; }
+  .kuiFlexGrid--gutterXLarge.kuiFlexGrid--halves > .kuiFlexItem {
+    margin: 16px;
+    -webkit-flex-basis: calc(50% - 32px);
+        -ms-flex-preferred-size: calc(50% - 32px);
+            flex-basis: calc(50% - 32px); }
+
+@media only screen and (max-width: 768px) {
+  .kuiFlexItem {
+    width: 100% !important;
+    -webkit-flex-basis: 100% !important;
+        -ms-flex-preferred-size: 100% !important;
+            flex-basis: 100% !important;
+    margin-left: 0 !important;
+    margin-bottom: 16px !important; } }
+
 /**
  * 1. Override invalid state with focus state.
  */

diff --git a/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss b/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
@@ -18,3 +18,17 @@
     background: transparentize(#0096CC, .9);
   }
 }
+
+.guideDemo__highlightGrid {
+  .kuiFlexItem {
+    background: transparentize(#0096CC, .9);
+    padding: 16px;
+  }
+}
+
+.guideDemo__highlightGridWrap {
+  .kuiFlexItem div {
+    background: transparentize(#0096CC, .9);
+    padding: 16px;
+  }
+}