LESS mkedia objects (.cell)

cells.less

.fulltable {
    display: table;
    width: 100%;
}

/* See bootstrap's media.less for code that inspired this one*/
& {
    @_padding: 10px;
    @_padding-thin: 5px;
    @_padding-thick: 20px;

    ._cell() {
        display: table-cell;
        vertical-align: top;
    }

    ._max() {
        /*
         * maybe, it's better to write
         *     width: 100%,
         *  but it requires to always wrap .cell in element with "display: table"
         * Anyway, Bootstrap 3 uses "width: 10000px;" and it works
        */
        width: 10000px;
    }

    ._left() {
        padding-right: @_padding;
    }
    ._left-thin() {
        padding-right: @_padding-thin;
    }
    ._left-thick() {
        padding-right: @_padding-thick;
    }

    ._right() {
        padding-left: @_padding;
    }
    ._right-thin() {
        padding-left: @_padding-thin;
    }
    ._right-thick() {
        padding-left: @_padding-thick;
    }

    .cell {
        ._cell();

        &_max {
            ._max();
        }

        &_left {
            ._left();
        }
        &_thin {
            ._left-thin();
        }
        &_thick {
            ._left-thick();
        }
        &_right {
            ._right();
        }
        &_right-thin {
            ._right-thin();
        }
        &_right-thick {
            ._right-thick();
        }

        &_bottom {
            vertical-align: bottom;
        }

        &_middle {
            vertical-align: middle;
        }

        /* BEGIN fixes for .oneline inside .cell */
            &_min {
                width: 1%;
            }

            &_with-onelines {
                /*
                * Apply it when .oneline is inside .cell.
                * It requires that there's a neighbour cell with {width: 1%}
                */
                max-width: 1px;
            }
        /* END fixes for .oneline inside .cell */

        /* BEGIN responsive stuff */
            // && is needed to obtain selectors like .cell.cell_bottom
            //  which have greater priority that .cell and therefore we can override default properties
            ._responsive_cell(@suffix, @threshold) {
                &&_@{suffix} {
                    @media screen and (max-width: @threshold) {
                        display: block; // to reset display: table-cell
                        width: 100%; // to reset width: 1% on .b-table__cell_media
                        max-width: 100%; // to reset max-width: 1px; on .b-table__cell_with_onelines
                        padding-left: 0;  // to reset padding on .b-table__cell_media-X
                        padding-right: 0; // to reset padding on .b-table__cell_media-right-X
                    }
                }
            }
            ._responsive_cell(xsm, @screen-xsm);
            ._responsive_cell(sm, @screen-sm);
            ._responsive_cell(md, @screen-md);
            ._responsive_cell(lg, @screen-lg);
        /* end */
    }

    /* BEGIN shortcuts */
        // class="maxcell" is a shortcut for class="cell cell_max"
        .maxcell {
            ._cell();
            ._max();
        }

        .leftcell {
            ._cell();
            ._left();
        }
        .leftcell-thin {
            ._cell();
            ._left-thin();
        }
        .leftcell-thick {
            ._cell();
            ._left-thick();
        }

        .rightcell {
            ._cell();
            ._right();
        }
        .rightcell-thin {
            ._cell();
            ._right-thin();
        }
        .rightcell-thick {
            ._cell();
            ._right-thick();
        }
    /* end */
}

/* EXPERIMENTAL ".cell" block on FlexBox.
 * Main advantage is ability to use .oneline inside .cell_max
 * TODO: explore how it will work in real world
 * TODO: DRYify code
 */
& {
    @_padding: 10px;
    @_padding-thin: 5px;
    @_padding-thick: 20px;

    /* see https://css-tricks.com/flexbox-truncated-text/ */
    ._cell() {
        min-width: 0;
    }

    ._max() {
        /* see https://css-tricks.com/flexbox-truncated-text/ and BlazeCSS source */
        flex: 1;
    }

    ._left() {
        padding-right: @_padding;
    }
    ._left-thin() {
        padding-right: @_padding-thin;
    }
    ._left-thick() {
        padding-right: @_padding-thick;
    }

    ._right() {
        padding-left: @_padding;
    }
    ._right-thin() {
        padding-left: @_padding-thin;
    }
    ._right-thick() {
        padding-left: @_padding-thick;
    }

    .flextable {
        display: flex;
    }

    .flexcell {
        ._cell();

        &_max {
            ._max();
        }

        &_left {
            ._left();
        }
        &_thin {
            ._left-thin();
        }
        &_thick {
            ._left-thick();
        }
        &_right {
            ._right();
        }
        &_right-thin {
            ._right-thin();
        }
        &_right-thick {
            ._right-thick();
        }

        &_bottom {
            align-self: flex-end;
        }

        &_middle {
            align-self: center;
        }
    }

    /* BEGIN shortcuts */
        // class="maxcell" is a shortcut for class="cell cell_max"
        .maxflexcell {
            ._cell();
            ._max();
        }

        .leftflexcell {
            ._cell();
            ._left();
        }
        .leftflexcell-thin {
            ._cell();
            ._left-thin();
        }
        .leftflexcell-thick {
            ._cell();
            ._left-thick();
        }

        .rightflexcell {
            ._cell();
            ._right();
        }
        .rightflexcell-thin {
            ._cell();
            ._right-thin();
        }
        .rightflexcell-thick {
            ._cell();
            ._right-thick();
        }
    /* end */
}