@medyll/cssfabric 0.0.14 → 0.1.0

package/lib/styles/core/flex/flex.responsive.css

@@ -1,319 +1,171 @@
-@media only screen and (max-width: 0rem) {
-  .flex-xxxl-h {
+@media only screen and (max-width: 1300px) {
+  .flex,
+.flex-xxl-h {
     display: flex;
     flex-direction: row;
   }
-  .flex-xxxl-h > .flex-main {
+  .flex > .flex-main,
+.flex-xxl-h > .flex-main {
     flex: 1 1 0;
   }
-  .flex-xxxl-h.align-middle, .flex-xxxl-h.flex-align-middle {
+  .flex.flex-align-middle,
+.flex-xxl-h.flex-align-middle {
     align-items: center;
   }
-  .flex-xxxl-h.align-top, .flex-xxxl-h.flex-align-top {
+  .flex.flex-align-top,
+.flex-xxl-h.flex-align-top {
     align-items: flex-start;
   }
-  .flex-xxxl-h.align-left, .flex-xxxl-h.flex-align-left {
+  .flex.flex-align-left,
+.flex-xxl-h.flex-align-left {
     align-items: flex-start;
   }
-  .flex-xxxl-h.align-right, .flex-xxxl-h.flex-align-right {
+  .flex.flex-align-right,
+.flex-xxl-h.flex-align-right {
     justify-content: flex-end;
   }
-  .flex-xxxl-h.align-bottom, .flex-xxxl-h.flex-align-bottom {
+  .flex.flex-align-bottom,
+.flex-xxl-h.flex-align-bottom {
     align-items: flex-end;
   }
-  .flex-xxxl-h.align-center, .flex-xxxl-h.flex-align-center {
+  .flex.flex-align-center,
+.flex-xxl-h.flex-align-center {
     justify-content: center;
   }
-  .flex-xxxl-h.align-middle-center, .flex-xxxl-h.flex-align-middle-center {
+  .flex.flex-align-middle-center,
+.flex-xxl-h.flex-align-middle-center {
     justify-content: center;
     align-content: center;
     align-items: center;
   }
-  .flex-xxxl-h.align-stretch, .flex-xxxl-h.flex-align-stretch {
+  .flex.flex-align-stretch,
+.flex-xxl-h.flex-align-stretch {
     color: blue;
     align-items: stretch;
   }
 
-  .flex-xxxl-v {
+  .flex-xxl-v {
     display: flex;
     flex-direction: column;
   }
-  .flex-xxxl-v > .flex-main {
+  .flex-xxl-v > .flex-main {
     flex: 1 1 0;
     max-height: 100%;
   }
-  .flex-xxxl-v.align-middle, .flex-xxxl-v.flex-align-middle {
+  .flex-xxl-v.flex-align-middle {
     justify-content: center;
   }
-  .flex-xxxl-v.align-top, .flex-xxxl-v.flex-align-top {
+  .flex-xxl-v.flex-align-top {
     justify-content: flex-start;
   }
-  .flex-xxxl-v.align-left, .flex-xxxl-v.flex-align-left {
+  .flex-xxl-v.flex-align-left {
     align-items: flex-start;
   }
-  .flex-xxxl-v.align-right, .flex-xxxl-v.flex-align-right {
+  .flex-xxl-v.flex-align-right {
     align-items: flex-end;
   }
-  .flex-xxxl-v.align-bottom, .flex-xxxl-v.flex-align-bottom {
+  .flex-xxl-v.flex-align-bottom {
     justify-content: flex-end;
   }
-  .flex-xxxl-v.align-center, .flex-xxxl-v.flex-align-center {
+  .flex-xxl-v.flex-align-center {
     align-items: center;
   }
-  .flex-xxxl-v.align-middle-center, .flex-xxxl-v.flex-align-middle-center {
+  .flex-xxl-v.flex-align-middle-center {
     align-items: center;
     justify-content: center;
   }
-  .flex-xxxl-v.align-stretch, .flex-xxxl-v.flex-align-stretch {
+  .flex-xxl-v.flex-align-stretch {
     color: red;
     align-items: stretch;
   }
 
-  .flex-xxxl-h,
-.flex-xxxl-v {
-    box-sizing: border-box;
-  }
-  .flex-xxxl-h > *,
-.flex-xxxl-v > * {
-    box-sizing: border-box;
-  }
-  .flex-xxxl-h > *:not(.flex-main),
-.flex-xxxl-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-xxxl-h.flex-inline,
-.flex-xxxl-v.flex-inline {
+  .flex-inline {
     display: inline-flex;
   }
-  .flex-xxxl-h .flex-grow-1,
-.flex-xxxl-v .flex-grow-1 {
-    flex-grow: 1;
-  }
-  .flex-xxxl-h .flex-shrink-1,
-.flex-xxxl-v .flex-shrink-1 {
-    flex-shrink: 1;
-  }
-  .flex-xxxl-h .flex-grow-2,
-.flex-xxxl-v .flex-grow-2 {
-    flex-grow: 2;
-  }
-  .flex-xxxl-h .flex-shrink-2,
-.flex-xxxl-v .flex-shrink-2 {
-    flex-shrink: 2;
-  }
-  .flex-xxxl-h .flex-grow-3,
-.flex-xxxl-v .flex-grow-3 {
-    flex-grow: 3;
-  }
-  .flex-xxxl-h .flex-shrink-3,
-.flex-xxxl-v .flex-shrink-3 {
-    flex-shrink: 3;
-  }
-  .flex-xxxl-h .flex-grow-4,
-.flex-xxxl-v .flex-grow-4 {
-    flex-grow: 4;
-  }
-  .flex-xxxl-h .flex-shrink-4,
-.flex-xxxl-v .flex-shrink-4 {
-    flex-shrink: 4;
-  }
 
-  /** raw css properties distribution */
-  .flex-xxxl-h.flex-wrap,
-.flex-xxxl-v.flex-wrap {
+  .flex-wrap {
     flex-wrap: wrap;
   }
-  .flex-xxxl-h.flex-wrap-reverse,
-.flex-xxxl-v.flex-wrap-reverse {
+  .flex-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
-  .flex-xxxl-h .self-start,
-.flex-xxxl-v .self-start {
+
+  .self-start {
     align-self: flex-start;
   }
-  .flex-xxxl-h .self-end,
-.flex-xxxl-v .self-end {
+  .self-end {
     align-self: flex-end;
   }
-  .flex-xxxl-h .self-stretch,
-.flex-xxxl-v .self-stretch {
+  .self-stretch {
     align-self: stretch;
   }
-}
-@media only screen and (max-width: 120rem) {
-  .flex-xxl-h {
-    display: flex;
-    flex-direction: row;
-  }
-  .flex-xxl-h > .flex-main {
-    flex: 1 1 0;
-  }
-  .flex-xxl-h.align-middle, .flex-xxl-h.flex-align-middle {
-    align-items: center;
-  }
-  .flex-xxl-h.align-top, .flex-xxl-h.flex-align-top {
-    align-items: flex-start;
-  }
-  .flex-xxl-h.align-left, .flex-xxl-h.flex-align-left {
-    align-items: flex-start;
-  }
-  .flex-xxl-h.align-right, .flex-xxl-h.flex-align-right {
-    justify-content: flex-end;
-  }
-  .flex-xxl-h.align-bottom, .flex-xxl-h.flex-align-bottom {
-    align-items: flex-end;
-  }
-  .flex-xxl-h.align-center, .flex-xxl-h.flex-align-center {
-    justify-content: center;
-  }
-  .flex-xxl-h.align-middle-center, .flex-xxl-h.flex-align-middle-center {
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-  }
-  .flex-xxl-h.align-stretch, .flex-xxl-h.flex-align-stretch {
-    color: blue;
-    align-items: stretch;
-  }
 
-  .flex-xxl-v {
-    display: flex;
-    flex-direction: column;
-  }
-  .flex-xxl-v > .flex-main {
-    flex: 1 1 0;
-    max-height: 100%;
-  }
-  .flex-xxl-v.align-middle, .flex-xxl-v.flex-align-middle {
-    justify-content: center;
-  }
-  .flex-xxl-v.align-top, .flex-xxl-v.flex-align-top {
-    justify-content: flex-start;
-  }
-  .flex-xxl-v.align-left, .flex-xxl-v.flex-align-left {
-    align-items: flex-start;
-  }
-  .flex-xxl-v.align-right, .flex-xxl-v.flex-align-right {
-    align-items: flex-end;
-  }
-  .flex-xxl-v.align-bottom, .flex-xxl-v.flex-align-bottom {
-    justify-content: flex-end;
-  }
-  .flex-xxl-v.align-center, .flex-xxl-v.flex-align-center {
-    align-items: center;
-  }
-  .flex-xxl-v.align-middle-center, .flex-xxl-v.flex-align-middle-center {
-    align-items: center;
-    justify-content: center;
-  }
-  .flex-xxl-v.align-stretch, .flex-xxl-v.flex-align-stretch {
-    color: red;
-    align-items: stretch;
+  .flex-grow-0 {
+    flex-grow: 0;
   }
 
-  .flex-xxl-h,
-.flex-xxl-v {
-    box-sizing: border-box;
-  }
-  .flex-xxl-h > *,
-.flex-xxl-v > * {
-    box-sizing: border-box;
+  .flex-shrink-0 {
+    flex-shrink: 0;
   }
-  .flex-xxl-h > *:not(.flex-main),
-.flex-xxl-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-xxl-h.flex-inline,
-.flex-xxl-v.flex-inline {
-    display: inline-flex;
-  }
-  .flex-xxl-h .flex-grow-1,
-.flex-xxl-v .flex-grow-1 {
+
+  .flex-grow-1 {
     flex-grow: 1;
   }
-  .flex-xxl-h .flex-shrink-1,
-.flex-xxl-v .flex-shrink-1 {
+
+  .flex-shrink-1 {
     flex-shrink: 1;
   }
-  .flex-xxl-h .flex-grow-2,
-.flex-xxl-v .flex-grow-2 {
+
+  .flex-grow-2 {
     flex-grow: 2;
   }
-  .flex-xxl-h .flex-shrink-2,
-.flex-xxl-v .flex-shrink-2 {
-    flex-shrink: 2;
-  }
-  .flex-xxl-h .flex-grow-3,
-.flex-xxl-v .flex-grow-3 {
-    flex-grow: 3;
-  }
-  .flex-xxl-h .flex-shrink-3,
-.flex-xxl-v .flex-shrink-3 {
-    flex-shrink: 3;
-  }
-  .flex-xxl-h .flex-grow-4,
-.flex-xxl-v .flex-grow-4 {
-    flex-grow: 4;
-  }
-  .flex-xxl-h .flex-shrink-4,
-.flex-xxl-v .flex-shrink-4 {
-    flex-shrink: 4;
-  }
 
-  /** raw css properties distribution */
-  .flex-xxl-h.flex-wrap,
-.flex-xxl-v.flex-wrap {
-    flex-wrap: wrap;
-  }
-  .flex-xxl-h.flex-wrap-reverse,
-.flex-xxl-v.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-  .flex-xxl-h .self-start,
-.flex-xxl-v .self-start {
-    align-self: flex-start;
-  }
-  .flex-xxl-h .self-end,
-.flex-xxl-v .self-end {
-    align-self: flex-end;
-  }
-  .flex-xxl-h .self-stretch,
-.flex-xxl-v .self-stretch {
-    align-self: stretch;
+  .flex-shrink-2 {
+    flex-shrink: 2;
   }
 }
-@media only screen and (max-width: 90rem) {
-  .flex-xl-h {
+@media only screen and (max-width: 1200px) {
+  .flex,
+.flex-xl-h {
     display: flex;
     flex-direction: row;
   }
-  .flex-xl-h > .flex-main {
+  .flex > .flex-main,
+.flex-xl-h > .flex-main {
     flex: 1 1 0;
   }
-  .flex-xl-h.align-middle, .flex-xl-h.flex-align-middle {
+  .flex.flex-align-middle,
+.flex-xl-h.flex-align-middle {
     align-items: center;
   }
-  .flex-xl-h.align-top, .flex-xl-h.flex-align-top {
+  .flex.flex-align-top,
+.flex-xl-h.flex-align-top {
     align-items: flex-start;
   }
-  .flex-xl-h.align-left, .flex-xl-h.flex-align-left {
+  .flex.flex-align-left,
+.flex-xl-h.flex-align-left {
     align-items: flex-start;
   }
-  .flex-xl-h.align-right, .flex-xl-h.flex-align-right {
+  .flex.flex-align-right,
+.flex-xl-h.flex-align-right {
     justify-content: flex-end;
   }
-  .flex-xl-h.align-bottom, .flex-xl-h.flex-align-bottom {
+  .flex.flex-align-bottom,
+.flex-xl-h.flex-align-bottom {
     align-items: flex-end;
   }
-  .flex-xl-h.align-center, .flex-xl-h.flex-align-center {
+  .flex.flex-align-center,
+.flex-xl-h.flex-align-center {
     justify-content: center;
   }
-  .flex-xl-h.align-middle-center, .flex-xl-h.flex-align-middle-center {
+  .flex.flex-align-middle-center,
+.flex-xl-h.flex-align-middle-center {
     justify-content: center;
     align-content: center;
     align-items: center;
   }
-  .flex-xl-h.align-stretch, .flex-xl-h.flex-align-stretch {
+  .flex.flex-align-stretch,
+.flex-xl-h.flex-align-stretch {
     color: blue;
     align-items: stretch;
   }
@@ -326,136 +178,120 @@
     flex: 1 1 0;
     max-height: 100%;
   }
-  .flex-xl-v.align-middle, .flex-xl-v.flex-align-middle {
+  .flex-xl-v.flex-align-middle {
     justify-content: center;
   }
-  .flex-xl-v.align-top, .flex-xl-v.flex-align-top {
+  .flex-xl-v.flex-align-top {
     justify-content: flex-start;
   }
-  .flex-xl-v.align-left, .flex-xl-v.flex-align-left {
+  .flex-xl-v.flex-align-left {
     align-items: flex-start;
   }
-  .flex-xl-v.align-right, .flex-xl-v.flex-align-right {
+  .flex-xl-v.flex-align-right {
     align-items: flex-end;
   }
-  .flex-xl-v.align-bottom, .flex-xl-v.flex-align-bottom {
+  .flex-xl-v.flex-align-bottom {
     justify-content: flex-end;
   }
-  .flex-xl-v.align-center, .flex-xl-v.flex-align-center {
+  .flex-xl-v.flex-align-center {
     align-items: center;
   }
-  .flex-xl-v.align-middle-center, .flex-xl-v.flex-align-middle-center {
+  .flex-xl-v.flex-align-middle-center {
     align-items: center;
     justify-content: center;
   }
-  .flex-xl-v.align-stretch, .flex-xl-v.flex-align-stretch {
+  .flex-xl-v.flex-align-stretch {
     color: red;
     align-items: stretch;
   }
 
-  .flex-xl-h,
-.flex-xl-v {
-    box-sizing: border-box;
-  }
-  .flex-xl-h > *,
-.flex-xl-v > * {
-    box-sizing: border-box;
-  }
-  .flex-xl-h > *:not(.flex-main),
-.flex-xl-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-xl-h.flex-inline,
-.flex-xl-v.flex-inline {
+  .flex-inline {
     display: inline-flex;
   }
-  .flex-xl-h .flex-grow-1,
-.flex-xl-v .flex-grow-1 {
-    flex-grow: 1;
-  }
-  .flex-xl-h .flex-shrink-1,
-.flex-xl-v .flex-shrink-1 {
-    flex-shrink: 1;
-  }
-  .flex-xl-h .flex-grow-2,
-.flex-xl-v .flex-grow-2 {
-    flex-grow: 2;
+
+  .flex-wrap {
+    flex-wrap: wrap;
   }
-  .flex-xl-h .flex-shrink-2,
-.flex-xl-v .flex-shrink-2 {
-    flex-shrink: 2;
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
   }
-  .flex-xl-h .flex-grow-3,
-.flex-xl-v .flex-grow-3 {
-    flex-grow: 3;
+
+  .self-start {
+    align-self: flex-start;
   }
-  .flex-xl-h .flex-shrink-3,
-.flex-xl-v .flex-shrink-3 {
-    flex-shrink: 3;
+  .self-end {
+    align-self: flex-end;
   }
-  .flex-xl-h .flex-grow-4,
-.flex-xl-v .flex-grow-4 {
-    flex-grow: 4;
+  .self-stretch {
+    align-self: stretch;
   }
-  .flex-xl-h .flex-shrink-4,
-.flex-xl-v .flex-shrink-4 {
-    flex-shrink: 4;
+
+  .flex-grow-0 {
+    flex-grow: 0;
   }
 
-  /** raw css properties distribution */
-  .flex-xl-h.flex-wrap,
-.flex-xl-v.flex-wrap {
-    flex-wrap: wrap;
+  .flex-shrink-0 {
+    flex-shrink: 0;
   }
-  .flex-xl-h.flex-wrap-reverse,
-.flex-xl-v.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .flex-grow-1 {
+    flex-grow: 1;
   }
-  .flex-xl-h .self-start,
-.flex-xl-v .self-start {
-    align-self: flex-start;
+
+  .flex-shrink-1 {
+    flex-shrink: 1;
   }
-  .flex-xl-h .self-end,
-.flex-xl-v .self-end {
-    align-self: flex-end;
+
+  .flex-grow-2 {
+    flex-grow: 2;
   }
-  .flex-xl-h .self-stretch,
-.flex-xl-v .self-stretch {
-    align-self: stretch;
+
+  .flex-shrink-2 {
+    flex-shrink: 2;
   }
 }
-@media only screen and (max-width: 64rem) {
-  .flex-lg-h {
+@media only screen and (max-width: 960px) {
+  .flex,
+.flex-lg-h {
     display: flex;
     flex-direction: row;
   }
-  .flex-lg-h > .flex-main {
+  .flex > .flex-main,
+.flex-lg-h > .flex-main {
     flex: 1 1 0;
   }
-  .flex-lg-h.align-middle, .flex-lg-h.flex-align-middle {
+  .flex.flex-align-middle,
+.flex-lg-h.flex-align-middle {
     align-items: center;
   }
-  .flex-lg-h.align-top, .flex-lg-h.flex-align-top {
+  .flex.flex-align-top,
+.flex-lg-h.flex-align-top {
     align-items: flex-start;
   }
-  .flex-lg-h.align-left, .flex-lg-h.flex-align-left {
+  .flex.flex-align-left,
+.flex-lg-h.flex-align-left {
     align-items: flex-start;
   }
-  .flex-lg-h.align-right, .flex-lg-h.flex-align-right {
+  .flex.flex-align-right,
+.flex-lg-h.flex-align-right {
     justify-content: flex-end;
   }
-  .flex-lg-h.align-bottom, .flex-lg-h.flex-align-bottom {
+  .flex.flex-align-bottom,
+.flex-lg-h.flex-align-bottom {
     align-items: flex-end;
   }
-  .flex-lg-h.align-center, .flex-lg-h.flex-align-center {
+  .flex.flex-align-center,
+.flex-lg-h.flex-align-center {
     justify-content: center;
   }
-  .flex-lg-h.align-middle-center, .flex-lg-h.flex-align-middle-center {
+  .flex.flex-align-middle-center,
+.flex-lg-h.flex-align-middle-center {
     justify-content: center;
     align-content: center;
     align-items: center;
   }
-  .flex-lg-h.align-stretch, .flex-lg-h.flex-align-stretch {
+  .flex.flex-align-stretch,
+.flex-lg-h.flex-align-stretch {
     color: blue;
     align-items: stretch;
   }
@@ -468,136 +304,120 @@
     flex: 1 1 0;
     max-height: 100%;
   }
-  .flex-lg-v.align-middle, .flex-lg-v.flex-align-middle {
+  .flex-lg-v.flex-align-middle {
     justify-content: center;
   }
-  .flex-lg-v.align-top, .flex-lg-v.flex-align-top {
+  .flex-lg-v.flex-align-top {
     justify-content: flex-start;
   }
-  .flex-lg-v.align-left, .flex-lg-v.flex-align-left {
+  .flex-lg-v.flex-align-left {
     align-items: flex-start;
   }
-  .flex-lg-v.align-right, .flex-lg-v.flex-align-right {
+  .flex-lg-v.flex-align-right {
     align-items: flex-end;
   }
-  .flex-lg-v.align-bottom, .flex-lg-v.flex-align-bottom {
+  .flex-lg-v.flex-align-bottom {
     justify-content: flex-end;
   }
-  .flex-lg-v.align-center, .flex-lg-v.flex-align-center {
+  .flex-lg-v.flex-align-center {
     align-items: center;
   }
-  .flex-lg-v.align-middle-center, .flex-lg-v.flex-align-middle-center {
+  .flex-lg-v.flex-align-middle-center {
     align-items: center;
     justify-content: center;
   }
-  .flex-lg-v.align-stretch, .flex-lg-v.flex-align-stretch {
+  .flex-lg-v.flex-align-stretch {
     color: red;
     align-items: stretch;
   }
 
-  .flex-lg-h,
-.flex-lg-v {
-    box-sizing: border-box;
-  }
-  .flex-lg-h > *,
-.flex-lg-v > * {
-    box-sizing: border-box;
-  }
-  .flex-lg-h > *:not(.flex-main),
-.flex-lg-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-lg-h.flex-inline,
-.flex-lg-v.flex-inline {
+  .flex-inline {
     display: inline-flex;
   }
-  .flex-lg-h .flex-grow-1,
-.flex-lg-v .flex-grow-1 {
-    flex-grow: 1;
-  }
-  .flex-lg-h .flex-shrink-1,
-.flex-lg-v .flex-shrink-1 {
-    flex-shrink: 1;
-  }
-  .flex-lg-h .flex-grow-2,
-.flex-lg-v .flex-grow-2 {
-    flex-grow: 2;
+
+  .flex-wrap {
+    flex-wrap: wrap;
   }
-  .flex-lg-h .flex-shrink-2,
-.flex-lg-v .flex-shrink-2 {
-    flex-shrink: 2;
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
   }
-  .flex-lg-h .flex-grow-3,
-.flex-lg-v .flex-grow-3 {
-    flex-grow: 3;
+
+  .self-start {
+    align-self: flex-start;
   }
-  .flex-lg-h .flex-shrink-3,
-.flex-lg-v .flex-shrink-3 {
-    flex-shrink: 3;
+  .self-end {
+    align-self: flex-end;
   }
-  .flex-lg-h .flex-grow-4,
-.flex-lg-v .flex-grow-4 {
-    flex-grow: 4;
+  .self-stretch {
+    align-self: stretch;
   }
-  .flex-lg-h .flex-shrink-4,
-.flex-lg-v .flex-shrink-4 {
-    flex-shrink: 4;
+
+  .flex-grow-0 {
+    flex-grow: 0;
   }
 
-  /** raw css properties distribution */
-  .flex-lg-h.flex-wrap,
-.flex-lg-v.flex-wrap {
-    flex-wrap: wrap;
+  .flex-shrink-0 {
+    flex-shrink: 0;
   }
-  .flex-lg-h.flex-wrap-reverse,
-.flex-lg-v.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .flex-grow-1 {
+    flex-grow: 1;
   }
-  .flex-lg-h .self-start,
-.flex-lg-v .self-start {
-    align-self: flex-start;
+
+  .flex-shrink-1 {
+    flex-shrink: 1;
   }
-  .flex-lg-h .self-end,
-.flex-lg-v .self-end {
-    align-self: flex-end;
+
+  .flex-grow-2 {
+    flex-grow: 2;
   }
-  .flex-lg-h .self-stretch,
-.flex-lg-v .self-stretch {
-    align-self: stretch;
+
+  .flex-shrink-2 {
+    flex-shrink: 2;
   }
 }
-@media only screen and (max-width: 48rem) {
-  .flex-md-h {
+@media only screen and (max-width: 760px) {
+  .flex,
+.flex-md-h {
     display: flex;
     flex-direction: row;
   }
-  .flex-md-h > .flex-main {
+  .flex > .flex-main,
+.flex-md-h > .flex-main {
     flex: 1 1 0;
   }
-  .flex-md-h.align-middle, .flex-md-h.flex-align-middle {
+  .flex.flex-align-middle,
+.flex-md-h.flex-align-middle {
     align-items: center;
   }
-  .flex-md-h.align-top, .flex-md-h.flex-align-top {
+  .flex.flex-align-top,
+.flex-md-h.flex-align-top {
     align-items: flex-start;
   }
-  .flex-md-h.align-left, .flex-md-h.flex-align-left {
+  .flex.flex-align-left,
+.flex-md-h.flex-align-left {
     align-items: flex-start;
   }
-  .flex-md-h.align-right, .flex-md-h.flex-align-right {
+  .flex.flex-align-right,
+.flex-md-h.flex-align-right {
     justify-content: flex-end;
   }
-  .flex-md-h.align-bottom, .flex-md-h.flex-align-bottom {
+  .flex.flex-align-bottom,
+.flex-md-h.flex-align-bottom {
     align-items: flex-end;
   }
-  .flex-md-h.align-center, .flex-md-h.flex-align-center {
+  .flex.flex-align-center,
+.flex-md-h.flex-align-center {
     justify-content: center;
   }
-  .flex-md-h.align-middle-center, .flex-md-h.flex-align-middle-center {
+  .flex.flex-align-middle-center,
+.flex-md-h.flex-align-middle-center {
     justify-content: center;
     align-content: center;
     align-items: center;
   }
-  .flex-md-h.align-stretch, .flex-md-h.flex-align-stretch {
+  .flex.flex-align-stretch,
+.flex-md-h.flex-align-stretch {
     color: blue;
     align-items: stretch;
   }
@@ -610,136 +430,120 @@
     flex: 1 1 0;
     max-height: 100%;
   }
-  .flex-md-v.align-middle, .flex-md-v.flex-align-middle {
+  .flex-md-v.flex-align-middle {
     justify-content: center;
   }
-  .flex-md-v.align-top, .flex-md-v.flex-align-top {
+  .flex-md-v.flex-align-top {
     justify-content: flex-start;
   }
-  .flex-md-v.align-left, .flex-md-v.flex-align-left {
+  .flex-md-v.flex-align-left {
     align-items: flex-start;
   }
-  .flex-md-v.align-right, .flex-md-v.flex-align-right {
+  .flex-md-v.flex-align-right {
     align-items: flex-end;
   }
-  .flex-md-v.align-bottom, .flex-md-v.flex-align-bottom {
+  .flex-md-v.flex-align-bottom {
     justify-content: flex-end;
   }
-  .flex-md-v.align-center, .flex-md-v.flex-align-center {
+  .flex-md-v.flex-align-center {
     align-items: center;
   }
-  .flex-md-v.align-middle-center, .flex-md-v.flex-align-middle-center {
+  .flex-md-v.flex-align-middle-center {
     align-items: center;
     justify-content: center;
   }
-  .flex-md-v.align-stretch, .flex-md-v.flex-align-stretch {
+  .flex-md-v.flex-align-stretch {
     color: red;
     align-items: stretch;
   }
 
-  .flex-md-h,
-.flex-md-v {
-    box-sizing: border-box;
-  }
-  .flex-md-h > *,
-.flex-md-v > * {
-    box-sizing: border-box;
-  }
-  .flex-md-h > *:not(.flex-main),
-.flex-md-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-md-h.flex-inline,
-.flex-md-v.flex-inline {
+  .flex-inline {
     display: inline-flex;
   }
-  .flex-md-h .flex-grow-1,
-.flex-md-v .flex-grow-1 {
-    flex-grow: 1;
-  }
-  .flex-md-h .flex-shrink-1,
-.flex-md-v .flex-shrink-1 {
-    flex-shrink: 1;
-  }
-  .flex-md-h .flex-grow-2,
-.flex-md-v .flex-grow-2 {
-    flex-grow: 2;
+
+  .flex-wrap {
+    flex-wrap: wrap;
   }
-  .flex-md-h .flex-shrink-2,
-.flex-md-v .flex-shrink-2 {
-    flex-shrink: 2;
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
   }
-  .flex-md-h .flex-grow-3,
-.flex-md-v .flex-grow-3 {
-    flex-grow: 3;
+
+  .self-start {
+    align-self: flex-start;
   }
-  .flex-md-h .flex-shrink-3,
-.flex-md-v .flex-shrink-3 {
-    flex-shrink: 3;
+  .self-end {
+    align-self: flex-end;
   }
-  .flex-md-h .flex-grow-4,
-.flex-md-v .flex-grow-4 {
-    flex-grow: 4;
+  .self-stretch {
+    align-self: stretch;
   }
-  .flex-md-h .flex-shrink-4,
-.flex-md-v .flex-shrink-4 {
-    flex-shrink: 4;
+
+  .flex-grow-0 {
+    flex-grow: 0;
   }
 
-  /** raw css properties distribution */
-  .flex-md-h.flex-wrap,
-.flex-md-v.flex-wrap {
-    flex-wrap: wrap;
+  .flex-shrink-0 {
+    flex-shrink: 0;
   }
-  .flex-md-h.flex-wrap-reverse,
-.flex-md-v.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .flex-grow-1 {
+    flex-grow: 1;
   }
-  .flex-md-h .self-start,
-.flex-md-v .self-start {
-    align-self: flex-start;
+
+  .flex-shrink-1 {
+    flex-shrink: 1;
   }
-  .flex-md-h .self-end,
-.flex-md-v .self-end {
-    align-self: flex-end;
+
+  .flex-grow-2 {
+    flex-grow: 2;
   }
-  .flex-md-h .self-stretch,
-.flex-md-v .self-stretch {
-    align-self: stretch;
+
+  .flex-shrink-2 {
+    flex-shrink: 2;
   }
 }
-@media only screen and (max-width: 35.7rem) {
-  .flex-sm-h {
+@media only screen and (max-width: 0px) {
+  .flex,
+.flex-sm-h {
     display: flex;
     flex-direction: row;
   }
-  .flex-sm-h > .flex-main {
+  .flex > .flex-main,
+.flex-sm-h > .flex-main {
     flex: 1 1 0;
   }
-  .flex-sm-h.align-middle, .flex-sm-h.flex-align-middle {
+  .flex.flex-align-middle,
+.flex-sm-h.flex-align-middle {
     align-items: center;
   }
-  .flex-sm-h.align-top, .flex-sm-h.flex-align-top {
+  .flex.flex-align-top,
+.flex-sm-h.flex-align-top {
     align-items: flex-start;
   }
-  .flex-sm-h.align-left, .flex-sm-h.flex-align-left {
+  .flex.flex-align-left,
+.flex-sm-h.flex-align-left {
     align-items: flex-start;
   }
-  .flex-sm-h.align-right, .flex-sm-h.flex-align-right {
+  .flex.flex-align-right,
+.flex-sm-h.flex-align-right {
     justify-content: flex-end;
   }
-  .flex-sm-h.align-bottom, .flex-sm-h.flex-align-bottom {
+  .flex.flex-align-bottom,
+.flex-sm-h.flex-align-bottom {
     align-items: flex-end;
   }
-  .flex-sm-h.align-center, .flex-sm-h.flex-align-center {
+  .flex.flex-align-center,
+.flex-sm-h.flex-align-center {
     justify-content: center;
   }
-  .flex-sm-h.align-middle-center, .flex-sm-h.flex-align-middle-center {
+  .flex.flex-align-middle-center,
+.flex-sm-h.flex-align-middle-center {
     justify-content: center;
     align-content: center;
     align-items: center;
   }
-  .flex-sm-h.align-stretch, .flex-sm-h.flex-align-stretch {
+  .flex.flex-align-stretch,
+.flex-sm-h.flex-align-stretch {
     color: blue;
     align-items: stretch;
   }
@@ -752,101 +556,75 @@
     flex: 1 1 0;
     max-height: 100%;
   }
-  .flex-sm-v.align-middle, .flex-sm-v.flex-align-middle {
+  .flex-sm-v.flex-align-middle {
     justify-content: center;
   }
-  .flex-sm-v.align-top, .flex-sm-v.flex-align-top {
+  .flex-sm-v.flex-align-top {
     justify-content: flex-start;
   }
-  .flex-sm-v.align-left, .flex-sm-v.flex-align-left {
+  .flex-sm-v.flex-align-left {
     align-items: flex-start;
   }
-  .flex-sm-v.align-right, .flex-sm-v.flex-align-right {
+  .flex-sm-v.flex-align-right {
     align-items: flex-end;
   }
-  .flex-sm-v.align-bottom, .flex-sm-v.flex-align-bottom {
+  .flex-sm-v.flex-align-bottom {
     justify-content: flex-end;
   }
-  .flex-sm-v.align-center, .flex-sm-v.flex-align-center {
+  .flex-sm-v.flex-align-center {
     align-items: center;
   }
-  .flex-sm-v.align-middle-center, .flex-sm-v.flex-align-middle-center {
+  .flex-sm-v.flex-align-middle-center {
     align-items: center;
     justify-content: center;
   }
-  .flex-sm-v.align-stretch, .flex-sm-v.flex-align-stretch {
+  .flex-sm-v.flex-align-stretch {
     color: red;
     align-items: stretch;
   }
 
-  .flex-sm-h,
-.flex-sm-v {
-    box-sizing: border-box;
-  }
-  .flex-sm-h > *,
-.flex-sm-v > * {
-    box-sizing: border-box;
-  }
-  .flex-sm-h > *:not(.flex-main),
-.flex-sm-v > *:not(.flex-main) {
-    flex: 0 0 auto;
-  }
-  .flex-sm-h.flex-inline,
-.flex-sm-v.flex-inline {
+  .flex-inline {
     display: inline-flex;
   }
-  .flex-sm-h .flex-grow-1,
-.flex-sm-v .flex-grow-1 {
-    flex-grow: 1;
-  }
-  .flex-sm-h .flex-shrink-1,
-.flex-sm-v .flex-shrink-1 {
-    flex-shrink: 1;
-  }
-  .flex-sm-h .flex-grow-2,
-.flex-sm-v .flex-grow-2 {
-    flex-grow: 2;
+
+  .flex-wrap {
+    flex-wrap: wrap;
   }
-  .flex-sm-h .flex-shrink-2,
-.flex-sm-v .flex-shrink-2 {
-    flex-shrink: 2;
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
   }
-  .flex-sm-h .flex-grow-3,
-.flex-sm-v .flex-grow-3 {
-    flex-grow: 3;
+
+  .self-start {
+    align-self: flex-start;
   }
-  .flex-sm-h .flex-shrink-3,
-.flex-sm-v .flex-shrink-3 {
-    flex-shrink: 3;
+  .self-end {
+    align-self: flex-end;
   }
-  .flex-sm-h .flex-grow-4,
-.flex-sm-v .flex-grow-4 {
-    flex-grow: 4;
+  .self-stretch {
+    align-self: stretch;
   }
-  .flex-sm-h .flex-shrink-4,
-.flex-sm-v .flex-shrink-4 {
-    flex-shrink: 4;
+
+  .flex-grow-0 {
+    flex-grow: 0;
   }
 
-  /** raw css properties distribution */
-  .flex-sm-h.flex-wrap,
-.flex-sm-v.flex-wrap {
-    flex-wrap: wrap;
+  .flex-shrink-0 {
+    flex-shrink: 0;
   }
-  .flex-sm-h.flex-wrap-reverse,
-.flex-sm-v.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .flex-grow-1 {
+    flex-grow: 1;
   }
-  .flex-sm-h .self-start,
-.flex-sm-v .self-start {
-    align-self: flex-start;
+
+  .flex-shrink-1 {
+    flex-shrink: 1;
   }
-  .flex-sm-h .self-end,
-.flex-sm-v .self-end {
-    align-self: flex-end;
+
+  .flex-grow-2 {
+    flex-grow: 2;
   }
-  .flex-sm-h .self-stretch,
-.flex-sm-v .self-stretch {
-    align-self: stretch;
+
+  .flex-shrink-2 {
+    flex-shrink: 2;
   }
 }