Add fullheight Section, Add more color helpers, Add tablet Container, Add list of checkboxes and radios

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
 - Remove need for `is-variable` modifier for Column gaps
+- You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively
+- Add `is-max-tablet` modifier to the Container element
+- Add `currentColor` and `inherit` as possible values for the color and background helpers
+- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
 
 ### Bug fixes
 

css/bulma.css

@@ -5689,8 +5689,12 @@ button.tag:active,
   cursor: not-allowed;
 }
 
-.radio + .radio {
+.checkboxes,
-  margin-inline-start: 0.5em;
+.radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -13094,28 +13098,31 @@ label.panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.container.is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .container.is-widescreen:not(.is-max-desktop) {
+  .container.is-widescreen:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container.is-fullhd:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .container:not(.is-max-desktop) {
+  .container:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .container:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -13816,6 +13823,9 @@ label.panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.section.is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);
@@ -19555,6 +19565,22 @@ has-background-danger.is-hoverable:active {
   background-color: hsl(221, 14%, 98%) !important;
 }
 
+.has-text-current {
+  color: currentColor !important;
+}
+
+.has-text-inherit {
+  color: inherit !important;
+}
+
+.has-background-current {
+  background-color: currentColor !important;
+}
+
+.has-background-inherit {
+  background-color: inherit !important;
+}
+
 .is-flex-direction-row {
   flex-direction: row !important;
 }

css/versions/bulma-no-dark-mode.css

@@ -2886,8 +2886,12 @@ button.tag:active,
   cursor: not-allowed;
 }
 
-.radio + .radio {
+.checkboxes,
-  margin-inline-start: 0.5em;
+.radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -10291,28 +10295,31 @@ label.panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.container.is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .container.is-widescreen:not(.is-max-desktop) {
+  .container.is-widescreen:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container.is-fullhd:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .container:not(.is-max-desktop) {
+  .container:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .container:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -11013,6 +11020,9 @@ label.panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.section.is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);
@@ -16752,6 +16762,22 @@ has-background-danger.is-hoverable:active {
   background-color: hsl(221, 14%, 98%) !important;
 }
 
+.has-text-current {
+  color: currentColor !important;
+}
+
+.has-text-inherit {
+  color: inherit !important;
+}
+
+.has-background-current {
+  background-color: currentColor !important;
+}
+
+.has-background-inherit {
+  background-color: inherit !important;
+}
+
 .is-flex-direction-row {
   flex-direction: row !important;
 }

css/versions/bulma-no-helpers-prefixed.css

@@ -2886,8 +2886,12 @@ button.bulma-tag:active,
   cursor: not-allowed;
 }
 
-.bulma-radio + .bulma-radio {
+.bulma-checkboxes,
-  margin-inline-start: 0.5em;
+.bulma-radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -10291,28 +10295,31 @@ label.bulma-panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.bulma-container.bulma-is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .bulma-container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-desktop) {
+  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-container:not(.bulma-is-max-desktop) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-container:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -11013,6 +11020,9 @@ label.bulma-panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.bulma-section.bulma-is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);

css/versions/bulma-no-helpers.css

@@ -2886,8 +2886,12 @@ button.tag:active,
   cursor: not-allowed;
 }
 
-.radio + .radio {
+.checkboxes,
-  margin-inline-start: 0.5em;
+.radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -10291,28 +10295,31 @@ label.panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.container.is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .container.is-widescreen:not(.is-max-desktop) {
+  .container.is-widescreen:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container.is-fullhd:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .container:not(.is-max-desktop) {
+  .container:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .container:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -11013,6 +11020,9 @@ label.panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.section.is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);

css/versions/bulma-prefixed.min.css

@@ -5689,8 +5689,12 @@ button.bulma-tag:active,
   cursor: not-allowed;
 }
 
-.bulma-radio + .bulma-radio {
+.bulma-checkboxes,
-  margin-inline-start: 0.5em;
+.bulma-radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -13094,28 +13098,31 @@ label.bulma-panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.bulma-container.bulma-is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .bulma-container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-desktop) {
+  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-container:not(.bulma-is-max-desktop) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-container:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -13816,6 +13823,9 @@ label.bulma-panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.bulma-section.bulma-is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);
@@ -19555,6 +19565,22 @@ has-background-danger.is-hoverable:active {
   background-color: hsl(221, 14%, 98%) !important;
 }
 
+.has-text-current {
+  color: currentColor !important;
+}
+
+.has-text-inherit {
+  color: inherit !important;
+}
+
+.has-background-current {
+  background-color: currentColor !important;
+}
+
+.has-background-inherit {
+  background-color: inherit !important;
+}
+
 .is-flex-direction-row {
   flex-direction: row !important;
 }

docs/_includes/docs/color/current.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: currentColor"></span>
+<code>currentColor</code>

docs/_includes/docs/color/inherit.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: inherit"></span>
+<code>inherit</code>

docs/assets/css/website.css

@@ -9618,8 +9618,12 @@ button.tag:active,
   cursor: not-allowed;
 }
 
-.radio + .radio {
+.checkboxes,
-  margin-inline-start: 0.5em;
+.radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -17583,28 +17587,31 @@ label.panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.container.is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .container.is-widescreen:not(.is-max-desktop) {
+  .container.is-widescreen:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container.is-fullhd:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .container:not(.is-max-desktop) {
+  .container:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .container:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -18675,6 +18682,9 @@ label.panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.section.is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);
@@ -29404,6 +29414,22 @@ has-background-moon.is-hoverable:active {
   background-color: hsl(221, 14%, 98%) !important;
 }
 
+.has-text-current {
+  color: currentColor !important;
+}
+
+.has-text-inherit {
+  color: inherit !important;
+}
+
+.has-background-current {
+  background-color: currentColor !important;
+}
+
+.has-background-inherit {
+  background-color: inherit !important;
+}
+
 .is-flex-direction-row {
   flex-direction: row !important;
 }

docs/documentation/form/checkbox.html

@@ -14,59 +14,106 @@ meta:
   sizes: false
   variables: false
 ---
+
 {% capture checkbox_example %}
 <label class="checkbox">
   <input type="checkbox" />
   Remember me
 </label>
-{% endcapture %}
+{% endcapture %} {% capture checkbox_link_example %}
-{% capture checkbox_link_example %}
 <label class="checkbox">
   <input type="checkbox" />
   I agree to the <a href="#">terms and conditions</a>
 </label>
-{% endcapture %}
+{% endcapture %} {% capture checkbox_disabled_example %}
-{% capture checkbox_disabled_example %}
 <label class="checkbox" disabled>
   <input type="checkbox" disabled />
   Save my preferences
 </label>
+{% endcapture %} {% capture list_of_checkboxes %}
+<div class="checkboxes">
+  <label class="checkbox">
+    <input type="checkbox" />
+    Monday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Tuesday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Wednesday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Thursday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Friday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Saturday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Sunday
+  </label>
+</div>
 {% endcapture %}
 
 <div class="content">
   <p>
-    The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML
+    The <code>checkbox</code> class is a simple wrapper around the
-    element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+    <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally
+    not styled, to preserve cross-browser compatibility and the user experience.
   </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- checkbox_example -}} {%- endhighlight %}
-    {{- checkbox_example -}}
-    {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
-  <p>You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.</p>
+  <p>
+    You can add <strong>links</strong> to your checkbox, or even
+    <strong>disable</strong> it.
+  </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_link_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- checkbox_link_example -}} {%- endhighlight %}
-    {{- checkbox_link_example -}}
-    {%- endhighlight %}
   </div>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_disabled_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- checkbox_disabled_example -}} {%- endhighlight %}
