LESS: Helpers and mixins for using LESS

css-less-helpers.less

//============================================================
// Structure, Flow and Layout
//============================================================

// inline-block fix incl. ie7 support
.inline-block {
    display: inline-block;
    *display: block;
    *zoom: 1;
}

// CSS columns
.content-columns(@width: 50%, @count: 2, @gap: 0px) {
    -webkit-column-width:   @width;
       -moz-column-width:   @width;
            column-width:   @width;
    -webkit-column-count:   @count;
       -moz-column-count:   @count;
            column-count:   @count;
    -webkit-column-gap:     @gap;
       -moz-column-gap:     @gap;
            column-gap:     @gap;
}

//============================================================
// Typography
//============================================================

// An rem font-size mixin providing fallback to px
.font-size(@sizeValue) {
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}

// Requires inline-block or block for proper styling
.text-truncate() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

//============================================================
// Misc
//============================================================
.border-radius(@radius) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;

    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;
}

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
            box-shadow: @shadow;
}

.opacity(@opacity) {
    opacity: @opacity;
    @opacity-ie: @opacity * 100;
    filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}

//============================================================
// Transforms
//============================================================
.transform(@transform) {
    -webkit-transform: @transform;
       -moz-transform: @transform;
        -ms-transform: @transform;
         -o-transform: @transform;
            transform: @transform;
}
.transform-origin(@arguments) {
    -webkit-transform-origin: @arguments;
       -moz-transform-origin: @arguments;
        -ms-transform-origin: @arguments;
         -o-transform-origin: @arguments;
            transform-origin: @arguments;
}
.rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
       -moz-transform: rotate(@degrees);
        -ms-transform: rotate(@degrees);
         -o-transform: rotate(@degrees);
            transform: rotate(@degrees);
}
.scale(@ratio) {
    -webkit-transform: scale(@ratio);
       -moz-transform: scale(@ratio);
        -ms-transform: scale(@ratio);
         -o-transform: scale(@ratio);
            transform: scale(@ratio);
}
.translate(@x, @y) {
    -webkit-transform: translate(@x, @y);
       -moz-transform: translate(@x, @y);
        -ms-transform: translate(@x, @y);
         -o-transform: translate(@x, @y);
            transform: translate(@x, @y);
}
.skew(@x, @y) {
    -webkit-transform: skew(@x, @y);
       -moz-transform: skew(@x, @y);
        -ms-transform: skewX(@x) skewY(@y);
         -o-transform: skew(@x, @y);
            transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
    -webkit-transform: translate3d(@x, @y, @z);
       -moz-transform: translate3d(@x, @y, @z);
        -ms-transform: translate3d(@x, @y, @z);
         -o-transform: translate3d(@x, @y, @z);
            transform: translate3d(@x, @y, @z);
}
.perspective(@arguments) {
    -webkit-perspective: @arguments;
       -moz-perspective: @arguments;
        -ms-perspective: @arguments;
         -o-perspective: @arguments;
            perspective: @arguments;
}
.perspective-origin(@arguments) {
    -webkit-perspective-origin: @arguments;
       -moz-perspective-origin: @arguments;
        -ms-perspective-origin: @arguments;
         -o-perspective-origin: @arguments;
            perspective-origin: @arguments;
}
// For flipping 3D cards
.backface-visibility(@visibility){
    -webkit-backface-visibility: @visibility;
       -moz-backface-visibility: @visibility;
        -ms-backface-visibility: @visibility;
         -o-backface-visibility: @visibility;
            backface-visibility: @visibility;
}

//============================================================
// Transitions
//============================================================
.transition(@transition) {
    -webkit-transition: @transition;
       -moz-transition: @transition;
        -ms-transition: @transition;
         -o-transition: @transition;
            transition: @transition;
}
.transition-duration(@transition-duration) {
    -webkit-transition-duration: @transition-duration;
       -moz-transition-duration: @transition-duration;
         -o-transition-duration: @transition-duration;
            transition-duration: @transition-duration;
}


//============================================================
// Animations
//============================================================
.animation(@animation) {
    -webkit-animation: @animation;
       -moz-animation: @animation;
        -ms-animation: @animation;
         -o-animation: @animation;
            animation: @animation;
}


