////////less函数////////

//不透明度
.sys-opacity(@opacity:0.5, @compatible-flag:1){
  opacity: @opacity;
}

//兼容inline-block
.sys-inline-block(@compatible-flag:0){
  display: inline-block;
}

//inline-block重置
.sys-inline-block-reset(@compatible-flag:0){
  font-size:0;
  letter-spacing:-0.31em; // webkit
  word-spacing: -0.43em;// IE < 8 && gecko
}

// 盒子模型
.sys-border-box(){
  box-sizing: border-box;
}

//清除浮动,IE8以上
.sys-pseudo-clear(){
  &:after{
    content:" ";
    display:block;
    overflow:hidden;
    clear:both;
    height:0;
  }
}

//链接
.sys-text-url(){
  cursor:pointer;
  &,&:hover,&:focus,&.active{
    text-decoration:none;
    outline:none;
  }
}

//链接悬浮
.sys-text-link(@color-hover:@color-link-hover){
  &:hover,&:focus,&:active,&.active{
    color:@color-hover;
  }
}

// 按钮
.sys-btn-func(@color-bg:#ccc, @color-text:#fff, @color-border:#ccc){
  color:@color-text;
  background-color:@color-bg;
  border-color: @color-border;
  &:hover,&:focus,&:active,&.active{
    color:@color-text;
    background-color:darken(@color-bg, 5%);
  }
  &.disabled{
    .sys-disabled();
    &:hover,&:focus,&:active,&.active{
      color:@color-text;
      background-color:@color-bg;
    }
  }
}

// 边框按钮
.sys-btn-border-func(@color-bg:#ccc, @color-text:#fff){
  color:@color-text;
  background-color:@color-bg;
  border:1px solid @color-text;
  &:hover,&:focus,&:active,&.active{
    color:@color-text;
    border-color:darken(@color-text, 5%);
  }
}

//去除列表默认样式
.sys-list-none{
  padding-left:0;
  &,& > li{
    list-style:none;
  }
}

