framework7/components/panel/panel.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Panels === */
.panel-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5999;
  display: none;
  transform: translate3d(0,0,0);
  &.not-animated {
    transition-duration: 0ms !important;
  }
}
.panel {
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  position: absolute;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  height: 100%;
  transform: translate3d(0,0,0);
  width: 260px;
  background-color: #fff;
  &.not-animated {
    transition-duration: 0ms !important;
  }
  &.panel-reveal.not-animated {
    & ~ .views, & ~ .view {
      transition-duration: 0ms !important;
    }
  }
}
.panel-cover {
  z-index: 6000;
}
.panel-left {
  left: 0;
  &.panel-cover {
    transform: translate3d(-100%, 0, 0);
  }
}
.panel-right {
  right: 0;
  &.panel-cover {
    transform: translate3d(100%, 0, 0);
  }
}
.panel-visible-by-breakpoint {
  display: block;
  transform: translate3d(0,0,0) !important;
  &.panel-cover {
    z-index: 5900;
  }
}
html.with-panel {
  .framework7-root > .views, .framework7-root > .view {
    .page-content {
      .not-scrollable();
    }
  }
}
html.with-panel-left-cover, html.with-panel-right-cover {
  .panel-backdrop {
    display: block;
    opacity: 1;
  }
}
html.with-panel-left-reveal, html.with-panel-right-reveal, html.with-panel-transitioning {
  .panel-backdrop {
    background: rgba(0,0,0,0);
    display: block;
    opacity: 0;
  }
}
html.with-panel-left-reveal {
  .views, .framework7-root > .view, .panel-backdrop {
    transform: translate3d(260px,0,0);
  }
}
html.with-panel-right-reveal {
  .views, .framework7-root > .view, .panel-backdrop {
    transform: translate3d(-260px,0,0);
  }
}
html.with-panel-left-cover {
  .panel-left {
    transform: translate3d(0px,0,0);
  }
}
html.with-panel-right-cover {
  .panel-right {
    transform: translate3d(0px,0,0);
  }
}
html.with-statusbar {
  &.device-ios, &.ios:not(.device-ios):not(.device-android) {
    .panel {
      top: 20px;
      height: ~"calc(100% - 20px)";
    }
  }
  &.device-android, &.md:not(.device-ios):not(.device-android) {
    .panel {
      top: 24px;
      height: ~"calc(100% - 24px)";
    }
  }
  .safe-areas({
    .panel {
      top: constant(safe-area-inset-top);
      top: env(safe-area-inset-top);
      height: ~"calc(100% - constant(safe-area-inset-top))";
      height: ~"calc(100% - env(safe-area-inset-top))";
    }
  })
}
& when (@includeIosTheme) {
  @import url('./panel-ios.less');
}
& when (@includeMdTheme) {
  @import url('./panel-md.less');
}