-    {{- checkbox_disabled_example -}}
-    {%- endhighlight %}
   </div>
 </div>
+
+{% include docs/elements/anchor.html name="List of Checkboxes" %}
+
+<div class="content">
+  <p>
+    If you want to list several checkbox elements, wrap them in a
+    <code>&lt;div class="checkboxes"&gt;</code> element:
+  </p>
+</div>
+
+<div class="block">{{- list_of_checkboxes -}}</div>
+
+{% highlight html -%} {{- list_of_checkboxes -}} {%- endhighlight %}

docs/documentation/form/radio.html

@@ -14,6 +14,7 @@ meta:
   sizes: false
   variables: false
 ---
+
 {% capture radio_example %}
 <div class="control">
   <label class="radio">
@@ -25,8 +26,7 @@ meta:
     No
   </label>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture radio_default_example %}
-{% capture radio_default_example %}
 <div class="control">
   <label class="radio">
     <input type="radio" name="foobar" />
@@ -37,8 +37,7 @@ meta:
     Bar
   </label>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture radio_disabled_example %}
-{% capture radio_disabled_example %}
 <div class="control">
   <label class="radio">
     <input type="radio" name="rsvp" />
@@ -53,30 +52,46 @@ meta:
     Maybe
   </label>
 </div>
