antui-mobile/lib/components/layout/style/index.css

mobile ui for antd

.antui-transition-pages {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  opacity: 1;
  transition: .3s opacity;
}
.antui-transition-pages.hide {
  opacity: 0;
  z-index: -1000;
}
@keyframes amt-view-sfl-enter {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-sfl-leave {
  to {
    opacity: .75;
    transform: translate3d(25%, 0, 0);
  }
}
@keyframes amt-view-sfr-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-sfr-leave {
  to {
    opacity: .75;
    transform: translate3d(-25%, 0, 0);
  }
}
@keyframes amt-view-sfb-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-sfb-leave {
  to {
    opacity: .75;
    transform: translate3d(0, -25%, 0);
  }
}
@keyframes amt-view-sft-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-sft-leave {
  to {
    opacity: .75;
    transform: translate3d(0, 25%, 0);
  }
}
@keyframes amt-view-rfl-enter {
  from {
    opacity: .75;
    transform: translate3d(75%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-rfl-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes amt-view-rfr-enter {
  from {
    opacity: .75;
    transform: translate3d(-25%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-rfr-leave {
  to {
    opacity: 0.75;
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes amt-view-rfb-enter {
  from {
    opacity: .75;
    transform: translate3d(0, -25%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-rfb-leave {
  to {
    opacity: 0.75;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes amt-view-rft-enter {
  from {
    opacity: .75;
    transform: translate3d(0, 75%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes amt-view-rft-leave {
  to {
    opacity: 0.75;
    transform: translate3d(0, -100%, 0);
  }
}
.view-transition-common {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
  animation-fill-mode: forwards;
}
.page-transition-sfr-enter-active,
.page-transition-sfl-enter-active,
.page-transition-sfb-enter-active,
.page-transition-sft-enter-active {
  pointer-events: none;
  z-index: 20;
}
.page-transition-sfr-leave,
.page-transition-sfl-leave,
.page-transition-sfb-leave,
.page-transition-sft-leave {
  pointer-events: none;
  z-index: 10;
}
.page-transition-sfl-enter-active,
.page-transition-sfl-leave,
.page-transition-sfr-enter-active,
.page-transition-sfr-leave,
.page-transition-sfb-enter-active,
.page-transition-sfb-leave,
.page-transition-sft-enter-active,
.page-transition-sft-leave {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
  animation-fill-mode: forwards;
}
.page-transition-sfr-enter-active {
  animation-name: amt-view-sfr-enter;
}
.page-transition-sfl-enter-active {
  animation-name: amt-view-sfl-enter;
}
.page-transition-sfb-enter-active {
  animation-name: amt-view-sfb-enter;
}
.page-transition-sft-enter-active {
  animation-name: amt-view-sft-enter;
}
.page-transition-sfr-leave {
  animation-name: amt-view-sfr-leave;
}
.page-transition-sfl-leave {
  animation-name: amt-view-sfl-leave;
}
.page-transition-sfb-leave {
  animation-name: amt-view-sfb-leave;
}
.page-transition-sft-leave {
  animation-name: amt-view-sft-leave;
}
.page-transition-rfr-enter-active,
.page-transition-rfl-enter-active,
.page-transition-rfb-enter-active,
.page-transition-rft-enter-active {
  pointer-events: none;
  z-index: 10;
}
.page-transition-rfr-leave,
.page-transition-rfl-leave,
.page-transition-rfb-leave,
.page-transition-rft-leave {
  pointer-events: none;
  z-index: 20;
}
.page-transition-rfl-enter-active,
.page-transition-rfl-leave,
.page-transition-rfr-enter-active,
.page-transition-rfr-leave,
.page-transition-rfb-enter-active,
.page-transition-rfb-leave,
.page-transition-rft-enter-active,
.page-transition-rft-leave {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
  animation-fill-mode: forwards;
}
.page-transition-rfr-enter-active {
  animation-name: amt-view-rfr-enter;
}
.page-transition-rfr-leave {
  animation-name: amt-view-rfr-leave;
}
.page-transition-rfl-enter-active {
  animation-name: amt-view-rfl-enter;
}
.page-transition-rfl-leave {
  animation-name: amt-view-rfl-leave;
}
.page-transition-rfb-enter-active {
  animation-name: amt-view-rfb-enter;
}
.page-transition-rfb-leave {
  animation-name: amt-view-rfb-leave;
}
.page-transition-rft-enter-active {
  animation-name: amt-view-rft-enter;
}
.page-transition-rft-leave {
  animation-name: amt-view-rft-leave;
}
.antui-layout {
  display: flex;
  flex-direction: column;
  flex: auto;
  overflow: hidden;
  background: #f7f7f7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.antui-layout-header,
.antui-layout-footer {
  flex: 0 0 auto;
}
.antui-layout-footer {
  text-align: center;
}
.antui-layout-content {
  flex: auto;
  overflow: auto;
  position: relative;
}
.antui-corelayout-wrapper,
.antui-corelayout {
  position: relative;
  height: 100%;
}
.antui-pages-system .antui-layout-header .am-navbar-left-content {
  flex: auto;
  height: 100%;
}
.antui-pages-system .antui-layout-header .system_navbar-left {
  height: 100%;
  display: flex;
  align-items: center;
}
.antui-pages-system .antui-layout-header .system_navbar-left .navbar-back,
.antui-pages-system .antui-layout-header .system_navbar-left .navbar-close {
  flex: auto;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.antui-pages-system .antui-layout-header .system_navbar-left .system_navbar-left-icon {
  margin-right: 5px;
  display: inherit;
}