framework7/components/login-screen/login-screen.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Login Screen === */
.login-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  box-sizing: border-box;
  transition-property: transform;
  transform: translate3d(0, 100%, 0);
  background: #fff;
  z-index: 11000;
  &.modal-in, &.modal-out {
    transition-duration: 400ms;
  }
  &.not-animated {
    transition-duration: 0ms;
  }
  &.modal-in {
    display: block;
    transform: translate3d(0, 0, 0);
  }
  &.modal-out {
    transform: translate3d(0, 100%, 0);
  }
}
html.with-statusbar {
  &.device-ios .login-screen, &.ios:not(.device-ios):not(.device-android) .login-screen {
    height: ~"calc(100% - 20px)";
    top: 20px;
  }
  .safe-areas({
    .login-screen {
      height: ~"calc(100% - constant(safe-area-inset-top))";
      height: ~"calc(100% - env(safe-area-inset-top))";
      top: constant(safe-area-inset-top);
      top: env(safe-area-inset-top);
    }
  });
  &.device-android .login-screen, &.md:not(.device-ios):not(.device-android) .login-screen {
    height: ~"calc(100% - 24px)";
    top: 24px;
  }
}

.login-screen-content {
  background: #fff;
  .login-screen-title, .list, .block, .block-footer, .block-header {
    max-width: 480px;
  }
  .list ul {
    .hairline-remove(top);
    .hairline-remove(bottom);
    background: none;
  }
  .block-footer, .block-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.login-screen-title {
  text-align: center;
}

& when (@includeIosTheme) {
  @import url('./login-screen-ios.less');
}
& when (@includeMdTheme) {
  @import url('./login-screen-md.less');
}