Lock screen pin keyboard ui upgrades.

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. */
@@ skipping 34 matching lines @@
 }
 
 .pod.flying-pin-pod {
   transition: height 180ms ease-in-out,
               left 180ms ease-in-out,
               top 180ms ease-in-out,
               width 180ms ease-in-out;
 }
 
 .pod.pin-enabled {
-  height: 594px;
-  top: -200px !important;
-  width: 270px;
+  height: 417px;
+  top: -87px !important;
 }
 
 .pod .pin-container {
-  height: 344px;
+  height: 204px;
   position: absolute;
-  top: 250px;
-  width: 270px;
+  top: 170px;
+  width: 180px;

[jdufault, 2016/08/05 21:58:52]

Does width need to be specified?

[sammiequon, 2016/08/05 23:34:50]

Done.

 }
 
 .pod.faded {
   opacity: .75;
 }
 
 podrow[ncolumns='6'] .pod {
   transform: scale3d(0.8, 0.8, 0.8);
 }
 
@@ skipping 16 matching lines @@
   top: 10px;
   transition: height 180ms ease-in-out,
               left 180ms ease-in-out,
               right 180ms ease-in-out,
               top 180ms ease-in-out,
               width 180ms ease-in-out;
   width: 160px;
   z-index: 3;
 }
 
-.user-image-pane.pin-enabled {
-  height: 230px;
-  left: 20px;
-  top: 20px;
-  width: 230px;
-}
-
 html[dir=rtl] .user-image-pane {
   left: auto;
   right: 10px;
 }
 
-html[dir=rtl] .user-image-pane.pin-enabled {
-  left: auto;
-  right: 20px;
-}
-
 .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;
   position: absolute;
-  transition: max-height 180ms ease-in-out,
-              max-width 180ms ease-in-out,
-              top 180ms ease-in-out;
-}
-
-html:not([screen=login-add-user]) .pod .user-image.pin-enabled {
-  max-height: 230px;
-  max-width: 230px;
 }
 
 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;
   position: absolute;
   text-align: center;
   top: 0;
-  transition: left 180ms ease-in-out,
-              top 180ms ease-in-out,
-              width 180ms ease-in-out;
   width: 100%;
 }
 
-.pod.signed-in .signed-in-indicator.pin-enabled {
-  left: 20px;
-  top: 20px;
-  width: 230px;
-}
-
 .main-pane {
   left: 10px;
   position: absolute;
   top: 10px;
   z-index: 2;
 }
 
 html[dir=rtl] .main-pane {
   left: auto;
   right: 10px;
@@ skipping 730 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; }
 }