Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 12:44:30 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

148
sass/grid/columns.sass
View File

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