library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add grid offsets

Browse Source
This commit is contained in:
Jeremy Thomas 2016-02-13 16:16:17 +00:00
parent 0a5e43e49d
commit 29346f88fe
1 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
bulma/components/grid.sass
View File

@ -10,10 +10,18 @@
.columns.is-mobile > &.is-quarter
flex: none
width: 25%
.columns.is-mobile > &.is-offset-half
margin-left: 50%
.columns.is-mobile > &.is-offset-third
margin-left: 33.3333%
.columns.is-mobile > &.is-offset-quarter
margin-left: 25%
@for $i from 1 through 11
.columns.is-mobile > &.is-#{$i}-mobile
.columns.is-mobile > &.is-#{$i}
flex: none
width: ($i / 12) * 100%
.columns.is-mobile > &.is-offset-#{$i}
margin-left: ($i / 12) * 100%
+mobile
&.is-half-mobile
flex: none
@ -24,10 +32,18 @@
&.is-quarter-mobile
flex: none
width: 25%
&.is-offset-half-mobile
margin-left: 50%
&.is-offset-third-mobile
margin-left: 33.3333%
&.is-offset-quarter-mobile
margin-left: 25%
@for $i from 1 through 11
&.is-#{$i}-mobile
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i}-mobile
margin-left: ($i / 12) * 100%
+tablet
&.is-half,
&.is-half-tablet
@ -41,11 +57,23 @@
&.is-quarter-tablet
flex: none
width: 25%
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
&.is-offset-third,
&.is-offset-third-tablet
margin-left: 33.3333%
&.is-offset-quarter,
&.is-offset-quarter-tablet
margin-left: 25%
@for $i from 1 through 11
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: ($i / 12) * 100%
+desktop
&.is-half-desktop
flex: none
@ -56,10 +84,18 @@
&.is-quarter-desktop
flex: none
width: 25%
&.is-offset-half-desktop
margin-left: 50%
&.is-offset-third-desktop
margin-left: 33.3333%
&.is-offset-quarter-desktop
margin-left: 25%
@for $i from 1 through 11
&.is-#{$i}-desktop
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i}-desktop
margin-left: ($i / 12) * 100%
.columns
margin-left: -10px
@ -71,15 +107,11 @@
margin-bottom: 10px
&.is-mobile
display: flex
+tablet
&:not(.is-desktop)
display: flex
+desktop
&.is-desktop
display: flex
&.is-gapless
margin-left: 0
margin-right: 0
&:not(:last-child)
margin: 0 0 20px
margin-bottom: 20px
& > .column
margin: 0
padding: 0
@ -97,3 +129,9 @@
width: 33.3333%
& + .column
margin-left: 0
+tablet
&:not(.is-desktop)
display: flex
+desktop
&.is-desktop
display: flex