react-view-router/drawer/style/drawer.css

react-view-router

.rvr-route-drawer-mask, .rvr-route-drawer-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  outline: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-overflow-scrolling: touch;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
      align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}

.rvr-route-drawer {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: -3px -1px 12px 0px rgba(127,132,146,0.45);
  -webkit-margin-collapse: discard;
  margin-collapse: discard;
  overflow: auto;
}

.rvr-route-drawer.touch-restore {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.rvr-route-drawer.touch-hide {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.rvr-route-drawer.touched {
  transition: transform linear .3s;
}

.rvr-slide-right-enter,
.rvr-slide-right-appear {
  -webkit-transform: translate(100%, 0);
      -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
}
.rvr-slide-right-enter,
.rvr-slide-right-appear,
.rvr-slide-right-leave {
  -webkit-animation-duration: .2s;
          animation-duration: .2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.rvr-slide-right-enter.rvr-slide-right-enter-active,
.rvr-slide-right-appear.rvr-slide-right-appear-active {
  -webkit-animation-name: rvrSlideRightIn;
          animation-name: rvrSlideRightIn;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.rvr-slide-right-leave.rvr-slide-right-leave-active {
  -webkit-animation-name: rvrSlideRightOut;
          animation-name: rvrSlideRightOut;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes rvrSlideRightIn {
  0% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes rvrSlideRightIn {
  0% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes rvrSlideRightOut {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@keyframes rvrSlideRightOut {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}