/// LoginUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

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

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

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

    // 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%;
      }
      .sg-logo {
        img {
          margin: auto;
          height: 100%;
          max-width: 75%;
        }
      }
      .sg-login {
        // Let the form take all available space
        flex-grow: 1;
        margin: 0;
      }
      .sg-login-content {
        margin: auto;
        max-width: $sg-login-width;
      }
    }

    /**
     * On larger screen, we dispose the logo and login form as a row.
     */
    @include from(md) {
      &.ng-hide {
        .sg-logo img {
          opacity: 0;
          transform: translateX($sg-login-width/2 + $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)
  }
}