Multiple user pods implementation for new login screen

ui/login/account_picker/md_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;
 }
 
 pin-keyboard {
   display: block;
 }
 
 .pod {
   -webkit-tap-highlight-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  height: 346px;
+  opacity: 0.64;
   outline: none;
   position: absolute;
-  top: 0;
-  transform: scale3d(0.9, 0.9, 0.9);
-  width: 306px;
   z-index: 0;
 }
 
 .account-picker.flying-pods .pod {
   transition: all 180ms;
 }
 
 .pod.pin-enabled {
   height: 417px;
   top: -87px !important;
 }
 
 .pod .pin-container {
   left: 36px;
   position: absolute;
   top: 300px;
   width: 234px;
   z-index: 3;
 }
 
 .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;
+  opacity: 1;
   z-index: 1;
 }
 
 .pod.focused[auth-type='userClick'] {
   cursor: pointer;
 }
 
+.pod.hovered {
+  opacity: 1;
+}
+
 .user-image-pane {
   height: 96px;
   left: 105px;
   position: absolute;
   top: 54px;
   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;
@@ skipping 22 matching lines @@
 
 .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;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
   opacity: 1;
 }
 
 .pod.multiprofiles-policy-applied .user-image {
   -webkit-filter: grayscale(100%);
 }
@@ skipping 518 matching lines @@
 
 .action-box-menu-remove {
   border-top: 0.25px solid grey;
   color: #7BAAF7;
   outline: none;
   padding: 18px 14px;
 }
 
 .action-box-menu-remove:hover,
 .action-box-menu-remove:focus {
-  background-color: grey;
-  color: white;
+  font-weight: bold;
 }
 
 .action-box-remove-user-warning {
   border-top: 0.25px solid grey;
   color: white;
   font-size: 13px;
   line-height: 18px;
   padding: 13px 14px 18px;
 }
 
@@ skipping 347 matching lines @@
   animation: ellipsis-component2 1.5s infinite;
 }
 
 @keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+.large-pod {

[jdufault, 2017/05/23 20:34:32]

As FYI, I've been using the naming convention 'few', 'some', 'many' because it
avoids the 'small' / 'extra-small' name which is kind of strange.

Though large/small/extra-small is fine.

[rkc, 2017/05/23 21:25:59]

These could be defined functionally instead of visually?
For example, we should have a "focused-pod" and "inactive-pod" (just
suggestions) or something along those lines. We should try to stay away from
using terms that are inherently vague like, large, small or even few, some or
many.

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

Discussed offline. We can keep them until we have better names.

+  height: 346px;
+  width: 306px;
+}
+
+.small-pod {
+  height: 74px;
+  width: 304px;
+}
+
+.small-pod.extra-small {
+  height: 60px;
+  width: 282px;
+}
+
+.small-user-image-container {
+  align-items: center;
+  height: 74px;
+  justify-content: center;
+  position: absolute;
+  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: 74px;
+}
+
+.small-pod.extra-small .small-user-image-container {
+  height: 60px;
+  width: 60px;
+}
+
+.small-pod-image {
+  border-radius: 50%;
+  height: 100%;
+  width: 100%;
+}
+
+.small-pod-name {
+  color: #FFFFFF;
+  flex: auto;
+  font-family: "Roboto";
+  font-size: 20px;
+  height: 28px;
+  left: 90px;
+  opacity: 1;
+  outline: none;
+  overflow: hidden;
+  padding: 23px 0;
+  position: absolute;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 214px;
+}
+
+.small-pod.extra-small .small-pod-name {
+  left: 76px;
+  padding: 16px 0;
+  width: 190px;
+}
+
+.small-pod-container.scroll {
+  background-color: rgba(20, 29, 40, .2);
+}
+
+.small-pod-container-mask {
+  background: linear-gradient(#00B0FF, transparent);
+  box-shadow: 0 0 3px transparent;
+  height: 112px;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+
+.small-pod-container-mask.rotate {
+  transform: rotate(180deg);
+}