+{% endcapture %} {% capture list_of_radios %}
+<div class="radios">
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Going
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Not going
+  </label>
+  <label class="radio" disabled>
+    <input type="radio" name="rsvp" disabled />
+    Maybe
+  </label>
+</div>
 {% endcapture %}
 
 <div class="content">
   <p>
-    The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements.
+    The <code>radio</code> class is a simple wrapper around the
-    It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+    <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally
+    not styled, to preserve cross-browser compatibility and the user experience.
   </p>
   <p>
-    Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
+    Make sure the linked radio buttons have the <strong>same value</strong> for
+    their <code>name</code> HTML attribute.
   </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ radio_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- radio_example -}} {%- endhighlight %}
-    {{- radio_example -}}
-    {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
   <p>
-    You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the
+    You can check a radio button by <strong>default</strong> by adding the
+    <code>checked</code> HTML attribute to the
     <code>&lt;input&gt;</code> element.
   </p>
 </div>
@@ -84,15 +99,14 @@ meta:
 <div class="columns">
   <div class="column is-half">{{ radio_default_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- radio_default_example -}} {%- endhighlight %}
-    {{- radio_default_example -}}
-    {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
   <p>
-    You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the
+    You can <strong>disable</strong> a radio button by adding the
+    <code>disabled</code> HTML attribute to both the
     <code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
   </p>
 </div>
@@ -100,8 +114,19 @@ meta:
 <div class="columns">
   <div class="column is-half">{{ radio_disabled_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
+    {% highlight html -%} {{- radio_disabled_example -}} {%- endhighlight %}
-    {{- radio_disabled_example -}}
-    {%- endhighlight %}
   </div>
 </div>
+
+{% include docs/elements/anchor.html name="List of Radio Buttons" %}
+
+<div class="content">
+  <p>
+    If you want to list several radio buttons, wrap them in a
+    <code>&lt;div class="radios"&gt;</code> element:
+  </p>
+</div>
+
+<div class="block">{{- list_of_radios -}}</div>
+
+{% highlight html -%} {{- list_of_radios -}} {%- endhighlight %}

docs/documentation/helpers/color-helpers.html

@@ -217,6 +217,33 @@ breadcrumb:
   </tbody>
 </table>
 
+<p class="block">
+  You can also <strong>inherit</strong> the color, or use the
+  <strong>current</strong> one:
+</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Value</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>has-text-current</code></td>
+      <td>{% include docs/color/current.html %}</td>
+      <td class="has-text-current">Hello Bulma</td>
+    </tr>
+    <tr>
+      <td><code>has-text-inherit</code></td>
+      <td>{% include docs/color/inherit.html %}</td>
+      <td class="has-text-inherit">Hello Bulma</td>
+    </tr>
+  </tbody>
+</table>
+
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% include docs/elements/anchor.html name="Background color" %}
 
@@ -238,52 +265,52 @@ breadcrumb:
     <tr>
       <td><code>has-background-white</code></td>
       <td>{% include docs/color/white.html %}</td>
-      <td class="has-background-white" style="width: 3rem;"></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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <td class="has-background-danger" style="width: 3rem"></td>
     </tr>
   </tbody>
 </table>
@@ -299,47 +326,47 @@ breadcrumb:
     <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <td class="has-background-white-bis" style="width: 3rem"></td>
     </tr>
   </tbody>
 </table>
@@ -421,3 +448,30 @@ breadcrumb:
     </tr>
   </tbody>
 </table>
+
+<p class="block">
+  You can also <strong>inherit</strong> the background color, or use the
+  <strong>current color</strong> as background one:
+</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Value</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>has-background-current</code></td>
+      <td>{% include docs/color/current.html %}</td>
+      <td class="has-background-current">Hello Bulma</td>
+    </tr>
+    <tr>
+      <td><code>has-background-inherit</code></td>
+      <td>{% include docs/color/inherit.html %}</td>
+      <td class="has-background-inherit">Hello Bulma</td>
+    </tr>
+  </tbody>
+</table>

docs/documentation/layout/container.html

@@ -16,59 +16,60 @@ meta:
   sizes: true
   variables: true
 ---
+
 {% capture container_example %}
 <div class="container">
   <div class="notification is-primary">
     This container is <strong>centered</strong> on desktop and larger viewports.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture container_fluid_example %}
-{% capture container_fluid_example %}
 <div class="container is-fluid">
   <div class="notification is-primary">
     This container is <strong>fluid</strong>: it will have a 32px gap on either
     side, on any viewport size.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture container_widescreen_example %}
-{% capture container_widescreen_example %}
 <div class="container is-widescreen">
   <div class="notification is-primary">
     This container is <strong>fullwidth</strong> <em>until</em> the
     <code>$widescreen</code> breakpoint.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture container_fullhd_example %}
