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;
}

.box-shadows(@shadow1, @shadow2, @shadow3) {
  box-shadow: @shadow1, @shadow2, @shadow3;
  -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
  -moz-box-shadow: @shadow1, @shadow2, @shadow3;
}

.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;
}

.rotate(@rotate) {
  -webkit-transform: rotate(@rotate);
  -moz-transform: rotate(@rotate);
  transform: rotate(@rotate);
}

//渐变
.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: 9px;
  //虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响，这边重置掉
  text-align: left;

  &:before {
    position: absolute;
    width: 9px;
    height: 9px;
    margin-left: 4px;
    margin-top: 5px;
    content: "";
    transform: rotate(-135deg);
    .box-shadow(3px 3px 10px 0,  rgba(0, 0, 0, 0.06));
  }
}

.triangle-bottom() {
  position: absolute;
  width: 16px;
  height: 9px;
  //虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响，这边重置掉
  text-align: left;

  &:before {
    position: absolute;
    width: 9px;
    height: 9px;
    margin-left: 4px;
    margin-top: -5px;
    content: "";
    transform: rotate(45deg);
    .box-shadow(3px 3px 10px 0,  rgba(0, 0, 0, 0.07));
  }

}

.triangle-left() {
  position: absolute;
  width: 9px;
  height: 16px;
  //虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响，这边重置掉
  text-align: left;

  &:before {
    position: absolute;
    width: 9px;
    height: 9px;
    margin-left: 5px;
    margin-top: 4px;
    content: "";
    transform: rotate(135deg);
    .box-shadow(3px 3px 10px 0,  rgba(0, 0, 0, 0.06));
  }
}

.triangle-right() {
  position: absolute;
  width: 9px;
  height: 16px;
  //虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响，这边重置掉
  text-align: left;

  &:before {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: 4px;
    content: "";
    transform: rotate(-45deg);
    .box-shadow(3px 3px 10px 0,  rgba(0, 0, 0, 0.07));
  }
}

// css3 animation
.keyframes(@name, @frames) {
  @-webkit-keyframes @name {
      @frames();
  }
  @-moz-keyframes @name {
      @frames();
  }
  @-ms-keyframes @name {
      @frames();
  }
  @-o-keyframes @name {
      @frames();
  }
  @keyframes @name {
      @frames();
  }
}

.animation(@attr) {
  -webkit-animation: @attr;
  -moz-animation: @attr;
  -ms-animation: @attr;
  -o-animation: @attr;
  animation: @attr;
}

.animation-delay(@attr) {
  -webkit-animation-delay: @attr;
  -moz-animation-delay: @attr;
  -ms-animation-delay: @attr;
  -o-animation-delay: @attr;
  animation-delay: @attr;
}

.transform(@attr) {
  -webkit-transform: @attr;
  -moz-transform: @attr;
  -o-transform: @attr;
  -ms-transform: @attr;
  transform: @attr;
}

.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin:    @x @y;
  -ms-transform-origin:     @x @y;
  -o-transform-origin:      @x @y;
  transform-origin:         @x @y;
}

.hover-visible(@cls) {
  & .@{cls} {
    visibility: hidden;
  }
  &:hover {
    & .@{cls} {
      visibility: visible;
    }
  }
}

.hover-hidden(@cls) {
  & .@{cls} {
    visibility: visible;
  }
  &:hover {
    & .@{cls} {
      visibility: hidden;
    }
  }
}