@pi0/framework7/src/components/sheet/sheet.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Sheet Modal === */
.sheet-backdrop {
  .modal-backdrop();
  z-index: 10500;
}
.sheet-modal {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 260px;
  contain: strict;
  will-change: transform;
  display: none;
  box-sizing: border-box;
  transition-property: transform;
  transform: translate3d(0, 100%, 0);
  background: #fff;
  z-index: 12500;
  contain: strict;
  &.modal-in, &.modal-out {
    transition-duration: 300ms;
  }
  &.not-animated {
    transition-duration: 0ms;
  }
  &.modal-in {
    display: block;
    transform: translate3d(0, 0, 0);
  }
  &.modal-out {
    transform: translate3d(0, 100%, 0);
  }
  .sheet-modal-inner {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .toolbar {
    position: relative;
    width: 100%;
  }
}

& when (@include-ios-theme) {
  @import url('./sheet-ios.less');
}
& when (@include-md-theme) {
  @import url('./sheet-md.less');
}