-{% capture container_fullhd_example %}
 <div class="container is-fullhd">
   <div class="notification is-primary">
     This container is <strong>fullwidth</strong> <em>until</em> the
     <code>$fullhd</code> breakpoint.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture container_max_tablet_example %}
-{% capture container_max_desktop_example %}
+<div class="container is-max-tablet">
+  <div class="notification is-primary">
+    This container has a <code>max-width</code> of
+    <code>$tablet - $container-offset</code>.
+  </div>
+</div>
+{% endcapture %} {% capture container_max_desktop_example %}
 <div class="container is-max-desktop">
   <div class="notification is-primary">
     This container has a <code>max-width</code> of
     <code>$desktop - $container-offset</code> on widescreen and fullhd.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% capture container_max_widescreen_example %}
-{% capture container_max_widescreen_example %}
 <div class="container is-max-widescreen">
   <div class="notification is-primary">
     This container has a <code>max-width</code> of
     <code>$widescreen - $container-offset</code> on fullhd.
   </div>
 </div>
-{% endcapture %}
+{% endcapture %} {% assign bp_tablet = site.data.breakpoints.tablet %} {% assign
-{% assign bp_tablet = site.data.breakpoints.tablet %}
+bp_desktop = site.data.breakpoints.desktop %} {% assign bp_widescreen =
-{% assign bp_desktop = site.data.breakpoints.desktop %}
+site.data.breakpoints.widescreen %} {% assign bp_fullhd =
-{% assign bp_widescreen = site.data.breakpoints.widescreen %}
+site.data.breakpoints.fullhd %} {% assign container_offset = 64 %} {% capture
-{% assign bp_fullhd = site.data.breakpoints.fullhd %}
+thead %}
-{% assign container_offset = 64 %}
-{% capture thead %}
 <thead>
   <tr>
     <th class="bd-is-empty"></th>
@@ -96,8 +97,10 @@ meta:
 
 <div class="content">
   <p>
-    The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger
+    The <code>container</code> is a simple utility element that allows you to
-    viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
+    <strong>center</strong> content on larger viewports. It can be used in any
+    context, but mostly as a <strong>direct child</strong> of one of the
+    following:
   </p>
   <ul>
     <li><code>navbar</code></li>
