Fix #1190

CHANGELOG.md

@@ -13,6 +13,7 @@
 ### Bug fixes
 
 * #1456 Fix customize documentation
+* #1190 Add `$variable-columns` to disable `--columnGap`
 
 ## 0.6.2
 

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"
     }
   }
 }

docs/_includes/variables.html

@@ -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>

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;

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>

sass/grid/columns.sass

@@ -464,7 +464,8 @@ $column-gap: 0.75rem !default
     &.is-desktop
       display: flex
 
-.columns.is-variable
+@if $variable-columns
+  .columns.is-variable
     --columnGap: 0.75rem
     margin-left: calc(-1 * var(--columnGap))
     margin-right: calc(-1 * var(--columnGap))

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