scss 来自TaroUI的Mixins

Posted 2021-05-17

/**
 * 元素居中定位
 */
@mixin absolute-center($pos: absolute) {
  position: $pos;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * 点击态
 */
@mixin active {
  transition: background-color 0.3s;

  &:active {
    background-color: $color-grey-5;
  }
}

// 修复小元素文本垂直居中
@mixin alignhack($position: before, $margintop: 1px) {
  &::#{$position} {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: $margintop;
  }
}

/**
 * 默认主题下 $color-border-light
 */

@mixin border-thin(
  $color: $color-border-light,
  $style: solid,
  $directions: top bottom right left,
  $width: 1px
) {
  @each $value in $directions {
    border-#{$value}: $width $color $style;
  }
}

@mixin border-thin-top(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, top, $width);
}

@mixin border-thin-left(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, left, $width);
}

@mixin border-thin-right(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, right, $width);
}

@mixin border-thin-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, bottom, $width);
}

/**
 * @example scss
 *
 * .element {
 *   @include clearfix;
 * }
 *
 * // CSS Output
 * .element::after {
 *   clear: both;
 *   content: '';
 *   display: block;
 * }
 */
@mixin clearfix {
  &::after {
    clear: both;
    content: '';
    display: block;
  }
}

/**
 * 禁止态
 */
@mixin disabled {
  color: #bbb;
}

@mixin display-flex {
  display: flex;
}

@mixin flex-wrap($value: nowrap) {
  flex-wrap: $value;
}

@mixin align-items($value: stretch) {
  align-items: $value;
  @if $value == flex-start {
    -webkit-box-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
  } @else {
    -webkit-box-align: $value;
  }
}

@mixin align-content($value: flex-start) {
  align-content: $value;
}

@mixin justify-content($value: flex-start) {
  justify-content: $value;
  @if $value == flex-start {
    -webkit-box-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
  } @else {
    -webkit-box-pack: $value;
  }
}

/* Flex Item */
@mixin flex($fg: 1, $fs: null, $fb: null) {
  flex: $fg $fs $fb;
  -webkit-box-flex: $fg;
}

@mixin flex-order($n) {
  order: $n;
  -webkit-box-ordinal-group: $n;
}

@mixin align-self($value: auto) {
  align-self: $value;
}

/**
 * 默认主题下 $color-border-light
 */

@mixin hairline-common() {
  content: '';
  position: absolute;
  transform-origin: center;
  box-sizing: border-box;
  pointer-events: none;
}

@mixin hairline-base(
  $color: $color-border-light,
  $style: solid
) {
  @include hairline-common();

  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  border: 0 $style $color;
  transform: scale(0.5);
}

@mixin hairline-surround(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-width: $width;
  }
}

@mixin hairline-top(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
  }
}

@mixin hairline-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-bottom-width: $width;
  }
}

@mixin hairline-left(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-left-width: $width;
  }
}

@mixin hairline-right(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-right-width: $width;
  }
}

@mixin hairline-top-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
    border-bottom-width: $width;
  }
}

@mixin hairline-bottom-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $left: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: auto;
    left: $left;
    right: 0;
    bottom: 0;
    transform: scaleY(0.5);
    border-bottom: $width $style $color;
  }
}

@mixin hairline-top-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $left: 0
) {
  position: relative;

  &::before {
    @include hairline-common();

    top: 0;
    left: $left;
    right: 0;
    bottom: auto;
    transform: scaleY(0.5);
    border-top: $width $style $color;
  }
}

@mixin hairline-left-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: 0;
    right: auto;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: $width $style $color;
  }
}

@mixin hairline-right-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: auto;
    right: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-right: $width $style $color;
  }
}

@mixin line($num: 1) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if ($num == 1) {
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $num;

    /* autoprefixer: off */
    -webkit-box-orient: vertical;
  }
}

/**
 * 通用的遮罩
 */
@mixin overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba($color: #000, $alpha: 0.3);
}

/**
 * 设置placeholder 颜色
 */
@mixin placeholder($color: $color-grey-3) {
  @at-root .placeholder {
    color: $color;
  }

  &::placeholder {
    color: $color;
  }
}

/**
 * Mixes a color with black. It's different from darken()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amount of black to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: shade(#ffbb52, 60%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #664a20;
 *   }
 */
@function shade(
  $color,
  $percent
) {
  @return mix(#000, $color, $percent);
}

/**
 * Mixes a color with white. It's different from lighten()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amout of white to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: tint(#6ecaa6 , 40%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #a8dfc9;
 *   }
 */
@function tint(
  $color,
  $percent
) {
  @return mix(#FFF, $color, $percent);
}