//文字省略
.sys-ellipsis(@height) when(isnumber(@height)){
  height:@height;
  line-height:@height;
  .sys-ellipsis();
}
.sys-ellipsis(@height, @width) when(isnumber(@width)){
  width:@width;
  .sys-ellipsis(@height);
}
.sys-ellipsis(){
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

//字符截取
.sys-text-camp(){
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.sys-text-camp(@row) when(isnumber(@row)){
  .sys-text-camp();
  -webkit-line-clamp:@row;
}
.sys-text-camp(@row, @h-line) when(isnumber(@h-line)){
  height:@row * @h-line;
  line-height:@h-line;
  .sys-text-camp(@row);
}
.sys-text-camp(@row, @h-line, @width) when(isnumber(@width)){
  width:@width;
  .sys-text-camp(@row, @h-line);
}

//placeholder设置
.sys-placeholder(@color:#bbb){
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {// Safari and Chrome
    color:@color;
  }
}

//透明背景颜色兼容
.sys-bg-rgba(@r, @g, @b, @a, @color){
    background-color:@color;
    background-color:rgba(@r, @g, @b, @a);
}
.sys-bg-rgba(@r, @g, @b, @a){
    @rgba:rgba(@r, @g, @b, @a);
    @start:argb(@rgba);
    @end:argb(@rgba);
    background-color:@rgba;
    filter:e("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='@{start}', endColorstr='@{end}')");
}

//右背景设置
.sys-bg-right(@right: 0, @vertical: center){
    background-position: right @right @vertical;
    background-position: -webkit-calc(100% - @right) @vertical;
    background-position: calc(100% - @right) @vertical;
}

//线性渐变
.sys-gradient (@origin: left, @start: #ffffff, @stop: #000000) {//top,left,bottom,right
    background-color: @start;
    background: linear-gradient(@origin, @start, @stop);
    background: -webkit-linear-gradient(@origin, @start, @stop);
}
.sys-gradient-image(...){
    background-image: linear-gradient(@arguments);
    background-image: -webkit-linear-gradient(@arguments);
}

//径向渐变
.sys-gradient-radial(@type:circle, @start: #ffffff, @stop: #000000){
    background: radial-gradient(@type, @start, @stop);
    background: -webkit-radial-gradient(@type, @start, @stop);
}

//图片灰度设置
.sys-gray(@num:100%){
    -webkit-filter: grayscale(@num);
    -moz-filter: grayscale(@num);
    -ms-filter: grayscale(@num);
    -o-filter: grayscale(@num);
    filter: grayscale(@num);
    filter: gray;
}

//兼容阴影
.sys-box-shadow(@arguments){
  box-shadow:@arguments;
  -webkit-box-shadow:@arguments;
}
//例：.sys-box-shadow(0 3px 3px 3px #f1f1f1);

//兼容ie隐藏
.sys-box-shadow-ms(@h-shadow:0;@v-shadow:0;@blur:2px;@spread:2px;@color:#eeeeee){
    box-shadow:@h-shadow @v-shadow @blur @spread @color;
    -webkit-box-shadow:@h-shadow @v-shadow @blur @spread @color;
}

//圆角
.sys-border-radius(@radius:5px){
  border-radius: @radius;
  // -webkit-border-radius: @radius;
}
.sys-border-topleft-radius(@radius:5px){
  border-top-left-radius:@radius;
  // -webkit-border-top-left-radius:@radius;
}
.sys-border-topright-radius(@radius:5px){
  border-top-right-radius:@radius;
  // -webkit-border-top-right-radius:@radius;
}
.sys-border-bottomright-radius(@radius:5px){
  border-bottom-right-radius:@radius;
  // -webkit-border-bottom-right-radius:@radius;
}
.sys-border-bottomleft-radius(@radius:5px){
  border-bottom-left-radius:@radius;
  // -webkit-border-bottom-left-radius:@radius;
}

//css3动画
.sys-animation(...){
  animation: @arguments;
  // -webkit-animation: @arguments;
}
.sys-animation-name(@name){
  animation-name: @name;
  // -webkit-animation-name: @name;
}
.sys-animation-duration(@duration){
  animation-duration: @duration;
  // -webkit-animation-duration: @duration;
}
.sys-animation-timing-function(@timing-function){
  animation-timing-function: @timing-function;
  // -webkit-animation-timing-function: @timing-function;
}
.sys-animation-delay(@delay){
  animation-delay: @delay;
  // -webkit-animation-delay: @delay;
}
.sys-animation-iteration-count(@iteration-count){
  animation-iteration-count: @iteration-count;
  // -webkit-animation-iteration-count: @iteration-count;
}
.sys-animation-direction(@direction){
  animation-direction: @direction;
  // -webkit-animation-direction: @direction;
}
.sys-animation-fill-mode(@mode){
  animation-fill-mode: @mode;
  // -webkit-animation-fill-mode: @mode;
}
.sys-keyframes (@name, @rules:'', @w3c:true, @webkit:false, @moz:false, @o:false, @ms:false) when (@w3c = true){
    @keyframes @name {
        @rules();
    }
    .sys-keyframes(@name, @rules, false, @webkit, @moz, @o, @ms);
}
.sys-keyframes (@name, @rules:'', @w3c:false, @webkit:true, @moz:false, @o:false, @ms:false) when (@webkit = true){
    @-webkit-keyframes @name {
        @rules();
    }
    .sys-keyframes(@name, @rules, false, false, @moz, @o, @ms);
}
.sys-keyframes (@name, @rules:'', @w3c:false, @webkit:false, @moz:true, @o:false, @ms:false) when (@moz = true){
    @-moz-keyframes @name {
        @rules();
    }
    .sys-keyframes(@name, @rules, false, false, false, @o, @ms);
}
.sys-keyframes (@name, @rules:'', @w3c:false, @webkit:false, @moz:false, @o:true, @ms:false) when (@o = true){
    @-o-keyframes @name {
        @rules();
    }
    .sys-keyframes(@name, @rules, false, false, false, false, @ms);
}
.sys-keyframes (@name, @rules:'', @w3c:false, @webkit:false, @moz:false, @o:false, @ms:true) when (@ms = true){
    @-ms-keyframes @name {
        @rules();
    }
}
.sys-keyframes-fix(@name) {
    @keyframes @name {
        .-frames()
    }
    @-webkit-keyframes @name {
        .-frames(-webkit-)
    }
    @-moz-keyframes @name {
        .-frames(-moz-)
    }
    @-o-keyframes @name {
        .-frames(-o-)
    }
    @-ms-keyframes @name {
        .-frames(-ms-)
    }
}
//div{
//    .sys-keyframes-fix(xxxx);
//    .-frames(@-...){
//        0%,100%{
//            @{-}transform:rotate(0deg);
//        }
//        100%{
//            @{-}transform:rotate(360deg);
//        }
//    }
//}
//实例
//div{
//    @keyname : text;
//    .sys-keyframes(@keyname, {
//        from {top:0px;}
//        to {top:200px;}
//    });
//    .sys-animation(@keyname,5s);
//}

//div {
//    animation: myfirst 5s;
//    -moz-animation: myfirst 5s;	/* Firefox */
//    -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
//    -o-animation: myfirst 5s;	/* Opera */
//    -ms-animation: myfirst 5s;	/* ms */
//}
//@keyframes myfirst
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-moz-keyframes myfirst /* Firefox */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-webkit-keyframes myfirst /* Safari 和 Chrome */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-o-keyframes myfirst /* Opera */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-ms-keyframes myfirst /* ms */
//{
//    from {background: red;}
//    to {background: yellow;}
//}


//转换
.sys-transform(...){
    transform:@arguments;
    -webkit-transform:@arguments; // Safari 和 Chrome
}

//2d旋转
.sys-rotate(@degrees) {
    transform: rotate(@degrees);
    -webkit-transform: rotate(@degrees);
}
.sys-rotatex(@degrees) {
    transform: rotateX(@degrees);
    -webkit-transform: rotateX(@degrees);
}
.sys-rotatey(@degrees) {
    transform: rotateY(@degrees);
    -webkit-transform: rotateY(@degrees);
}
.sys-rotatez(@degrees) {
    transform: rotateZ(@degrees);
    -webkit-transform: rotateZ(@degrees);
}

//缩放
.sys-scale(@ratioX:1, @ratioY:1) {
    transform: scale(@ratioX, @ratioY);
    -webkit-transform: scale(@ratioX, @ratioY);
}
.sys-scalex(@ratio:1) {
    transform: scaleX(@ratio);
    -webkit-transform: scaleX(@ratio);
}
.sys-scaley(@ratio:1) {
    transform: scaleY(@ratio);
    -webkit-transform: scaleY(@ratio);
}
.sys-scalez(@ratio:1) {
    transform: scaleZ(@ratio);
    -webkit-transform: scaleZ(@ratio);
}

//2d转化
.sys-translate(@x:0, @y:0) {
    transform: translate(@x, @y);
    -webkit-transform: translate(@x, @y);
}
.sys-translatex(@x:0) {
    transform: translateX(@x);
    -webkit-transform: translateX(@x);
}
.sys-translatey(@y:0) {
    transform: translateY(@y);
    -webkit-transform: translateY(@y);
}

//2D 倾斜转换
.sys-skew(@x, @y) {
    transform: skew(@x, @y);
    -webkit-backface-visibility: hidden;
    -webkit-transform: skew(@x, @y);
}

//3d旋转
.sys-translate3d(@x:0, @y:0, @z:0) {
    transform: translate3d(@x, @y, @z);
    -webkit-transform: translate3d(@x, @y, @z);
}

//过渡
.sys-transition(@name:all, @time:0.5s, @timing-function:ease){
    transition:@name @time @timing-function;
    -webkit-transition:@name @time @timing-function;
}
.sys-transition-fix(@name:all, @time:0.5s, @timing-function:ease, @delay:0s){
    @w3cName : @name;
    @webkitName : @name;
    @mozName : @name;
    @oName : @name;
    @msName : @name;
    @webkitName : e("-webkit-@{name}");
    @mozName : e("-moz-@{name}");
    @oName : e("-o-@{name}");
    @msName : e("-ms-@{name}");
    transition:@w3cName @time @timing-function @delay;
    -webkit-transition:@webkitName @time @timing-function @delay;
}

//过渡属性名
.sys-transition-property(...){
    transition-property: @arguments;
    -webkit-transition-property: @arguments;
}
.sys-transition-property-fix(@name){
    @w3cName : @name;
    @webkitName : @name;
    @mozName : @name;
    @oName : @name;
    @msName : @name;
    @webkitName : e("-webkit-@{name}");
    @mozName : e("-moz-@{name}");
    @oName : e("-o-@{name}");
    @msName : e("-ms-@{name}");
    transition-property: @w3cName;
    -webkit-transition-property: @webkitName;
}

//过渡时间
.sys-transition-duration(@duration:0.5s){
    transition-duration: @duration;
    -webkit-transition-duration: @duration;
}

//带尖角框
.sys-triangle-box(@width, @height, @background-color, @border-width, @border-color, @radius-width, @radius-location, @min-width:auto, @min-height:auto){
    @top:(@height - @radius-width * 2) / 2;
    overflow:visible;
    position:relative;
    //width:@width;
    height:@height;
    min-width:@min-width;
    min-height:@min-height;
    border:@border-width solid @border-color;
    background:@background-color;
    .out-triangle,.in-triangle{
        position:absolute;
        left:0 - @radius-width * 2;
        top:@top;
        .sys-triangle(@radius-width;@border-color;right);
    }
    .in-triangle{
        left:0 - @radius-width * 2 + 1;
        border-color:transparent @background-color transparent transparent
    }
}

//尖角
.sys-triangle(@top-width;@right-width;@color:#ccc;@type) when (@type = top){
    .sys-triangle(@top-width;@right-width;);
    border-color:@color transparent transparent transparent;
}
.sys-triangle(@top-width;@right-width;@color:#ccc;@type) when (@type = right){
    .sys-triangle(@top-width;@right-width;);
    border-color:transparent @color transparent transparent;
}
.sys-triangle(@top-width;@right-width;@color:#ccc;@type) when (@type = bottom){
    .sys-triangle(@top-width;@right-width;);
    border-color:transparent transparent @color transparent;
}
.sys-triangle(@top-width;@right-width;@color:#ccc;@type) when (@type = left){
    .sys-triangle(@top-width;@right-width;);
    border-color:transparent transparent transparent @color;
}
.sys-triangle(@top-width:5px;@right-width:5px;){
    overflow:hidden;
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:@top-width @right-width;
}

//兼容圆角
.sys-little-radius(@width:5px,@border-width:1px,@bgurl){
    @trans:-@width;
    color:#fff;
    .radi{
        position:absolute;
        width:@width;
        height:@width;
        z-index:0;
        background:url(@bgurl) no-repeat;
    }
    .radi-lt{
        left:-@border-width;
        top:-@border-width;
        background-position:0 0;
    }
    .radi-rt{
        right:-@border-width;
        top:-@border-width;
        background-position:@trans 0;
    }
    .radi-lb{
        left:-@border-width;
        bottom:-@border-width;
        background-position:0 @trans;
    }
    .radi-rb{
        right:-@border-width;
        bottom:-@border-width;
        background-position:@trans @trans;
    }
}

//文字选中
.sys-user-select(@result:none;){
    user-select: @result;
    -webkit-user-select: @result;//webkit浏览器
}

//文字选中状态
.sys-user-select-status(@rules:'';@el:div){
    @selection:e('@{el}::selection');
    @webkitselection:e('@{el}::-webkit-selection');
    @mozselection:e('@{el}::-moz-selection');
    @{selection}{@rules();}
    @{webkitselection}{@rules();}
    @{mozselection}{@rules();}
}

//禁用公用
.sys-disabled(){
    .sys-opacity(0.7);
    .sys-user-select(none);
    cursor:not-allowed;
}

//子元素居中
.sys-vertical(@height:200px;){
    height:@height;
    line-height:@height - 4;
    //font-size:@height / 2;
}

//图片水平垂直居中
.sys-center-vertical-cell(@cell-height:200px;@cell-width:200px;@target:img){
    display:block;
    overflow:hidden;
    width:@cell-width;
    .sys-vertical(@cell-height);
    text-align:center;
    @{target}{
        .sys-inline-block();
        vertical-align:middle;
        max-width:100%;
        max-height:100%;
    }
}

//窗口fixed水平垂直居中
.sys-fixed-center-vertical(@width, @height) when (ispixel(@height)){
    .sys-fixed-center-vertical(@width);
    margin-top:0 - @height / 2;
    height:@height;
    top:50%;
}

//窗口fixed水平居中
.sys-fixed-center-vertical(@width) when (ispixel(@width)){
    position:fixed;
    margin-left:0 - @width / 2;
    width:@width;
    left:50%;
}

//循环遍历设置属性
.sys-loop-property(@total:12, @pre:col-, @key:width, @start:1) when (@start < (@total + 1)) {
    .@{pre}@{start}{
        @value:@start * 100 / 12;
        @{key}:e("@{value}%");
    }
    .sys-loop-property(@total, @pre, @key, @start + 1);
}

////列////
.sys-col-func(@total:12, @pre:col-, @prop:width, @start:1) when (@start < (@total + 1)) {
    .@{pre}@{start}{
        @value:@start * 100 / 12;
            @{prop}:e("@{value}%");
    }
    .sys-col-func(@total, @pre, @prop, @start + 1);
}

//进度条
.sys-process-bar(@width:5px;@height:5px;@bgImg:0;@bgtop:0;) when (isstring(@bgImg)){
    .sys-process-bar(@width;@height);
    background:url(@bgImg) no-repeat 0 @bgtop;
    .process-percent{
        background:url(@bgImg) no-repeat 0 @bgtop - @height;
    }
}
.sys-process-bar(@width:5px;@height:5px){
    width:@width;
    height:@height;
    .process-percent{
        width:0;
        height:@height;
    }
}

//hr线
.sys-hr-line(@color:#ccc, @width:1px, @style:solid, @location:top){
    height:0;
    border:none;
    border-@{location}:@width @style @color;
}

//前横线
.sys-border-horizon-before(@color-b:@color-border){
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        .sys-scaley(0.5);
        background-color: @color-b;
    }
}
//后横线
.sys-border-horizon-after(@color-b:@color-border){
    &:after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        .sys-scaley(0.5);
        background-color: @color-b;
    }
}
//前竖线
.sys-border-vertical-before(@color-b:@color-border){
    &:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        .sys-scalex(0.5);
        background-color: @color-b;
    }
}
//后竖线
.sys-border-vertical-after(@color-b:@color-border){
    &:after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        .sys-scalex(0.5);
        background-color: @color-b;
    }
}

