_mixins.less

// -----------------------------------------------------------------------------
// COLORS
// -----------------------------------------------------------------------------

@_black      : #000000;
@_blue       : #007bff;
@_cyan       : #17a2b8;
@_danger     : #dc3545;
@_dark       : #343a40;
@_darkgrey   : #343a40;
@_gray       : #6c757d;
@_gray-dark  : #343a40;
@_green      : #28a745;
@_grey       : #6c757d;
@_indigo     : #6610f2;
@_info       : #17a2b8;
@_light      : #f8f9fa;
@_lightgrey  : #999999;
@_link-color : @_blue;
@_link-hover : darken(@_link-color, 50%);
@_orange     : #fd7e14;
@_pink       : #e83e8c;
@_primary    : #007bff;
@_purple     : #6f42c1;
@_red        : #dc3545;
@_secondary  : #6c757d;
@_success    : #28a745;
@_teal       : #20c997;
@_warning    : #ffc107;
@_white      : #ffffff;
@_yellow     : #ffc107;

// -----------------------------------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------------------------------

@_sans-serif : Arial, Helvetica, sans-serif;
@_serif      : Georgia, "Times New Roman", Times, serif;

#m {

    // -------------------------------------------------------------------------
    // BOX SHADOW
    // -------------------------------------------------------------------------

    .boxShadow(
        @x      : 0;
        @y      : 0;
        @radius : 5px;
        @spread : 0;
        @color  : fade(@_black, 50%)
        ) when (isnumber(@x)) {
                box-shadow: @x @y @radius @spread @color;
        -webkit-box-shadow: @x @y @radius @spread @color;
           -moz-box-shadow: @x @y @radius @spread @color;
        }

    .boxShadow(@x) when (iskeyword(@x)) {
        box-shadow: @x;
        -webkit-box-shadow: @x;
        -moz-box-shadow: @x;
        }

    // -------------------------------------------------------------------------
    // CONTAIN FLOATS
    // -------------------------------------------------------------------------

    .cf() {

        &:after {
            content: "";
            display: table;
            clear: both;
            }
        }

    // -------------------------------------------------------------------------
    // GRADIENT
    // -------------------------------------------------------------------------

    .gradient(
        @a: @_black;
        @b: fade(@_black, 0%)) {
        background-color: @b;
        background-image: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b));
        background-image: -webkit-linear-gradient(top, @a, @b);
        background-image: -moz-linear-gradient(top, @a, @b);
        background-image: -o-linear-gradient(top, @a, @b);
        background-image: linear-gradient(to bottom, @a, @b);
        }

    // -------------------------------------------------------------------------
    // IMAGES
    // -------------------------------------------------------------------------

    .img() {
        .size(auto; auto; block);

        background: transparent 0 0 no-repeat;
        background-image: none;
        background-size: cover;
        }

    .img(
        @url;
        @w        : auto;
        @h        : auto;
        @size     : cover;
        @position : 0 0;
        @display  : block
        ) {
        .size(@w, @h, @display);

        background: transparent @position no-repeat url(@url);
        background-size: @size;
        }

    .img(
        @url;
        @w        : auto;
        @h        : auto;
        @size     : cover;
        @position : 0 0;
        @display  : block
        ) when (@url = none) {
        .size(@w, @h, @display);

        background: transparent @position no-repeat;
        background-image: none;
        background-size: @size;
        }

    .img_src(
        @url;
        @w: auto;
        @h: auto) {
        .size(@w, @h);

        background-image: url(@url);
        }

    // -------------------------------------------------------------------------
    // POSITIONING
    // -------------------------------------------------------------------------

    .position(
        @x;
        @y;
        @position;
        @z-index : 1
        ) {
        position: @position;
        left: @x;
        top: @y;
        z-index: @z-index;
        }

    .position(@x; @y) {
        left : @x;
        top : @y;
        }

    // -------------------------------------------------------------------------
    // RESET
    // -------------------------------------------------------------------------

    .reset(@display: block) {
        display: @display;
        background: none;
        border: 0;
        border-radius: 0;
        color: initial;
        font-family: @_sans-serif;
        font-size: initial;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: normal;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-transform: none;

        &, &:focus {
            outline: none;
            }
        }

    // -------------------------------------------------------------------------
    // SIZE
    // -------------------------------------------------------------------------

    .size(@w; @h) {
        width: @w;
        height: @h;
        }

    .size(@w; @h; @display) {
        display: @display;
        width: @w;
        height: @h;
        }

    // -------------------------------------------------------------------------
    // VISIBILITY
    // -------------------------------------------------------------------------

    .hidden()              { visibility: hidden;  }
    .hide()                { display: none;       }
    .show(@display: block) { display: @display;   }
    .visible()             { visibility: visible; }

    // -------------------------------------------------------------------------
    // ZOOM
    // -------------------------------------------------------------------------

    .zoom(@scale: 1.0; @origin: left center) {
                         zoom: @scale;
                     -ms-zoom: @scale;
                 -webkit-zoom: @scale;
               -moz-transform: scale(@scale, @scale);
        -moz-transform-origin: @origin;
        }
    }