From: Paulo Tosi <tosi.paulo@gmail.com>
Date: Fri, 22 Dec 2017 01:20:59 +0000 (-0200)
Subject: Implementing a simple version of the native sass percentage function for the grid... 
X-Git-Tag: 0.7.0~23
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6da252df60d944e30d352b9753c0c46d771f17c9;p=thirdparty%2Fbulma.git

Implementing a simple version of the native sass percentage function for the grid system
---

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 90aeee82a..0b5d4de9d 100644
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -59,9 +59,9 @@ $column-gap: 0.75rem !default
   @for $i from 1 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
-      width: ($i / 12) * 100%
+      width: percentage($i / 12)
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: ($i / 12) * 100%
+      margin-left: percentage($i / 12)
   +mobile
     &.is-narrow-mobile
       flex: none
@@ -116,9 +116,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-mobile
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
@@ -194,10 +194,10 @@ $column-gap: 0.75rem !default
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +touch
     &.is-narrow-touch
       flex: none
@@ -252,9 +252,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-touch
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-touch
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -309,9 +309,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-desktop
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +widescreen
     &.is-narrow-widescreen
       flex: none
@@ -366,9 +366,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-widescreen
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +fullhd
     &.is-narrow-fullhd
       flex: none
@@ -423,9 +423,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-fullhd
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
 
 .columns
   margin-left: (-$column-gap)