framework7/components/page/page.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Pages === */
@import url('./page-vars.less');
.pages {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background-color: var(--f7-page-bg-color);
  z-index: 1;
  &.stacked {
    display: none;
  }
}
.page-with-navbar-large-collapsed {
  --f7-navbar-large-collapse-progress: 1;
}
.page-previous {
  pointer-events: none;
}
.page-content {
  .scrollable();
  box-sizing: border-box;
  height: 100%;
  position: relative;
  z-index: 1;
  padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
  padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.page-transitioning {
  &, .page-shadow-effect, .page-opacity-effect {
    transition-duration: var(--f7-page-transition-duration);
  }
}
.page-transitioning-swipeback {
  &, .page-shadow-effect, .page-opacity-effect {
    transition-duration: var(--f7-page-swipeback-transition-duration);
  }
}
.router-transition-forward, .router-transition-backward {
  .page-next, .page-current, .page-previous:not(.stacked) {
    pointer-events: none;
  }
}
.page-fake-shadow() {
  position: absolute;
  top: 0;
  width: 16px;
  bottom: 0;
  z-index: -1;
  content: '';
  opacity: 0;
  .rtl({
    left: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
  });
  .ltr({
    right: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
  });
}
.page-fake-opacity() {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.1);
  width: 100%;
  bottom: 0;
  content: '';
  opacity: 0;
  z-index: 10000;
}
.page-shadow-effect {
  .page-fake-shadow();
}
.page-opacity-effect {
  .page-fake-opacity();
}

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

.view:not(.view-master-detail) {
  .page-master-stacked {
    display: none;
  }
  .navbar-master-stacked {
    display: none;
  }
}
.view-master-detail {
  .page-master,
  .navbar-master {
    width: var(--f7-page-master-width);
    .rtl({
      left: auto;
      right: 0;
    });
    .ltr({
      --f7-safe-area-right: 0px;
      --f7-safe-area-outer-right: 0px;
      border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
    });
    .rtl({
      --f7-safe-area-left: 0px;
      --f7-safe-area-outer-left: 0px;
      border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
    });
  }
  .page-master-detail,
  .navbar-master-detail {
    width: calc(100% - var(--f7-page-master-width));
    .ltr({
      --f7-safe-area-left: 0px;
      --f7-safe-area-outer-left: 0px;
      left: var(--f7-page-master-width);
    });
    .rtl({
      --f7-safe-area-right: 0px;
      --f7-safe-area-outer-right: 0px;
      right: var(--f7-page-master-width);
    });
  }
  .page-master {
    z-index: 2;
    transform: none;
    pointer-events: auto;
    &:before,
    &:after {
      display: none;
    }
  }
  &.router-transition {
    .page-master {
      animation: none;
    }
  }
}
.md .router-transition-custom,
.ios .router-transition-custom,
.aurora .router-transition-custom {
  .page-previous,
  .page-next {
    opacity: 1;
    transform: none;
  }
}

@import url('./page-transitions/circle.less');
@import url('./page-transitions/cover-v.less');
@import url('./page-transitions/cover.less');
@import url('./page-transitions/dive.less');
@import url('./page-transitions/fade.less');
@import url('./page-transitions/flip.less');
@import url('./page-transitions/parallax.less');
@import url('./page-transitions/push.less');