@forward 'variables';

// MIXINS

// 弹性布局
@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

// 绝对定位
@mixin absolute($top: 0, $right: 0, $bottom: 0, $left: 0) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 文本溢出省略
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (min-width: 576px) { @content; }
  } @else if $breakpoint == 'md' {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == 'lg' {
    @media (min-width: 992px) { @content; }
  } @else if $breakpoint == 'xl' {
    @media (min-width: 1200px) { @content; }
  }
} 

// 动画相关
@mixin animation($name, $duration: 1s, $timing: ease, $delay: 0s, $iteration: 1, $direction: normal, $fill: forwards) {
  animation: $name $duration $timing $delay $iteration $direction $fill;
/*
* 1. $name（必需参数）
* 动画名称 fade-in, slide-in-right 等
* 2. $duration（可选参数，默认值：1s）
* 动画持续时间 0.5s, 1s, 2s 500ms, 1000ms 等
* 3. $timing（可选参数，默认值：ease）
* 动画的时间函数 linear：匀速 ease：缓入缓出（默认） ease-in：缓入 ease-out：缓出 ease-in-out：缓入缓出 
* cubic-bezier(n,n,n,n)：自定义贝塞尔曲线 steps(n)：分步动画
* 4. $delay（可选参数，默认值：0s） 延迟时间 负值：提前开始动画
* 5. $iteration（可选参数，默认值：1） 数字：1, 2, 3 等 infinite：无限循环
* 6. $direction（可选参数，默认值：normal）
* 动画方向  normal：正常播放 reverse：反向播放 alternate：交替播放（正向->反向） alternate-reverse：交替反向播放（反向->正向）
* 7. $fill（可选参数，默认值：forwards）
* 动画填充模式 forwards：保持最后一帧；backwards：应用第一帧；both：同时应用 forwards 和 backwards；none：不应用任何填充
*/
}

@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

// 常用动画关键帧
@include keyframes(fade-in) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@include keyframes(fade-out) {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@include keyframes(slide-in-right) {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@include keyframes(slide-out-right) {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

// 动画类
.fade-in {
  @include animation(fade-in);
}

.fade-out {
  @include animation(fade-out);
}

.slide-in-right {
  @include animation(slide-in-right);
}

.slide-out-right {
  @include animation(slide-out-right);
}

// PUBLIC
// * 全屏居中
.AllCenter{
  @include flex(row, center, center);
}
// * Logo动画
@keyframes stepLogo {
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}
.LogoAnimation{
  animation: stepLogo .5s linear forwards;
}
