Polymer upgraded to 1.0 in login flow.

chrome/browser/resources/chromeos/login/gaia_card.css

Index: chrome/browser/resources/chromeos/login/gaia_card.css
diff --git a/chrome/browser/resources/chromeos/login/gaia_card.css b/chrome/browser/resources/chromeos/login/gaia_card.css
index 6fa7d99f10d8dc753a644082792a20b71e7ee705..dda92a8f969d0fb14f3257a7b75efd8c447f9121 100644
--- a/chrome/browser/resources/chromeos/login/gaia_card.css
+++ b/chrome/browser/resources/chromeos/login/gaia_card.css
@@ -4,19 +4,25 @@
  */
 
 :host {
-  height: 528px;
-  width: 448px;
+  display: flex;

[Roman Sorokin (ftl), 2015/06/19 13:10:31]

Why do you use css for layout attributes here and class="layout..." in other
places?

[dzhioev (left Google), 2015/06/20 02:01:55]

I only do this for ":host".

For 0.5 it was like:
<polymer-element name="x-foo" horizontal layout>
</polymer-element>

In 1.0 I could have made something like this:
Polymer({
  is: 'x-foo',
  hostAttributes: {
    class: 'horizontal layout'
  }
});

and this will work for a simple case like:
<x-foo></x-foo>

However if we set "class" property for the element:
<x-foo class="my-x-foo"></x-foo>

its value completely replace the value set in |hostAttributes|.

+  flex-direction: column;
+  position: relative;
 }
 
 .gaia-header {
-  background-color: rgb(66, 133, 244);
-  color: rgb(255, 255, 255);
-  height: 164px;
+  background-color: var(--google-blue-500);
+  color: white;
+  height: 198px;
+}
+
+:host(:not(.disabled)) .gaia-header {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
+  /* z-index is needed to make shadow visible. */
+  z-index: 1;
 }
 
-.gaia-footer,
-#progress-bar::shadow #progressContainer {
-  background-color: rgba(0, 0, 0, 0.02);
+.gaia-footer {
+  background-color: rgb(238, 238, 238);
 }
 
 .gaia-footer {
@@ -24,33 +30,32 @@
 }
 
 .header-container {
-  padding: 34px 40px 16px;
+  padding: 50px 40px 18px;
 }
 
 .footer-container {
   padding: 24px 40px 34px;
 }
 
-::content /deep/ div.gaia-body-text {
+::content div.gaia-body-text {
   margin-bottom: 24px;
 }
 
-::content /deep/ div.gaia-body-text p {
+::content div.gaia-body-text p {
   color: rgba(0, 0, 0, 0.87);
   font-size: 14px;
   line-height: 20px;
   margin: 0;
 }
 
-::content /deep/ p.email,
-::content /deep/ p.enterprise-info {
-  color: rgb(255, 255, 255);
+::content p.enterprise-info {
+  color: white;
   font-size: 15px;
   margin: 8px 0 0 0;
 }
 
-::content /deep/ h1.welcome-message {
-  color: rgb(255, 255, 255);
+::content h1.welcome-message {
+  color: white;
   font-size: 20px;
   font-weight: normal;
   margin-bottom: 0;
@@ -67,15 +72,16 @@
   z-index: 11;
 }
 
-#progress-bar {
+paper-progress#progress-bar {
+  --paper-progress-active-color: var(--google-yellow-500);
+  --paper-progress-container-color: var(--google-yellow-100);
+  bottom: 0;
   display: none;
+  height: 3px;
+  position: absolute;
   width: 100%;
 }
 
-#progress-bar::shadow #activeProgress {
-  background-color: rgb(255, 184, 9);
-}
-
 :host(.full-disabled) #full-overlay,
 :host(.disabled) #bottom-overlay,
 :host(.disabled) #progress-bar {