zmp-core/components/panel/panel.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Panels === */
@import url('./panel-vars.less');

.panel-backdrop {
  position: absolute;
  left: 0;
  top: var(--zmp-appbar-app-offset, 0px);
  width: 100%;
  height: calc(100% - var(--zmp-appbar-app-offset, 0px));
  opacity: 0;
  z-index: 5999;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  background-color: var(--zmp-panel-backdrop-bg-color);
  transition-property: transform, opacity;
  transition-duration: var(--zmp-panel-transition-duration);
  .with-panel,
  .with-panel-closing {
    visibility: visible;
  }
  &.not-animated {
    transition-duration: 0ms !important;
  }
}
.panel {
  z-index: 1000;
  box-sizing: border-box;
  position: absolute;
  top: var(--zmp-appbar-app-offset, 0px);
  height: calc(100% - var(--zmp-appbar-app-offset, 0px));
  transform: translate3d(0, 0, 0);
  width: var(--zmp-panel-width);
  background-color: var(--zmp-panel-bg-color);
  overflow: visible;
  transition-property: transform;
  transition-duration: var(--zmp-panel-transition-duration);
  &:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe) {
    display: none;
  }

  &:after {
    pointer-events: none;
    opacity: 0;
    z-index: 5999;
    position: absolute;
    content: '';
    top: 0;
    width: 20px;
    height: 100%;
    transition-property: transform, opacity;
    transition-duration: var(--zmp-panel-transition-duration);
  }
  &.not-animated {
    &,
    &:after {
      transition-duration: 0ms !important;
    }
  }
  &.panel-reveal.not-animated {
    & ~ .views,
    & ~ .view {
      transition-duration: 0ms !important;
    }
  }
  &.panel-resizing {
    user-select: none;
    &,
    &:after,
    & ~ .views,
    & ~ .view {
      transition-duration: 0ms !important;
    }
  }
}
.panel-cover {
  z-index: 6000;
}
.panel-left {
  left: 0;
  width: var(--zmp-panel-left-width, var(--zmp-panel-width));
  &.panel-cover {
    transform: translate3d(calc(-1 * var(--zmp-panel-left-width, var(--zmp-panel-width))), 0, 0);
    &:after {
      left: 100%;
      background: linear-gradient(to right, var(--zmp-panel-shadow));
      .with-panel-left-cover & {
        opacity: 1;
      }
    }
  }
  &.panel-reveal {
    &:after {
      right: 0;
      transform: translate3d(calc(-1 * var(--zmp-panel-left-width, var(--zmp-panel-width))), 0, 0);
      background: linear-gradient(to left, var(--zmp-panel-shadow));
      .with-panel-left-reveal & {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}
.panel-right {
  right: 0;
  width: var(--zmp-panel-right-width, var(--zmp-panel-width));
  &.panel-cover {
    transform: translate3d(var(--zmp-panel-right-width, var(--zmp-panel-width)), 0, 0);
    &:after {
      right: 100%;
      background: linear-gradient(to left, var(--zmp-panel-shadow));
      .with-panel-right-cover & {
        opacity: 1;
      }
    }
  }
  &.panel-reveal {
    &:after {
      left: 0;
      background: linear-gradient(to right, var(--zmp-panel-shadow));
      transform: translate3d(var(--zmp-panel-right-width, var(--zmp-panel-width)), 0, 0);
      .with-panel-right-reveal & {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}
.panel-in-breakpoint {
  transform: translate3d(0, 0, 0) !important;
  transition-duration: 0ms;
  &:after {
    display: none;
  }
  &.panel-cover {
    z-index: 5900;
  }
}
html {
  &.with-panel-left-reveal,
  &.with-panel-right-reveal,
  &.with-panel-closing {
    .views,
    .zmp-root > .view {
      transition-duration: var(--zmp-panel-transition-duration);
      transition-property: transform;
    }
  }
  &.with-panel {
    .zmp-root > .views,
    .zmp-root > .view {
      .page-content {
        .not-scrollable();
      }
    }
  }
  &.with-panel-left-reveal {
    .views,
    .zmp-root > .view {
      transform: translate3d(var(--zmp-panel-left-width, var(--zmp-panel-width)), 0, 0);
    }
  }
  &.with-panel-right-reveal {
    .views,
    .zmp-root > .view {
      transform: translate3d(calc(-1 * var(--zmp-panel-right-width, var(--zmp-panel-width))), 0, 0);
    }
  }
}
.page {
  > .panel-backdrop {
    z-index: 290;
  }
  > .panel-reveal {
    z-index: 1;
  }
  > .panel-cover {
    z-index: 300;
  }
  &.with-panel-left-reveal,
  &.with-panel-right-reveal,
  &.with-panel-closing {
    > .page-content,
    > .tabs {
      transition-duration: var(--zmp-panel-transition-duration);
      transition-property: transform;
    }
  }
  &.with-panel-left-reveal {
    > .page-content,
    > .tabs {
      transform: translate3d(var(--zmp-panel-left-width, var(--zmp-panel-width)), 0, 0);
    }
  }
  &.with-panel-right-reveal {
    > .page-content,
    > .tabs {
      transform: translate3d(calc(-1 * var(--zmp-panel-right-width, var(--zmp-panel-width))), 0, 0);
    }
  }
}
.with-panel-left-reveal,
.with-panel-right-reveal,
.with-panel-closing {
  .panel-backdrop-in {
    visibility: visible;
    pointer-events: auto;
    opacity: 0;
  }
}
.with-panel-left-cover,
.with-panel-right-cover {
  .panel-backdrop-in {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }
}
.with-panel-left-reveal {
  .panel-backdrop-in {
    transform: translate3d(var(--zmp-panel-left-width, var(--zmp-panel-width)), 0, 0);
  }
}
.with-panel-right-reveal {
  .panel-backdrop-in {
    transform: translate3d(calc(-1 * var(--zmp-panel-right-width, var(--zmp-panel-width))), 0, 0);
  }
}
.with-panel-left-cover .panel-left {
  transform: translate3d(0px, 0, 0);
}
.with-panel-right-cover .panel-right {
  transform: translate3d(0px, 0, 0);
}
.panel-resize-handler {
  position: absolute;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  z-index: 6000;
  display: none;
  .panel-resizable & {
    display: block;
  }
  .panel-left.panel-cover & {
    right: -3px;
  }
  .panel-left.panel-reveal & {
    right: 0;
  }
  .panel-right.panel-cover & {
    left: -3px;
  }
  .panel-right.panel-reveal & {
    left: 0;
  }
}

.panel-left.panel-in-collapsed {
  & ~ .views,
  & ~ .view,
  & ~ .page-content,
  & ~ .tabs {
    margin-left: var(--zmp-panel-left-collapsed-width, var(--zmp-panel-collapsed-width));
  }

  .page.with-panel-left-reveal & ~ .page-content,
  .page.with-panel-left-reveal & ~ .tabs,
  html.with-panel-left-reveal & ~ .views,
  html.with-panel-left-reveal & ~ .view {
    transform: translate3d(
      calc(
        var(--zmp-panel-left-width, var(--zmp-panel-width)) -
          var(--zmp-panel-left-collapsed-width, var(--zmp-panel-collapsed-width))
      ),
      0,
      0
    );
  }
}
.panel-right.panel-in-collapsed {
  & ~ .views,
  & ~ .view,
  & ~ .page-content,
  & ~ .tabs {
    margin-right: var(--zmp-panel-right-collapsed-width, var(--zmp-panel-collapsed-width));
  }
  .page.with-panel-right-reveal & ~ .page-content,
  .page.with-panel-right-reveal & ~ .tabs,
  html.with-panel-right-reveal & ~ .views,
  html.with-panel-right-reveal & ~ .view {
    transform: translate3d(
      calc(
        var(--zmp-panel-right-collapsed-width, var(--zmp-panel-collapsed-width)) -
          var(--zmp-panel-right-width, var(--zmp-panel-width))
      ),
      0,
      0
    );
  }
}
html.with-modal-popup-push .zmp-root,
html.with-modal-popup-push-closing .zmp-root {
  --zmp-panelPushScale: var(--zmp-popup-push-scale);
  --zmp-panelPushTransitionDuration: var(--zmp-popup-transition-duration);
  --zmp-panelPushBorderRadius: var(--zmp-popup-push-border-radius);
}
html.with-modal-sheet-push .zmp-root,
html.with-modal-sheet-push-closing .zmp-root {
  --zmp-panelPushScale: var(--zmp-sheet-push-scale);
  --zmp-panelPushTransitionDuration: var(--zmp-sheet-transition-duration);
  --zmp-panelPushBorderRadius: var(--zmp-sheet-push-border-radius);
}
html.with-modal-popup-push .zmp-root,
html.with-modal-sheet-push .zmp-root {
  > .panel-in,
  > .panel-out {
    transition-duration: var(--zmp-panelPushTransitionDuration);

    &.panel-reveal.panel-left {
      transform: scale(var(--zmp-panelPushScale, 1));
      transform-origin: 50vw center;
      border-top-left-radius: var(--zmp-panelPushBorderRadius);
      .view {
        border-top-left-radius: var(--zmp-panelPushBorderRadius);
      }
    }
    &.panel-reveal.panel-right {
      transform: scale(var(--zmp-panelPushScale, 1));
      transform-origin: calc(var(--zmp-panel-left-width, var(--zmp-panel-width)) - 50vw) center;
      border-top-right-radius: var(--zmp-panelPushBorderRadius);
      .view {
        border-top-right-radius: var(--zmp-panelPushBorderRadius);
      }
    }
    &.panel-cover.panel-left {
      transform: translate3d(
        calc(-1 * var(--zmp-panel-left-width, var(--zmp-panel-width))),
        0,
        0px
      );
    }
    &.panel-cover.panel-right {
      transform: translate3d(var(--zmp-panel-right-width, var(--zmp-panel-width)), 0, 0px);
    }
  }
}
html.with-modal-popup-push-closing .zmp-root > .panel-in,
html.with-modal-sheet-push-closing .zmp-root > .panel-in {
  transition-duration: var(--zmp-panelPushTransitionDuration);
  &.panel-reveal.panel-left {
    transform-origin: 50vw center;
  }
  &.panel-reveal.panel-right {
    transform-origin: calc(var(--zmp-panel-right-width, var(--zmp-panel-width)) - 50vw) center;
  }
}

.if-ios-theme({
  @import url('./panel-ios.less');
});
.if-md-theme({
  @import url('./panel-md.less');
});
.if-aurora-theme({
  @import url('./panel-aurora.less');
});