////角////
.sys-caret-top(@width: 4px){
  width: @width * 2;
  height: @width;
  &:before {
    margin-top: 0 - @width;
    border-top: none;
    border-bottom: @width solid;
    border-right: @width solid transparent;
    border-left: @width solid transparent;
  }
}
.sys-caret-right(@width: 4px){
  width: @width;
  height: @width * 2;
  &:before {
    border-left: @width solid;
    border-top: @width solid transparent;
    border-bottom: @width solid transparent;
  }
}
.sys-caret-bottom(@width: 4px){
  width: @width * 2;
  height: @width;
  &:before {
    border-top: @width solid;
    border-right: @width solid transparent;
    border-left: @width solid transparent;
  }
}
.sys-caret-left(@width: 4px){
  width: @width;
  height: @width * 2;
  &:before {
    margin-left: 0 - @width;
    border-right: @width solid;
    border-top: @width solid transparent;
    border-bottom: @width solid transparent;
  }
}
.sys-caret(@width: 4px, @type: bottom) {
  overflow: hidden;
  .sys-inline-block();
  vertical-align: middle;
  &:before {
    display: block;
    content: "";
    width: 0;
    height: 0;
  }
}
.sys-caret(@width:4px, @type:bottom) when(@type = top){
  .sys-caret-top(@width);
}
.sys-caret(@width:4px, @type:bottom) when(@type = right){
  .sys-caret-right(@width);
}
.sys-caret(@width:4px, @type:bottom) when(@type = bottom){
  .sys-caret-bottom(@width);
}
.sys-caret(@width:4px, @type:bottom) when(@type = left){
  .sys-caret-left(@width);
}

