Add flexbox

Author: xcatliu

index.scss

@@ -1 +1 @@
-@import "src/_layout";
+@import "src/index";

src/_container.scss

@@ -0,0 +1,19 @@
+.container,
+.container-wider,
+.container-fluid {
+  overflow-y: auto;
+  padding: 0 $width-gap $width-gap;
+  width: 100%;
+}
+
+.container {
+  max-width: $max-width-container;
+}
+
+.container-wider {
+  max-width: $max-width-container-wider;
+}
+
+.container-fluid {
+  max-width: 100%;
+}

src/_flexbox.scss

@@ -0,0 +1,168 @@
+@mixin flex-width($percentage) {
+  flex-basis: $percentage;
+  max-width: $percentage;
+}
+
+.flex-left,
+.flex-center,
+.flex-right,
+.flex-top,
+.flex-middle,
+.flex-bottom,
+.flex-vertical {
+  flex-flow: row nowrap;
+  display: flex;
+}
+
+.flex-left,
+.flex-center,
+.flex-right,
+.flex-top,
+.flex-middle,
+.flex-bottom,
+.flex-vertical.flex-left,
+.flex-vertical.flex-center,
+.flex-vertical.flex-right,
+.flex-vertical.flex-top,
+.flex-vertical.flex-middle,
+.flex-vertical.flex-bottom {
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.flex-center,
+.flex-vertical.flex-middle {
+  justify-content: center;
+}
+
+.flex-right,
+.flex-vertical.flex-bottom {
+  justify-content: flex-end;
+}
+
+.flex-top,
+.flex-vertical.flex-left {
+  align-items: flex-start;
+}
+
+.flex-middle,
+.flex-vertical.flex-center {
+  align-items: center;
+}
+
+.flex-bottom,
+.flex-vertical.flex-right {
+  align-items: flex-end;
+}
+
+.units-gap {
+  margin-left: - $width-gap-half;
+  margin-right: - $width-gap-half;
+
+  > .unit,
+  > .unit-0,
+  > .unit-1-1,
+  > .unit-1-2,
+  > .unit-1-3,
+  > .unit-2-3,
+  > .unit-1-4,
+  > .unit-3-4, {
+    padding-left: $width-gap-half;
+    padding-right: $width-gap-half;
+  }
+}
+
+.units-gap-big {
+  margin-left: - $width-gap;
+  margin-right: - $width-gap;
+
+  > .unit,
+  > .unit-0,
+  > .unit-1-1,
+  > .unit-1-2,
+  > .unit-1-3,
+  > .unit-2-3,
+  > .unit-1-4,
+  > .unit-3-4, {
+    padding-left: $width-gap;
+    padding-right: $width-gap;
+  }
+}
+
+.unit {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.unit-1-1,
+.unit-1-2,
+.unit-1-3,
+.unit-2-3,
+.unit-1-4,
+.unit-3-4 {
+  flex-shrink: 0;
+}
+
+.unit-1-1 {
+  @include flex-width(100%);
+}
+
+.unit-1-2 {
+  @include flex-width(50%);
+}
+
+.unit-1-3 {
+  @include flex-width(33.33%);
+}
+
+.unit-2-3 {
+  @include flex-width(66.67%);
+}
+
+.unit-1-4 {
+  @include flex-width(25%);
+}
+
+.unit-3-4 {
+  @include flex-width(75%);
+}
+
+.flex-vertical {
+  flex-direction: column;
+
+  > .unit,
+  > .unit-0,
+  > .unit-1-1,
+  > .unit-1-2,
+  > .unit-1-3,
+  > .unit-2-3,
+  > .unit-1-4,
+  > .unit-3-4, {
+    max-width: none;
+  }
+
+  > .unit-1-1 {
+    max-height: 100%;
+  }
+
+  > .unit-1-2 {
+    max-height: 50%;
+  }
+
+  > .unit-1-3 {
+    max-height: 33.33%;
+  }
+
+  > .unit-2-3 {
+    max-height: 66.67%;
+  }
+
+  > .unit-1-4 {
+    max-height: 25%;
+  }
+
+  > .unit-3-4 {
+    max-height: 75%;
+  }
+}

src/_layout.scss

@@ -0,0 +1,11 @@
+@media (max-width: $width-breakpoint - 1px) {
+  .hide-on-mobile {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-breakpoint) {
+  .show-on-mobile {
+    display: none !important;
+  }
+}

src/_show-hide-on-mobile.scss

@@ -0,0 +1,11 @@
+.top-gap-big {
+  margin-top: $width-gap-double;
+}
+
+.top-gap {
+  margin-top: $width-gap;
+}
+
+.top-gap-0 {
+  margin-top: 0;
+}

src/_top-gap.scss

@@ -1 +1,4 @@
-@import "layout";
+@import "container";
+@import "flexbox";
+@import "top-gap";
+@import "show-hide-on-mobile";