/*
    引數
*/

// 陰影色
@shadowColor: rgba(0,0,0,.20);
// 文字框提示字顏色
@placeholderColor: #97a8be;

/*
    函式
*/

//---垂直居中佈局
.verticalLayout(@left: auto, @right: auto, @top: 0, @bottom: 0, @position: absolute) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    margin: auto;
}

//---完全居中佈局
.completeCenter(@left: 0, @right: 0, @top: 0, @bottom: 0, @position: absolute) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    margin: auto;
}

//---嚴格盒模型
.boxSizing (@fn:1) when (@fn = 1) { 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.boxSizing (@fn:1) when (@fn > 1) { 
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

//---盒子陰影顏色
.boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=false){
    -webkit-box-shadow: @x @y @range @color;
    -moz-box-shadow: @x @y @range @color;
    box-shadow: @x @y @range @color;
}
.boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=true){
    -webkit-box-shadow: inset @x @y @range @color;
    -moz-box-shadow: inset @x @y @range @color;
    box-shadow: inset @x @y @range @color;
}

//---透明度
.opacity(@alpha){
    @newAlpha: @alpha*100;
    filter: alpha(opacity= @newAlpha);  
    -moz-opacity:@alpha;  
    -khtml-opacity: @alpha;  
    opacity: @alpha;  
}

//---單行/多行文字溢位省略
.ellipsis(@line:1) when (@line=1){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis(@line:1) when (@line>1){
    display: -webkit-box!important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
}

//---圓角(全方向)
.borderRadiusAll(@pixel:50%){
    -webkit-border-radius: @pixel;
    border-radius: @pixel;
}
.borderRadius(@leftTop:0,@rightTop:0,@rightBottom:0,@leftBottom:0){
    -webkit-border-radius: @arguments;
    border-radius: @arguments;
}

//---輸入框無輸入 提示
.placeholder(@color:@placeholderColor,@pixel:14px,@lh:1.4){
    &::-webkit-input-placeholder{
        color: @color;
    }
    &:-moz-placeholder{
        color: @color;
    }
    &::-moz-placeholder{
        color: @color;
    }
    &:-ms-input-placeholder{
        color: @color;
    }
    font-size: @pixel;
    line-height: @lh;
    font-family: "Microsoft Yahei UI", "Microsoft Yahei", "微軟雅黑", "Segoe UI", "Tahoma", "SimSun";
    
}

//---過渡
.transition(@property: all, @duration: 0s, @timing-function: ease, @delay: 0s){
    -webkit-transition: @property @duration @timing-function @delay;
    -moz-transition: @property @duration @timing-function @delay;
    -o-transition: @property @duration @timing-function @delay;
    transition: @property @duration @timing-function @delay;
}
//---變形(自行補充)
.transformTS(@translate3d,@scaleY){
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -o-transform: @arguments;
    transform: @arguments;
}
//---動畫
.animationSingle(@name,@duration,@timingFn:linear,@delay:0s,@count:infinite){
    -webkit-animation: @name @duration @delay @timingFn @count;
    -moz-animation: @name @duration @delay @timingFn @count;
    -o-animation: @name @duration @delay @timingFn @count;
    animation: @name @duration @delay @timingFn @count;
}

//---變形中心
.transformOrigin(@x:50%, @y:50% , @z:0){
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    -o-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

//---旋轉
.rotate(@angle:0deg){
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
    -o-transform: rotate(@angle);
    transform: rotate(@angle);
}

//---旋轉自定義
.rotateCustom(){
    -webkit-transform: @arguments;
    transform: @arguments;
}

//---縮放
.scale(@zoom:0.8){
    -webkit-transform: scale(@zoom);
    -moz-transform: scale(@zoom);
    -o-transform: scale(@zoom);
    transform: scale(@zoom);
}

//---橫向縮放
.scaleX(@zoom:0.8){
    -webkit-transform: scaleX(@zoom);
    -moz-transform: scaleX(@zoom);
    -o-transform: scaleX(@zoom);
    transform: scaleX(@zoom);
}

//---縱向縮放
.scaleY(@zoom:0.8){
    -webkit-transform: scaleY(@zoom);
    -moz-transform: scaleY(@zoom);
    -o-transform: scaleY(@zoom);
    transform: scaleY(@zoom);
}

//---3D轉換
.transformStyle(@theStyle:preserve-3d){
    -webkit-transform-style: @theStyle;
    transform-style: @theStyle;
}

//---3d偏移
.translate3d(@x:0,@y:0,@z:0){
    -webkit-transform: translate3d(@x,@y,@z);
    -moz-transform: translate3d(@x,@y,@z);
    -o-transform: translate3d(@x,@y,@z);
    transform: translate3d(@x,@y,@z);
}

//---過濾
/**
  * 高斯模糊 blur(px)   0
  * 亮度 brightness(%)  1
  * 對比度 contrast(%)  1
  * 陰影 drop-shadow(h-shadow v-shadow blur spread color)
  * 灰度強化 grayscale(%)  0
  * 色相旋轉 hue-rotate(deg)  0
  * 影象反轉 invert(%)  0
  * 透明度 opacity(%) 1
  * 飽和度 saturate(%) 1
  * 褐色強化 sepia(%) 0
  */
.boxFilterDemo(){
    -webkit-filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
    filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
}
//--自定義過濾
.boxFilter(){
    -webkit-filter: @arguments;
    filter: @arguments;
}

//---盒子陰影顏色(自定義文字)
.boxShadowByText(@insetShadow,@shadow){
    -webkit-box-shadow: @insetShadow , @shadow;
    -moz-box-shadow: @insetShadow , @shadow;
    box-shadow: @insetShadow , @shadow;
}

//---元素的顯示隱藏
/**
  * visible 預設值。元素是可見的。
  * hidden  元素是不可見的。
  * collapse    當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
  */
.visibility(@value:visible){
    visibility: @visible;
}

//---線性漸變
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -webkit-linear-gradient(left top, bColor, eColor);
    background: -o-linear-gradient(bottom right, bColor, eColor);
    background: -moz-linear-gradient(bottom right, bColor, eColor);
    background: linear-gradient(to bottom right, bColor, eColor);
}
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -moz-linear-gradient(top, bColor, eColor);
    background: -o-linear-gradient(top,bColor, eColor);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
}
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -moz-linear-gradient(top, bColor, eColor);
    background: -o-linear-gradient(top,bColor, eColor);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
}

