Merge pull request #17 from felics/clean-modifiers

DRY out directional modifiers

README.md

@@ -105,9 +105,8 @@ By default, the grid is just a light wrapper around flexbox, so go nuts with fle
 
 ### Direction:
 
- - **rev:**  Reverted grid on both axis.
- - **x-rev:** Reverted grid on x-axis.
- - **y-rev:** Reverted grid on y-axis.
+ - **rev:**  Reverted grid on x-axis.
+ - **flip:** Reverted grid on y-axis.
 
 ### Mixins:
 

__test__/src/jade/_tests/modifiers.jade

@@ -178,7 +178,7 @@ block content
   section.modifier-xrev
     header.modifier-header
       h2
-        code xrev
+        code rev
     article.modifier-item
       div.block.large
       // * Nested
@@ -197,7 +197,7 @@ block content
 
   header.modifier-header
     h2
-      code rev
+      code flip
   section.modifier-yrev
     article.modifier-item
       div.block.large
@@ -216,7 +216,7 @@ block content
 
   header.modifier-header
     h2
-      code rev
+      code rev+flip
   section.modifier-rev
     article.modifier-item
       div.block.large

__test__/src/scss/tests/_modifiers.scss

@@ -79,12 +79,12 @@
     }
 
     &-xrev {
-        @include g(x-rev);
+        @include g(rev);
     }
     &-yrev {
-        @include g(y-rev);
+        @include g(flip);
     }
     &-rev {
-        @include g(rev);
+        @include g(rev, flip);
     }
 }

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hagrid",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "authors": [
     "felics <[email protected]>"
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hagrid",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/felics/hagrid"

src/hagrid/_modifiers.scss

@@ -6,16 +6,16 @@
 @mixin grid-modifiers($modifiers...) {
 
     $is-y: false;
-    $is-orientation: false;
+    $is-wrap: false;
     $is-spacing: false;
 
     @each $modifier in $modifiers {
         // * Check for modifiers that collide with defaults
         @if $modifier == bottom or $modifier == top or $modifier == middle {
             $is-y: true;
         }
-        @else if $modifier == rev or $modifier == x-rev or $modifier == y-rev {
-            $is-orientation: true;
+        @else if $modifier == flip {
+            $is-wrap: true;
         }
         @else if $modifier == narrow or $modifier == wide or $modifier == full {
             $is-spacing: true;
@@ -29,8 +29,8 @@
         align-items: flex-start;
     }
 
-    @if $is-orientation == false {
-        flex-flow: row wrap;
+    @if $is-wrap == false {
+        flex-wrap: wrap;
     }
 
     @if $is-spacing == false {
@@ -168,25 +168,22 @@
     // Direction
     ///////////////////////////////
 
-    @else if $modifier == x-rev {
+    @else if $modifier == rev {
 
         @if $hagrid-fallback {
-            // * Needs to be reset - will be skipped otherwise
-            flex-flow: row wrap;
             direction: rtl;
-            text-align: left;
             > * {
                 direction: ltr;
                 text-align: left;
             }
         } @else {
-            flex-flow: row-reverse wrap;
+            flex-direction: row-reverse;
         }
 
     }
 
-    @else if $modifier == y-rev {
-        flex-flow: row wrap-reverse;
+    @else if $modifier == flip {
+        flex-wrap: wrap-reverse;
         // * Workaround for IE rendering diff, see: https://github.com/felics/hagrid/issues/13
         @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
             align-items: flex-end;
@@ -195,28 +192,7 @@
             @warn "Modifier #{$modifier} won't work on fallback-grid!"
         }
     }
-
-    @else if $modifier == rev {
-        // * Workaround for IE rendering diff, see: https://github.com/felics/hagrid/issues/13
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-            align-items: flex-end;
-        }
-        @if $hagrid-fallback {
-            flex-flow: row wrap-reverse;
-            direction: rtl;
-            text-align: left;
-            > * {
-                direction: ltr;
-                text-align: left;
-            }
-
-            @if  $hagrid-fallback-warnings {
-                @warn "Modifier #{$modifier} won't work as expected on fallback-grid!"
-            }
-        } @else {
-            flex-flow: row-reverse wrap-reverse;
-        }
-    } @else {
+    @else {
         @error "Modifier #{ $modifier } does not exist."
     }
 }