/**
* Snippets of reusable CSS to develop faster and keep code readable from KISSY and Bootstrap.
*
* @author yiminghe@gmail.com
*/


.ks-clear_(){
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}

.ks-hidden_(){
    display: none;
}

.ks-invisible_(){
    visibility: hidden;
}

.ks-shown_(){
    display: block;
}

.ks-visible_(){
    visibility: visible;
}

.ie-inline-block(){
    *display: inline;
    *zoom: 1;
}

.ks-inline-block_(){
    display: inline-block;
    .ie-inline-block();
}

// New image replacement
// -------------------------
// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.ks-hide-text_() {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

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

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

// IE67 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
.ie67-restore-left-whitespace(){
    *margin-left: .3em;

    &:first-child {
        *margin-left: 0;
    }
}

.ie67-restore-right-whitespace(){
    *margin-right: .3em;

    &:last-child {
        *margin-left: 0;
    }
}

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

// 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: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

// 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: 0, @y: 0){
    -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: 0, @y: 0){
    -webkit-transform: skew(@x, @y);
    -moz-transform: skew(@x, @y);
    -ms-transform: skew(@x, @y);
    -o-transform: skew(@x, @y);
    transform: skew(@x, @y);
}

.translate3d(@x: 0, @y: 0, @z: 0){
    -webkit-transform: translate(@x, @y, @z);
    -moz-transform: translate(@x, @y, @z);
    -ms-transform: translate(@x, @y, @z);
    -o-transform: translate(@x, @y, @z);
    transform: translate(@x, @y, @z);
}

// 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;
    -ms-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;
    -o-user-select: @select;
    user-select: @select;
}
// Opacity
.opacity(@opacity: 100){
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
    // ie67 need to hasLayout
    *zoom:1;
}

// Reset filters for IE
.reset-filter(){
    filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

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

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor){
    #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: -ms-linear-gradient(left, @startColor, @endColor); // IE10
        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(left, @startColor, @endColor); // Le standard
        background-repeat: repeat-x;
        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=1)";
    }

    .vertical(@startColor: #555, @endColor: #333) {
        background-color: mix(@startColor, @endColor, 60%);
        background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
        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(top, @startColor, @endColor); // The standard
        background-repeat: repeat-x;
        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=0)";
    }

    .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: 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: -ms-linear-gradient(@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:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=0)"; // 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: -ms-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: -ms-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);
    }
}

// Grid System
// -----------

// Table columns
.tableColumns(@columnSpan: 1) {
    float: none; // undo default grid column styles
    width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
    margin-left: 0; // undo default grid column styles
}

// The Grid
#grid {

    .core (@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~".span@{index}") {
                _float: left;
                // ie6 bug...
                _display: inline;
                _margin-left: @gridGutterWidth;
                .span(@index);
            }
            .spanX(@index - 1);
        }

        .spanX (0) {}

        .offsetX (@index) when (@index > 0) {
            (~".offset@{index}") { .offset(@index); }
            .offsetX(@index - 1);
        }

        .offsetX (0) {}

        .offset (@columns) {
            margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
        }

        .span (@columns) {
            width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
        }

        .row {
            margin-left: @gridGutterWidth * -1;
            .ks-clear_();
        }

        [class*="span"] {
            float: left;
            margin-left: @gridGutterWidth;
        }

        // generate .spanX and .offsetX
        .spanX (@gridColumns);

        .offsetX (@gridColumns);

    }

    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~"> .span@{index}") { .span(@index); }
            (~" .span@{index}") {
                .spanIE6(@index);
                _float: left;
                // ie6 bug...
                _display: inline;
                _margin-left: @fluidGridGutterWidth;
            }
            .spanX(@index - 1);
        }

        .spanX (0) {}

        .span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
        }

        .spanIE6 (@columns) {
            _width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
        }

        .row-fluid {

            width: 100%;

            .ks-clear_();

            > [class*="span"] {
                  float: left;
                  margin-left: @fluidGridGutterWidth;
              }

            > [class*="span"]:first-child {
                  margin-left: 0;
              }

            // generate .spanX
            .spanX (@gridColumns);

            .span-first {
                _margin-left: 0;
            }
        }

     }


    .input(@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .span(@columns) {
            // 10: border: 1px solid red;padding: 4px;
            width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
        }

        input,
        textarea,
        .uneditable-input {
            margin-left: 0; // override margin-left from core grid system
        }

    // generate .spanX
        .spanX (@gridColumns);

    }
}