toolkit.less

/*
    LESS CSS Toolkit

    A collection of re-usable LESS CSS Mixins

    https://github.com/danieltott/Less-CSS-Toolkit

    Created by [Dan Ott](http://dtott.com)

    Maintained and improved by Dan Ott and [Bridget Stewart](http://sharksandcupcakes.com)

*/

// http://www.w3.org/TR/css3-animations

.animation(@name, @duration, @timing, @delay: 0, @iterations: infinite, @direction: normal) {
    @vars: @name @duration @timing @delay @iterations @direction;
    -moz-animation: @vars;
    -webkit-animation: @vars;
    -ms-animation: @vars;
    -o-animation: @vars;
    animation: @vars;
}

// http://www.w3.org/TR/css3-background/#the-background-clip

.background-clip(@clip) {
    -moz-background-clip: @clip;
    -webkit-background-clip: @clip;
    background-clip: @clip;
}

// http://www.w3.org/TR/css3-background/#the-background-origin

.background-origin(@origin) {
    -moz-origin-size: @origin;
     -webkit-origin-size: @origin;
     -o-origin-size: @origin;
     origin-size: @origin;
}

// http://www.w3.org/TR/css3-background/#the-background-size

.background-size(@size) {
    -moz-background-size: @size;
     -webkit-background-size: @size;
     -o-background-size: @size;
     background-size: @size;
}

// http://www.w3.org/TR/css3-background/#border-images

.border-image(@img, @number, @repeat: stretch) {
    @val: @img @number @repeat;
    -moz-border-image: @val;
    -webkit-border-image: @val;
    -ms-border-image: @val;
    -o-border-image: @val;
    border-image: @val;
}

// http://www.w3.org/TR/css3-background/#the-border-radius
// Example of complex border-radius for interesting shapes:
// https://www.dropbox.com/s/6qd49bganv8bjas/funky-border-radius.png

.border-radius(@radius) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

// http://www.w3.org/TR/css3-background/#box-shadow
// Example for multiple shadows:
// https://www.dropbox.com/s/mjo3x82ssikl62a/multiple-box-shadows.png

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.box-sizing(@sizing) {
    -moz-box-sizing: @sizing;
    -webkit-box-sizing: @sizing;
    box-sizing: @sizing;
}

.columns(@columnValue, @gap: normal, @rule: none) {

    -moz-columns: @columnValue;
    -moz-column-gap:@gap;
    -moz-column-rule: @rule;

    -webkit-columns: @columnValue;
    -webkit-column-gap:@gap;
    -webkit-column-rule: @rule;

    columns: @columnValue;
    column-gap:@gap;
    column-rule: @rule;
}

.clearfix() {
// http://nicolasgallagher.com/micro-clearfix-hack/
    *zoom: 1; // for oldIE

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after{
        clear: both;
    }
}

.linear-gradient(@startcolor, @stopcolor, @angle) when (isnumber(@angle)) {
    .linear-gradient(@startcolor, @stopcolor, @angle, mix(@startcolor, @stopcolor, 60%));
}

.linear-gradient(@startcolor, @stopcolor, @angle, @backgroundcolor) when (isnumber(@angle)) {
    background-color: @backgroundcolor;
    background-image: -webkit-linear-gradient(450 - @angle, @startcolor, @stopcolor);
    background-image: -o-linear-gradient(450 - @angle, @startcolor, @stopcolor);
    background-image: -moz-linear-gradient(450 - @angle, @startcolor, @stopcolor);
    background-image: linear-gradient(@angle, @startcolor, @stopcolor);
}


.linear-gradient(@startcolor, @stopcolor) {
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 180deg);
}

.linear-gradient(@startcolor, @stopcolor, top) {
    .linear-gradient(@startcolor, @stopcolor);
}

.linear-gradient(@startcolor, @stopcolor, top, @backgroundcolor) {
    .linear-gradient(@startcolor, @stopcolor, @backgroundcolor);
}

.linear-gradient(@startcolor, @stopcolor, left) {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 90deg);
}

.linear-gradient(@startcolor, @stopcolor, left, @backgroundcolor) {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 90deg, @backgroundcolor);
}

.linear-gradient(@startcolor, @stopcolor, top-diagonal) {
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 135deg);
}

.linear-gradient(@startcolor, @stopcolor, top-diagonal, @backgroundcolor) {
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 135deg, @backgroundcolor);
}

.linear-gradient(@startcolor, @stopcolor, bottom-diagonal) {
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 45deg);
}

.linear-gradient(@startcolor, @stopcolor, bottom-diagonal, @backgroundcolor) {
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 45deg, @backgroundcolor);
}

.linear-gradient(@startcolor, @stopcolor, @backgroundcolor) when (iscolor(@backgroundcolor)) {
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, @startcolor), color-stop(1, @stopcolor));//for old webkit syntax
    .linear-gradient(@startcolor, @stopcolor, 180deg, @backgroundcolor);
}


// Common button gradient style: visual example of output: http://codepen.io/bridgestew/details/lfydn#pen-details-tab
.button-gradient(@startcolor, @midcolor1, @midcolor2, @stopcolor) {
    background: -webkit-gradient(linear, center top, color-stop(0%, @startcolor), color-stop(50%, @midcolor1), color-stop(51%, @midcolor2), color-stop(100%, @stopcolor));
    background: -webkit-linear-gradient(top, @startcolor 0%, @midcolor1 50%, @midcolor2 51%, @stopcolor 100%);
    background: -o-linear-gradient(top, @startcolor 0%, @midcolor1 50%, @midcolor2 51%, @stopcolor 100%);
    background: -moz-linear-gradient(top, @startcolor 0%, @midcolor1 50%, @midcolor2 51%, @stopcolor 100%);
    background: -ms-linear-gradient(top, @startcolor 0%, @midcolor1 50%, @midcolor2 51%, @stopcolor 100%);
    background: linear-gradient(to bottom, @startcolor 0%, @midcolor1 50%, @midcolor2 51%, @stopcolor 100%);
}

.size(@width,@height) {
    width: @width;
    height: @height;
}

// Image Replacement (2012 flavor)
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.image-replacement(@width, @height, @img) {
    background: url(@img) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    .size(@width, @height);
}

.transform(@transform) {
    -moz-transform: @transform;
    -webkit-transform: @transform;
    -ms-transform: @transform;
    transform: @transform;
}

.transform-origin(@origin) {
    -moz-transform-origin: @origin;
    -webkit-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    -ms-transition: @transition;
    transition: @transition;
}