Pin keyboard moved to under the user profile.

ui/login/account_picker/user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
   height: 100%;
   overflow: visible;
   position: absolute;
   width: 100%;
 }
 
 /* Hide the pod row while images are loading. */
 podrow.images-loading {
   visibility: hidden;
 }
 
 .pod {
   -webkit-tap-highlight-color: transparent;
   background-color: white;
   border-radius: 2px;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
               0 2px 6px rgba(0, 0, 0, 0.15),
               0 3px 0 rgba(0, 0, 0, 0.08);
   cursor: pointer;
-  height: 213px;
+  height: 100%;
   outline: none;
   position: absolute;
   transform: scale3d(0.9, 0.9, 0.9);
-  width: 180px;
+  width: 100%;
   z-index: 0;
 }
 
 .account-picker.flying-pods .pod {
   transition: all 180ms;
 }
 
 .pod.faded {
   opacity: .75;
 }
 
 podrow[ncolumns='6'] .pod {
   transform: scale3d(0.8, 0.8, 0.8);
 }
 
 .pod.focused {
   /* Focused pod has the same size no matter how many pods. */
   cursor: default;
   transform: scale3d(1, 1, 1) !important;
   z-index: 1;
 }
 
 .pod.focused[auth-type='userClick'] {
   cursor: pointer;
 }
 
 .user-image-pane {
   background-color: white;
-  height: 160px;
   left: 10px;
+  right: 10px;
   position: absolute;
   top: 10px;
+  z-index: 3;
+  height: 160px;

[jdufault, 2016/05/31 19:24:51]

All CSS properties should be in alphabetical order.

[sammiequon, 2016/06/14 22:22:21]

Done.

   width: 160px;
-  z-index: 3;
 }
 
 html[dir=rtl] .user-image-pane {
   left: auto;
   right: 10px;
 }
 
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
 .pod .user-image {
   flex: none;
 }
 
 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
  style rule once it is included on CrOS only. crbug.com/397638 */
 html:not([screen=login-add-user]) .pod .user-image {
-  max-height: 160px;
-  max-width: 160px;
   opacity: 0.7;
+  height: 100%;

[jdufault, 2016/05/31 19:24:52]

nit: alphabetical ordering

[sammiequon, 2016/06/14 22:22:22]

Done.

+  width: 100%;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
   opacity: 1;
 }
 
 .pod.multiprofiles-policy-applied .user-image {
   -webkit-filter: grayscale(100%);
 }
 
 .signed-in-indicator {
   display: none;
 }
 
 .pod.signed-in .signed-in-indicator {
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: block;
   font-size: small;
-  padding: 3px 0;
   position: absolute;
   text-align: center;
   top: 0;
   width: 100%;
 }
 
 .main-pane {
   left: 10px;
   position: absolute;
   top: 10px;
   z-index: 2;
+  display: inline-block;

[jdufault, 2016/05/31 19:24:52]

nit: alphabetical ordering

[sammiequon, 2016/06/14 22:22:21]

Done.

 }
 
 html[dir=rtl] .main-pane {
   left: auto;
   right: 10px;
 }
 
 .name-container,
 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   background-color: white;
-  display: flex;
+  display: block;

[jdufault, 2016/05/31 19:24:52]

Is this change needed?

[sammiequon, 2016/06/14 22:22:21]

Nope. Reverted.

   position: absolute;
   top: 160px;
   width: 160px;
 }
 
 .name-container {
   transition: transform 180ms;
 }
 
 .pod.focused .name-container {
@@ skipping 37 matching lines @@
 
 .pod input[type='password'] {
   background-color: white;
   border: none;
   padding: 4px 6px;
   position: relative;
   top: 6px;
   width: 100%;
 }
 
+.password-container input[type='password'] {
+  opacity: 0;
+}

[jdufault, 2016/05/31 19:24:51]

Is this permanently hiding the password input field?

The PIN keyboard will not always be active, so the user pods should look like
they do now if the PIN keyboard is not enabled.

[sammiequon, 2016/06/14 22:22:21]

Done.

 .capslock-hint-container {
   display: none;
 }
 
 .capslock-on .capslock-hint-container {
   display: block;
   flex: none;
 }
 
 .capslock-hint {
@@ skipping 618 matching lines @@
   -webkit-animation: ellipsis-component2 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }