Fix #3775, Fix #3829

2026-03-15 02:04:29 -07:00 · 2024-07-06 15:42:36 +01:00
parent fc7db1b204
commit 2ed62be159
32 changed files with 7431 additions and 14068 deletions
--- a/docs/documentation/columns/gap.html
+++ b/docs/documentation/columns/gap.html
@@ -35,6 +35,14 @@ breadcrumb:
  <div class="column">No gap</div>
 </div>
 {% endcapture %}
+{% capture columns_variable_gap %}
+<div class="columns is-8">
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+</div>
+{% endcapture %}
 {% capture columns_gapless_multiline %}
 <div class="columns is-gapless is-multiline is-mobile">
  <div class="column is-one-quarter">is-one-quarter</div>
@@ -49,9 +57,7 @@ breadcrumb:
 </div>
 {% endcapture %}
 {% capture columns_variable_responsive_gaps %}
-<div
-  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
->
+<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
@@ -155,28 +161,20 @@ breadcrumb:
    <li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
    <li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
  </ul>
-  <p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
+</div>
+
+<div class="bd-highlight-full">
+  {% highlight html -%}
+  {{- columns_variable_gap -}}
+  {%- endhighlight %}
 </div>

 {% include docs/content/klmn.html %}

-<div class="message is-warning">
-  <div class="message-body">
-    <p>
-      This feature is only available in browsers that support
-      <a
-        href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
-        >CSS Variables</a
-      >.
-    </p>
-  </div>
-</div>
-
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% if vernum >= 72 %}
  {%
-    include docs/elements/anchor.html name="Breakpoint
-    based column gaps"
+    include docs/elements/anchor.html name="Breakpoint based column gaps"
  %}

  <div class="content">
@@ -184,19 +182,17 @@ breadcrumb:

    <p>
      For example, here's how it looks with the following modifiers:
-      <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
+      <code>is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
    </p>
  </div>

  <div class="bd-highlight-full">
-    {% highlight html -%}
+    {%- highlight html -%}
    {{- columns_variable_responsive_gaps -}}
-    {%- endhighlight %}
+    {%- endhighlight -%}
  </div>

-  <div
-    class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
-  >
+  <div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
    <div class="column">
      <p class="bd-notification is-primary">Column</p>
    </div>
--- a/docs/documentation/grid/grid-cells.html
+++ b/docs/documentation/grid/grid-cells.html
@@ -90,7 +90,7 @@ Each Bulma grid is comprised of several **cells**. You can adjust the width and
 {% endcapture %}

 {% capture markdown %}
-Change which column a cell ends at, counting from the end.
+Change which column a cell starts at.
 {% endcapture %}

 {% include markdown.html content=markdown %}
@@ -130,7 +130,7 @@ Change which column a cell ends at, counting from the end.
 {% endcapture %}

 {% capture markdown %}
-Change which column a cell starts at.
+Change which column a cell ends at, counting from the end.
 {% endcapture %}

 {% include markdown.html content=markdown %}
@@ -212,7 +212,7 @@ Change how many columns a cell spans.
 {% endcapture %}

 {% capture markdown %}
-Change which row a cell ends at, counting from the end.
+Change which row a cell starts at.
 {% endcapture %}

 {% include markdown.html content=markdown %}
@@ -252,7 +252,7 @@ Change which row a cell ends at, counting from the end.
 {% endcapture %}

 {% capture markdown %}
-Change which row a cell starts at.
+Change which row a cell ends at, counting from the end.
 {% endcapture %}

 {% include markdown.html content=markdown %}
--- a/docs/documentation/grid/playground.html
+++ b/docs/documentation/grid/playground.html
@@ -22,7 +22,7 @@ breadcrumb:
    </span>
    <button class="js-modifier-property dn" data-property="is-col-min"></button>
    <button class="button js-modifier-value is-link">Default</button>
-    {% for i in (1..12) %}
+    {% for i in (1..32) %}
      <button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
    {% endfor %}
  </div>
@@ -110,4 +110,4 @@ breadcrumb:

 {{ fixed_grid_playground }}

-<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>
+<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>
--- a/docs/documentation/grid/smart-grid.html
+++ b/docs/documentation/grid/smart-grid.html
@@ -43,7 +43,7 @@ By default, the Smart Grid has:
 {% include docs/elements/anchor.html name="Smart Grid modifiers" %}

 {% capture markdown %}
-You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `12`:
+You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `32`:
 {% endcapture %}

 {% include markdown.html content=markdown %}
@@ -56,7 +56,7 @@ You can change the minimum column width by increments of `1.5rem`, by adding the
    </tr>
  </thead>
  <tbody>