@@ -137,7 +140,9 @@ meta:
       </tr>
       <tr>
         <td><code>.container.is-widescreen</code></td>
-        <td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
+        <td colspan="2" class="has-text-grey-light has-background-white-ter">
+          Full width
+        </td>
         <td>
           <code>{{ bp_widescreen.from | minus: container_offset }}px</code>
         </td>
@@ -147,7 +152,9 @@ meta:
       </tr>
       <tr>
         <td><code>.container.is-fullhd</code></td>
-        <td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
+        <td colspan="3" class="has-text-grey-light has-background-white-ter">
+          Full width
+        </td>
         <td>
           <code>{{ bp_fullhd.from | minus: container_offset }}px</code>
         </td>
@@ -178,97 +185,114 @@ meta:
 
 <div class="content">
   <p>
-    By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will
+    By default, the <code>container</code> will only be activated from the
-    increase its <code>max-width</code> after reaching the <code>$widescreen</code> and
+    <code>$desktop</code> breakpoint. It will increase its
+    <code>max-width</code> after reaching the <code>$widescreen</code> and
     <code>$fullhd</code> breakpoints.
   </p>
   <p>
-    The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result of:
+    The container's <strong>width</strong> for each
-    <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code> 32px</code> but can
+    <strong>breakpoint</strong> is the result of:
-    be modified.
+    <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a
+    default value of <code> 32px</code> but can be modified.
   </p>
   <p>This is how the container will behave:</p>
   <ul>
-    <li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
+    <li>
-    <li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
+      on <code>$desktop</code> it will have a maximum width of
-    <li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
+      <strong>960px</strong>.
+    </li>
+    <li>
+      on <code>$widescreen</code> it will have a maximum width of
+      <strong>1152px</strong>.
+    </li>
+    <li>
+      on <code>$fullhd</code> it will have a maximum width of
+      <strong>1344px</strong>.
+    </li>
   </ul>
   <p>
-    The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are
+    The values <strong>960</strong>, <strong>1152</strong> and
-    divisible by both <strong>12</strong> and <strong>16</strong>.
+    <strong>1344</strong> have been chosen because they are divisible by both
+    <strong>12</strong> and <strong>16</strong>.
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_example }}</div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_example -}} {%- endhighlight %}
-{{- container_example -}}
-{%- endhighlight %}
 
 <!--  -->
 {% include docs/elements/anchor.html name="Widescreen or FullHD only" %}
 
 <div class="content">
   <p>
-    With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a
+    With the two modifiers <code>is-widescreen</code> and
-    <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
+    <code>is-fullhd</code>, you can have a <em>fullwidth</em> container
+    <strong>until</strong> those specific breakpoints.
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_widescreen_example -}} {%- endhighlight %}
-{{- container_widescreen_example -}}
-{%- endhighlight %}
 
 <div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_fullhd_example -}} {%- endhighlight %}
-{{- container_fullhd_example -}}
-{%- endhighlight %}
 
 <!--  -->
-{%
+{% include docs/elements/anchor.html name="Tablet, Desktop and Widescreen
-  include docs/elements/anchor.html name="Desktop and Widescreen maximum
+maximum widths" %}
-  widths"
-%}
 
 <div class="content">
   <p>
-    Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2
+    Sometimes, you might want a <strong>narrow</strong> container on larger
-    modifiers:
+    viewports. That's why Bulma provides 3 modifier classes:
   </p>
   <ul>
-    <li><code>.container.is-max-desktop</code> will behave like a desktop container</li>
+    <li>
-    <li><code>.container.is-max-widescreen</code> will behave like a widescreen container</li>
+      <code>.container.is-max-tablet</code> will behave like a tablet container
+    </li>
+    <li>
+      <code>.container.is-max-desktop</code> will behave like a desktop
+      container
+    </li>
+    <li>
+      <code>.container.is-max-widescreen</code> will behave like a widescreen
+      container
+    </li>
   </ul>
 </div>
 
+<div class="bd-example is-fullwidth">{{ container_max_tablet_example }}</div>
+
+{% highlight html -%} {{- container_max_tablet_example -}} {%- endhighlight %}
+
 <div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_max_desktop_example -}} {%- endhighlight %}
