diff options
| author |   Stephane Desneux <stephane.desneux@iot.bzh> | 2016-11-11 13:14:53 +0100 |
|---|---|---|
| committer | Stephane Desneux <stephane.desneux@iot.bzh> | 2016-11-11 13:15:01 +0100 |
| commit | 80d9194c56e4cecc3a00acd71033ca7ff35064cf (patch) | |
| tree | e412cd48bd6a1017ea0ac6abd1b62b984b6ebb06 /site/static/styles/scss/bootstrap/mixins/_grid-framework.scss | |
| parent | 777f9afc5f5a3d8ff90a8046314635404dcdcd99 (diff) | |
webdocs-agl: upgrade bootstrap to 3.3.7
Using the bootstrap-sass version available at:
https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
Change-Id: I04dbedda13f6ab6987d4b61afd10bbd60dfb70e6
Signed-off-by: Stephane Desneux <stephane.desneux@iot.bzh>
Diffstat (limited to 'site/static/styles/scss/bootstrap/mixins/_grid-framework.scss')
| -rw-r--r-- | site/static/styles/scss/bootstrap/mixins/_grid-framework.scss | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/site/static/styles/scss/bootstrap/mixins/_grid-framework.scss b/site/static/styles/scss/bootstrap/mixins/_grid-framework.scss new file mode 100644 index 0000000..16d038c --- /dev/null +++ b/site/static/styles/scss/bootstrap/mixins/_grid-framework.scss @@ -0,0 +1,81 @@ +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { + @for $i from (1 + 1) through $grid-columns { + $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; + } + #{$list} { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ceil(($grid-gutter-width / 2)); + padding-right: floor(($grid-gutter-width / 2)); + } +} + + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { + @for $i from (1 + 1) through $grid-columns { + $list: "#{$list}, .col-#{$class}-#{$i}"; + } + #{$list} { + float: left; + } +} + + +@mixin calc-grid-column($index, $class, $type) { + @if ($type == width) and ($index > 0) { + .col-#{$class}-#{$index} { + width: percentage(($index / $grid-columns)); + } + } + @if ($type == push) and ($index > 0) { + .col-#{$class}-push-#{$index} { + left: percentage(($index / $grid-columns)); + } + } + @if ($type == push) and ($index == 0) { + .col-#{$class}-push-0 { + left: auto; + } + } + @if ($type == pull) and ($index > 0) { + .col-#{$class}-pull-#{$index} { + right: percentage(($index / $grid-columns)); + } + } + @if ($type == pull) and ($index == 0) { + .col-#{$class}-pull-0 { + right: auto; + } + } + @if ($type == offset) { + .col-#{$class}-offset-#{$index} { + margin-left: percentage(($index / $grid-columns)); + } + } +} + +// [converter] This is defined recursively in LESS, but Sass supports real loops +@mixin loop-grid-columns($columns, $class, $type) { + @for $i from 0 through $columns { + @include calc-grid-column($i, $class, $type); + } +} + + +// Create grid for specific class +@mixin make-grid($class) { + @include float-grid-columns($class); + @include loop-grid-columns($grid-columns, $class, width); + @include loop-grid-columns($grid-columns, $class, pull); + @include loop-grid-columns($grid-columns, $class, push); + @include loop-grid-columns($grid-columns, $class, offset); +} |