/// LoginUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@use "sass:color";

$sg-login-width: grid-step(5);

[ui-view="login"] {
  md-content {
    // Keep content centered
    margin: auto;
    overflow: hidden;
    background: transparent;

    #loginContent {
      background-color: $colorGrey50;
      margin-top: 10px;
    }

    .sg-logo {
      // Center image
      margin: auto;
      margin-top: 60px;
      margin-bottom: 60px;
      img {
        height: 100%;
        width: grid-step(5);
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .motd {
      margin-top: 50px;
      margin-bottom: 50px;
      justify-content: center;
      margin-left: 2%;
      margin-right: 2%;
      padding: 50px;
      animation: fade-in ease 1.5s;
      border-width: 5px;
      border-style: solid;
    }

    .md-whiteframe-3dp {
      margin-bottom: 8px;
    }

    .password-lost-link {
      color: rgb(255, 255, 255);
      font-size: 0.9em;
      text-decoration: none;
    }

    // Overwrite Chrome autofill yellow background
    // http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
    @-webkit-keyframes autofill {
      to {
        background: transparent;
      }
    }
    input:-webkit-autofill {
      -webkit-animation-name: autofill;
      -webkit-animation-fill-mode: both;
    }

    /**
     * On small screens, we dispose the logo and login form as column.
     */
    @include to(md) {
      & {
        // Fill the screen
        min-height: 100%;
        overflow: auto;
      }
      .sg-logo {
        img {
          margin: auto;
          height: 100%;
          max-height: 20vh; // limit the logo's height
          max-width: 75%;
        }
      }
      #loginContent {
        margin-top: 0;
      }
      .sg-login {
        // Let the form take all available space
        flex-grow: 1;
        margin: 0;
      }
      .sg-login-content {
        margin: auto;
        max-width: $sg-login-width;
      }
      .motd {
        margin-bottom: 10px;
        padding: 10px;
        border: none;
      }
    }

    /**
     * On larger screen, we dispose the logo and login form as a row.
     */
    @include from(lg) {
      &.ng-hide {
        .sg-logo img {
          opacity: 0;
          transform: translateX($sg-login-width*0.5 + $baseline-grid + $baseline-grid*2);
        }
        .sg-login {
          opacity: 0;
          transform: translateX(100%);
        }
      }
      .sg-logo img, .sg-login {
        opacity: 1;
      }
      .sg-logo {
        max-height: 100%;
        max-width: 50%;
        img {
          transition: transform $swift-ease-out-duration $swift-ease-out-timing-function 600ms,
          opacity 400ms linear;
        }
      }
      .sg-login {
        max-width: 50%;
        transition: all $swift-ease-out-duration $swift-ease-out-timing-function 600ms;
      }
      .sg-login-content {
        width: $sg-login-width;
      }
    } // from(md)
  }
}
