*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.15;
  color: #333;
  background-color: #fff;
}
*,
:focus {
  outline: 0;
}
a {
  color: #337ab7;
  text-decoration: none;
  &:focus,
  &:hover {
    color: #23527c;
    text-decoration: underline;
  }
}
img {
  vertical-align: middle;
}

/* ----- utils ----- */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/* ----- animation ------ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* ----- layout ------ */
.site-wrapper {
  position: relative;
  min-width: 1180px;
  background: #f0f0f0;
}

/* site-sidebar-collapse */
.site-sidebar--collapse {
  .site-topbar__header,
  .site-sidebar,
  .site-sidebar__inner,
  .el-menu.site-sidebar__menu {
    width: 64px;
  }
  .site-topbar__body,
  .site-content__wrapper {
    margin-left: 64px;
  }
  .site-logo {
    &__lg {
      display: none;
    }
    &__mini {
      display: inline-block;
    }
  }
  .site-sidebar,
  .site-sidebar__inner {
    overflow: initial;
  }
  i.site-sidebar__menu-icon {
    margin-right: 0;
    font-size: 20px;
  }
  .site-content--tabs > .el-tabs .el-tabs__header {
    left: 64px;
  }
}
/* site-sidebar-collapse animation */
.site-topbar__header,
.site-topbar__body,
.site-logo,
.site-sidebar,
.site-sidebar__inner,
.site-sidebar__menu.el-menu,
i.site-sidebar__menu-icon,
.site-content__wrapper,
.site-content--tabs > .el-tabs .el-tabs__header {
  transition: left .3s, width .3s, margin-left .3s, font-size .3s;
}
/* site-topbar */
.site-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  background-color: #3e8ef7;
}
.site-topbar__header {
  float: left;
  width: 230px;
  height: 50px;
}
.site-logo {
  display: table-cell;
  vertical-align: middle;
  width: 230px;
  height: 50px;
  margin: 0;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  &__lg,
  &__mini {
    color: #fff;
    &:focus,
    &:hover {
      color: #fff;
      text-decoration: none;
    }
  }
  &__mini {
    display: none;
  }
}
.site-topbar__switch {
  font-size: 18px;
  border-bottom: none !important;
}
.site-topbar__avatar {
  border-bottom: none !important;
  .el-dropdown-link {
    > img {
      width: 36px;
      height: auto;
      margin-right: 5px;
      border-radius: 100%;
    }
  }
}
.site-topbar__body {
  position: relative;
  margin-left: 230px;
  padding-right: 15px;
  background-color: #fff;
}
.site-topbar__menu {
  float: left;
  background-color: transparent;
  border-bottom: 0;
  &--right {
    float: right;
  }
  .el-menu-item,
  .el-submenu .el-submenu__title {
    height: 50px;
    line-height: 50px;
  }
  .el-submenu > .el-menu {
    top: 55px;
  }
}
/* site-sidebar */
.site-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  width: 230px;
  background-color: #545c64;
  overflow: hidden;
}
.site-sidebar__inner {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 100%;
  padding-bottom: 15px;
  overflow-y: scroll;
}
.site-sidebar__menu.el-menu {
  width: 230px;
  border-right: 0;
}
i.site-sidebar__menu-icon {
  width: 24px;
  margin-right: 5px;
  text-align: center;
  font-size: 16px;
  color: inherit;
}
/* site-content */
.site-content__wrapper {
  position: relative;
  padding-top: 50px;
  margin-left: 230px;
  min-height: 100%;
}
.site-content {
  position: relative;
  padding: 15px;
  > *[class^="mod-"] {
    padding: 15px;
    background-color: #fff;
  }
  > .el-tabs {
    .el-tabs__header {
      position: fixed;
      top: 50px;
      left: 230px;
      right: 0;
      z-index: 930;
      padding: 0 15px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #fff;
    }
    .el-tabs__nav-wrap {
      margin-bottom: 0;
      &:after {
        display: none;
      }
    }
    .el-tabs__content {
      padding: 0 15px 15px;
    }
    .el-breadcrumb {
      padding: 0 0 15px;
      margin-bottom: 22px;
      border-bottom: 1px solid #ebeef5;
    }
  }
  .el-pagination {
    margin-top: 15px;
    text-align: right;
  }

  &--tabs {
    padding: 55px 0 0;
  }
}