body(ng-app="loginApp" ng-controller="loginCtrl")
  .main-form(ng-class="{'animate': show.signup}")
    .switch
      .option(ng-class="{'selected': show.login}" ng-click="toggleSel(true)")
        .text Login
      .option(ng-class="{'selected': show.signup}" ng-click="toggleSel(false)")
        .text Signup
      .bar(ng-class="{'full': show.full}")
    .lg-content
      .lg-fields(ng-class="{'fade': show.login}")
        md-input(model="model.lg_usr")
        md-input(model="model.lg_pwd" type="password")
      .lg-fields(ng-class="{'fade': show.signup}")
        md-input(model="model.nam")
        md-input(model="model.sur")
        md-input(model="model.usr")
        md-input(model="model.pwd"  type="password")
        md-input(model="model.r_pwd"  type="password")
        md-input(model="model.pho")
        .lg-req-fields All fields are required.
    .lg-confirm(ng-class="{'arc-d': show.signup, 'arc-u': show.login, 'disabled': animating}" ng-click="confirm($event)")
      i(ng-show="show.send").material-icons send
      i(ng-hide="show.send").material-icons done
  
  .loading
    .dot.dot-1
    .dot.dot-2
    .dot.dot-3

  script(id="input" type="text/ng-template")
    .mdi-content.md-input
      .mdi-group
        input(type="{{type}}" ng-model="model.bind" required)
        span.highlight
        span.bar
        label.text {{model.title}}
        .show-pwd(ng-if="pwd.on || type=='password'" ng-click="pwd.on=!pwd.on")
          i.material-icons(ng-if="pwd.on") visibility
          i.material-icons(ng-if="!pwd.on") visibility_off

@import "bourbon"
// input width
$mdi_w: 200px

// primary color
$primary: #013440

// accent color
$accent: #FFF204

// error color
$error: #991F28

// valid(?) color
$ok:    #2E7D32

// width of the whole dialog
$lg_w: 500px

// values of the animating height of the dialog
$lg_h_from: 250px
$lg_h_to: 550px

// values of the animating top value of the dialog
$lg_top_from: 300px
$lg_top_to: 600px

// width of input
$lg_i_w: 250px

// cubic-bezier timing functions
$bezier: cubic-bezier(0.4, 0.0, 0.2, 1)
$bezier_out: cubic-bezier(0.4, 0.0, 0.6, 1)
$bezier_in: cubic-bezier(0.0, 0.0, 0.2, 1)

@mixin font($opts)
  font:
    size: map-get($opts, s)
    weight: map-get($opts, w)
  color: map-get($opts, c)

body, html
  background: #999
  position: relative
  font-family: 'Roboto'
  width: 100vw
  height: 100vh
  overflow-x: hidden
  overflow-y: scroll

.main-form
  background: white
  width: $lg_w
  position: absolute
  top: $lg_top_from
  left: 50%
  bottom: auto
  transform: translate(-50%, -100%)
  height: $lg_h_from
  border-radius: 2px
  transition: height 300ms $bezier, top 330ms $bezier
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2)

  .lg-confirm
    position: absolute
    left: 50%
    top: $lg_h_from
    transform: translate(-50%, -50%)
    +size(70px)
    background: $accent
    border-radius: 50%
    transition: top 330ms $bezier, transform 330ms $bezier
    text-align: center
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.7)
    
    &:hover
      cursor: pointer
      
  
    i.material-icons
      +font((s: 30px, w: 400, c: rgba(0, 0, 0, 0.8)))
      line-height: 70px
      transition: all 3300ms $bezier infinite  
  
  .lg-confirm.send
    animation: go 450ms $bezier_out
      fill-mode: forwards
  
  .return
    animation: return 450ms $bezier_in
      fill-mode: forwards
  
  .arc-d
    animation: arc-d 330ms $bezier 100ms
      fill-mode: forwards

  .arc-u
    animation: arc-u 330ms $bezier
      fill-mode: forwards

@keyframes go
  0%
    transform: translate(-50%, -50%)
  100%
    transform: translateX(51vw)

@keyframes return
  0%
    transform: translate(0, 51vh)
  0%, 100%
    background: $ok
  100%
    transform: translate(0, -50%)
  
@keyframes arc-d
  from
    transform: translate(-50%, -50%)
  to
    transform: translate(80%, -50%)

@keyframes arc-u
  0%
    transform: translate(80%, -50%)
  80%
    transform: translate(-50%, -50%)
  100%
    transform: translate(-50%, -50%)

.animate
  top: $lg_top_to
  height: $lg_h_to

  .lg-confirm
    top: $lg_h_to
    // transform: rotate(-360deg)

.short
  top: $lg_top_from
  height: 150px
  
  .lg-confirm
    top: 150px
    
.main-form

  .switch
    // padding: 20px
    +clearfix
    position: relative

    .option
      +font((s: 25px, w: 500, c: rgba(0, 0, 0, 0.7)))
      display: inline-block
      text-align: center
      width: 50%
      height: 50px
      position: relative
      background: rgba(0, 0, 0, 0.1)
      transition: background 330ms $bezier
      
      &:hover
        cursor: pointer
      
      &:nth-child(1)
        float: left

      &:nth-child(2)
        float: right


      .text
        transform: translateY(30%)

    .selected
      background: white

      &:nth-child(1) ~ .bar
        left: 50%

    .bar
      width: 50%
      height: 5px
      background: $primary
      position: absolute
      top: calc(100% - 5px)
      left: 0
      transition: all 330ms $bezier
    
    .full
      width: 100%

  .lg-content
    text-align: center

    .lg-fields
      display: inline-block
      margin-top: 10px
      transition: all 330ms $bezier
      opacity: 0
      position: absolute
      left: 50%
      transform: translateX(-90%)
      pointer-events: none

    .fade
      opacity: 1
      transform: translateX(-50%)
      pointer-events: all

    .lg-req-fields
      margin-top: 20px
      +font((s: 18px, c: $error, w: 500))

