Handling edge cases of 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. */
@@ skipping 14 matching lines @@
   -webkit-tap-highlight-color: transparent;
   border-radius: 2px;
   cursor: pointer;
   opacity: 0.64;
   outline: none;
   position: absolute;
   z-index: 0;
 }
 
 .account-picker.flying-pods .pod {
-  transition: all 180ms;
+  transition: all 360ms;

[jdufault, 2017/05/31 17:13:21]

Is this from spec? This seems really long.

[Wenzhao (Colin) Zang, 2017/05/31 18:50:16]

I've changed it back. I doubled checked with UX and they don't have a new spec.

 }
 
 .pod.pin-enabled {
   height: 417px;
   top: -87px !important;
 }
 
 .pod .pin-container {
   left: 36px;
   position: absolute;
@@ skipping 42 matching lines @@
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
 .user-image {
   border-radius: 50%;
+  box-shadow: 0 0 2px rgba(255, 255, 255, .34);
   height: 100%;
   width: 100%;
 }
 
+.user-image.switch-image-animation {
+  animation: switch-image 360ms;
+}
+
 .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;
   position: absolute;
@@ skipping 20 matching lines @@
 .name-container {
   display: flex;
   position: absolute;
   top: 182px;
 }
 
 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   display: flex;
   height: 40px;
   left: 51px;
-  padding-bottom: 16px;
   position: absolute;
   top: 244px;
 /* On chromeos we extend the width to cover the padding on the user pods. This
  is so the submit button on chromeos can extend onto the padding as shown on
  mocks. */
 <if expr="not chromeos">
   width: 160px;
 </if>
 <if expr="chromeos">
   width: 204px;
@@ skipping 41 matching lines @@
 .auth-container,
 .password-entry-container,
 .reauth-hint-container {
   display: none;
 }
 
 #input-line {
   opacity: 0.34;
   position: absolute;
   stroke: #FFFFFF;
-  stroke-width: 1;
+  stroke-width: 1px;
   top: 40px;
 }
 
 #input-line[active] {
   opacity: 1;
 }
 
 .pod[is-active-directory] .reauth-warning {
   display: none;
 }
@@ skipping 267 matching lines @@
   opacity: 1;
 }
 
 .action-box-button {
   height: 24px;
   margin: 3px 0 0 8px;
   padding: 0;
   width: 24px;
 }
 
+.action-box-button.ripple-circle {
+  background: #FFF;
+  border-radius: 50%;
+  opacity: .08;
+  position: absolute;
+  transform: scale(0);
+}
+
+.action-box-area.active .action-box-button.ripple-circle {
+  animation: ripple 360ms;
+  transform: scale(1);
+}
+
+@keyframes ripple {
+  0% { transform: scale(0); }
+  30% { transform: scale(1); }
+  100% { transform: scale(1); }
+}
+
 .action-box-area .action-box-icon {
   /* overriden in chrome/browser/resources/md_user_manager/user_manager.css */
   display: none;
 }
 
 .user-image-gradient-area {
   /* overriden in chrome/browser/resources/md_user_manager/user_manager.css */
   display: none;
 }
 
@@ skipping 63 matching lines @@
 .pod input[type='password'].signin::-webkit-input-placeholder {
   color: var(--google-blue-500);
 }
 
 .pod input[type='password'].failed::-webkit-input-placeholder {
   color: var(--google-red-500);
 }
 
 .action-box-menu {
   display: none;
+  position: absolute;
   z-index: 6;
 }
 
 .action-box-area.active ~ .action-box-menu {
-  background-color: rgba(0, 0, 0, .34);
+  background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
   font-size: 13px;
   margin: 3px 0 0 12px;
   width: 220px;
 }
 
 .action-box-area.active ~ .action-box-menu.left-edge-offset {
   left: 0 !important;
@@ skipping 451 matching lines @@
               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);
+@keyframes switch-image {
+  from { transform: rotate3d(0, 1, 0, 90deg); }
+  to { transform: none; }
 }
-
-.small-pod-container-mask {
-  background: linear-gradient(#00B0FF, transparent);
-  height: 112px;
-  opacity: 0.6;
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-}
-
-.small-pod-container-mask.rotate {
-  transform: rotate(180deg);
-}