Fix #1235 , add one-fifth column (#1247)

* Update columns.sass

add one-fifth column

* add two-fifths three-fifths and four-fifths

* Update columns.html

update doc / columns

* Update CHANGELOG.md

update changes

* Support for five column grid

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e8b5960972a7c47fa4133a5eb1a25d9a9f53a27..4eb4574414aa444ae5c0126699411fb2242b5c28 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@
 
 * #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
 * #1254 `.dropdown` now supports `.is-up` modifier
+* #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
 
 ### Improvements
 

diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
index 179e4d546534360ee8063cd0499f17bbffe87a71..4757ddd032701065a3e14781abd24b2d0f126be6 100644 (file)
--- a/docs/documentation/grid/columns.html
+++ b/docs/documentation/grid/columns.html
@@ -25,6 +25,17 @@ doc-subtab: columns
 {% endcapture %}
 
 {% capture columns_sizes %}
+<div class="columns">
+  <div class="column is-four-fifths">
+    <p class="bd-notification is-info">
+      <code class="html">is-four-fifths</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">Auto</p>
+  </div>
+</div>
+
 <div class="columns">
   <div class="column is-three-quarters">
     <p class="bd-notification is-info">
@@ -91,6 +102,23 @@ doc-subtab: columns
     <p class="bd-notification is-success">Auto</p>
   </div>
 </div>
+
+<div class="columns">
+  <div class="column is-one-fifth">
+    <p class="bd-notification is-info">
+      <code class="html">is-one-fifth</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success">Auto</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">Auto</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-danger">Auto</p>
+  </div>
+</div>
 {% endcapture %}
 
 {% capture columns_offset %}
@@ -972,6 +1000,15 @@ doc-subtab: columns
       <div class="column is-one-quarter">
         <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
       </div>
+      <div class="column is-two-fifths">
+        <p class="bd-notification is-warning"><code>is-two-fifths</code></p>
+      </div>
+      <div class="column is-one-fifth">
+        <p class="bd-notification is-success"><code>is-one-fifth</code></p>
+      </div>
+      <div class="column is-two-fifths">
+        <p class="bd-notification is-danger"><code>is-two-fifths</code></p>
+      </div>
       <div class="column is-one-quarter">
         <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
       </div>

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 0011f5fccbed9fc447a0110aff8191e142bde810..2365d9e2e8c642dd3c4cc6d40aa09e0b3dc341c1 100644 (file)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -26,6 +26,18 @@ $column-gap: 0.75rem !default
   .columns.is-mobile > &.is-one-quarter
     flex: none
     width: 25%
+  .columns.is-mobile > &.is-one-fifth
+    flex: none
+    width: 20%
+  .columns.is-mobile > &.is-two-fifths
+    flex: none
+    width: 40%
+  .columns.is-mobile > &.is-three-fifths
+    flex: none
+    width: 60%
+  .columns.is-mobile > &.is-four-fifths
+    flex: none
+    width: 80%
   .columns.is-mobile > &.is-offset-three-quarters
     margin-left: 75%
   .columns.is-mobile > &.is-offset-two-thirds
@@ -36,6 +48,14 @@ $column-gap: 0.75rem !default
     margin-left: 33.3333%
   .columns.is-mobile > &.is-offset-one-quarter
     margin-left: 25%
+  .columns.is-mobile > &.is-offset-one-fifth
+    margin-left: 20%
+  .columns.is-mobile > &.is-offset-two-fifths
+    margin-left: 40%
+  .columns.is-mobile > &.is-offset-three-fifths
+    margin-left: 60%
+  .columns.is-mobile > &.is-offset-four-fifths
+    margin-left: 80%
   @for $i from 1 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
@@ -63,6 +83,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-mobile
       flex: none
       width: 25%
+    &.is-one-fifth-mobile
+      flex: none
+      width: 20%
+    &.is-two-fifths-mobile
+      flex: none
+      width: 40%
+    &.is-three-fifths-mobile
+      flex: none
+      width: 60%
+    &.is-four-fifths-mobile
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-mobile
       margin-left: 75%
     &.is-offset-two-thirds-mobile
@@ -73,6 +105,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-mobile
       margin-left: 25%
+    &.is-offset-one-fifth-mobile
+      margin-left: 20%
+    &.is-offset-two-fifths-mobile
+      margin-left: 40%
+    &.is-offset-three-fifths-mobile
+      margin-left: 60%
+    &.is-offset-four-fifths-mobile
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-mobile
         flex: none