-{{- container_max_desktop_example -}}
-{%- endhighlight %}
 
 <div class="bd-example is-fullwidth">
   {{ container_max_widescreen_example }}
 </div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_max_widescreen_example -}} {%- endhighlight
-{{- container_max_widescreen_example -}}
+%}
-{%- endhighlight %}
 
 <!--  -->
 {% include docs/elements/anchor.html name="Absolute maximum width" %}
 
 <div class="content">
   <p>
-    If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of
+    If you want to change the maximum width of <strong>all</strong> containers,
-    the <code>$container-max-width</code> Sass variable.
+    you can do so by updating the values of the
+    <code>$container-max-width</code> Sass variable.
   </p>
   <p>
-    By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum
+    By default, the <code>$fullhd</code> breakpoint value is used to calculate
-    width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>,
+    the <strong>absolute</strong> maximum width of the <code>container</code>.
+    Simply change it to a smaller value like <code>$widescreen</code>,
     <code>$desktop</code>, or any value in <strong>pixels</strong>.
   </p>
 </div>
@@ -278,17 +302,14 @@ meta:
 
 <div class="content">
   <p>
-    If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the
+    If you don't want to have a maximum width but want to keep the 32px margin
+    on the left and right sides, add the
     <code>is-fluid</code> modifier:
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
 
-{% highlight html -%}
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {%
-{{- container_fluid_example -}}
-{%- endhighlight %}
-{%
 include docs/components/variables.html type='element'
-  data=site.data.variables.elements.container
+data=site.data.variables.elements.container %}
-%}

sass/form/checkbox-radio.scss

@@ -25,8 +25,12 @@
 
 .#{iv.$class-prefix}radio {
   @extend %checkbox-radio;
+}
 
-  & + .#{iv.$class-prefix}radio {
+.#{iv.$class-prefix}checkboxes,
-    margin-inline-start: 0.5em;
+.#{iv.$class-prefix}radios {
-  }
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }

sass/helpers/color.scss

@@ -326,3 +326,19 @@ $digits: (
     background-color: $shade !important;
   }
 }
+
+.#{iv.$helpers-has-prefix}text-current {
+  color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}text-inherit {
+  color: inherit !important;
+}
+
+.#{iv.$helpers-has-prefix}background-current {
+  background-color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}background-inherit {
+  background-color: inherit !important;
+}

sass/layout/container.scss

@@ -17,34 +17,42 @@ $container-max-width: iv.$fullhd !default;
     width: 100%;
   }
 
+  &.#{iv.$class-prefix}is-max-tablet {
+    max-width: iv.$tablet - $container-offset;
+  }
+
   @include mx.desktop {
     max-width: iv.$desktop - $container-offset;
   }
 
   @include mx.until-widescreen {
-    &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+    &.#{iv.$class-prefix}is-widescreen:not(
+        .#{iv.$class-prefix}is-max-tablet
+      ):not(.#{iv.$class-prefix}is-max-desktop) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.until-fullhd {
-    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
+    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-tablet):not(
-        .#{iv.$class-prefix}is-max-widescreen
+        .#{iv.$class-prefix}is-max-desktop
-      ) {
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.widescreen {
-    &:not(.#{iv.$class-prefix}is-max-desktop) {
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.fullhd {
-    &:not(.#{iv.$class-prefix}is-max-desktop):not(
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
-        .#{iv.$class-prefix}is-max-widescreen
+        .#{iv.$class-prefix}is-max-desktop
-      ) {
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }

sass/layout/section.scss

@@ -31,4 +31,8 @@ $section-padding-large: 18rem 6rem !default;
       padding: cv.getVar("section-padding-large");
     }
   }
+
+  &.#{iv.$class-prefix}is-fullheight {
+    min-height: 100vh;
+  }
 }