////箭头////
//上角
.sys-bugle-top(@color-bugle:#ddd, @color-bg:#fff, @gap:1px){
    &:before,.bugle-in{
        left:0;
        bottom:0 - floor(@gap / 2);
        top:auto;
        right:auto;
        border-color:transparent;
        border-bottom-color:@color-bg;
    }
    &:after,.bugle-out{
        left:0;
        top:0 - ceil(@gap / 2);
        bottom:auto;
        right:auto;
        border-color:@color-bg @color-bg transparent @color-bg;
    }
};

//右角
.sys-bugle-right(@color-bugle:#ddd, @color-bg:#fff, @gap:1px){
    &:before,.bugle-in{
        top:0;
        left:0 - floor(@gap / 2);
        bottom:auto;
        right:auto;
        border-color:transparent;
        border-left-color:@color-bg;
    }
    &:after,.bugle-out{
        top:0;
        right:0 - ceil(@gap / 2);
        bottom:auto;
        left:auto;
        border-color:@color-bg @color-bg @color-bg transparent;
    }
};

//下角
.sys-bugle-bottom(@color-bugle:#ddd, @color-bg:#fff, @gap:1px){
    &:before,.bugle-in{
        left:0;
        top:0 - floor(@gap / 2);
        bottom:auto;
        right:auto;
        border-color:transparent;
        border-top-color:@color-bg;
    }
    &:after,.bugle-out{
        left:0;
        bottom:0 - ceil(@gap / 2);
        right:auto;
        top:auto;
        border-color:transparent @color-bg @color-bg @color-bg;
    }
};

