_mixins.less

// Mostly borrowed from Twitter Bootstrap

// Sizing shortcuts
.size(@width : 5px, @height : 5px) {
    height : @height;
    width  : @width;
}
.square(@size : 5px) {
    .size(@size, @size);
}

// Input placeholder text
.placeholder-color(@color : #bbb) {
    :-moz-placeholder {
        color : @color;
    }
    ::-webkit-input-placeholder {
        color : @color;
    }
}

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

// Drop shadows
.box-shadow(@shadow : '0 1px 3px rgba(0,0,0,.25)') {
    -webkit-box-shadow : @shadow;
    -moz-box-shadow    : @shadow;
    box-shadow         : @shadow;
}

// Transitions
.transition(@transition) {
    -webkit-transition : @arguments;
    -moz-transition    : @arguments;
    transition         : @arguments;
}

// background size
.background-size(@width : auto, @height : auto) {
    -moz-background-size    : @arguments;
    -ms-background-size     : @arguments;
    -webkit-background-size : @arguments;
    background-size         : @arguments;
}

.border-radius-tl(@width : 5px, @height : 5px) {
    border-top-left-radius         : @width @height;
    -webkit-border-top-left-radius : @width @height;
    -moz-top-left-radius           : @width @height;
}
.border-radius-tr(@width : 5px, @height : 5px) {
    border-top-right-radius         : @width @height;
    -webkit-border-top-right-radius : @width @height;
    -moz-top-right-radius           : @width @height;
}
.border-radius-bl(@width : 5px, @height : 5px) {
    border-bottom-left-radius         : @width @height;
    -webkit-border-bottom-left-radius : @width @height;
    -moz-bottom-left-radius           : @width @height;
}
.border-radius-br(@width : 5px, @height : 5px) {
    border-bottom-right-radius         : @width @height;
    -webkit-border-bottom-right-radius : @width @height;
    -moz-bottom-right-radius           : @width @height;
}

#gradient {
    .horizontal(@startColor : #555, @endColor : #333) {
        background-color  : @endColor;
        background-repeat : repeat-x;
        background-image  : -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); /* Konqueror */
        background-image  : -moz-linear-gradient(left, @startColor, @endColor); /* FF 3.6+ */
        background-image  : -ms-linear-gradient(left, @startColor, @endColor); /* IE10 */
        background-image  : -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @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(left, @startColor, @endColor); /* the standard */
    }
    .vertical(@startColor : #555, @endColor : #333) {
        background-color  : @endColor;
        background-repeat : repeat-x;
        background-image  : -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
        background-image  : -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
        background-image  : -ms-linear-gradient(@startColor, @endColor); /* IE10 */
        background-image  : -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
        background-image  : -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
        background-image  : -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
        background-image  : linear-gradient(@startColor, @endColor); /* the standard */
    }
    .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  : -ms-linear-gradient(@deg, @startColor, @endColor); /* IE10 */
        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); /* the standard */
    }
    .vertical-three-colors(@startColor : #00b3ee, @midColor : #7a43b6, @colorStop : 0.5, @endColor : #c3325f) {
        background-color  : @endColor;
        background-repeat : no-repeat;
        background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
        background-image  : -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
        background-image  : -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
    }
}

// Transformations!
.origin(@x : 0, @y : 0) {
    -webkit-transform-origin : @x @y;
    -moz-transform-origin    : @x @y;
    -ms-transform-origin     : @x @y;
    -o-transform-origin      : @x @y;
}
.rotate(@degrees : 90deg, @position : 1) {
    -webkit-transform : rotate(@degrees);
    -moz-transform    : rotate(@degrees);
    -ms-transform     : rotate(@degrees);
    -o-transform      : rotate(@degrees);
    filter            : progid:DXImageTransform.Microsoft.BasicImage(rotation = @position);
    transform         : rotate(@degrees);
}

// Image replacements
.ir(@display : block) {
    display     : @display;
    overflow    : hidden;
    text-align  : left;
    text-indent : -999em;
}

// typography
.uppercase() {
    text-transform : uppercase;
}

.lowercase() {
    text-transform : lowercase;
}

.capitalize() {
    text-transform : capitalize;
}

.no-transform() {
    text-transform : none;
}

.bold() {
    font-weight : 700;
}

.normal() {
    font-weight : normal;
}

.italic() {
    font-style : italic;
}

.no-italic() {
    font-style : normal;
}

.left() {
    text-align : left;
}

.center {
    text-align : center;
}

.right {
    text-align : right;
}
//
// Mixins
// --------------------------------------------------

// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
    *zoom : 1;
    &:before,
    &:after {
        display     : table;
        content     : ""; // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height : 0;
    }
    &:after {
        clear : both;
    }
}

// Webkit-style focus
// ------------------
.tab-focus() { // Default
    outline        : thin dotted #333; // Webkit
    outline        : 5px auto -webkit-focus-ring-color;
    outline-offset : -2px;
}

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

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

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

// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text {
    font             : 0/0 a;
    color            : transparent;
    text-shadow      : none;
    background-color : transparent;
    border           : 0;
}

// FONTS
// --------------------------------------------------

