TelpoH5FrontendWeb/src/assets/css/public.scss

$designWidth: 750;
$blue: #2599ff;
$next: #8bc6fa;
$red: #ff8c8c;
$background: #f2f4f5;
$border_color: #d1d1d1;
/* 绑定时选择人物关系图片head.png */
$spriteWidthHead: 180;
$spriteHeightHead: 330;
$iconWidthHead: 80;
$iconHeightHead: 80;
/* 雪碧图 */
$spriteWidth: 400;
$spriteHeight: 400;
/* tabbar */
$tabbarH: 60px;
/* navbar */
$navbarH: 46px;

/* @function px2rem($px) {
  @return $px*320/$designWidth/20+rem;
} */

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@mixin colorAndFont($color, $fontSize) {
  color: $color;
  font-size: ($fontSize)px;
}

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin boxShadow($color...) {
  @if $color {
    box-shadow: 0 0 10px $color;
  } @else {
    box-shadow: 0 0 10px rgba(185, 185, 185, .9);
  }
}

@mixin avatarShadow {
  box-shadow: 0 0 1px 1px rgba(185, 185, 185, 0.4);
}

@mixin avatarActiveShadow {
  box-shadow: 0 0 5px 1px rgba(185, 185, 185, 0.4);
}

@mixin avatarOnlineShadow {
  box-shadow: 0 0 1px 1px rgba(95, 204, 14, 0.4);
}

@mixin avatarActiveOnlineShadow {
  box-shadow: 0 0 5px 1px rgba(95, 204, 14, 0.4);
}

@mixin border {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50% !important;
  border-bottom: 1px solid $border_color;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}

// 雪碧图位置的处理
@mixin bgPosition(
  $spriteWidth,
  $spriteHeight,
  $iconWidth,
  $iconHeight,
  $iconX,
  $iconY
) {
  background-position: (
          ($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%
  );
}

// 雪碧图
@mixin icon_position($iconWidth, $iconHeight, $iconX, $iconY) {
  @include bgPosition(
                  $spriteWidth,
                  $spriteHeight,
                  $iconWidth,
                  $iconHeight,
                  $iconX,
                  $iconY
  );
}

// 雪碧图路径
@mixin icon($spriteUrl, $iconW, $iconH, $containerW, $containerH) {
  background: transparent url($spriteUrl) no-repeat;
  background-size: (400 * $iconW / $containerW)px (400 * $iconH / $containerH)px;
}

// 绑定时选择人物关系图片head.png
@mixin head_position($iconX, $iconY) {
  @include bgPosition(
                  $spriteWidthHead,
                  $spriteHeightHead,
                  $iconWidthHead,
                  $iconHeightHead,
                  $iconX,
                  $iconY
  );
}