//左角
.sys-bugle-left(@color-bugle:#ddd, @color-bg:#fff, @gap:1px){
    &:before,.bugle-in{
        top:0;
        right:0 - floor(@gap / 2);
        bottom:auto;
        left:auto;
        border-color:transparent;
        border-right-color:@color-bg;
    }
    &:after,.bugle-out{
        top:0;
        left:0 - ceil(@gap / 2);
        right:auto;
        bottom:auto;
        border-color:@color-bg transparent @color-bg @color-bg;
    }
};

//角通用
.sys-bugle(@color-bugle:#ddd, @color-bg:#fff, @type:bottom, @gap:1px, @unit:12px){
    @u:ceil(@unit / 2) * 2;
    .sys-inline-block();
    overflow:hidden;
    position:relative;
    width:@u;
    height:@u;
    background:@color-bugle;
    &:before,&:after{
        content:" ";
    }
    .bugle-in,.bugle-out,
    &:before,&:after{
        overflow:hidden;
        position:absolute;
        width:0;
        height:0;
        border-style:solid;
        border-width:ceil(@unit / 2);
        border-color:transparent;
    }
}
.sys-bugle(@color-bugle:#ddd, @color-bg:#fff, @type:bottom, @gap:1px, @unit:12px) when (@type = top){
    .sys-bugle-top(@color-bugle, @color-bg, @gap);
}
.sys-bugle(@color-bugle:#ddd, @color-bg:#fff, @type:bottom, @gap:1px, @unit:12px) when (@type = right){
    .sys-bugle-right(@color-bugle, @color-bg, @gap);
}
.sys-bugle(@color-bugle:#ddd, @color-bg:#fff, @type:bottom, @gap:1px, @unit:12px) when (@type = bottom){
    .sys-bugle-bottom(@color-bugle, @color-bg, @gap);
}
.sys-bugle(@color-bugle:#ddd, @color-bg:#fff, @type:bottom, @gap:1px, @unit:12px) when (@type = left){
    .sys-bugle-left(@color-bugle, @color-bg, @gap);
}

