grade.scss

$tam-xs-max: 380px;
$tam-sm-max: 750px;
$tam-md-max: 1400px;
$tam-lg-max: 4096px; // nem vai ser usado :v

$tam-xs-min: 0;
$tam-sm-min: $tam-xs-max;
$tam-md-min: $tam-sm-max;
$tam-lg-min: $tam-md-max;

// GRADE
$num-colunas: 12;

.row,
.layout-fluido {
    margin: 0;
    padding: 0;
    display: flex !important;
    width: 100%;
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: center;

    &.formulario {
        margin: 4px 4px;
        width: calc(100% - 8px) !important;
        padding: 8px 4px !important;
        border-radius: 4px;
        border: 1px solid transparent;
        box-sizing: border-box;
        transition: 200ms ease-out;
        background-color: transparent;
        border-color: transparent;
        background-color: rgba(250,250,250, 0.5);
        border-color: rgba(0,0,0, 0.12);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.12);

        &:hover {
            background-color: rgba(253,253,253, 0.6);
            border-color: rgba(0, 89, 169, 0.22);
        }
    }

    > h1, h2, h3, h4, h5, h6 {
        width: 100%;
        color: #777;
        margin-left: 8px;
        margin-bottom: 4px;
    }

    > h1 {
        font-size: 1.6rem;
    }

    > h2 {
        font-size: 1.4rem;
    }

    > h2 {
        font-size: 1.2rem;
    }

    > div, > section {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;

        @media (min-width: $tam-sm-max) {
            margin-bottom: auto;
        }
    }

    > input, > button, > label, > p, > select {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        display: block;
        /*margin-left: 0 !important;
        margin-right: 0 !important;*/
        @media (min-width: 0) {
            margin-bottom: 4px;
            margin-top: 4px;
        }
    }
}

@mixin layout($letra, $min, $max) {
    @media (min-width: $min) {
        .layout-fluido > .#{$letra}-#{0},
        .layout-fluido > .col-#{$letra}-#{0},
        .row > .col-#{$letra}-#{0} {
            display: none;
        }

        @for $i from 1 to $num-colunas+1 {
            .layout-fluido, .row {
                > .#{$letra}-#{$i}, .col-#{$letra}-#{$i} {
                    $temp: 100% / $num-colunas * $i;
                    width: #{$temp};
                    margin-left: 0px;
                    margin-right: 0px;
                    display: block;
                }

                &.formulario {
                    > .#{$letra}-#{$i}, .col-#{$letra}-#{$i} {
                        $temp: 100% / $num-colunas * $i;
                        width: calc( #{$temp} - 8px );
                        margin-left: 4px;
                        margin-right: 4px;
                        display: block;
                    }
                }
            }
        }
    }
}

@mixin layout-pular($letra, $min, $max) {
    @media (min-width: $min) {
        @for $i from 1 to $num-colunas+1 {
            .layout-fluido > .#{$letra}-pular-#{$i},
            .layout-fluido > .col-#{$letra}-offset-#{$i},
            .row > .col-#{$letra}-offset-#{$i} {
                margin-left: calc(#{(100%/$num-colunas) * $i} + 4px) !important;
            }
        }
    }
}

@media (max-width: $tam-xs-max) {
    .h-xs {
        display: none !important;
    }
}

@media (min-width: $tam-sm-min) and (max-width: $tam-sm-max) {
    .h-sm {
        display: none !important;
    }
}

@media (min-width: $tam-md-min) and (max-width: $tam-md-max) {
    .h-md {
        display: none !important;
    }
}

@media (min-width: $tam-lg-min) and (max-width: $tam-lg-max) {
    .h-lg {
        display: none !important;
    }
}

// isso é pra permitir div class="layout-fluido inverso-xs", por exemplo
// faz a ordem dos elementos ficar invertida num tamanho especifico.
// ex: Se tem divs A e B ambas com "xs-12 md-6", a A vem na esquerda no md
// e acima no xs.
// Se o container for por exemplo inverso-xs, o B vai vir antes do A no modo XS.
@mixin handlerInverso($letra, $min, $max) {
    @media (min-width: $min) and (max-width: $max) {
        .layout-fluido.inverso-#{$letra} {
            -ms-flex-flow: row-reverse wrap;
            -webkit-flex-flow: row-reverse wrap;
            flex-flow: row-reverse wrap;
        }
    }
}

@include layout(xs, $tam-xs-min, $tam-xs-max);
@include layout(sm, $tam-sm-min, $tam-sm-max);
@include layout(md, $tam-md-min, $tam-md-max);
@include layout(lg, $tam-lg-min, $tam-lg-max);
@include layout-pular(xs, $tam-xs-min, $tam-xs-max);
@include layout-pular(sm, $tam-sm-min, $tam-sm-max);
@include layout-pular(md, $tam-md-min, $tam-md-max);
@include layout-pular(lg, $tam-lg-min, $tam-lg-max);
@include handlerInverso(xs, $tam-xs-min, $tam-xs-max);
@include handlerInverso(sm, $tam-sm-min, $tam-sm-max);
@include handlerInverso(md, $tam-md-min, $tam-md-max);
@include handlerInverso(lg, $tam-lg-min, $tam-lg-max);