#font {
    #family {
        .serif() {
            font-family : @serifFontFamily;
        }
        .sans-serif() {
            font-family : @sansFontFamily;
        }
        .monospace() {
            font-family : @monoFontFamily;
        }
    }
    .shorthand(@size : @baseFontSize, @weight : normal, @lineHeight : @baseLineHeight) {
        font-size   : @size;
        font-weight : @weight;
        line-height : @lineHeight;
    }
    .serif(@size : @baseFontSize, @weight : normal, @lineHeight : @baseLineHeight) {
        #font > #family > .serif;
        #font > .shorthand(@size, @weight, @lineHeight);
    }
    .sans-serif(@size : @baseFontSize, @weight : normal, @lineHeight : @baseLineHeight) {
        #font > #family > .sans-serif;
        #font > .shorthand(@size, @weight, @lineHeight);
    }
    .monospace(@size : @baseFontSize, @weight : normal, @lineHeight : @baseLineHeight) {
        #font > #family > .monospace;
        #font > .shorthand(@size, @weight, @lineHeight);
    }
}

// FORMS
// --------------------------------------------------

// Block level inputs
.input-block-level {
    display    : block;
    width      : 100%;
    min-height : 30px; // Make inputs at least the height of their button counterpart
    .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

// Mixin for form field states
.formFieldState(@textColor : #555, @borderColor : #ccc, @backgroundColor : #f5f5f5) { // Set the text color
    > label,
    .help-block,
    .help-inline {
        color : @textColor;
    }
// Style inputs accordingly
    .checkbox,
    .radio,
    input,
    select,
    textarea {
        color : @textColor;
    }
    input,
    select,
    textarea {
        border-color : @borderColor;
        .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
        &:focus {
            border-color : darken(@borderColor, 10%);
            .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
        }
    }
// Give a small background color for input-prepend/-append
    .input-prepend .add-on,
    .input-append .add-on {
        color            : @textColor;
        background-color : @backgroundColor;
        border-color     : @textColor;
    }
}

// CSS3 PROPERTIES
// --------------------------------------------------

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

// Single Corner Border Radius
.border-top-left-radius(@radius) {
    -webkit-border-top-left-radius : @radius;
    -moz-border-radius-topleft     : @radius;
    border-top-left-radius         : @radius;
}
.border-top-right-radius(@radius) {
    -webkit-border-top-right-radius : @radius;
    -moz-border-radius-topright     : @radius;
    border-top-right-radius         : @radius;
}
.border-bottom-right-radius(@radius) {
    -webkit-border-bottom-right-radius : @radius;
    -moz-border-radius-bottomright     : @radius;
    border-bottom-right-radius         : @radius;
}
.border-bottom-left-radius(@radius) {
    -webkit-border-bottom-left-radius : @radius;
    -moz-border-radius-bottomleft     : @radius;
    border-bottom-left-radius         : @radius;
}

// Single Side Border Radius
.border-top-radius(@radius) {
    .border-top-right-radius(@radius);
    .border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
    .border-top-right-radius(@radius);
    .border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
    .border-bottom-right-radius(@radius);
    .border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
    .border-top-left-radius(@radius);
    .border-bottom-left-radius(@radius);
}

// Drop shadows
.box-shadow(@shadowA, @shadowB:X, ...) {
// Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
    @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-box-shadow : @props;
    -moz-box-shadow    : @props;
    box-shadow         : @props;
}

// Transitions
.transition(@transition) {
    -webkit-transition : @transition;
    -moz-transition    : @transition;
    -o-transition      : @transition;
    transition         : @transition;
}
.transition-delay(@transition-delay) {
    -webkit-transition-delay : @transition-delay;
    -moz-transition-delay    : @transition-delay;
    -o-transition-delay      : @transition-delay;
    transition-delay         : @transition-delay;
}

// Transformations
.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); // See https://github.com/twitter/bootstrap/issues/4885
    -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);
    -o-transform      : translate3d(@x, @y, @z);
    transform         : translate3d(@x, @y, @z);
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility) {
    -webkit-backface-visibility : @visibility;
    -moz-backface-visibility    : @visibility;
    backface-visibility         : @visibility;
}

// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
    -webkit-background-clip : @clip;
    -moz-background-clip    : @clip;
    background-clip         : @clip;
}

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

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

// User select
// For selecting text on the page
.user-select(@select) {
    -webkit-user-select : @select;
    -moz-user-select    : @select;
    -ms-user-select     : @select;
    -o-user-select      : @select;
    user-select         : @select;
}

// Resize anything
.resizable(@direction) {
    resize   : @direction; // Options: horizontal, vertical, both
    overflow : auto; // Safari fix
}

// Optional hyphenation
.hyphens(@mode : auto) {
    word-wrap       : break-word;
    -webkit-hyphens : @mode;
    -moz-hyphens    : @mode;
    -ms-hyphens     : @mode;
    -o-hyphens      : @mode;
    hyphens         : @mode;
}

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

// BACKGROUNDS
// --------------------------------------------------

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
    .background(@color : @white, @alpha : 1) {
        background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
    }
    .border(@color : @white, @alpha : 1) {
        border-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
        .background-clip(padding-box);
    }
}

// Gradient Bar Colors for buttons and alerts
    .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
    color              : @textColor;
    text-shadow        : @textShadow;
    #gradient > .vertical(@primaryColor, @secondaryColor);
    border-color       : @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
    border-color       : rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) fadein(rgba(0, 0, 0, .1), 15%);
}

// Gradients
#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);
    }
}