//============================================================
// Gradients
//============================================================

//
.linear-gradient(@gradient) {
    background-image: -webkit-linear-gradient(@gradient);
    background-image:    -moz-linear-gradient(@gradient);
    background-image:     -ms-linear-gradient(@gradient);
    background-image:      -o-linear-gradient(@gradient);
    background-image:         linear-gradient(@gradient);
}

.horizontal-gradient(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical-gradient(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}

//============================================================
// Flexbox
//============================================================
.display-box() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
}
.box-orient(@arguments) {
    .display-box();
    -webkit-box-orient: @arguments;
       -moz-box-orient: @arguments;
        -ms-box-orient: @arguments;
         -o-box-orient: @arguments;
            box-orient: @arguments;
}
.box-pack(@arguments) {
    .display-box();
    -webkit-box-pack: @arguments;
       -moz-box-pack: @arguments;
        -ms-box-pack: @arguments;
         -o-box-pack: @arguments;
            box-pack: @arguments;
}
.box-align(@arguments) {
    .display-box();
    -webkit-box-align: @arguments;
       -moz-box-align: @arguments;
        -ms-box-align: @arguments;
         -o-box-align: @arguments;
            box-align: @arguments;
}
.box-flex(@arguments) {
    .display-box();
    -webkit-box-flex: @arguments;
       -moz-box-flex: @arguments;
        -ms-box-flex: @arguments;
         -o-box-flex: @arguments;
            box-flex: @arguments;
}
.box-sizing(@arguments) {
    -webkit-box-sizing: @arguments;
       -moz-box-sizing: @arguments;
            box-sizing: @arguments;
}

//============================================================
//
// Easing
//
// Thanks to Robert Penner for his sterling work on easing,
// and to Matthew Lein for converting these functions into
// approximated cubic-bezier functions. Respect.
//
// @see http://robertpenner.com/
// @see http://matthewlein.com/ceaser/
//
//============================================================

// Cubic
@easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190);
@easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000);
@easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000);

// Circ
@easeInCirc      :  cubic-bezier(0.600, 0.040, 0.980, 0.335);
@easeOutCirc     :  cubic-bezier(0.075, 0.820, 0.165, 1.000);
@easeInOutCirc   :  cubic-bezier(0.785, 0.135, 0.150, 0.860);

// Expo
@easeInExpo      :  cubic-bezier(0.950, 0.050, 0.795, 0.035);
@easeOutExpo     :  cubic-bezier(0.190, 1.000, 0.220, 1.000);
@easeInOutExpo   :  cubic-bezier(1.000, 0.000, 0.000, 1.000);

// Quad
@easeInQuad      :  cubic-bezier(0.550, 0.085, 0.680, 0.530);
@easeOutQuad     :  cubic-bezier(0.250, 0.460, 0.450, 0.940);
@easeInOutQuad   :  cubic-bezier(0.455, 0.030, 0.515, 0.955);

// Quart
@easeInQuart     :  cubic-bezier(0.895, 0.030, 0.685, 0.220);
@easeOutQuart    :  cubic-bezier(0.165, 0.840, 0.440, 1.000);
@easeInOutQuart  :  cubic-bezier(0.770, 0.000, 0.175, 1.000);

// Quint
@easeInQuint     :  cubic-bezier(0.755, 0.050, 0.855, 0.060);
@easeOutQuint    :  cubic-bezier(0.230, 1.000, 0.320, 1.000);
@easeInOutQuint  :  cubic-bezier(0.860, 0.000, 0.070, 1.000);

// Sine
@easeInSine      :  cubic-bezier(0.470, 0.000, 0.745, 0.715);
@easeOutSine     :  cubic-bezier(0.390, 0.575, 0.565, 1.000);
@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);

// Back
@easeInBack      :  cubic-bezier(0.600, -0.280, 0.735, 0.045);
@easeOutBack     :  cubic-bezier(0.175,  0.885, 0.320, 1.275);
@easeInOutBack   :  cubic-bezier(0.680, -0.550, 0.265, 1.550);