shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_grid-framework.scss (2441B)

      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 }