.loading
  // width: 100px
  // height: 30px
  // background: white
  position: absolute
  left: 50%
  bottom: 50px
  transform: translateX(-45%)
  font-size: 0
  transition: all 330ms ease-in-out
  opacity: 0

.fade 
  opacity: 1
  
  .dot
    +size(20px)
    background: white
    border-radius: 50%
    display: inline-block
    margin: 7px
    box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.7)
  
  @for $i from 1 through 3
    .dot-#{$i}
      animation: bounce 500ms ease-in-out infinite
        delay: calc((200ms * #{$i}))
        

@keyframes bounce
  0%, 100%
    transform: translateY(0)
  50%
    transform: translateY(-20px)
 
.disabled
  pointer-events: none
  
.mdi-content.md-input
  padding-top: 15px
  padding-bottom: 10px
  // display: inline-block

  .mdi-group
    position: relative
    width: $mdi_w
    // margin-bottom: 25px

    input
      font-size: 16px
      padding: 10px 10px 10px 5px
      display: inline-block
      border: none
      border-bottom: 1px solid #757575
      background: transparent

      &:focus
        outline: none

      &:focus ~ label, &:valid ~ label
        top: -20px
        font-size: 12px
        color: #ccc

      &:focus ~ .bar:before, &:focus ~ .bar:after
        width: 50%

      &:focus ~ .highlight
        animation: inputHighlighter 0.3s ease

    label
      color: #999
      font-size: 16px
      font-weight: normal
      position: absolute
      pointer-events: none
      left: 5px
      top: 10px
      transition: 0.2s ease all

    .bar
      position: relative
      display: block
      width: $mdi_w

      &:before
        left: 50%

      &:after
        right: 50%

      &:before, &:after
        content: ''
        height: 2px
        width: 0
        bottom: 1px
        position: absolute
        background: transparent
        transition: 0.2s ease all

    .highlight
      position: absolute
      height: 60%
      width: $mdi_w/2
      top: 25%
      left: 0
      pointer-events: none
      opacity: 0.5

    .show-pwd
      width: 40px
      height: 40px
      position: absolute
      top: 10px
      right: 10px

      .material-icons
        float: right
        
        &:hover
          cursor: pointer


@keyframes inputHighlighter
  from
    background: $primary
  to
    width: 0
    background: transparent

var app = angular.module('loginApp', []);

app.controller('loginCtrl', function($scope, $timeout){
  
  $scope.model={
    lg_usr : { bind: '', title: 'Username' },
    lg_pwd : { bind: '', title: 'Password'},
    nam : { bind: '', title: 'Name' },
    sur : { bind: '', title: 'Surname'},
    usr : { bind: '', title: 'Username' },
    pwd : { bind: '', title: 'Password'},
    r_pwd: { bind: '',title: 'Repeat password'},
    pho: { bind: '',title: 'Mobile phone'}
  };
  
  $scope.show = {
    login: true,
    signup: false,
    send: true
  };
  
  $scope.animating = false;
  
  $scope.toggleSel = function(value){
    if($scope.show.send)
      $scope.show = {
        login: value,
        signup: !value,
        send: true,
        full: false
      }
  };
  
  $scope.confirm = function(e){
    $scope.animating = true;
    var me = angular.element(e.target);
    if(!me.hasClass('lg-confirm')){
      while(!me.hasClass('lg-confirm')){
        me = me.parent();
      }
    }
    var form = me.parent();
    while(!form.hasClass('main-form')){
      form = form.parent();
    }
    form.toggleClass('short');
    if($scope.show.login)  $scope.show.login = false;
    else if($scope.show.signup) $scope.show.signup = false;
    
    var load;
    $timeout(function(){
      me.toggleClass('send');
      load = form.parent().children();
      load.toggleClass('fade');
      $scope.show.full=true;
    }, 200);
    $timeout(function(){
      $scope.show.send=false;
    }, 600);
    
    
    var n = Math.floor((Math.random() * 3000) + 1000);
    $timeout(function(){
      load.toggleClass('fade');
    }, n);
    
    $timeout(function(){
      me.toggleClass('send');
      me.toggleClass('return');
    }, (n+100));
  
    $timeout(function(){
      form.toggleClass('short');
      $scope.show.send = true;
      me.toggleClass('return');
      $scope.toggleSel(true);
      $scope.show.full=false;
      $scope.animating = false;
    }, (n+3100))
  
  };
  
});

app.directive('mdInput', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'input',
    scope: {
      model: '=',
      type: '@?'
    }, link: function($scope, element, attrs){
      if($scope.type=='password')
        $scope.pwd= { on: false };

      $scope.$watch('pwd.on', function(newV, old){
        if(newV!=old)
          $scope.type = (newV)? 'text' : 'password';
      });
    }
  }
});