Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // Framework grid generation |
| 2 | // |
||
| 3 | // Used only by Bootstrap to generate the correct number of grid classes given |
||
| 4 | // any value of `$grid-columns`. |
||
| 5 | |||
| 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops |
||
| 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { |
||
| 8 | @for $i from (1 + 1) through $grid-columns { |
||
| 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; |
||
| 10 | } |
||
| 11 | #{$list} { |
||
| 12 | position: relative; |
||
| 13 | // Prevent columns from collapsing when empty |
||
| 14 | min-height: 1px; |
||
| 15 | // Inner gutter via padding |
||
| 16 | padding-left: ceil(($grid-gutter-width / 2)); |
||
| 17 | padding-right: floor(($grid-gutter-width / 2)); |
||
| 18 | } |
||
| 19 | } |
||
| 20 | |||
| 21 | |||
| 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops |
||
| 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { |
||
| 24 | @for $i from (1 + 1) through $grid-columns { |
||
| 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; |
||
| 26 | } |
||
| 27 | #{$list} { |
||
| 28 | float: left; |
||
| 29 | } |
||
| 30 | } |
||
| 31 | |||
| 32 | |||
| 33 | @mixin calc-grid-column($index, $class, $type) { |
||
| 34 | @if ($type == width) and ($index > 0) { |
||
| 35 | .col-#{$class}-#{$index} { |
||
| 36 | width: percentage(($index / $grid-columns)); |
||
| 37 | } |
||
| 38 | } |
||
| 39 | @if ($type == push) and ($index > 0) { |
||
| 40 | .col-#{$class}-push-#{$index} { |
||
| 41 | left: percentage(($index / $grid-columns)); |
||
| 42 | } |
||
| 43 | } |
||
| 44 | @if ($type == push) and ($index == 0) { |
||
| 45 | .col-#{$class}-push-0 { |
||
| 46 | left: auto; |
||
| 47 | } |
||
| 48 | } |
||
| 49 | @if ($type == pull) and ($index > 0) { |
||
| 50 | .col-#{$class}-pull-#{$index} { |
||
| 51 | right: percentage(($index / $grid-columns)); |
||
| 52 | } |
||
| 53 | } |
||
| 54 | @if ($type == pull) and ($index == 0) { |
||
| 55 | .col-#{$class}-pull-0 { |
||
| 56 | right: auto; |
||
| 57 | } |
||
| 58 | } |
||
| 59 | @if ($type == offset) { |
||
| 60 | .col-#{$class}-offset-#{$index} { |
||
| 61 | margin-left: percentage(($index / $grid-columns)); |
||
| 62 | } |
||
| 63 | } |
||
| 64 | } |
||
| 65 | |||
| 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops |
||
| 67 | @mixin loop-grid-columns($columns, $class, $type) { |
||
| 68 | @for $i from 0 through $columns { |
||
| 69 | @include calc-grid-column($i, $class, $type); |
||
| 70 | } |
||
| 71 | } |
||
| 72 | |||
| 73 | |||
| 74 | // Create grid for specific class |
||
| 75 | @mixin make-grid($class) { |
||
| 76 | @include float-grid-columns($class); |
||
| 77 | @include loop-grid-columns($grid-columns, $class, width); |
||
| 78 | @include loop-grid-columns($grid-columns, $class, pull); |
||
| 79 | @include loop-grid-columns($grid-columns, $class, push); |
||
| 80 | @include loop-grid-columns($grid-columns, $class, offset); |
||
| 81 | } |