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 %} - + {{ variables_link_text }} - + {% else %} - + {{ variables_link_text }} - + {% endif %} - + {% endcapture %} - + You can use {{ variables_link | strip }} to customize this {{ type }}. Simply set one or multiple of these variables before importing Bulma. Learn how. - + {% endif %} {% endcapture %} @@ -59,8 +59,8 @@ {% for variable_hash in variables %} {% assign variable = variable_hash[1] %} - - {{ variable.name }} + + {{ variable.name }} {{ variable.value }} 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 +
+
+

+ If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false. +

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