fineui/src/less/visual.less

.text-shadow(none) {
  text-shadow: none;
  -moz-text-shadow: none;
  -webkit-text-shadow: none;
}

.text-shadow(@x, @y, @blur, @color) when not (@x = none) {
  text-shadow: @arguments;
  -moz-text-shadow: @arguments;
  -webkit-text-shadow: @arguments;
}

.box-shadow(none) {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  -moz-box-shadow: @style @c;
  box-shadow: @style @c;
}

.box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
  box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
}

.background-color(@color, @alpha) {
  background-color: fade(@color, @alpha);
  @ieColor: argb(fade(@color, @alpha));
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
}

.opacity(@opa) {
  opacity: @opa;
  @opa-ie: @opa*100;
  filter: ~'alpha(opacity=@{opa-ie})';
}

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

//渐变
.gradient(@start, @end) {
  background: @start; //不支持的用这个
  background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
  background: -webkit-linear-gradient(@start, @end); /*new webkit*/
  background: -moz-linear-gradient(@start, @end); /*gecko*/
  background: -ms-linear-gradient(@start, @end); /*IE10 preview*/
  background: -o-linear-gradient(@start, @end); /*opera 11.10+*/
  background: linear-gradient(@start, @end); /*future CSS3 browsers*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
}

// toSide表示渐变的方向, 使用角度兼容性好一些
.gradient(@toSide, @start, @end) when not (@toSide = none) {
  background: @start; //不支持的用这个
  background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
  background: -webkit-linear-gradient(@toSide, @start, @end); /*new webkit*/
  background: -moz-linear-gradient(@toSide, @start, @end); /*gecko*/
  background: -ms-linear-gradient(@toSide, @start, @end); /*IE10 preview*/
  background: -o-linear-gradient(@toSide, @start, @end); /*opera 11.10+*/
  background: linear-gradient(@toSide, @start, @end); /*future CSS3 browsers*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
}

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

.border-corner-top-radius(@leftTop, @rightTop) {
  -moz-border-radius-topleft: @leftTop;
  -webkit-border-top-left-radius: @leftTop;
  -moz-border-radius-topright: @rightTop;
  -webkit-border-top-right-radius: @rightTop;

  border-top-left-radius: @leftTop;
  border-top-right-radius: @rightTop;
}

.border-corner-bottom-radius(@leftBottom, @rightBottom) {
  -moz-border-radius-bottomleft: @rightBottom;
  -webkit-border-bottom-left-radius: @rightBottom;
  -moz-border-radius-bottomright: @leftBottom;
  -webkit-border-bottom-right-radius: @rightBottom;

  border-bottom-right-radius: @rightBottom;
  border-bottom-left-radius: @leftBottom;
}

.border-corner-left-radius(@leftTop, @leftBottom) {
  -moz-border-radius-topleft: @leftTop;
  -webkit-border-top-left-radius: @leftTop;
  -moz-border-radius-bottomleft: @leftBottom;
  -webkit-border-bottom-left-radius: @leftBottom;

  border-top-left-radius: @leftTop;
  border-bottom-left-radius: @leftBottom;
}

.border-corner-right-radius(@rightTop, @rightBottom) {
  -moz-border-radius-topright: @rightTop;
  -webkit-border-top-right-radius: @rightTop;
  -moz-border-radius-bottomright: @rightBottom;
  -webkit-border-bottom-right-radius: @rightBottom;

  border-top-right-radius: @rightTop;
  border-bottom-right-radius: @rightBottom;
}

.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
  -webkit-border-radius: @arguments;
  -moz-border-radius: @arguments;
  border-radius: @arguments;
}

@sideHeight: 6px;
@sideLength: 12px;
.solid-triangle-up(@color) {
  width: 0;
  height: 0;
  border-left: (@sideLength/2) solid transparent;
  border-right: (@sideLength/2) solid transparent;
  border-bottom: @sideHeight solid @color;
}

.solid-triangle-down(@color) {
  width: 0;
  height: 0;
  border-left: (@sideLength/2) solid transparent;
  border-right: (@sideLength/2) solid transparent;
  border-top: @sideHeight solid @color;
}

.solid-triangle-left(@color) {
  width: 0;
  height: 0;
  border-top: (@sideLength/2) solid transparent;
  border-right: @sideHeight solid @color;
  border-bottom: (@sideLength/2) solid transparent;
}

.solid-triangle-right(@color) {
  width: 0;
  height: 0;
  border-top: (@sideLength/2) solid transparent;
  border-left: @sideHeight solid @color;
  border-bottom: (@sideLength/2) solid transparent;
}

.solid-triangle-top-left(@color) {
  width: 0;
  height: 0;
  border-top: @sideHeight solid @color;
  border-right: @sideHeight solid transparent;
}

.solid-triangle-top-right(@color) {
  width: 0;
  height: 0;
  border-top: @sideHeight solid @color;
  border-left: @sideHeight solid transparent;
}

.solid-triangle-bottom-left(@color) {
  width: 0;
  height: 0;
  border-bottom: @sideHeight solid @color;
  border-right: @sideHeight solid transparent;
}

.solid-triangle-bottom-right(@color) {
  width: 0;
  height: 0;
  border-bottom: @sideHeight solid @color;
  border-left: @sideHeight solid transparent;
}

.triangle-top() {
  position: absolute;
  width: 16px;
  height: 5px;
  border-bottom: 1px solid #ffffff;

  &:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-bottom: 7px solid #ccc;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
  }
  &:after {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 0px;
    border-bottom: 6px solid #ffffff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
  }
}

.triangle-bottom() {
  position: absolute;
  width: 16px;
  height: 10px;
  border-top: 1px solid #ffffff;

  &:after {
    position: absolute;
    right: 1px;
    top: 0px;
    border-top: 6px solid #ffffff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
  }
  &:before {
    position: absolute;
    border-top: 7px solid #cccccc;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
  }

}

.triangle-left() {
  position: absolute;
  width: 16px;
  height: 6px;
  border-bottom: 1px solid #f5f5f5;

  &:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-bottom: 10px solid #ccc;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
  }
  &:after {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 0px;
    border-bottom: 9px solid #ffffff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
  }
}

.triangle-right() {
  position: absolute;
  width: 16px;
  height: 10px;
  border-bottom: 1px solid #f5f5f5;

  &:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-bottom: 10px solid #ccc;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
  }
  &:after {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 0px;
    border-bottom: 9px solid #ffffff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
  }
}