//flex布局
.sys-flex(){
    display: flex;
    display: -webkit-flex;
}

//项目的排列方向,row | row-reverse | column | column-reverse;
.sys-flex-direction(@value:row) when (@value = row){
  -webkit-box-orient: horizontal;
}
.sys-flex-direction(@value:column) when (@value = column){
  -webkit-box-orient: vertical;
}
.sys-flex-direction(@value:row){
  flex-direction: @value;
  -webkit-flex-direction: @value;
}

//项目在主轴上的对齐方式,flex-start | flex-end | center | space-between | space-around;
.sys-justify-content(@value:flex-start) when (@value = flex-start){
  -webkit-box-pack: start;
}
.sys-justify-content(@value:flex-end) when (@value = flex-end){
  -webkit-box-pack: end;
}
.sys-justify-content(@value:flex-start){
  justify-content: @value;
  -webkit-justify-content: @value;
}

//项目在交叉轴上如何对齐,flex-start | flex-end | center | baseline | stretch;
.sys-align-items(@value:flex-start) when (@value = flex-start){
  -webkit-box-align: start;
}
.sys-align-items(@value:flex-end) when (@value = flex-end){
  -webkit-box-align: end;
}
.sys-align-items(@value:flex-start){
  align-items: @value;
  -webkit-align-items: @value;
}

//定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch
.sys-align-content(@value:flex-start){
    align-content: @value;
}

//如果一条轴线排不下，如何换行
.sys-flex-wrap(@value:nowrap){
  flex-wrap:@value;
  -webkit-flex-wrap: @value;
}

////////子项样式////////
//初始长度，分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
.sys-flex-basis(@value:auto){
  flex-basis: @value;
  -webkit-flex-basis: @value;
}

//项目的放大比例，默认为0，即如果存在剩余空间，也不放大
.sys-flex-grow(@value:0){
  flex-grow: @value;
  -webkit-flex-grow: @value;
}

//项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.sys-flex-shrink(@value:1){
  flex-shrink: @value;
  -webkit-flex-shrink: @value;
}

//项目的放大、缩小、原始比例，默认为0 1 auto
.sys-flex-item(@value:0){
  box-flex:@value;
  -webkit-box-flex:@value;

  -webkit-flex: @value;
  flex: @value;
}

//定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.sys-flex-order(@value:0){
    order: @value;
}

//定义flex子项单独在侧轴（纵轴）方向上的对齐方式auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
.sys-align-self(@value:auto){
    -webkit-align-self: @value;
    align-self: @value;
}

