/**
 * 通用页面的样式表
 */

/* ------------------------ Zero ------------------------ */

// 页面布局容器
.container {
  padding: 20px;
}

// 页面灰色背景布局容器
.grey-bg-container {
  padding: 20px;
  background-color: #f9f9f9;
}

// 上下左右居中的盒模型
.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 上下居中的盒模型
.flex-up-down{
  display: flex;
  align-items: center;
}

// 左右居中的盒模型
.flex-left-right{
  display: flex;
  justify-content: center;
}

// 从左向右自动排布的盒模型
.flex-start-wrap{
  display: flex;
  flex-wrap:wrap;
  justify-content: flex-start
}

// 最通用的字体
.common-font {
  font: 400 14px PingFangSC-Regular, PingFang SC;
}

// 用于提示的点
.hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

// 通常用于隐藏input框
.hide-border{
  border: none;
  outline: none;
}

// 圆形盒子,适用于头像
.circle-box{
  overflow: hidden;
  border-radius: 50%;
}

// 分隔线
.line{
  height: 2px;
  background-color: #f2f2f2;
}

// 灰色滤镜
.needless{
  filter: grayscale(100%);
}

// 全屏
.fullscreen{
  width: 100vw;
  height: 100vh;
}

// 单行超出以...表示
.single-row-ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

// 模拟element的输入框样式
.simulate-input{
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  transition: all .2s;

  &:hover{
    border-color: #c0c4cc;
  }

  &:focus{
    border-color: #2593fc;
  }

}

// 最大化不变形图片
.cover-img{
  display: block;
  object-fit: cover;
}

// 颜色 & 背景
$type-list: (white, #fff), (primary, #2593fc), (success, #6bc863), (info, #999), (danger, #fc4448), (deep, #333), (warning, #FFBB00);
@each $type, $hex-color in $type-list{

  .#{""+$type}-color{
    fill: $hex-color;
    color: $hex-color;
  }

  .#{""+$type}-bg{
    background-color: $hex-color;
  }

}

/* ------------------------ ONE ------------------------ */

// 蓝色提示点,于提示操作文本前使用
.blue-hint-dot {
  @extend .hint-dot;
  background-color: #43a4fc;
}

// 红色提示点,于警告文本前使用
.red-hint-dot {
  @extend .hint-dot;
  background-color: #fc4448;
}

// 分页
.paging-box {
  @extend .flex-box;
  height: 90px;
}

// 存在el-input无法输入的情况,使用原生input可输入
.simulate-el-input{
  @extend .simulate-input;
  padding: 0 15px;
  height: 36px;

  &.mini{
    height: 28px;
  }

}

// 存在el-input中的textarea无法输入的情况,使用原生textarea可输入
.simulate-el-textarea{
  padding: 5px 15px;
  @extend .simulate-input;

  &.no-resize{
    resize: none;
  }

}

.dialog-bottom-box{
  @extend .flex-box;
  position: absolute;
  bottom: 0;
  width: 100%;
}

// 用于页面副标题小块
.blue-block{
  display: block;
  margin-right: 15px;
  width: 5px;
  height: 12px;
  background-color: #2593fc;
}






