Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues 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
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 .columns.is-mobile > &.is-quarter
flex: none flex: none
width: 25% 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 @for $i from 1 through 11
.columns.is-mobile > &.is-#{$i}-mobile .columns.is-mobile > &.is-#{$i}
flex: none flex: none
width: ($i / 12) * 100% width: ($i / 12) * 100%
.columns.is-mobile > &.is-offset-#{$i}
margin-left: ($i / 12) * 100%
+mobile +mobile
&.is-half-mobile &.is-half-mobile
flex: none flex: none
@@ -24,10 +32,18 @@
&.is-quarter-mobile &.is-quarter-mobile
flex: none flex: none
width: 25% 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 @for $i from 1 through 11
&.is-#{$i}-mobile &.is-#{$i}-mobile
flex: none flex: none
width: ($i / 12) * 100% width: ($i / 12) * 100%
&.is-offset-#{$i}-mobile
margin-left: ($i / 12) * 100%
+tablet +tablet
&.is-half, &.is-half,
&.is-half-tablet &.is-half-tablet
@@ -41,11 +57,23 @@
&.is-quarter-tablet &.is-quarter-tablet
flex: none flex: none
width: 25% 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 @for $i from 1 through 11
&.is-#{$i}, &.is-#{$i},
&.is-#{$i}-tablet &.is-#{$i}-tablet
flex: none flex: none
width: ($i / 12) * 100% width: ($i / 12) * 100%
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: ($i / 12) * 100%
+desktop +desktop
&.is-half-desktop &.is-half-desktop
flex: none flex: none
@@ -56,10 +84,18 @@
&.is-quarter-desktop &.is-quarter-desktop
flex: none flex: none
width: 25% 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 @for $i from 1 through 11
&.is-#{$i}-desktop &.is-#{$i}-desktop
flex: none flex: none
width: ($i / 12) * 100% width: ($i / 12) * 100%
&.is-offset-#{$i}-desktop
margin-left: ($i / 12) * 100%
.columns .columns
margin-left: -10px margin-left: -10px
@@ -71,15 +107,11 @@
margin-bottom: 10px margin-bottom: 10px
&.is-mobile &.is-mobile
display: flex display: flex
+tablet
&:not(.is-desktop)
display: flex
+desktop
&.is-desktop
display: flex
&.is-gapless &.is-gapless
margin-left: 0
margin-right: 0
&:not(:last-child) &:not(:last-child)
margin: 0 0 20px margin-bottom: 20px
& > .column & > .column
margin: 0 margin: 0
padding: 0 padding: 0
@@ -97,3 +129,9 @@
width: 33.3333% width: 33.3333%
& + .column & + .column
margin-left: 0 margin-left: 0
+tablet
&:not(.is-desktop)
display: flex
+desktop
&.is-desktop
display: flex