his-answer/src/common/scss/bl-flex.scss

@import '@/common/scss/base.scss';
// cell-card 升级版 -> bl-flex
.bl-flex {
  display: flex;

  // 基础参数
  &[between] {
    justify-content: space-between;
  }
  &[around] {
    justify-content: space-around;
  }
  &[flex-end] {
    justify-content: flex-end;
  }
  &[items-flex-end] {
    align-items: flex-end;
  }
  &[column] {
    flex-direction: column;
  }
  &[center] {
    justify-content: center;
    align-items: center;
  }
  &[items-center] {
    align-items: center;
  }
  &[content-center] {
    justify-content: center;
  }
  &[flex-wrap] {
    flex-wrap: wrap;
  }
  > [flex1] {
    flex: 1;
  }
  &[card], [card] {
    padding: $sp-md $sp-lg;
    background-color: $color-f;
    border-radius: $sp-sm;
    margin-left: $sp-lg;
    margin-right: $sp-lg;
    margin-bottom: $sp-md;
    overflow: hidden;
    &:first-child {
      margin-top: $sp-md;
    }
    &[not-first] {
      margin-top: 0;
    }
  }

  // 方框大小，缩略之类的作用
  &[box-xs], [box-xs]{
    width: 4 * $size-xs;
    height: 4 * $size-xs;
  }
  &[box-sm], [box-sm]{
    width: 4 * $size-sm;
    height: 4 * $size-sm;
  }
  &[box-md], [box-md]{
    width: 4 * $size-md;
    height: 4 * $size-md;
  }
  &[box-lg], [box-lg]{
    width: 4 * $size-lg;
    height: 4 * $size-lg;
  }
  &[box-xl], [box-xl]{
    width: 4 * $size-xl;
    height: 4 * $size-xl;
  }
  &[box-thumb], [box-thumb]{
    width: 4 * $size-sm;
    height: 4 * $size-sm;
  }

  // 高宽
  &[h100], [h100] {
    height: 100%;
  }
  &[w100], [w100] {
    width: 100%;
  }

  // 点击效果
  &[active], [active] {
    cursor: pointer;
    user-select: none;
    &:active {
      opacity: 0.6;
    }
  }
  &[touch], [touch] {
    cursor: pointer;
    user-select: none;
  }
  &[noselect], [noselect] {
    user-select: none;
  }

  // 阴影
  &[shadow], [shadow] {
    box-shadow: 0 0 12px 0 $color-5;
  }
  &[shadow-top], [shadow-top] {
    box-shadow: 0 -6px 12px 0 $color-5;
  }
  &[shadow-bottom], [shadow-bottom] {
    box-shadow: 0 6px 12px 0 $color-5;
  }

  &[opacity-1], [opacity-1] {
    opacity: 0.1;
  }
  &[opacity-2], [opacity-2] {
    opacity: 0.2;
  }
  &[opacity-3], [opacity-3] {
    opacity: 0.3;
  }
  &[opacity-4], [opacity-4] {
    opacity: 0.4;
  }
  &[opacity-5], [opacity-5] {
    opacity: 0.5;
  }
  &[opacity-6], [opacity-6] {
    opacity: 0.6;
  }
  &[opacity-7], [opacity-7] {
    opacity: 0.7;
  }
  &[opacity-8], [opacity-8] {
    opacity: 0.8;
  }
  &[opacity-9], [opacity-9] {
    opacity: 0.9;
  }

  // 圆角
  &[round], [round] {
    border-radius: $sp-sm;
    overflow: hidden;
  }
  &[round-xs], [round-xs] {
    border-radius: $sp-xs;
    overflow: hidden;
  }
  &[round-pie], [round-pie] {
    border-radius: 50%;
    overflow: hidden;
  }
  &[round-top], [round-top] {
    border-radius: $sp-md $sp-md 0 0;
    overflow: hidden;
  }
  &[round-bottom], [round-bottom] {
    border-radius: 0 0 $sp-md $sp-md;
    overflow: hidden;
  }

  // 边框
  &[border], [border] {
    border: 1px solid $color-6;
  }
  &[border-bottom],[border-bottom] {
    border-bottom: 1px solid $color-6;
  }
  &[border-top],[border-top] {
    border-top: 1px solid $color-6;
  }

  // 相对定位 & 绝对定位
  &[relative], [relative] {
    position: relative;
  }
  &[absolute], [absolute] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  // 对齐方式
  &[text-right], [text-right] {
    text-align: left;
  }
  &[text-right], [text-right] {
    text-align: right;
  }
  &[text-center], [text-center] {
    text-align: center;
  }

  // 不换行
  &[nowrap], [nowrap] {
    white-space: nowrap;
  }
  // 强制换行
  &[wrap], [wrap] {
    word-wrap: break-word;
    word-wrap: break-all;
  }

  // 字体大小
  &[size-xl], [size-xl] {
    font-size: $size-xl;
  }
  &[size-lg], [size-lg] {
    font-size: $size-lg;
  }
  &[size-md], [size-md] {
    font-size: $size-md;
  }
  &[size-sm], [size-sm] {
    font-size: $size-sm;
  }
  &[size-xs], [size-xs] {
    font-size: $size-xs;
  }

  &[bold], [bold] {
    font-weight: 700;
  }

  // 字体颜色
  &[color-title], [color-title] {
    color: $color-1;
    font-weight: 700;
  }
  &[color-text], [color-text] {
    color: $color-1;
  }
  &[color-label], [color-label] {
    color: $color-2;
  }
  &[color-des], [color-des] {
    color: $color-3;
  }
  &[color-info], [color-info] {
    color: $color-4;
  }
  &[color], [color] {
    color: $color;
  }
  &[color-warning], [color-warning] {
    color: $color-warning;
  }
  &[color-error], [color-error] {
    color: $color-error;
  }
  &[color-success], [color-success] {
    color: $color-success;
  }
  &[color-f], [color-f] {
    color: $color-f;
  }

  // 背景色
  &[bg-color-0], [bg-color-0] {
    background-color: $color-0;
  }
  &[bg-color-1], [bg-color-1] {
    background-color: $color-1;
  }
  &[bg-color-2], [bg-color-2] {
    background-color: $color-2;
  }
  &[bg-color-3], [bg-color-3] {
    background-color: $color-3;
  }
  &[bg-color-4], [bg-color-4] {
    background-color: $color-4;
  }
  &[bg-color-5], [bg-color-5] {
    background-color: $color-5;
  }
  &[bg-color-6], [bg-color-6] {
    background-color: $color-6;
  }
  &[bg-color-7], [bg-color-7] {
    background-color: $color-7;
  }
  &[bg-color], [bg-color] {
    background-color: $color;
  }
  &[bg-color-warning], [bg-color-warning] {
    background-color: $color-warning;
  }
  &[bg-color-success], [bg-color-success] {
    background-color: $color-success;
  }
  &[bg-color-error], [bg-color-error] {
    background-color: $color-error;
  }
  &[bg-color-f], [bg-color-f] {
    background-color: $color-f;
  }

  // 外边距
  &[margin-xs], [margin-xs] {
    margin: $sp-xs;
  }
  &[margin-sm], [margin-sm] {
    margin: $sp-sm;
  }
  &[margin-md], [margin-md] {
    margin: $sp-md;
  }
  &[margin-lg], [margin-lg] {
    margin: $sp-lg;
  }
  &[margin-xl], [margin-xl] {
    margin: $sp-xl;
  }
  &[not-margin], [not-margin] {
    margin: 0;
  }
  &[not-margin-left], [not-margin-left] {
    margin-left: 0;
  }
  &[not-margin-right], [not-margin-right] {
    margin-right: 0;
  }
  &[not-margin-top], [not-margin-top] {
    margin-top: 0;
  }
  &[not-margin-bottom], [not-margin-bottom] {
    margin-bottom: 0;
  }
  &[margin-left-xs], [margin-left-xs] {
    margin-left: $sp-xs;
  }
  &[margin-left-sm], [margin-left-sm] {
    margin-left: $sp-sm;
  }
  &[margin-left-md], [margin-left-md] {
    margin-left: $sp-md;
  }
  &[margin-left-lg], [margin-left-lg] {
    margin-left: $sp-lg;
  }
  &[margin-left-xl], [margin-left-xl] {
    margin-left: $sp-xl;
  }

  &[margin-right-xs], [margin-right-xs] {
    margin-right: $sp-xs;
  }
  &[margin-right-sm], [margin-right-sm] {
    margin-right: $sp-sm;
  }
  &[margin-right-md], [margin-right-md] {
    margin-right: $sp-md;
  }
  &[margin-right-lg], [margin-right-lg] {
    margin-right: $sp-lg;
  }
  &[margin-right-xl], [margin-right-xl] {
    margin-right: $sp-xl;
  }

  &[margin-top-xs], [margin-top-xs] {
    margin-top: $sp-xs;
  }
  &[margin-top-sm], [margin-top-sm] {
    margin-top: $sp-sm;
  }
  &[margin-top-md], [margin-top-md] {
    margin-top: $sp-md;
  }
  &[margin-top-lg], [margin-top-lg] {
    margin-top: $sp-lg;
  }
  &[margin-top-xl], [margin-top-xl] {
    margin-top: $sp-xl;
  }

  &[margin-bottom-xs], [margin-bottom-xs] {
    margin-bottom: $sp-xs;
  }
  &[margin-bottom-sm], [margin-bottom-sm] {
    margin-bottom: $sp-sm;
  }
  &[margin-bottom-md], [margin-bottom-md] {
    margin-bottom: $sp-md;
  }
  &[margin-bottom-lg], [margin-bottom-lg] {
    margin-bottom: $sp-lg;
  }
  &[margin-bottom-xl], [margin-bottom-xl] {
    margin-bottom: $sp-xl;
  }

  // 内填充
  &[padding-xs], [padding-xs] {
    padding: $sp-xs;
  }
  &[padding-sm], [padding-sm] {
    padding: $sp-sm;
  }
  &[padding-md], [padding-md] {
    padding: $sp-md;
  }
  &[padding-lg], [padding-lg] {
    padding: $sp-lg;
  }
  &[padding-xl], [padding-xl] {
    padding: $sp-xl;
  }

  &[not-padding], [not-padding] {
    padding: 0;
  }
  &[not-padding-top], [not-padding-top] {
    padding-top: 0;
  }
  &[not-padding-bottom], [not-padding-bottom] {
    padding-bottom: 0;
  }
  &[not-padding-right], [not-padding-right] {
    padding-right: 0;
  }
  &[not-padding-left], [not-padding-left] {
    padding-left: 0;
  }

  &[padding-left-xs], [padding-left-xs] {
    padding-left: $sp-xs;
  }
  &[padding-left-sm], [padding-left-sm] {
    padding-left: $sp-sm;
  }
  &[padding-left-md], [padding-left-md] {
    padding-left: $sp-md;
  }
  &[padding-left-lg], [padding-left-lg] {
    padding-left: $sp-lg;
  }
  &[padding-left-xl], [padding-left-xl] {
    padding-left: $sp-xl;
  }

  &[padding-right-xs], [padding-right-xs] {
    padding-right: $sp-xs;
  }
  &[padding-right-sm], [padding-right-sm] {
    padding-right: $sp-sm;
  }
  &[padding-right-md], [padding-right-md] {
    padding-right: $sp-md;
  }
  &[padding-right-lg], [padding-right-lg] {
    padding-right: $sp-lg;
  }
  &[padding-right-xl], [padding-right-xl] {
    padding-right: $sp-xl;
  }

  &[padding-top-xs], [padding-top-xs] {
    padding-top: $sp-xs;
  }
  &[padding-top-sm], [padding-top-sm] {
    padding-top: $sp-sm;
  }
  &[padding-top-md], [padding-top-md] {
    padding-top: $sp-md;
  }
  &[padding-top-lg], [padding-top-lg] {
    padding-top: $sp-lg;
  }
  &[padding-top-xl], [padding-top-xl] {
    padding-top: $sp-xl;
  }

  &[padding-bottom-xs], [padding-bottom-xs] {
    padding-bottom: $sp-xs;
  }
  &[padding-bottom-sm], [padding-bottom-sm] {
    padding-bottom: $sp-sm;
  }
  &[padding-bottom-md], [padding-bottom-md] {
    padding-bottom: $sp-md;
  }
  &[padding-bottom-lg], [padding-bottom-lg] {
    padding-bottom: $sp-lg;
  }
  &[padding-bottom-xl], [padding-bottom-xl] {
    padding-bottom: $sp-xl;
  }

  &[not-hidden], [not-hidden] {
    overflow: visible;
  }
}