Pin keyboard moved to under the user profile.

ui/login/account_picker/user_pod_row.css

Index: ui/login/account_picker/user_pod_row.css
diff --git a/ui/login/account_picker/user_pod_row.css b/ui/login/account_picker/user_pod_row.css
index 8efa160dd7d3f3597e0f5c9520b781c77625b9ef..849302941ea359148bee282d79dcf040365d0d19 100644
--- a/ui/login/account_picker/user_pod_row.css
+++ b/ui/login/account_picker/user_pod_row.css
@@ -27,11 +27,11 @@ podrow.images-loading {
               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;
 }
 
@@ -60,12 +60,13 @@ podrow[ncolumns='6'] .pod {
 
 .user-image-pane {
   background-color: white;
-  height: 160px;
   left: 10px;
+  right: 10px;
   position: absolute;
   top: 10px;
-  width: 160px;
   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;
 }
 
 html[dir=rtl] .user-image-pane {
@@ -88,9 +89,9 @@ html[dir=rtl] .user-image-pane {
 /* 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 {
@@ -110,7 +111,6 @@ html:not([screen=login-add-user]) .pod.focused .user-image {
   color: white;
   display: block;
   font-size: small;
-  padding: 3px 0;
   position: absolute;
   text-align: center;
   top: 0;
@@ -122,6 +122,7 @@ html:not([screen=login-add-user]) .pod.focused .user-image {
   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 {
@@ -132,7 +133,7 @@ html[dir=rtl] .main-pane {
 .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;
@@ -190,6 +191,9 @@ html[dir=rtl] .main-pane {
   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;
 }