assets/stylesheets/bootstrap/mixins/_grid-framework.scss
author ymh <ymh.work@gmail.com>
Thu, 15 Jun 2017 12:17:09 +0200
changeset 114 af15590802a4
permissions -rw-r--r--
add a lot of files
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
114
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
// Framework grid generation
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
//
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// Used only by Bootstrap to generate the correct number of grid classes given
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
// any value of `$grid-columns`.
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
// [converter] This is defined recursively in LESS, but Sass supports real loops
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  @for $i from (1 + 1) through $grid-columns {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
  #{$list} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
    position: relative;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
    // Prevent columns from collapsing when empty
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    min-height: 1px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    // Inner gutter via padding
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
    padding-left:  ceil(($grid-gutter-width / 2));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
    padding-right: floor(($grid-gutter-width / 2));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
// [converter] This is defined recursively in LESS, but Sass supports real loops
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
  @for $i from (1 + 1) through $grid-columns {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
    $list: "#{$list}, .col-#{$class}-#{$i}";
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  #{$list} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
    float: left;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
@mixin calc-grid-column($index, $class, $type) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
  @if ($type == width) and ($index > 0) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    .col-#{$class}-#{$index} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
      width: percentage(($index / $grid-columns));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
  @if ($type == push) and ($index > 0) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
    .col-#{$class}-push-#{$index} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
      left: percentage(($index / $grid-columns));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
  @if ($type == push) and ($index == 0) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
    .col-#{$class}-push-0 {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
      left: auto;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
  @if ($type == pull) and ($index > 0) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
    .col-#{$class}-pull-#{$index} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
      right: percentage(($index / $grid-columns));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
  @if ($type == pull) and ($index == 0) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
    .col-#{$class}-pull-0 {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
      right: auto;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
  @if ($type == offset) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
    .col-#{$class}-offset-#{$index} {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
      margin-left: percentage(($index / $grid-columns));
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
    }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
// [converter] This is defined recursively in LESS, but Sass supports real loops
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
@mixin loop-grid-columns($columns, $class, $type) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
  @for $i from 0 through $columns {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
    @include calc-grid-column($i, $class, $type);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
// Create grid for specific class
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
@mixin make-grid($class) {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
  @include float-grid-columns($class);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
  @include loop-grid-columns($grid-columns, $class, width);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
  @include loop-grid-columns($grid-columns, $class, pull);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
  @include loop-grid-columns($grid-columns, $class, push);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
  @include loop-grid-columns($grid-columns, $class, offset);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
}