From 6176c2c9f515766a0df39db5e2a8da4207097cad Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 4 Dec 2017 21:03:01 +0000
Subject: [PATCH] Fix #1190

---
 CHANGELOG.md                                  |  1 +
 .../utilities/initial-variables.json          | 12 ++++-
 docs/_includes/variables.html                 | 28 +++++------
 docs/css/bulma-docs.css                       | 47 -------------------
 docs/documentation/columns/gap.html           |  8 ++++
 sass/grid/columns.sass                        | 21 +++++----
 sass/utilities/initial-variables.sass         |  4 ++
 7 files changed, 49 insertions(+), 72 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ece2202..f10af85a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 ### Bug fixes
 
 * #1456 Fix customize documentation
+* #1190 Add `$variable-columns` to disable `--columnGap`
 
 ## 0.6.2
 
diff --git a/docs/_data/variables/utilities/initial-variables.json b/docs/_data/variables/utilities/initial-variables.json
index 56999e15..4b5c7b87 100644
--- a/docs/_data/variables/utilities/initial-variables.json
+++ b/docs/_data/variables/utilities/initial-variables.json
@@ -221,10 +221,20 @@
       "name": "$radius-large",
       "value": "5px"
     },
+    "radius-rounded": {
+      "id": "radius-rounded",
+      "name": "$radius-rounded",
+      "value": "290486px"
+    },
     "speed": {
       "id": "speed",
       "name": "$speed",
       "value": "86ms"
+    },
+    "variable-columns": {
+      "id": "variable-columns",
+      "name": "$variable-columns",
+      "value": "true"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html
index 60612ef5..3aae6e11 100644
--- a/docs/_includes/variables.html
+++ b/docs/_includes/variables.html
@@ -9,29 +9,29 @@
   {% assign table_class = include.table_class | default: 'is-bordered' %}
 
   {% if include.custom_message %}
-  
+
     {{ include.custom_message }}
-  
+
   {% else %}
-  
+
     {% assign variables_link_text = "these variables" %}
-  
+
     {% capture variables_link %}
-    
+
       {% if data.file_url %}
-    
+
         <a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
-    
+
       {% else %}
-    
+
         {{ variables_link_text }}
-    
+
       {% endif %}
-    
+
     {% endcapture %}
-  
+
     You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  
+
   {% endif %}
 
 {% endcapture %}
@@ -59,8 +59,8 @@
     {% for variable_hash in variables %}
       {% assign variable = variable_hash[1] %}
       <tr>
-        <td>
-          <code>{{ variable.name }}</code>
+        <td >
+          <code style="white-space: nowrap;">{{ variable.name }}</code>
         </td>
         <td>
           <code>{{ variable.value }}</code>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 7ec04222..968b7cc7 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9597,53 +9597,6 @@ label.panel-block:hover {
   }
 }
 
-.columns.is-variable {
-  --columnGap: 0.75rem;
-  margin-left: calc(-1 * var(--columnGap));
-  margin-right: calc(-1 * var(--columnGap));
-}
-
-.columns.is-variable .column {
-  padding-left: var(--columnGap);
-  padding-right: var(--columnGap);
-}
-
-.columns.is-variable.is-0 {
-  --columnGap: 0rem;
-}
-
-.columns.is-variable.is-1 {
-  --columnGap: 0.25rem;
-}
-
-.columns.is-variable.is-2 {
-  --columnGap: 0.5rem;
-}
-
-.columns.is-variable.is-3 {
-  --columnGap: 0.75rem;
-}
-
-.columns.is-variable.is-4 {
-  --columnGap: 1rem;
-}
-
-.columns.is-variable.is-5 {
-  --columnGap: 1.25rem;
-}
-
-.columns.is-variable.is-6 {
-  --columnGap: 1.5rem;
-}
-
-.columns.is-variable.is-7 {
-  --columnGap: 1.75rem;
-}
-
-.columns.is-variable.is-8 {
-  --columnGap: 2rem;
-}
-
 .tile {
   -webkit-box-align: stretch;
       -ms-flex-align: stretch;
diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html
index e1378fc3..56a9e707 100644
--- a/docs/documentation/columns/gap.html
+++ b/docs/documentation/columns/gap.html
@@ -209,5 +209,13 @@ doc-subtab: gap
       </div>
     </div>
 
+    <div class="message is-info">
+      <div class="message-body">
+        <p>
+          If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
+        </p>
+      </div>
+    </div>
+
   </div>
 </section>
diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 965208e4..90aeee82 100644
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -464,13 +464,14 @@ $column-gap: 0.75rem !default
     &.is-desktop
       display: flex
 
-.columns.is-variable
-  --columnGap: 0.75rem
-  margin-left: calc(-1 * var(--columnGap))
-  margin-right: calc(-1 * var(--columnGap))
-  .column
-    padding-left: var(--columnGap)
-    padding-right: var(--columnGap)
-  @for $i from 0 through 8
-    &.is-#{$i}
-      --columnGap: #{$i * 0.25rem}
+@if $variable-columns
+  .columns.is-variable
+    --columnGap: 0.75rem
+    margin-left: calc(-1 * var(--columnGap))
+    margin-right: calc(-1 * var(--columnGap))
+    .column
+      padding-left: var(--columnGap)
+      padding-right: var(--columnGap)
+    @for $i from 0 through 8
+      &.is-#{$i}
+        --columnGap: #{$i * 0.25rem}
diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass
index 9e7b9726..9aa39c21 100644
--- a/sass/utilities/initial-variables.sass
+++ b/sass/utilities/initial-variables.sass
@@ -64,3 +64,7 @@ $radius: 3px !default
 $radius-large: 5px !default
 $radius-rounded: 290486px !default
 $speed: 86ms !default
+
+// Flags
+
+$variable-columns: false !default