fineui/src/less/image.less

@import "var";

.imagePath(none) {
  background: none;
  _filter: none;
}

.imagePath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
  background: url('@{imageUrl}@{path}') @repeat @left @top;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{imageUrl}@{path}');
  _background: none;
}

.image2xPath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
  background: url('@{image2xUrl}@{path}') @repeat @left @top;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{image2xUrl}@{path}');
  background-size: contain;
  _background: none;
}

.background(@class, @backgroundPath, @top:center, @left:center, @repeat: no-repeat) {
  .@{class} {
    .image2xPath(@backgroundPath, @top, @left, @repeat);

    &.hack {
      .imagePath(@backgroundPath, @top, @left, @repeat);
    }
  }
}

// 默认icon
.icon(@class, @iconPath) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }
  }
}

// 有悬浮效果的icon
.icon_hover(@class, @iconPath, @hoverPath: @iconPath, @disablePath: @iconPath) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }
    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }
    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 有悬浮、激活(选中)的icon
.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath, @disablePath: @iconPath) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }
    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }
    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@activePath);
      &.hack {
        .imagePath(@activePath);
      }
    }
    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 只有有选中的icon
.icon_select(@class, @iconPath, @selectPath: @iconPath, @disablePath: @iconPath) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }
    &.active .x-icon {
      display: block;
      .image2xPath(@selectPath);
      &.hack {
        .imagePath(@selectPath);
      }
    }
    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 可自定义默认和灰化状态
.icon_custom(@class, @iconPath, @disablePath: @iconPath) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }

    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

//可自定义默认、悬浮、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @disablePath) when not (@disablePath = none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }

    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }

    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 可自定义默认、悬浮、激活(选中)、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @disablePath) when not (@disablePath = none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }

    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }

    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@activePath);
      &.hack {
        .imagePath(@activePath);
      }
    }

    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 可自定义默认、悬浮、激活、选中、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath) when not (@disablePath = none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }

    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }

    &:active .x-icon {
      display: block;
      .image2xPath(@activePath);
      &.hack {
        .imagePath(@activePath);
      }
    }

    &.active .x-icon {
      display: block;
      .image2xPath(@selectedPath);
      &.hack {
        .imagePath(@selectedPath);
      }
    }

    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
  }
}

// 可自定义默认、悬浮、激活、选中、灰化、激活状态灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath, @activeDisablePath) when not (@activeDisablePath = none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath);
      &.hack {
        .imagePath(@iconPath);
      }
    }
    &:hover .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath);
      &.hack {
        .imagePath(@hoverPath);
      }
    }

    &:active .x-icon {
      display: block;
      .image2xPath(@activePath);
      &.hack {
        .imagePath(@activePath);
      }
    }

    &.active .x-icon {
      display: block;
      .image2xPath(@selectedPath);
      &.hack {
        .imagePath(@selectedPath);
      }
    }

    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath);
      &.hack {
        .imagePath(@disablePath);
      }
    }
    &.disabled.active .x-icon {
      display: block;
      .image2xPath(@activeDisablePath);
      &.hack {
        .imagePath(@activeDisablePath);
      }
    }
  }
}

@color-bi-font-native: inherit;
@color-bi-font-hover: inherit;
@color-bi-font-active: #3f8ce8;

.iconSize(@class,@fontSize) {
  .@{class} {
    & .b-font {
      font-size: @fontSize;
    }
  }
}

// 添加字体资源
.addFontRes(@name, @fontUrl) {
  @font-face {
    font-family: "@{name}";
    src: url('@{fontUrl}iconfont.eot');
    src: url('@{fontUrl}iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('@{fontUrl}iconfont.woff') format('woff'), /* chrome、firefox */ url('@{fontUrl}iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{fontUrl}iconfont.svg#svgFontName') format('svg'); /*  iOS 4.1- */
  }
}

// 激活字体
.activateFont(@fonts) {
  @baseProperty: {
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  };

  .b-font when not ((length(@fonts) = 1) and (extract(@fonts, 1) = "bi")) {
    font-family: @fonts, "bi";
    @baseProperty();
  }
  .b-font when ((length(@fonts) = 1) and (extract(@fonts, 1) = "bi")) {
    font-family: @fonts;
    @baseProperty();
  }
}

// 默认font
.font(@class,@content, @color: @color-bi-font-native) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color;
    }
    &.disabled .b-font:before {
      content: @fc;
      color: @color;
    }
  }
}

// 有悬浮效果的font
.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}

// 有默认、激活(选中)的font
.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }

    &:active .b-font:before,
    &.active .b-font:before {
      content: @fc;
      color: @color-active;
    }
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}

.font-effect(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active, @color-selected: @color-bi-font-active) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }
    &:active .b-font:before {
      content: @fc;
      color: @color-active;
    }
    &.active .b-font:before {
      content: @fc;
      color: @color-selected;
    }
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}