Fix #1190

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ece22023d18f4645611180319f4ddefb81eb9f4..f10af85a43d416f2299c58533a9bdde026d06632 100644 (file)
--- 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 56999e15f3f632ae09a53c7cf9ef06e465b47fbf..4b5c7b87de4f8a6e5f2dfc9b20d0bce82fdf9ddb 100644 (file)
--- 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 60612ef53c760a4f27ec2b60e567fb79f0e3f93f..3aae6e11c15d62e3fcfe9b2813d22ef499b3135b 100644 (file)
--- 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 7ec04222845036be001609f04ec35092fa78df99..968b7cc7a0b0e38a1d20fc78b74fb869b433e6ee 100644 (file)
--- 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 e1378fc3841ae9fff3aeb41edb8635df6fadac8b..56a9e707e96b0df4d216d8482c122803c04d2ba5 100644 (file)
--- 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 965208e4866044fc581e6d7fc02767a5f9269bbe..90aeee82a405abf25544d53e8c093197bcd62fb1 100644 (file)
--- 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 9e7b9726ffb08bf04797b50894e366c2200d4820..9aa39c214c38e8b1eabf0670bd13c587e0c3d5f3 100644 (file)
--- 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