.nut-pullrefresh {
  position: relative;
  height: 100%;

  .pullrefresh-top {
    position: absolute;
    left: 0;

    overflow: hidden;
    color: #969799;
    font-size: 14px;

    text-align: center;
    &.pullrefresh-top-v {
      line-height: 50px;
      width: 100%;
      height: 50px;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    &.pullrefresh-top-h {
      display: flex;
      align-items: center;
      width: 50px;
      height: 100%;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  .pullrefresh-content {
    height: 100%;
    overflow: auto;
    background: #fff;
  }

  .pullrefresh-bottom {
    position: absolute;

    overflow: hidden;
    color: #969799;
    font-size: 14px;

    text-align: center;

    &.pullrefresh-bottom-v {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
      line-height: 50px;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
    &.pullrefresh-bottom-h {
      display: flex;
      align-items: center;
      top: 0;
      right: 0;
      width: 50px;
      height: 100%;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
}