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

Implementing a simple version of the native sass percentage function for the grid system

Browse Source
This commit is contained in:
Paulo Tosi 2017-12-21 23:20:59 -02:00 committed by Jeremy Thomas
parent 6bfc1a61f7
commit 6da252df60
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
sass/grid/columns.sass
View File

@ -59,9 +59,9 @@ $column-gap: 0.75rem !default
@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
width: ($i / 12) * 100% width: percentage($i / 12)
.columns.is-mobile > &.is-offset-#{$i} .columns.is-mobile > &.is-offset-#{$i}
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+mobile +mobile
&.is-narrow-mobile &.is-narrow-mobile
flex: none flex: none
@ -116,9 +116,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12 @for $i from 1 through 12
&.is-#{$i}-mobile &.is-#{$i}-mobile
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}-mobile &.is-offset-#{$i}-mobile
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+tablet +tablet
&.is-narrow, &.is-narrow,
&.is-narrow-tablet &.is-narrow-tablet
@ -194,10 +194,10 @@ $column-gap: 0.75rem !default
&.is-#{$i}, &.is-#{$i},
&.is-#{$i}-tablet &.is-#{$i}-tablet
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}, &.is-offset-#{$i},
&.is-offset-#{$i}-tablet &.is-offset-#{$i}-tablet
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+touch +touch
&.is-narrow-touch &.is-narrow-touch
flex: none flex: none
@ -252,9 +252,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12 @for $i from 1 through 12
&.is-#{$i}-touch &.is-#{$i}-touch
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}-touch &.is-offset-#{$i}-touch
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+desktop +desktop
&.is-narrow-desktop &.is-narrow-desktop
flex: none flex: none
@ -309,9 +309,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12 @for $i from 1 through 12
&.is-#{$i}-desktop &.is-#{$i}-desktop
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}-desktop &.is-offset-#{$i}-desktop
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+widescreen +widescreen
&.is-narrow-widescreen &.is-narrow-widescreen
flex: none flex: none
@ -366,9 +366,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12 @for $i from 1 through 12
&.is-#{$i}-widescreen &.is-#{$i}-widescreen
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}-widescreen &.is-offset-#{$i}-widescreen
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
+fullhd +fullhd
&.is-narrow-fullhd &.is-narrow-fullhd
flex: none flex: none
@ -423,9 +423,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12 @for $i from 1 through 12
&.is-#{$i}-fullhd &.is-#{$i}-fullhd
flex: none flex: none
width: ($i / 12) * 100% width: percentage($i / 12)
&.is-offset-#{$i}-fullhd &.is-offset-#{$i}-fullhd
margin-left: ($i / 12) * 100% margin-left: percentage($i / 12)
.columns .columns
margin-left: (-$column-gap) margin-left: (-$column-gap)