intc-website/src/components/less/mixin.less

.transform(@t) {
  -webkit-transform: @t;
  transform: @t;
}

.transform-origin(@to) {
  -webkit-transform-origin: @to;
  transform-origin: @to;
}

.transition(@value) {
  -webkit-transition: @value;
}

.hairline-top(@color) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 2px;
    width: 100%;
    background-color: transparent;
    border-top: 1px solid @color;
    display: block;
    z-index: 15;
    .transform-origin(50% 0%);
    html.pixel-ratio-2 & {
      .transform(scaleY(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleY(0.33));
    }
    html.pixel-ratio-4 & {
      .transform(scaleY(0.25));
    }
  }
}

.hairline-left(@color) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    .transform-origin(0% 50%);
    html.pixel-ratio-2 & {
      .transform(scaleX(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleX(0.33));
    }
    html.pixel-ratio-4 & {
      .transform(scaleX(0.25));
    }
  }
}

.hairline-bottom(@color, @left:0) {
  &:after {
    content: '';
    position: absolute;
    left: @left;
    bottom: 0;
    right: auto;
    top: auto;
    height: 2px;
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid @color;
    display: block;
    z-index: 15;
    .transform-origin(50% 100%);
    html.pixel-ratio-2 & {
      .transform(scaleY(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleY(0.33));
    }
    html.pixel-ratio-4 & {
      .transform(scaleY(0.25));
    }
  }
}

.hairline-right(@color) {
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    .transform-origin(100% 50%);
    html.pixel-ratio-2 & {
      .transform(scaleX(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleX(0.33));
    }
    html.pixel-ratio-4 & {
      .transform(scaleX(0.25));
    }
  }
}

// For right and bottom
.hairline-remove-right-bottom {
  &:after {
    display: none;
  }
}

// For left and top
.hairline-remove-left-top {
  &:before {
    display: none;
  }
}

// Encoded SVG Background
.encoded-svg-background(@svg) {
  @url: `encodeURIComponent(@{svg})`;
  background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

.align-self(@as) {
  -ms-flex-item-align: @as;
  -webkit-align-self: @as;
  align-self: @as;
}

.ellipsis() {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backgroundSize(@width,@height) {
  -webkit-background-size: @width @height;
}

.display-box() {
  display: flex;
}

.flex-direction(@direction: row) {
  flex-direction: @direction;
}

.flex-wrap(@wrap: nowrap) {
  flex-wrap: @wrap;
}

.flex-justify(@justify: flex-start) {
  justify-content: @justify;
}

.box-align(@align: center) {
  align-items: @align;
}

.box-align-content(@alignContent: stretch) {
  align-content: @alignContent;
}

.box-flex(@scale: 1) {
  flex: @scale;
}

.border-radius(@radius: 0) {
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
  border-bottom-left-radius: @radius;
  border-bottom-right-radius: @radius;
  -webkit-background-clip: padding-box;
}

.background(@start: #ffffff, @end: #000000) {
  background: @end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Saf4+, Chrome */
  background-image: linear-gradient(@start, @end);
}

.border-1px-bottom(@color: #d2d2d2) {
  background: left bottom repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
  background-image: linear-gradient(left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
}

.border-1px-top(@color: #d2d2d2) {
  background: left top repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent));
  background-image: linear-gradient(left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent));
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
}

.border-1px-both(@color: #d2d2d2) {
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
  background-image: linear-gradient(left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent)), linear-gradient(left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
  -webkit-background-size: 100% 1px, 100% 1px;
  background-size: 100% 1px, 100% 1px;
}

.border-1px-scale(@color: #d2d2d2) {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0px;
    right: 0px;
    border-bottom: 1px solid @color;
    -webkit-transform: scaleY(.5);
    -webkit-transform-origin: 0px 0px;
  }
}

.box-sizing(@sizing: border-box) {
  -webkit-box-sizing: @sizing;
}

.box-shadow(@value) {
  -webkit-box-shadow: @value;
}

.box-shadow(@value1, @value2) {
  -webkit-box-shadow: @value1, @value2;
}

.ellipsis(@w:auto) {
  width: @w;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.float-clear() {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0px;
    content: ' ';
    clear: both;
    height: 0px;
  }
}

.cursor() {
  cursor: pointer;
}

.overflow-scroll() {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

@colorMain: #6ac2b6;
@prefix: zui;