@import "mixins";
.#{$namespace} {
  &-header,
  &-container,
  &-main,
  &-wrap,
  &-fluid,
  &-side,
  &-body,
  &-footer {
    position: relative;
  }

  &-container {
    margin-left: $sideBarWidth;
    @include transition();
    background-color: #f0f2f5;

    &.fixed-container {
      position: fixed;
      top: 0px;
      left: 0;
      bottom: 0;
      right: 0;
      overflow-y: scroll;
      z-index: 1002;
    }
  }

  &-wrap {
    padding: 0 $pd-lg $pd-lg $pd-lg;
  }

  &-main {
    background-color: $main-bg;
    border-radius: 4px;
    min-height: 100%;
    box-shadow: $main-box-shadow;
    &-header {
      position: relative;
      display: flex;
      padding: 20px;
      margin-bottom: 0;
      color: $g-666;
      background-color: $white;
      flex-direction: row;
      align-items: center;

      &.flex-start {
        justify-content: flex-start;
      }
      &.flex-end {
        justify-content: flex-end;
      }
      &.flex-center {
        justify-content: center;
      }
      &.flex-between {
        justify-content: space-between;
      }

      // 布局顶部搜索区域
      .el {
        &-form {
          &-item {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            margin-bottom: 0;
            &__label {
              float: none;
              display: inline-block;
            }
            &__content {
              display: inline-block;
              vertical-align: top;
            }
          }
        }
      }
    }
    &-body {
      position: relative;
      background-color: $white;
      color: $g-666;
      padding: 0 20px 20px 20px;
    }
    &-footer {
      color: $g-666;
      position: relative;
      background-color: $white;
      padding: 12px 20px;
    }
  }

  //flex布局
  &-row {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;

    & > * {
      box-sizing: border-box;
      flex-shrink: 0;
      -ms-flex-shrink: 0;
      width: 100%;
      max-width: 100%;
    }
    .left,
    .right {
      flex: 1 0 0%;
      -ms-flex: 1 0 0%;
    }

    // 分列（0-12栅格）
    .col {
      flex: 1 0 0%;
      -ms-flex: 1 0 0%;

      &-auto,
      &-1,
      &-2,
      &-3,
      &-4,
      &-5,
      &-6,
      &-7,
      &-8,
      &-9,
      &-10,
      &-11,
      &-12 {
        flex: 0 0 auto;
        -ms-flex: 0 0 auto;
      }
      &-auto {
        width: auto;
      }
      &-1 {
        width: 8.33333333%;
      }
      &-2 {
        width: 16.66666667%;
      }
      &-3 {
        width: 25%;
      }
      &-4 {
        width: 33.33333333%;
      }
      &-5 {
        width: 41.66666667%;
      }
      &-6 {
        width: 50%;
      }
      &-7 {
        width: 58.33333333%;
      }
      &-8 {
        width: 66.66666667%;
      }
      &-9 {
        width: 75%;
      }
      &-10 {
        width: 83.33333333%;
      }
      &-11 {
        width: 91.66666667%;
      }
      &-12 {
        width: 100%;
      }
    }

    //补充间距
    .col {
      .box {
        background-color: $white;
      }
    }

    // 对齐方式
    &.flex-start {
      justify-content: flex-start;
    }
    &.flex-end {
      justify-content: flex-end;
    }
    &.flex-center {
      justify-content: flex-end;
    }
    &.flex-between {
      justify-content: space-between;
    }
    &.flex-around {
      justify-content: space-around;
    }

    // 分列布局(自使用，1列，2列，3列，4列，5列,6列)
    &.row-cols {
      &-auto > *,
      &-1 > *,
      &-2 > *,
      &-3 > *,
      &-4 > *,
      &-5 > *,
      &-6 > * {
        flex: 0 0 auto;
        -ms-flex: 0 0 auto;
      }

      &-auto > * {
        width: auto;
      }

      &-1 > * {
        width: 100%;
      }

      &-2 > * {
        width: 50%;
      }

      &-3 > * {
        width: 33.3333333333%;
      }

      &-4 > * {
        width: 25%;
      }

      &-5 > * {
        width: 20%;
      }
      &-6 > * {
        width: 16.6666666667%;
      }
    }

    // 间距(10,20,30,40,50)
    &.gap {
      &-10 {
        margin-left: -5px;
        margin-right: -5px;

        & > * {
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      &-20 {
        margin-left: -10px;
        margin-right: -10px;

        & > * {
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      &-30 {
        margin-left: -15px;
        margin-right: -15px;

        & > * {
          padding-left: 15px;
          padding-right: 15px;
        }
      }

      &-40 {
        margin-left: -20px;
        margin-right: -20px;

        & > * {
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      &-50 {
        margin-left: -25px;
        margin-right: -25px;

        & > * {
          padding-left: 25px;
          padding-right: 25px;
        }
      }
    }
  }
  //float布局
  &-row-float {
    & > * {
      float: left;
      position: relative;
    }
    // 清除浮动
    @include clear();
    // 左
    & > .left {
      float: left;
    }
    // 右
    & > .right {
      float: right;
    }

    // 列偏移
    .col-os {
      &-auto {
        margin-left: auto;
      }
      &-1 {
        margin-left: 8.33333333%;
      }
      &-2 {
        margin-left: 16.66666667%;
      }
      &-3 {
        margin-left: 25%;
      }
      &-4 {
        margin-left: 33.33333333%;
      }
      &-5 {
        margin-left: 41.66666667%;
      }
      &-6 {
        margin-left: 50%;
      }
      &-7 {
        margin-left: 58.33333333%;
      }
      &-8 {
        margin-left: 66.66666667%;
      }
      &-9 {
        margin-left: 75%;
      }
      &-10 {
        margin-left: 83.33333333%;
      }
      &-11 {
        margin-left: 91.66666667%;
      }
      &-12 {
        margin-left: 100%;
      }
    }

    // 间距(10,20,30,40,50)
    &.gap {
      &-10 {
        margin-left: -5px;
        margin-right: -5px;

        & > * {
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      &-20 {
        margin-left: -10px;
        margin-right: -10px;

        & > * {
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      &-30 {
        margin-left: -15px;
        margin-right: -15px;

        & > * {
          padding-left: 15px;
          padding-right: 15px;
        }
      }

      &-40 {
        margin-left: -20px;
        margin-right: -20px;

        & > * {
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      &-50 {
        margin-left: -25px;
        margin-right: -25px;

        & > * {
          padding-left: 25px;
          padding-right: 25px;
        }
      }
    }
  }

  // padding
  &-pd {
    &-4 {
      padding: 4px !important;
    }
    &-8 {
      padding: 8px !important;
    }
    &-16 {
      padding: 16px !important;
    }
    &-32 {
      padding: 32px !important;
    }
    &-48 {
      padding: 48px !important;
    }
  }
  //margin
  &-mg {
    &-4 {
      margin: 4px !important;
    }
    &-8 {
      margin: 8px !important;
    }
    &-16 {
      margin: 16px !important;
    }
    &-32 {
      margin: 32px !important;
    }
    &-48 {
      margin: 48px !important;
    }
  }

  // sp间距
  &-sp {
    &-1 {
      margin: -0.5px;
      & > * {
        padding: 0.5px;
      }
    }
    &-2 {
      margin: -1px;
      & > * {
        padding: 1px;
      }
    }

    &-4 {
      margin: -2px;
      & > * {
        padding: 2px;
      }
    }
    &-5 {
      margin: -2.5px;
      & > * {
        padding: 2.5px;
      }
    }

    &-6 {
      margin: -3px;
      & > * {
        padding: 3px;
      }
    }

    &-8 {
      margin: -4px;
      & > * {
        padding: 4px;
      }
    }

    &-10 {
      margin: -5px;
      & > * {
        padding: 5px;
      }
    }

    &-12 {
      margin: -6px;
      & > * {
        padding: 6px;
      }
    }

    &-14 {
      margin: -7px;
      & > * {
        padding: 7px;
      }
    }

    &-15 {
      margin: -7.5px;
      & > * {
        padding: 7.5px;
      }
    }

    &-16 {
      margin: -8px;
      & > * {
        padding: 8px;
      }
    }
    &-18 {
      margin: -9px;
      & > * {
        padding: 9px;
      }
    }

    &-20 {
      margin: -10px;
      & > * {
        padding: 10px;
      }
    }
    &-22 {
      margin: -11px;
      & > * {
        padding: 11px;
      }
    }
    &-24 {
      margin: -12px;
      & > * {
        padding: 12px;
      }
    }

    &-25 {
      margin: -12.5px;
      & > * {
        padding: 12.5px;
      }
    }
    &-26 {
      margin: -13px;
      & > * {
        padding: 13px;
      }
    }

    &-28 {
      margin: -14px;
      & > * {
        padding: 14px;
      }
    }

    &-30 {
      margin: -15px;
      & > * {
        padding: 15px;
      }
    }

    &-32 {
      margin: -16px;
      & > * {
        padding: 16px;
      }
    }
  }

  // grid布局
  &-grid {
    &.gap {
      &-10 {
        margin-left: -5px;
        margin-right: -5px;

        & > * {
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      &-20 {
        margin-left: -10px;
        margin-right: -10px;

        & > * {
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      &-30 {
        margin-left: -15px;
        margin-right: -15px;

        & > * {
          padding-left: 15px;
          padding-right: 15px;
        }
      }

      &-40 {
        margin-left: -20px;
        margin-right: -20px;

        & > * {
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      &-50 {
        margin-left: -25px;
        margin-right: -25px;

        & > * {
          padding-left: 25px;
          padding-right: 25px;
        }
      }
    }
  }
}