Add responsive is-*-touch tags for .column sizes (#780)

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index ea38d2d07b2602a49bdff6393c5962f35bc037ad..0dcfeb503d418be8cb3aa670ecb337f335b840ad 100644 (file)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -128,6 +128,43 @@
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
         margin-left: ($i / 12) * 100%
+  +touch
+    &.is-narrow-touch
+      flex: none
+    &.is-full-touch
+      flex: none
+      width: 100%
+    &.is-three-quarters-touch
+      flex: none
+      width: 75%
+    &.is-two-thirds-touch
+      flex: none
+      width: 66.6666%
+    &.is-half-touch
+      flex: none
+      width: 50%
+    &.is-one-third-touch
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-touch
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-touch
+      margin-left: 75%
+    &.is-offset-two-thirds-touch
+      margin-left: 66.6666%
+    &.is-offset-half-touch
+      margin-left: 50%
+    &.is-offset-one-third-touch
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-touch
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-touch
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-touch
+        margin-left: ($i / 12) * 100%
   +desktop
     &.is-narrow-desktop
       flex: none