// 浮动
.fl (@type:left) {
    float: @type;
}

// 清除浮动
.clear-float () {
    display: block;
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}


// 背景函数
.background (@image-url, @repeat-type:no-repeat, @s-x:0, @s-y:0, @b-color:transparent) {
    @url: ~"@{image-url}";
    @is-url-exp: ~`/^url\([^()]+\)$/i.test("@{url}") ? 'true' : 'false'`;

    .background-image(@is-url-exp) when not (@is-url-exp) {
        background-image: url(@url);
    }
    .background-image(@is-url-exp) when (@is-url-exp) {
        background-image: @url;
    }
    .background-image(@is-url-exp);

    background-repeat: @repeat-type;
    background-position: @s-x @s-y;
    background-color: @b-color;
}

 
// 无图标线性渐变背景
// @direction 渐变方向
// @from-color 起始颜色
// @to-color 终止颜色
// @b-color 背景色
.linear-gradient-background (
    @direction:top, @from-color, @to-color, @b-color:transparent
) {
    @top: 0% 0%, 0% 100%;
    @left: 0% 0%, 100% 0%;
    @bottom: 0% 100%, 0% 0%;
    @right: 100% 0%, 0% 0%;

    background: @b-color;

    // Safari 4-5, Chrome 1-9
    background: 
        -webkit-gradient(linear, @@direction, from(@from-color), to(@to-color));
  
    // Safari 5.1, Chrome 10+
    background:
        -webkit-linear-gradient(@direction, @from-color, @to-color);
  
    // Firefox 3.6+
    background:
        -moz-linear-gradient(@direction, @from-color, @to-color);
  
    // IE 10
    background:
        -ms-linear-gradient(@direction, @from-color, @to-color);
  
    // Opera 11.10+
    background:
        -o-linear-gradient(@direction, @from-color, @to-color);
}

 
// 带图标线性渐变背景
// @direction 渐变方向
// @from-color 起始颜色
// @to-color 终止颜色
// @image-url 背景前的第二背景图
// @repeat-type 重叠方式 
// @s-x x轴偏移
// @s-y y轴偏移 
// @b-color 背景色
.linear-gradient-background-with-image (
    @direction:top, @from-color, @to-color,
    @image-url:"", 
    @s-x:0, @s-y:0, 
    @b-color:transparent,
    @repeat-type:no-repeat
) {
    @top: 0% 0%, 0% 100%;
    @left: 0% 0%, 100% 0%;
    @bottom: 0% 100%, 0% 0%;
    @right: 100% 0%, 0% 0%;

    @url: ~"@{image-url}";
    @is-url-exp: ~`/^url\([^()]+\)$/i.test("@{url}") ? 'true' : 'false'`;

    .background(@is-url-exp) when not (@is-url-exp) {
        background: url(@url) @repeat-type scroll @s-x @s-y @b-color;
        // Safari 4-5, Chrome 1-9
        background: 
            url(@url),
            -webkit-gradient(linear, @@direction, from(@from-color), to(@to-color));
        // Safari 5.1, Chrome 10+
        background:
            url(@url),
            -webkit-linear-gradient(@direction, @from-color, @to-color);
        // Firefox 3.6+
        background:
            url(@url),
            -moz-linear-gradient(@direction, @from-color, @to-color);
        // IE 10
        background:
            url(@url),
            -ms-linear-gradient(@direction, @from-color, @to-color);
        // Opera 11.10+
        background:
            url(@url),
            -o-linear-gradient(@direction, @from-color, @to-color);
        background-repeat: @repeat-type, no-repeat;
        background-position: @s-x @s-y, 0 0;
    }

    .background(@is-url-exp) when (@is-url-exp) {
        background: 
            @url @repeat-type scroll @s-x @s-y @b-color;
        // Safari 4-5, Chrome 1-9
        background: 
            @url,
            -webkit-gradient(linear, @@direction, from(@from-color), to(@to-color));
        // Safari 5.1, Chrome 10+
        background:
            @url,
            -webkit-linear-gradient(@direction, @from-color, @to-color);
        // Firefox 3.6+
        background:
            @url,
            -moz-linear-gradient(@direction, @from-color, @to-color);
        // IE 10
        background:
            @url,
            -ms-linear-gradient(@direction, @from-color, @to-color);
        // Opera 11.10+
        background:
            @url,
            -o-linear-gradient(@direction, @from-color, @to-color);
            
        background-repeat: @repeat-type, no-repeat;
        background-position: @s-x @s-y, 0 0;
    }

    .background(@is-url-exp);
}

// CSS3 相关

 
// 阴影
// @x 横轴偏移
// @y 纵轴偏移
// @blur 阴影偏移
// @color 阴影颜色
.box-shadow (...) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}



// 盒模型计算模式
// @type border-box | content-box
.box-sizing (@type:border-box) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    -ms-box-sizing: @type;
    box-sizing: @type;
}


// 圆角
.border-radius (...) {      
    -moz-border-radius: @arguments;
    -webkit-border-radius: @arguments;
    border-radius: @arguments;
}



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

// 解决input输入框在IE7下 
// 显示height（width）= 设置height（width） + 上下（左右）padding和 + 上下（左右）border和
// 的不一致



// 设置尺寸为整体尺寸
// @height 设置高度
// @width 设置宽度
// @tb-padding 上下padding和
// @lr-padding 左右padding和
// @tb-border 上下border和
// @lr-border 左右border和
// @TODO 是否将line-height置为可配置？
.input-outter-size (@height, @width, @tb-padding, @lr-padding, @tb-border, @lr-border) {
    height: @height;
    line-height: 1;
    width: @width;
    *height: (@height - @tb-padding - @tb-border);
    *line-height: (@height - @tb-padding - @tb-border);
    *width: (@width - @lr-padding - @lr-border);
    .box-sizing(border-box);
}

.input-outter-size-height (@height, @tb-padding, @tb-border) {
    height: @height;
    line-height: 1;
    *height: (@height - @tb-padding - @tb-border);
    *line-height: (@height - @tb-padding - @tb-border);
    .box-sizing(border-box);
}


// 设置尺寸为内部显示尺寸
// @height 设置高度
// @width 设置宽度
.input-inner-size (@height, @width) {
    height: @height;
    line-height: @height;
    width: @width;
    .box-sizing(content-box);
}


// 提供inline-block的兼容显示效果
.inline-block () {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

// 隐藏元素内文字
.indent-text () {
    text-indent: -500%;
   // IE6,7 下使用text-indent会导致内容消失，因此做下hack
    *text-indent: 0;
    *font-size: 0;
    *line-height: 0;
}

.interactive-cursor () {
    cursor: pointer;
}

.ellipse-overflow () {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

// 重设列表的样式
.reset-list () {
    padding: 0;
    margin: 0;
    list-style: none;
}

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

// 文字选择
.user-select (@type:none) {
    // 火狐
    -moz-user-select: @type;
    // webkit浏览器
    -webkit-user-select: @type;
    // IE10
    -ms-user-select: @type;
    // 早期浏览器
    -khtml-user-select: @type;
    user-select: @type;
}
