@import "../../style/mixins/index";

@include b(system-page) {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  background: #F5F5F5;
  height: 100%;
  padding: 0 !important;
  > div {
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  @include e(toggle) {
    margin-left: 20px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    &:hover {
      color: #000;
    }
  }

  @include e(bread) {
    padding: 5px 20px;
    margin-top: 10px;
  }


  @include e(title) {
    height: 60px;
    line-height: 60px;
    background: #fff;
    h1 {
      margin: 0;
      padding: 0 10px 0 20px;
      color: $--x-system-page-title-color;
      font-size: 20px;
      display: inline-block;
      vertical-align: middle;
      font-weight: 400;
    }
    .el-divider {
      font-size: 20px;
    }
    @include e(action) {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }

  @include e(toolbar) {
    background: #fff;
    position: relative;
    margin: 10px 10px 0 10px;
    box-sizing: border-box;
    padding: 10px 20px;

    .el-input {
      width: 200px;

      & + .el-input {
        margin-left: 10px;
      }

      & + .el-button {
        margin-left: 10px;
      }
    }
    .el-select {
      & + .el-button {
        margin-left: 10px;
      }
    }

    @include e(filter) {
      float: left;
    }
    @include e(buttons) {
      float: right;
    }
    &:after {
      content: '';
      clear: both;
    }
  }

  @include e(content) {
    flex: 1 0 0 !important;
    margin: 10px 10px 0 10px;
    background: #fff;
  }

}