Set of useful LESS mixins

mixin

/*
 * Helper mixins
*/

#gradient {
    .horizontal(@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(@startColor : #555, @endColor : #333) {
        background-color  : mix(@startColor, @endColor, 60%);
        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
    }
    .directional(@startColor : #555, @endColor : #333, @deg : 45deg) {
        background-color  : @endColor;
        background-repeat : repeat-x;
        background-image  : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
        background-image  : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background-image  : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
        background-image  : linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
    }
    .vertical-three-colors(@startColor : #00b3ee, @midColor : #7a43b6, @colorStop : 50%, @endColor : #c3325f) {
        background-color  : mix(@midColor, @endColor, 80%);
        background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
        background-image  : -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
        background-image  : -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
        background-image  : -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
        background-image  : linear-gradient(@startColor, @midColor @colorStop, @endColor);
        background-repeat : no-repeat;
        filter            : e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor), argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
    }
    .radial(@innerColor : #555, @outerColor : #333) {
        background-color  : @outerColor;
        background-image  : -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
        background-image  : -webkit-radial-gradient(circle, @innerColor, @outerColor);
        background-image  : -moz-radial-gradient(circle, @innerColor, @outerColor);
        background-image  : -o-radial-gradient(circle, @innerColor, @outerColor);
        background-repeat : no-repeat;
    }
    .striped(@color : #555, @angle : 45deg) {
        background-color : @color;
        background-image : -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
        background-image : -webkit-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image : -moz-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image : -o-linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image : linear-gradient(@angle, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
}

// Center-align a block level element
.center-block() {
    display      : block;
    margin-left  : auto;
    margin-right : auto;
}

// IE7 inline-block
.ie7-inline-block() {
    *display : inline; /* IE7 inline-block hack */
    *zoom    : 1;
}

// Border Radius
.border-radius(@radius) {
    -webkit-border-radius : @radius;
    -moz-border-radius    : @radius;
    border-radius         : @radius;
}

// Drop shadows
.box-shadow-inset(@inset : inset, @x : 0, @y : 0, @blur : 2px, @color : #000) {
    -webkit-box-shadow : @arguments;
    -moz-box-shadow    : @arguments;
    box-shadow         : @arguments;
}

.box-shadow(@x : 0, @y : 0, @blur : 2px, @color : #000) {
    -webkit-box-shadow : @arguments;
    -moz-box-shadow    : @arguments;
    box-shadow         : @arguments;
}

// Opacity
.opacity(@opacity) {
    opacity : @opacity / 100;
    filter  : ~"alpha(opacity=@{opacity})";
}

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

// Placeholder text
// -------------------------
.placeholder(@color : @placeholderText) {
    &:-moz-placeholder {
        color : @color;
    }
    &:-ms-input-placeholder {
        color : @color;
    }
    &::-webkit-input-placeholder {
        color : @color;
    }
}

.font(@font-family : @base-font-family,
@font-size : @base-font-size,
@font-color : @base-color) {
    font-family : @font-family;
    font-size   : @font-size;
    color       : @font-color;
}

// make text unselectable 
.unselectable() {
    -webkit-touch-callout : none;
    -webkit-user-select   : none;
    -khtml-user-select    : none;
    -moz-user-select      : none;
    -ms-user-select       : none;
    user-select           : none;
}