library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Naskalin 2017-10-18 13:49:33 +03:00 committed by Jeremy Thomas
parent 78fc506e51
commit 85d1a0c411
3 changed files with 186 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -28,6 +28,7 @@
* #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class * #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
* #1254 `.dropdown` now supports `.is-up` modifier * #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 ### Improvements

37
docs/documentation/grid/columns.html
View File

@ -25,6 +25,17 @@ doc-subtab: columns
{% endcapture %} {% endcapture %}
{% capture columns_sizes %} {% 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="columns">
<div class="column is-three-quarters"> <div class="column is-three-quarters">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
@ -91,6 +102,23 @@ doc-subtab: columns
<p class="bd-notification is-success">Auto</p> <p class="bd-notification is-success">Auto</p>
</div> </div>
</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 %} {% endcapture %}
{% capture columns_offset %} {% capture columns_offset %}
@ -972,6 +1000,15 @@ doc-subtab: columns
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<p class="bd-notification is-warning"><code>is-one-quarter</code></p> <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
</div> </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"> <div class="column is-one-quarter">
<p class="bd-notification is-danger"><code>is-one-quarter</code></p> <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
</div> </div>

148
sass/grid/columns.sass
View File

@ -26,6 +26,18 @@ $column-gap: 0.75rem !default
.columns.is-mobile > &.is-one-quarter .columns.is-mobile > &.is-one-quarter
flex: none flex: none
width: 25% 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 .columns.is-mobile > &.is-offset-three-quarters
margin-left: 75% margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds .columns.is-mobile > &.is-offset-two-thirds
@ -36,6 +48,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
.columns.is-mobile > &.is-offset-one-quarter .columns.is-mobile > &.is-offset-one-quarter
margin-left: 25% 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 @for $i from 1 through 12
.columns.is-mobile > &.is-#{$i} .columns.is-mobile > &.is-#{$i}
flex: none flex: none
@ -63,6 +83,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-mobile &.is-one-quarter-mobile
flex: none flex: none
width: 25% 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 &.is-offset-three-quarters-mobile
margin-left: 75% margin-left: 75%
&.is-offset-two-thirds-mobile &.is-offset-two-thirds-mobile
@ -73,6 +105,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
&.is-offset-one-quarter-mobile &.is-offset-one-quarter-mobile
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}-mobile &.is-#{$i}-mobile
flex: none flex: none
@ -107,6 +147,22 @@ $column-gap: 0.75rem !default
&.is-one-quarter-tablet &.is-one-quarter-tablet
flex: none flex: none
width: 25% 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,
&.is-offset-three-quarters-tablet &.is-offset-three-quarters-tablet
margin-left: 75% margin-left: 75%
@ -122,6 +178,18 @@ $column-gap: 0.75rem !default
&.is-offset-one-quarter, &.is-offset-one-quarter,
&.is-offset-one-quarter-tablet &.is-offset-one-quarter-tablet
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}, &.is-#{$i},
&.is-#{$i}-tablet &.is-#{$i}-tablet
@ -151,6 +219,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-touch &.is-one-quarter-touch
flex: none flex: none
width: 25% 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 &.is-offset-three-quarters-touch
margin-left: 75% margin-left: 75%
&.is-offset-two-thirds-touch &.is-offset-two-thirds-touch
@ -161,6 +241,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
&.is-offset-one-quarter-touch &.is-offset-one-quarter-touch
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}-touch &.is-#{$i}-touch
flex: none flex: none
@ -188,6 +276,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-desktop &.is-one-quarter-desktop
flex: none flex: none
width: 25% 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 &.is-offset-three-quarters-desktop
margin-left: 75% margin-left: 75%
&.is-offset-two-thirds-desktop &.is-offset-two-thirds-desktop
@ -198,6 +298,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
&.is-offset-one-quarter-desktop &.is-offset-one-quarter-desktop
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}-desktop &.is-#{$i}-desktop
flex: none flex: none
@ -225,6 +333,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-widescreen &.is-one-quarter-widescreen
flex: none flex: none
width: 25% 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 &.is-offset-three-quarters-widescreen
margin-left: 75% margin-left: 75%
&.is-offset-two-thirds-widescreen &.is-offset-two-thirds-widescreen
@ -235,6 +355,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
&.is-offset-one-quarter-widescreen &.is-offset-one-quarter-widescreen
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}-widescreen &.is-#{$i}-widescreen
flex: none flex: none
@ -262,6 +390,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-fullhd &.is-one-quarter-fullhd
flex: none flex: none
width: 25% 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 &.is-offset-three-quarters-fullhd
margin-left: 75% margin-left: 75%
&.is-offset-two-thirds-fullhd &.is-offset-two-thirds-fullhd
@ -272,6 +412,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333% margin-left: 33.3333%
&.is-offset-one-quarter-fullhd &.is-offset-one-quarter-fullhd
margin-left: 25% 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 @for $i from 1 through 12
&.is-#{$i}-fullhd &.is-#{$i}-fullhd
flex: none flex: none