HOME

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Grid mixins
//  _____________________________________________

//  You shouldn't need to touch this! Internal use only.
@column-width: 1;
@total-columns: 1;
@gutter-width: 1;
@grid-width: (@column-width*@total-columns) + (@gutter-width*(@total-columns - 1));

.lib-column-wrapper() {
    width: 100%;
}

.lib-inline-column-wrapper() when not (@using-ieclasses) {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    word-spacing: -.43em;
}

.lib-inline-column-wrapper() when (@using-ieclasses) {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}

.lib-column() {
    float: left;
    .lib-column-gutter();
}

.lib-column(@span) when (@span = false) {
    float: left;
}

.lib-column(
    @span,
    @total-columns: @total-columns,
    @end-column: false
) when (isnumber(@span)) and (isnumber(@total-columns)) and not (isnumber(@end-column)) {
    @showgutter: false;

    .lib-column(@showgutter);
    .lib-span(@span, @total-columns);
}

.lib-column(
    @span,
    @total-columns: @total-columns,
    @end-column: false
) when (isnumber(@span)) and (isnumber(@total-columns)) and (@end-column = true) {
    @showgutter: false;

    .lib-column(@showgutter);
    .lib-span(
        @span,
        @total-columns
    );
    .lib-end-column();
}

.lib-column(
    @span,
    @end-column
) when (isnumber(@span)) and not (isnumber(@end-column)) {
    @showgutter: false;

    .lib-column(@showgutter);
    .lib-span(@span);
}

.lib-column(
    @span,
    @end-column
) when (isnumber(@span)) and ( @end-column = true ) {
    @showgutter: false;

    .lib-column(@showgutter);
    .lib-span(@span);
    .lib-end-column();
}

.lib-inline-column() {
    .lib-column-gutter();
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
}

.lib-inline-column(@span) when (@span = false) {
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
}

.lib-inline-column(
    @span,
    @total-columns: @total-columns,
    @end-column: false
) when (isnumber(@span)) and (isnumber(@total-columns)) {
    @showgutter: false;

    .lib-inline-column(@showgutter);
    .lib-span(
        @span,
        @total-columns
    );
}

.lib-inline-column(
    @span,
    @total-columns: @total-columns,
    @end-column: false
) when (isnumber(@span)) and (@end-column = true) {
    @showgutter: false;

    .lib-inline-column(@showgutter);
    .lib-span(
        @span,
        @total-columns
    );
    .lib-inline-end-column();
}

.lib-inline-column(
    @span,
    @end-column
) when not (isnumber(@end-column)) {
    @showgutter: false;

    .lib-inline-column(@showgutter);
    .lib-span(@span);
}

.lib-inline-column(
    @span,
    @end-column
) when (@end-column = true) {
    @showgutter: false;

    .lib-inline-column(@showgutter);
    .lib-span(@span);
    .lib-inline-end-column();
}

.lib-end-column() {
    margin-right: 0;
    float: right;
}

.lib-inline-end-column() {
    margin-right: 0;
}

.lib-span(@span) {
    .lib-column-width(
        @span,
        @total-columns
    );
}

.lib-span(
    @span,
    @total-columns
) when (isnumber(@total-columns)) {
    .lib-column-width(
        @span,
        @total-columns
    );
    .lib-column-gutter(@total-columns);
}

.lib-pre-pad(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);

    .lib-css(padding-left, @calc-column-width);
}

.lib-post-pad(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);

    .lib-css(padding-right, @calc-column-width);
}

.lib-pre-push(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);

    .lib-css(margin-left, @calc-column-width);
}

.lib-post-push(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)+@gutter-width) / @grid-width);

    .lib-css(margin-right, @calc-column-width);
}

.lib-post-push-end(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);

    .lib-css(margin-right, @calc-column-width);
}

.lib-column-width(
    @span,
    @total-columns: @total-columns
) {
    @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)-@gutter-width) / @grid-width);

    .lib-css(width, @calc-column-width);
}

.lib-column-gutter(
    @total-columns: @total-columns,
    @end-column: false
) when (@end-column) {
    margin-right: 0;
}

.lib-column-gutter(
    @total-columns: @total-columns,
    @end-column: false
) when not (@end-column) {
    @calc-gutter-width: 100%*(@gutter-width/@grid-width);

    .lib-css(margin-right, @calc-gutter-width);
}