-    {% for i in (1..12) %}
+    {% for i in (1..32) %}
      <tr>
        <td><code>is-col-min-{{ i }}</code></td>
        <td><code>{{ i | times: 1.5 }}rem</code></td>
@@ -83,9 +83,9 @@ You can also change the `gap`, `column-gap` and/or `row-gap` by increments of `0
  <tbody>
    {% for i in (0..8) %}
      <tr>
-        <td><code>gap-{{ i }}</code></td>
-        <td><code>column-gap-{{ i }}</code></td>
-        <td><code>row-gap-{{ i }}</code></td>
+        <td><code>is-gap-{{ i }}</code></td>
+        <td><code>is-column-gap-{{ i }}</code></td>
+        <td><code>is-row-gap-{{ i }}</code></td>
        <td><code>{{ i | times: 0.5 }}rem</code></td>
      </tr>
    {% endfor %}
--- a/docs/documentation/helpers/color-helpers.html
+++ b/docs/documentation/helpers/color-helpers.html
@@ -231,49 +231,59 @@ breadcrumb:
  <thead>
    <tr>
      <th>Class</th>
-      <th>Background color</th>
+      <th colspan="2">Background color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-background-white</code></td>
      <td>{% include docs/color/white.html %}</td>
+      <td class="has-background-white" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-black</code></td>
      <td>{% include docs/color/black.html %}</td>
+      <td class="has-background-black" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-light</code></td>
      <td>{% include docs/color/white-ter.html %}</td>
+      <td class="has-background-light" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-dark</code></td>
      <td>{% include docs/color/grey-darker.html %}</td>
+      <td class="has-background-dark" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-primary</code></td>
      <td>{% include docs/color/turquoise.html %}</td>
+      <td class="has-background-primary" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-link</code></td>
      <td>{% include docs/color/blue.html %}</td>
+      <td class="has-background-link" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-info</code></td>
      <td>{% include docs/color/cyan.html %}</td>
+      <td class="has-background-info" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-success</code></td>
      <td>{% include docs/color/green.html %}</td>
+      <td class="has-background-success" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-warning</code></td>
      <td>{% include docs/color/yellow.html %}</td>
+      <td class="has-background-warning" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-danger</code></td>
      <td>{% include docs/color/red.html %}</td>
+      <td class="has-background-danger" style="width: 3rem;"></td>
    </tr>
  </tbody>
 </table>
@@ -282,45 +292,54 @@ breadcrumb:
  <thead>
    <tr>
      <th>Class</th>
-      <th>Background shade</th>
+      <th colspan="2">Background shade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-background-black-bis</code></td>
      <td>{% include docs/color/black-bis.html %}</td>
+      <td class="has-background-black-bis" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-black-ter</code></td>
      <td>{% include docs/color/black-ter.html %}</td>
+      <td class="has-background-black-ter" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-grey-darker</code></td>
      <td>{% include docs/color/grey-darker.html %}</td>
+      <td class="has-background-grey-darker" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-grey-dark</code></td>
      <td>{% include docs/color/grey-dark.html %}</td>
+      <td class="has-background-grey-dark" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-grey</code></td>
      <td>{% include docs/color/grey.html %}</td>
+      <td class="has-background-grey" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-grey-light</code></td>
      <td>{% include docs/color/grey-light.html %}</td>
+      <td class="has-background-grey-light" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-grey-lighter</code></td>
      <td>{% include docs/color/grey-lighter.html %}</td>
+      <td class="has-background-grey-lighter" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-white-ter</code></td>
      <td>{% include docs/color/white-ter.html %}</td>
+      <td class="has-background-white-ter" style="width: 3rem;"></td>
    </tr>
    <tr>
      <td><code>has-background-white-bis</code></td>
      <td>{% include docs/color/white-bis.html %}</td>
+      <td class="has-background-white-bis" style="width: 3rem;"></td>
    </tr>
  </tbody>
 </table>
--- a/docs/documentation/helpers/palette-helpers.html
+++ b/docs/documentation/helpers/palette-helpers.html
@@ -36,10 +36,8 @@ breadcrumb:
    <tr>
      <th>Class</th>
      <th>Code</th>
-      <th>Example</th>
-      <th>Swatch</th>
-      <th>Invert</th>
-      <th>Swatch</th>
+      <th colspan="2">Example</th>
+      <th colspan="2">Invert</th>
    </tr>
  </thead>
  <tbody>
@@ -86,4 +84,4 @@ Hello Bulma
      </tr>
    {% endfor %}
  </tbody>
-</table>
+</table>