hokui/hokui.net

View on GitHub
client/style/mixin/_responsive.sass

Summary

Maintainability
Test Coverage



=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
        min-height: 1px

=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


=calc-grid-column($index, $class, $type)
    @if ($type == width) and ($index > 0)
        .col--#{$class}-#{$index}
            width: percentage(($index / $grid-columns))
            padding-left: $grid-gutter / 2
            padding-right: $grid-gutter / 2

    @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) and ($index > 0)
        .col--#{$class}-offset-#{$index}
            margin-left: percentage(($index / $grid-columns))


=loop-grid-columns($columns, $class, $type)
    @for $i from 0 through $columns
        +calc-grid-column($i, $class, $type)


=make-grid($class)
    +float-grid-columns($class)
    +loop-grid-columns($grid-columns, $class, width)
    +loop-grid-columns($grid-columns, $class, pull)
    +loop-grid-columns($grid-columns, $class, push)
    +loop-grid-columns($grid-columns, $class, offset)