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

<!-- Copyright 2015 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/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<!--
  Simple Gaia card which should be used for local UI elements that look like
  GAIA. It has blue header and grey footer.

  Example:
    <gaia-card>
      <div slot="header" flex vertical layout end-justified start>
        ...
      </div>
      <gaia-input-form slot="footer" ...>
      </gaia-input-form>
    </gaia-card>

  Add class |header| to all which you want to go inside blue header.  Similar
  with class |footer|.
-->
<dom-module id="gaia-card">
  <link rel="stylesheet" href="gaia_card.css">
  <link rel="stylesheet" href="oobe_flex_layout.css">

  <template>
    <div class="gaia-header vertical layout relative">
      <div class="header-container flex vertical layout relative">
        <slot name="header"></slot>
      </div>
      <paper-progress id="progress-bar" indeterminate></paper-progress>
    </div>
    <div class="gaia-footer flex vertical layout">
      <div class="footer-container flex vertical layout">
        <slot name="footer"></slot>
      </div>
      <div id="bottom-overlay" class="overlay"></div>
    </div>
    <div id="full-overlay" class="overlay"></div>
  </template>
</dom-module>