@import "../../less/base/fn";

.hui-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: @backgroundColor;

  .hui-page-hd {
    padding: 2em 0;
    h1.title {
      color: #3CC51F;
      font-size: 34px;
      font-weight: 400;
      .hcenter();
    }

    p.sub-title {
      color: #888;
      font-size: 14px;
      .hcenter();
    }
  }

  .hui-page-bd {
    &.spacing {
      padding: 0 15px;
    }
  }

  &.home {
    &.hui-page-enter {
      z-index: 0;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      &.hui-page-enter-active {

      }
    }
    &.hui-page-leave {
      &.hui-page-leave-active {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}

.hui-page-enter {
  z-index: 1024;
  opacity: 0.01;
  transform: translate3d(100%, 0, 0);
  transition: all .2s ease;
  &.hui-page-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hui-page-leave {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all .2s ease;
  &.hui-page-leave-active {
    opacity: 0.01;
    transform: translate3d(100%, 0, 0);
  }
}

.hui-minipage {
  width: 60%;
  padding: 10px 0;
  margin: 0 auto;
  text-align: justify;
  font-size: 0;

  &:after {
    display: inline-block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    content: ".";
  }
}