////////复杂组件函数////////
//文本列表
.sys-text-list-public(@dd-height:20px,@icon-unit:4px,@dl-padding:10px,@border-color:#cecece,@dd-padding:5px 0, @color-text:#333, @color-link:#333, @color-time:#999, @color-hover:#333){
    .list-container{
        overflow:hidden;
        padding:@dl-padding;
    }
    .list-item{
        overflow:hidden;
        padding:@dd-padding;
    }
    .item-icon{
        overflow:hidden;
        float:left;
        margin: (@dd-height - @icon-unit * 2) / 2 3px 0 0;
        width:0;
        height:0;
        border-style: solid;
        border-width: @icon-unit;
        border-color: transparent transparent transparent @border-color;
    }
    .item-text{
        .sys-ellipsis(@dd-height);
        color:@color-text;
    }
    .item-link{
        display:block;
        .sys-ellipsis();
        color:@color-link;
        &:hover,&:active{
            color:@color-hover;
        }
    }
    .item-time{
        float:right;
        margin-left:10px;
        text-align:right;
        white-space: nowrap;
        color:@color-time;
        font-size:12px;
    }
}

//图片列表
.sys-image-list-public(@li-width:225px, @cell-height:155px, @li-right:51px, @li-top:34px, @text-top:16px, @list-padding:0 5px, @list-height:none, @cell-border:1px, @line-height-dif:4, @li-border:0, @color-hover:#333){
    @border-color:#cecece;
    overflow:hidden;
    padding:@list-padding;
    .list-container{
        margin-right:0 - @li-right;
        padding:0;
    }
    .list-item{
        float:left;
        margin:@li-top @li-right 0 0;
        padding:0;
        width:@li-width;
        border-width:@li-border;
        height:@list-height;
    }
    .item-cell{
        .sys-center-vertical-cell(@cell-height, @li-width - 2 * @cell-border - 2 * @li-border);
        border:@cell-border solid @border-color;
    }
    .item-text{
        margin-top:@text-top;
        .sys-ellipsis(26px);
        text-align:center;
    }
    .item-link{
        &:hover,&:active{
            color:@color-hover;
        }
    }
}

//图文列表
.sys-list-image-text-public(@cell-width:240px, @cell-height:180px, @li-padding:20px, @color-more:#ee7638, @line-height:24px, @border-color:#eee, @border-width:1px, @color-hover:#333){
    .list-item{
        overflow:hidden;
        padding-bottom:@li-padding;
        border-bottom:@border-width solid @border-color;
        & + .list-item{
            margin-top:@li-padding;
        }
    }
    .item-cell{
        float:left;
        margin-right:15px;
        .sys-center-vertical-cell(@cell-height, @cell-width);
    }
    .item-text{
        overflow:hidden;
    }
    .item-caption{
        font-size:16px;
        color:#333;
    }
    .item-time{
        margin:5px 0 15px;
        padding:0;
        color:#999;
    }
    .item-detail{
        margin-right:5px;
        color:#666;
        line-height:@line-height;
    }
    .item-more{
        color:@color-more;
    }
    .item-link{
        &:hover,&:active{
            color:@color-hover;
        }
    }
}

//图文列表
.sys-list-handler(@unit:20px, @bg-color:#000, @bg-color-active:#e84a01){
    position:absolute;
    bottom:10px;
    height:@unit;
    font-size:0;
    text-align: center;
    li{
        .sys-inline-block();
        margin:0 4px;
        width:@unit;
        height:@unit;
        text-align:center;
        line-height:@unit;
        background:@bg-color;
        color:#fff;
        cursor:pointer;
        font-size:12px;
        &:hover,&.active{
            background:@bg-color-active;
        }
    }
}