@@ -107,6 +147,22 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-tablet
       flex: none
       width: 25%
+    &.is-one-fifth,
+    &.is-one-fifth-tablet
+        flex: none
+        width: 20%
+    &.is-two-fifths,
+    &.is-two-fifths-tablet
+      flex: none
+      width: 40%
+    &.is-three-fifths,
+    &.is-three-fifths-tablet
+      flex: none
+      width: 60%
+    &.is-four-fifths,
+    &.is-four-fifths-tablet
+      flex: none
+      width: 80%
     &.is-offset-three-quarters,
     &.is-offset-three-quarters-tablet
       margin-left: 75%
@@ -122,6 +178,18 @@ $column-gap: 0.75rem !default
     &.is-offset-one-quarter,
     &.is-offset-one-quarter-tablet
       margin-left: 25%
+    &.is-offset-one-fifth,
+    &.is-offset-one-fifth-tablet
+      margin-left: 20%
+    &.is-offset-two-fifths,
+    &.is-offset-two-fifths-tablet
+      margin-left: 40%
+    &.is-offset-three-fifths,
+    &.is-offset-three-fifths-tablet
+      margin-left: 60%
+    &.is-offset-four-fifths,
+    &.is-offset-four-fifths-tablet
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i},
       &.is-#{$i}-tablet
@@ -151,6 +219,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-touch
       flex: none
       width: 25%
+    &.is-one-fifth-touch
+      flex: none
+      width: 20%
+    &.is-two-fifths-touch
+      flex: none
+      width: 40%
+    &.is-three-fifths-touch
+      flex: none
+      width: 60%
+    &.is-four-fifths-touch
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-touch
       margin-left: 75%
     &.is-offset-two-thirds-touch
@@ -161,6 +241,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-touch
       margin-left: 25%
+    &.is-offset-one-fifth-touch
+      margin-left: 20%
+    &.is-offset-two-fifths-touch
+      margin-left: 40%
+    &.is-offset-three-fifths-touch
+      margin-left: 60%
+    &.is-offset-four-fifths-touch
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-touch
         flex: none
@@ -188,6 +276,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-desktop
       flex: none
       width: 25%
+    &.is-one-fifth-desktop
+      flex: none
+      width: 20%
+    &.is-two-fifths-desktop
+      flex: none
+      width: 40%
+    &.is-three-fifths-desktop
+      flex: none
+      width: 60%
+    &.is-four-fifths-desktop
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-desktop
       margin-left: 75%
     &.is-offset-two-thirds-desktop
@@ -198,6 +298,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-desktop
       margin-left: 25%
+    &.is-offset-one-fifth-desktop
+      margin-left: 20%
+    &.is-offset-two-fifths-desktop
+      margin-left: 40%
+    &.is-offset-three-fifths-desktop
+      margin-left: 60%
+    &.is-offset-four-fifths-desktop
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-desktop
         flex: none
@@ -225,6 +333,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-widescreen
       flex: none
       width: 25%
+    &.is-one-fifth-widescreen
+      flex: none
+      width: 20%
+    &.is-two-fifths-widescreen
+      flex: none
+      width: 40%
+    &.is-three-fifths-widescreen
+      flex: none
+      width: 60%
+    &.is-four-fifths-widescreen
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-widescreen
       margin-left: 75%
     &.is-offset-two-thirds-widescreen
@@ -235,6 +355,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-widescreen
       margin-left: 25%
+    &.is-offset-one-fifth-widescreen
+      margin-left: 20%
+    &.is-offset-two-fifths-widescreen
+      margin-left: 40%
+    &.is-offset-three-fifths-widescreen
+      margin-left: 60%
+    &.is-offset-four-fifths-widescreen
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-widescreen
         flex: none
@@ -262,6 +390,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-fullhd
       flex: none
       width: 25%
+    &.is-one-fifth-fullhd
+      flex: none
+      width: 20%
+    &.is-two-fifths-fullhd
+      flex: none
+      width: 40%
+    &.is-three-fifths-fullhd
+      flex: none
+      width: 60%
+    &.is-four-fifths-fullhd
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-fullhd
       margin-left: 75%
     &.is-offset-two-thirds-fullhd
@@ -272,6 +412,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-fullhd
       margin-left: 25%
+    &.is-offset-one-fifth-fullhd
+      margin-left: 20%
+    &.is-offset-two-fifths-fullhd
+      margin-left: 40%
+    &.is-offset-three-fifths-fullhd
+      margin-left: 60%
+    &.is-offset-four-fifths-fullhd
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-fullhd
         flex: none