PolymerElements#96 PolymerElements#104 additional mixins for more fle…

…xibility in composition
caranicas · Dec 5, 2016 · 677f2c1 · 677f2c1
1 parent b8c8534
commit 677f2c1
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
@@ -68,36 +68,48 @@
       display: inline-flex;
     };
 
-    --layout-horizontal: {
-      @apply(--layout);
-
+    --layout-direction-row: {
       -ms-flex-direction: row;
       -webkit-flex-direction: row;
       flex-direction: row;
     };
 
-    --layout-horizontal-reverse: {
+    --layout-horizontal: {
       @apply(--layout);
+      @apply(--layout-direction-row);
+    };
 
+    --layout-direction-row-reverse: {
       -ms-flex-direction: row-reverse;
       -webkit-flex-direction: row-reverse;
       flex-direction: row-reverse;
     };
 
+    --layout-horizontal-reverse: {
+      @apply(--layout);
+      @apply(--layout-direction-row-reverse);
+    };
+
+    --layout-direction-column: {
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+    };
+
     --layout-vertical: {
       @apply(--layout);
+      @apply(--layout-direction-column);
+    };
 
+    --layout-direction-column-reverse: {
       -ms-flex-direction: column;
       -webkit-flex-direction: column;
       flex-direction: column;
     };
 
     --layout-vertical-reverse: {
       @apply(--layout);
-
-      -ms-flex-direction: column-reverse;
-      -webkit-flex-direction: column-reverse;
-      flex-direction: column-reverse;
+      @apply(--layout-direction-column-reverse);
     };
 
     --layout-wrap: {
@@ -205,6 +217,12 @@
     };
 
     /* alignment in cross axis */
+
+    --layout-stretch: {
+      -ms-flex-align: stretch;
+      -webkit-align-items: stretch;
+      align-items: stretch;
+    };
 
     --layout-start: {
       -ms-flex-align: start;