ChromeOS: Implement minumal material design OOBE.

chrome/browser/resources/chromeos/login/oobe_card.html

Index: chrome/browser/resources/chromeos/login/oobe_card.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_card.html b/chrome/browser/resources/chromeos/login/oobe_card.html
new file mode 100644
index 0000000000000000000000000000000000000000..5eecc88cfd25466cc497be945f86eba78e038b58
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_card.html
@@ -0,0 +1,108 @@
+<!-- Copyright 2016 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. -->
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<!--
+  Simple OOBE card which should be used for OOBE UI elements.
+  It has blue header and grey footer.
+
+  Example:
+    <oobe-card>
+      <div class="header" flex vertical layout end-justified start>

[jdufault, 2016/05/20 18:27:27]

Is the end quote after header supposed to be after start?

[Alexander Alekseev, 2016/05/24 00:38:45]

Fixed.

+        ...
+      </div>
+      <oobe-input-form class="footer" ...>
+      </oobe-input-form>
+    </oobe-card>
+
+  Add class |header| to all which you want to go inside blue header.  Similar
+  with class |footer|.
+-->
+<dom-module name="oobe-card">
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+    
+    .oobe-header {
+      background-color: var(--google-blue-500);
+      color: white;
+      height: 198px;
+    }
+    
+    :host(:not(.disabled)) .oobe-header {
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
+      /* z-index is needed to make shadow visible. */
+      z-index: 1;
+    }
+    
+    .oobe-footer {
+      background-color: white;
+    }
+    
+    .oobe-footer {

[jdufault, 2016/05/20 18:27:27]

Merge .oobe-footer classes

[Alexander Alekseev, 2016/05/24 00:38:45]

Done.

+      position: relative;
+    }
+    
+    .header-container {
+      padding: 50px 40px 18px;
+    }
+    
+    .footer-container {
+      padding: 24px 40px 34px;
+    }
+    
+    ::content div.oobe-body-text {
+      margin-bottom: 24px;
+    }
+    
+    ::content div.oobe-body-text p {
+      color: rgba(0, 0, 0, 0.87);
+      font-size: 14px;
+      line-height: 20px;
+      margin: 0;
+    }
+    
+    ::content h1.welcome-message {
+      color: white;
+      font-size: 20px;
+      font-weight: normal;
+      margin-bottom: 0;
+    }
+    
+    .overlay {
+      background-color: rgba(0, 0, 0, 0.5);
+      display: none;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 100%;
+      z-index: 11;
+    }
+    
+    :host(.full-disabled) #full-overlay,
+    :host(.disabled) #bottom-overlay,
+  </style>
+
+  <template>
+    <div class="oobe-header vertical layout relative">

[jdufault, 2016/05/20 18:27:27]

Can you verify that the vertical, layout, and relative classes are still defined
and useful here?

[Alexander Alekseev, 2016/05/24 00:38:45]

Yes, they are still usefull.
https://elements.polymer-project.org/guides/flex-layout

+      <div class="header-container flex vertical layout relative">
+        <content select=".header"></content>
+      </div>
+    </div>
+    <div class="oobe-footer flex vertical layout">
+      <div class="footer-container flex vertical layout">
+        <content select=".footer"></content>
+      </div>
+      <div id="bottom-overlay" class="overlay"></div>
+    </div>
+    <div id="full-overlay" class="overlay"></div>
+  </template>
+</dom-module>
+