From: Jeremy Thomas Date: Sun, 10 Apr 2016 16:09:34 +0000 (+0100) Subject: Fix grid style, Fix gapless columns X-Git-Tag: 0.0.18~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4b6d786620037bcb85269b0e0d97843cf73fa06f;p=thirdparty%2Fbulma.git Fix grid style, Fix gapless columns --- diff --git a/CHANGELOG.md b/CHANGELOG.md index c1afa680d..e7b0ecf41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,16 @@ ### Added * **small tag**: `.tag.is-small` +* 12th column classes +* `*-full` column classes +* `$family-code` ### Fixed * disabled input with element +* `.table` last row with `th` +* `.card` color in `.hero` +* `.columns.is-gapless` ### Removed diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass index 4d8cf862c..54148536a 100644 --- a/bulma/components/grid.sass +++ b/bulma/components/grid.sass @@ -1,6 +1,9 @@ .column flex: 1 padding: 10px + .columns.is-mobile > &.is-full + flex: none + width: 100% .columns.is-mobile > &.is-half flex: none width: 50% @@ -16,13 +19,16 @@ margin-left: 33.3333% .columns.is-mobile > &.is-offset-quarter margin-left: 25% - @for $i from 1 through 11 + @for $i from 1 through 12 .columns.is-mobile > &.is-#{$i} flex: none width: ($i / 12) * 100% .columns.is-mobile > &.is-offset-#{$i} margin-left: ($i / 12) * 100% +mobile + &.is-full-mobile + flex: none + width: 100% &.is-half-mobile flex: none width: 50% @@ -38,13 +44,17 @@ margin-left: 33.3333% &.is-offset-quarter-mobile margin-left: 25% - @for $i from 1 through 11 + @for $i from 1 through 12 &.is-#{$i}-mobile flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-mobile margin-left: ($i / 12) * 100% +tablet + &.is-full, + &.is-full-tablet + flex: none + width: 100% &.is-half, &.is-half-tablet flex: none @@ -66,7 +76,7 @@ &.is-offset-quarter, &.is-offset-quarter-tablet margin-left: 25% - @for $i from 1 through 11 + @for $i from 1 through 12 &.is-#{$i}, &.is-#{$i}-tablet flex: none @@ -75,6 +85,9 @@ &.is-offset-#{$i}-tablet margin-left: ($i / 12) * 100% +desktop + &.is-full-desktop + flex: none + width: 100% &.is-half-desktop flex: none width: 50% @@ -90,7 +103,7 @@ margin-left: 33.3333% &.is-offset-quarter-desktop margin-left: 25% - @for $i from 1 through 11 + @for $i from 1 through 12 &.is-#{$i}-desktop flex: none width: ($i / 12) * 100% @@ -105,23 +118,22 @@ margin-bottom: -10px &:not(:last-child) margin-bottom: 10px + // Modifiers &.is-centered justify-content: center - &.is-mobile - display: flex &.is-gapless margin-left: 0 margin-right: 0 + margin-top: 0 + &:last-child + margin-bottom: 0 &:not(:last-child) margin-bottom: 20px & > .column margin: 0 padding: 0 - &.is-multiline - flex-wrap: wrap - &.is-vcentered - align-items: center &.is-grid + // Responsiveness +tablet flex-wrap: wrap & > .column @@ -131,9 +143,17 @@ width: 33.3333% & + .column margin-left: 0 + &.is-mobile + display: flex + &.is-multiline + flex-wrap: wrap + &.is-vcentered + align-items: center + // Responsiveness +tablet &:not(.is-desktop) display: flex +desktop + // Modifiers &.is-desktop display: flex