FEATURE: New login / create account form layout

app/assets/stylesheets/mobile/login.scss

@@ -1,95 +1,194 @@
-// style that apply to the login popup
+// -webkit- prefix needed for 
+// flexbox on Safari 8
+// can be removed once support
+// for safari 8 is dropped
 
-.btn-social {
-  width: 150px;
+// shared styles
+// used in both login and
+// create account modals
+.login-modal,
+.create-account {
+  .modal-body {
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: column-reverse;
+    display: flex;
+    align-items: center;
+    flex-direction: column-reverse;
+  }
+
+  .modal-inner-container {
+    max-width: 350px;
+  }
+
+  #login-buttons:not(.hidden) {
+    display: -webkit-flex;
+    -webkit-flex-wrap: wrap;
+    -webkit-justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    padding-bottom: 1em;
+
+    button {
+      margin: 0.15em;
+      max-width: 50%;
+      min-width: 158px;
       font-size: $font-up-1;
       overflow: hidden;
       white-space: nowrap;
     }
-
-#login-buttons {
-  button {
-    margin: 0 0 5px 0;
-  }
-  display: inline-block;
   }
 
-#login-form {
+  #login-form,
+  .login-form {
+    border-top: 1px solid $primary-low;
+  }
 
-  label { float: left; display: block; }
-  textarea, input, select {
-    font-size: $font-up-1;
-    clear: left;
+  form {
+    display: -webkit-flex;
+    -webkit-justify-content: center;
+    display: flex;
+    justify-content: center;
+    width: 320px;
+  }
+
+  table {
+    width: 100%;
+    max-width: 90vw; // Iphone 5s
+    margin: 0 auto;
+  }
+
+  tr {
+    &.input td label {
+      margin-top: 0.75em;
+    }
+
+    &:not(.instructions) td {
+      padding: 2px 0 0 0;
+    }
+
+    &:not(.password-confirmation) {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .tip {
+    &:not(:empty) + td {
+      display: none;
+    }
+
+    &:not(:empty),
+    &:empty + td {
+      font-size: $font-down-1;
+    }
+  }
+
+  .modal-body input[type="text"],
+  .modal-body input[type="email"],
+  .modal-body input[type="password"] {
     margin-top: 0;
-    }
-  td { padding: 4px; }
+    width: 100%;
+    box-sizing: border-box;
   }
 
-a#new-account-link { white-space:nowrap; }
+  .modal-footer {
+    width: 330px;
+    box-sizing: border-box;
+    margin: 0 auto;
+  }
 
-// Create account
-
-.login-modal, .create-account {
   .btn-primary {
     margin-bottom: 10px;
     float: left;
   }
+
+  .alert.alert-error {
+    padding: 0.5em 1em;
+    margin: 0;
   }
 
+  #new-account-link {
+    white-space: nowrap;
+  }
+}
 
-$label-width: 85px;
-$input-width: 184px;
+// Styles for the
+// login modal only
+.d-modal.login-modal {
+  .modal-body {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
 
+  #credentials {
+    width: 100%;
+    tr {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  #login-form {
+    td {
+      padding: 0;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    label {
+      float: left;
+      display: block;
+    }
+    textarea,
+    input,
+    select {
+      font-size: $font-up-1;
+      clear: left;
+      margin-top: 0;
+    }
+  }
+
+  tr {
+    td label {
+      margin-top: 0.75em;
+      padding: 4px 0;
+    }
+  }
+}
+
+// styles for the
+// create account
+// modal only
 .create-account .modal-body {
-  input[type=text], input[type=email], input[type=password] {
-    display: inline-block;
-    margin-bottom: 5px;
-    margin-top: 10px;
-    width: $input-width;
-  }
-
   tr.instructions {
     label {
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
   }
-
-  tr.input {
-    td.label {
-      width: $label-width;
-    }
-  }
 }
 
 .create-account {
   .user-fields {
     margin-top: 10px;
     padding-top: 15px;
-    border-top: 1px solid #e9e9e9;
+    border-top: 1px solid $primary-low;
   }
 
   .user-field.confirm {
     margin-top: 10px;
     margin-bottom: 10px;
   }
-  
-  .user-field {
-    label {
-      width: $label-width;
 }
 
-    input[type=text] {
-      margin-top: 0;
-      width: $input-width;
-    }
-    .controls {
-      margin-left: $label-width;
-    }
-  }
-}
-
-
-.password-reset, .invites-show {
+.password-reset,
+.invites-show {
   margin-top: 30px;
   .col-image {
     padding-top: 12px;
@@ -120,7 +219,6 @@ $input-width: 184px;
   }
 }
 
-
 .invites-show {
   .col-image {
     display: none;