//---背景圖片
.backgroundImage(@url){
    background: url(@url) center center no-repeat;
    background-size: 100% 100%;
}

//---文字垂直居中/利用行高垂直居中
.textLineHeigth(@pixel){
    height: @pixel;
    line-height: @pixel;
}

//---字型間隔
.spacing(@pixel:1px){
    letter-spacing: @pixel;
}

//---字型間隔升級版
.spacingPlus(@pixel:1px){
    letter-spacing: @pixel;
    text-indent: @pixel;
}

//---刪除間隙
.removeGap(@spacing:-4px){
    .spacing(@spacing);
    font-size: 0;
}

//顯示模式，預設為溢位隱藏
.overflow(@mode:hidden){
    overflow: @mode;
}

//---鏤空按鈕懸浮及點選時亮度的變化
.hollowBtnHover(@color,@borderWidth:1px){
    &:hover{
        border: @borderWidth solid lighten(@color,5%);
        color: lighten(@color,8%);
    }
    &:active{
        border: @borderWidth solid darken(@color,5%);
        color: darken(@color,2%);
    }
}

//---鏤空按鈕懸浮及點選時亮度的變化
.hollowBtnHoverByNormal(@color,@borderWidth:1px){
    &:hover{
        background-color: lighten(@color,0%);
        border: @borderWidth solid lighten(@color,0%);
        color: #fff;
    }
    &:active{
        background-color: darken(@color,6%);
        border: @borderWidth solid darken(@color,6%);
        color: #fff;
    }
}

//---正常按鈕懸浮及點選時亮度的變化
.btnBgHover(@bgColor){
    &:hover{
        background: lighten(@bgColor,2%);
    }
    &:active{
        background: darken(@bgColor,6%);
    }
}