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

@@ -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>
+        <td >
-          <code>{{ variable.name }}</code>
+          <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,13 +464,14 @@ $column-gap: 0.75rem !default
     &.is-desktop
       display: flex
 
-.columns.is-variable
+@if $variable-columns
-  --columnGap: 0.75rem
+  .columns.is-variable
-  margin-left: calc(-1 * var(--columnGap))
+    --columnGap: 0.75rem
-  margin-right: calc(-1 * var(--columnGap))
+    margin-left: calc(-1 * var(--columnGap))
-  .column
+    margin-right: calc(-1 * var(--columnGap))
-    padding-left: var(--columnGap)
+    .column
-    padding-right: var(--columnGap)
+      padding-left: var(--columnGap)
-  @for $i from 0 through 8
+      padding-right: var(--columnGap)
-    &.is-#{$i}
+    @for $i from 0 through 8
-      --columnGap: #{$i * 0.25rem}
+      &.is-#{$i}
+        --columnGap: #{$i * 0.25rem}

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