library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +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
.columns.is-mobile > &.is-#{$i}
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
.columns.is-mobile > &.is-offset-#{$i}
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+mobile
&.is-narrow-mobile
flex: none
@ -116,9 +116,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}-mobile
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i}-mobile
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+tablet
&.is-narrow,
&.is-narrow-tablet
@ -194,10 +194,10 @@ $column-gap: 0.75rem !default
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+touch
&.is-narrow-touch
flex: none
@ -252,9 +252,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}-touch
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i}-touch
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+desktop
&.is-narrow-desktop
flex: none
@ -309,9 +309,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}-desktop
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i}-desktop
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+widescreen
&.is-narrow-widescreen
flex: none
@ -366,9 +366,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}-widescreen
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i}-widescreen
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
+fullhd
&.is-narrow-fullhd
flex: none
@ -423,9 +423,9 @@ $column-gap: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}-fullhd
flex: none
width: ($i / 12) * 100%
width: percentage($i / 12)
&.is-offset-#{$i}-fullhd
margin-left: ($i / 12) * 100%
margin-left: percentage($i / 12)
.columns
margin-left: (-$column-gap)