//自适应rem配置
@view-base:640;//750,1125
@rem-font-size-num: 40;//默认40px
@rem-font-base: 1rem * @rem-font-size-num;
@rem-loop-num:20;//遍历间隔
@rem-column: 10;
.sys-rem-set(@view-base: 640){//默认设计图尺寸宽度
    @font-px-base: 1px * @rem-font-size-num;
    ////尺寸计算1////页面设置：div{width:实际宽度 / @rem-font-base}
    //尺寸设置
    html {
        font-size: ceil(@font-px-base * @view-base / @view-base);
    }
    //循环设置不同宽度的rem
    .sys-rem-loop(@width : 200) when (@width < (@view-base + 1)){
        @widthpix : e("@{width}px");
        @media (min-width: @widthpix) {
            html {
                font-size: ceil(@font-px-base * @width / @view-base);
            }
        }
        .sys-rem-loop(@width + @rem-loop-num);
    }
    .sys-rem-loop(200);

    ////尺寸计算2////页面设置：div{width:实际宽度 / @rem-font-base}
    //(min-width:200px)
//    @view-xxs-font-size: ceil(@font-px-base * 200 / @view-base);
//    //(min-width:320px)
//    @view-xs-font-size: ceil(@font-px-base * 320 / @view-base);
//    //(min-width:480px)
//    @view-sm-font-size: ceil(@font-px-base * 480 / @view-base);
//    //(min-width:640)
//    @view-ms-font-size: ceil(@font-px-base * 640 / @view-base);
//    //(min-width:720)
//    @view-md-font-size: ceil(@font-px-base * 720 / @view-base);
//    //(min-width:980)
//    @view-lg-font-size: ceil(@font-px-base * 980 / @view-base);
//    //(min-width:1200)
//    @view-xl-font-size: ceil(@font-px-base * 1200 / @view-base);
//    //尺寸设置
//    html {
//        font-size: @view-ms-font-size;
//    }
//    @media (min-width: 200px) {
//        html {
//            font-size: @view-xxs-font-size
//        }
//    }
//    @media (min-width: 320px) {
//        html {
//            font-size: @view-xs-font-size
//        }
//    }
//    @media (min-width: 480px) {
//        html {
//            font-size: @view-sm-font-size;
//        }
//    }
//    @media (min-width: 640px) {
//        html {
//            font-size: @view-ms-font-size
//        }
//    }
//    @media (min-width: 720px) {
//        html {
//            font-size: @view-md-font-size
//        }
//    }
//    @media (min-width:980px) {
//        html {
//            font-size: @view-lg-font-size
//        }
//    }
//    @media (min-width:1200px) {
//        html {
//            font-size: @view-xl-font-size
//        }
//    }

    ////尺寸计算3////页面设置：div{@rem-column * 实际宽度 / 设计图宽度}
    //尺寸设置
//    html {
//        font-size: ceil(@view-base / @rem-column);
//    }
//    //循环设置不同宽度的rem
//    .sys-rem-loop3(@width : 200) when (@width < (@view-base + 1)){
//        @widthpix : e("@{width}px");
//        @media (min-width: @widthpix) {
//            html {
//                font-size: ceil(@width / @rem-column);
//            }
//        }
//        .sys-rem-loop3(@width + @rem-loop-num);
//    }
//    .sys-rem-loop3(200);
}

//自适应em配置
@em-font-size-px:1px * @rem-font-size-num;
@em-font-base:1em * @rem-font-size-num;
.sys-em-set(@view-base: 640, @class:ems){//默认设计图尺寸宽度
    @font-px-base: 1px * @rem-font-size-num;
    ////尺寸计算1////
    //尺寸设置
    .@{class} {
        font-size: ceil(@font-px-base * @view-base / @view-base);
    }
    //循环设置不同宽度的em
    .sys-em-loop(@width : 200) when (@width < (@view-base + 1)){
        @widthpix : e("@{width}px");
        @media (min-width: @widthpix) {
            .@{class} {
                font-size: ceil(@font-px-base * @width / @view-base);
            }
        }
        .sys-em-loop(@width + @rem-loop-num);
    }
    .sys-em-loop(200);


    ////尺寸计算2////
    //(min-width:200px)
//    @view-xxs-font-size: ceil(@font-px-base * 200 / @view-base);
//    //(min-width:320px)
//    @view-xs-font-size: ceil(@font-px-base * 320 / @view-base);
//    //(min-width:480px)
//    @view-sm-font-size: ceil(@font-px-base * 480 / @view-base);
//    //(min-width:640)
//    @view-ms-font-size: ceil(@font-px-base * 640 / @view-base);
//    //(min-width:720)
//    @view-md-font-size: ceil(@font-px-base * 720 / @view-base);
//    //(min-width:980)
//    @view-lg-font-size: ceil(@font-px-base * 980 / @view-base);
//    //(min-width:1200)
//    @view-xl-font-size: ceil(@font-px-base * 1200 / @view-base);
//    //尺寸设置
//    .@{class} {
//        font-size: @view-ms-font-size;
//    }
//    @media (min-width: 200px) {
//        .@{class} {
//            font-size: @view-xxs-font-size
//        }
//    }
//    @media (min-width: 320px) {
//        .@{class} {
//            font-size: @view-xs-font-size
//        }
//    }
//    @media (min-width: 480px) {
//        .@{class} {
//            font-size: @view-sm-font-size;
//        }
//    }
//    @media (min-width: 640px) {
//        .@{class} {
//            font-size: @view-ms-font-size
//        }
//    }
//    @media (min-width: 720px) {
//        .@{class} {
//            font-size: @view-md-font-size
//        }
//    }
//    @media (min-width:980px) {
//        .@{class} {
//            font-size: @view-lg-font-size
//        }
//    }
//    @media (min-width:1200px) {
//        .@{class} {
//            font-size: @view-xl-font-size
//        }
//    }
}


//引入第三方函数
@import "_grid-framework";