plumes/features/login/css/pl-login.less

Flying-fast Metro future vision components

@import "../../common/less/common-mixins.less";
@import "../../common/less/common-variables.less";

@-webkit-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
@-moz-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
@-ms-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
@-o-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
@keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }

@-webkit-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
@-moz-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
@-ms-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
@-o-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
@keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }

.pl-login {
  z-index: 1100;

  .pl-login-container {
    overflow: hidden;
    z-index: 1001;
    position: fixed;
    left: 2rem;
    right: 2rem;
  }

  .bottom-border-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;

    .bottom-border {
      display: none;
      max-width: 70rem;
      width: 100%;
      height: 1px;
      margin: 0 auto;

      .animation(pl-bottom-border-show 0.65s @easeOutQuart);
    }
  }

  .pl-login-content {
    position: relative;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;

    .pl-login-form {
      opacity: 0;
      position: absolute;
      left: 50%;
      width: 0;
      margin-left: 0;
      top: 50%;
      height: 0;
      margin-top: 0;
      overflow: hidden;

      .pl-login-form-content {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .pl-login-form-message {
        position: absolute;
        left: 0;
        bottom: -14rem;
        width: 100%;
        height: 100%;
        color: white;
        line-height: 14rem;

        p {
          font-size: 2rem;
          line-height: 4rem;
          vertical-align: middle;
          display: inline-block;
          line-height: normal;
          text-align: center;
          width: 100%;
        }
      }

      .old-avatar {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 14rem;
        height: 14rem;
        background: url('avatar.png') no-repeat;
        background-size: 100%;

        &.show {
          display: block;
        }
      }

      .avatar {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 14rem;
        width: 14rem;
        margin: -7rem 0 0 -7rem;
        background: url('avatar.png') no-repeat;
        background-size: 100%;

        &.show-again {
          .animation(pl-avatar-show-again 0.65s @easeOutQuart);
        }
      }

      .input {
        position: relative;
        left: 0;
        background: none;
        color: white;
        margin: 0 0 0 15rem;
        border: none;
        font-size: 2rem;
        line-height: 4rem;
        height: 7rem;
        width: 25rem;
        .transition(all 0.35s @easeOutQuart);

        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px @accentColor inset;
          -webkit-text-fill-color: white !important;
        }

        &::-webkit-input-placeholder {
           color: white;
           opacity: 0.5;
        }

        &:-moz-placeholder {
           color: white;
           opacity: 0.5;
        }

        &::-moz-placeholder {
           color: white;
           opacity: 0.5;
        }

        &:-ms-input-placeholder {
           color: white;
           opacity: 0.5;
        }

        &.name {
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        &.code {
          position: absolute;
          top: 0;
          left: auto;
          right: -26rem;
          .transition(all 0.7s 0.35s @easeOutQuart);

          &.show {
            right: 0;
          }
        }

        &.hide {
          left: -26rem;
        }
      }

      .mask-password {
        position: absolute;
        height: 7rem;
        background: white;
        bottom: -1px;
        width: 0;
        right: 0;
        .transition(all 0.35s @easeOutQuart);

        &.show {
          width: 26rem;
        }
      }

      .submit {
        display: none;
      }
    }

    .pl-login-links {
      .noselect();
      cursor: pointer;
      position: absolute;
      opacity: 0;
      right: 50%;
      top: 50%;
      width: 20rem;
      margin-right: -20rem;
      margin-top: 1rem;
      font-size: 1.6rem;
      text-align: right;
      height: 2rem;
      line-height: 2rem;
      overflow: hidden;
      .transition(all 0.35s @easeOutQuart);

      .pl-login-forgot-link {
        top: 2rem;
      }

      .pl-login-login-link {
        top: -2rem;
      }

      div {
        position: absolute;
        right: 0;
        .transition(all 0.35s @easeOutQuart);

        &.show {
          top: 0;
        }
      }
    }

    .pl-login-forgot-texts {
      position: absolute;
      left: 50%;
      bottom: 50%;
      width: 40rem;
      height: 5.6rem;
      margin-left: -20rem;
      margin-bottom: 9rem;
      font-size: 1.8rem;
      overflow: hidden;
      .transition(all 0.35s @easeOutQuart);

      .pl-login-forgot-text {
        top: 5.6rem;
      }

      .pl-login-forgot-code-text, .pl-login-forgot-password-text {
        top: -5.6rem;
      }

      p {
        position: absolute;
        left: 0;
        right: 0;
        height: 5.6rem;
        margin: 0;
        .transition(all 0.35s @easeOutQuart);

        &.show {
          top: 0;
        }
      }

      .key {
        position: relative;
        top: -2px;
        background: #fff;
        font-weight: 700;
        padding: 2px .65rem;
        font-size: 1.2rem;
        margin: 0 2px;
        border-radius: .25rem;
        color: #3d3c40;
        border-bottom: 2px solid #9e9ea6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        text-shadow: none;
      }
    }

    .help-button {
      .noselect();
      cursor: pointer;
      position: absolute;
      bottom: 50%;
      left: 50%;
      border: none;
      background: none;
      padding: 0;
      font-size: 2.4rem;
      font-weight: 300;
      margin: 0 0 1.4rem 0;
      line-height: 2.4rem;
      opacity: 0;
      .transition(all 0.35s @easeOutQuart);

      &.show {
        margin-left: 22rem;
        opacity: 1;
      }
    }
  }

  .help-container {
    position: absolute;
    width: 27rem;
    opacity: 0;
    right: -27rem;
    .transition(all 0.35s @easeOutQuart);

    ol {
      margin-top: 1.5rem;
    }
  }

  &.help {
    .help-container {
      opacity: 0.7;
      right: 0;
    }
  }

  &.help .pl-login-content, &.help.sb-show-4 .pl-login-content {
    .pl-login-forgot-texts, .pl-login-links, .pl-login-form {
      margin-left: -40rem;
    }

    .help-button, .help-button.show {
      margin-left: 0;
      opacity: 0;
    }
  }

  &.sb-show-1, &.sb-show-2, &.sb-show-3, &.sb-show-4, &.sb-hide-1 {
    .bottom-border-container .bottom-border {
      display: block;
    }
  }

  &.sb-show-2 {
    .pl-login-container {
      .transition(all 1s @easeOutQuart);
    }

    .pl-login-content .pl-login-form {
      opacity: 1;
      width: 14rem;
      height: 14rem;
      margin-left: -7rem;
      margin-top: -7rem;
      .transition(all 0.45s @easeOutQuart);
    }
  }

  &.sb-show-3, &.sb-show-4 {
    .pl-login-content .pl-login-form {
      opacity: 1;
      width: 40rem;
      height: 14rem;
      margin-left: -20rem;
      margin-top: -7rem;
      .transition(all 0.45s @easeOutQuart);

      .avatar {
        left: 0;
        top: 0;
        margin: 0;
      }
    }
  }

  &.sb-show-4 {
    .pl-login-content .pl-login-links {
      opacity: 1;
      margin-top: 8rem;
      .transition(all 0.45s @easeOutQuart);
    }
  }

  &.sb-hide-1, &.sb-hide-2 {
    .pl-login-container {
      .transition(all 0.55s @easeOutQuart);
    }

    .pl-login-content .pl-login-form {
      opacity: 1;
      width: 40rem;
      height: 14rem;
      margin-left: -20rem;
      margin-top: -7rem;
      .transition(all 0.55s @easeOutQuart);

      .avatar {
        left: 0;
        top: 0;
        margin: 0;
      }
    }

    .bottom-border-container {
      opacity: 0;
      .transition(all 0.55s @easeOutQuart);
    }
  }

  &.sb-hide-2 {
    .pl-login-content .pl-login-form {
      width: 14rem;
      height: 14rem;
      margin-left: -7rem;
      margin-top: -7rem;
      .transition(all 0.45s @easeOutQuart);
    }
  }

  &.sb-hide-3 {
    .pl-login-content .pl-login-form {
      opacity: 1;
      width: 0;
      height: 0;
      margin-left: 0;
      margin-top: 0;
      .transition(all 0.15s linear);
    }
  }

  &.sb-message-1 {
    .pl-login-content .pl-login-form .pl-login-form-content {
      bottom: 14rem;
      .transition(all 0.35s @easeOutQuart);
    }
  }

  &.sb-message-2 {
    .pl-login-content .pl-login-form .pl-login-form-content {
      bottom: -14rem;
    }

    .pl-login-content .pl-login-form .pl-login-form-message {
      bottom: 0;
      .transition(all 0.35s @easeOutQuart);
    }
  }

  &.sb-message-3 {
    .pl-login-content .pl-login-form .pl-login-form-content {
      bottom: -14rem;
    }

    .pl-login-content .pl-login-form .pl-login-form-message {
      bottom: 14rem;
      .transition(all 0.35s @easeOutQuart);
    }
  }

  &.sb-message-4 {
    .pl-login-content .pl-login-form .pl-login-form-content {
      bottom: 0;
      .transition(all 0.35s @easeOutQuart);
    }
  }
}