1 files changed, 339 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-styles/demo/index.html b/catapult/third_party/polymer/components/paper-styles/demo/index.html
new file mode 100644
index 00000000..1080cc66
--- /dev/null
+++ b/catapult/third_party/polymer/components/paper-styles/demo/index.html
@@ -0,0 +1,339 @@
+<!doctype html>
+
+<!--
+  @license
+  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <title>paper-styles demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../color.html">
+    <link rel="import" href="../typography.html">
+    <link rel="import" href="../default-theme.html">
+    <link rel="import" href="../demo-pages.html">
+  </head>
+
+  <style>
+    .redlines {
+      background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px);
+      background-size: 100% 4px;
+    }
+
+    .paragraph {
+      margin-bottom: 20px;
+    }
+  </style>
+  <style is="custom-style">
+    .paper-font-display4 {
+      @apply(--paper-font-display4);
+    }
+
+    .paper-font-display3 {
+      @apply(--paper-font-display3);
+    }
+
+    .paper-font-display2 {
+      @apply(--paper-font-display2);
+    }
+
+    .paper-font-display1 {
+      @apply(--paper-font-display1);
+    }
+
+    .paper-font-headline {
+      @apply(--paper-font-headline);
+    }
+
+    .paper-font-title {
+      @apply(--paper-font-title);
+    }
+
+    .paper-font-subhead {
+      @apply(--paper-font-subhead);
+    }
+
+    .paper-font-body2 {
+      @apply(--paper-font-body2);
+    }
+
+    .paper-font-body1 {
+      @apply(--paper-font-body1);
+    }
+
+    .paper-font-caption {
+      @apply(--paper-font-caption);
+    }
+
+    .paper-font-menu {
+      @apply(--paper-font-menu);
+    }
+
+    .paper-font-button {
+      @apply(--paper-font-button);
+    }
+
+    .mobile-app {
+      max-width: 320px;
+    }
+
+    .toolbar {
+      height: 144px;
+      padding: 16px;
+
+      background: var(--default-primary-color);
+      color: var(--text-primary-color);
+      @apply(--paper-font-display1);
+    }
+
+    .item, .disabled-item {
+      position: relative;
+      padding: 8px;
+      border: 1px solid;
+      border-color: var(--divider-color);
+      border-top: 0;
+    }
+
+    .item .primary {
+      color: var(--primary-text-color);
+
+      @apply(--paper-font-body2);
+    }
+
+    .item .secondary {
+      color: var(--secondary-text-color);
+
+      @apply(--paper-font-body1);
+    }
+
+    .disabled-item {
+      color: var(--disabled-text-color);
+
+      @apply(--paper-font-body2);
+    }
+
+    .fab {
+      position: absolute;
+      box-sizing: border-box;
+      padding: 8px;
+      width: 56px;
+      height: 56px;
+      right: 16px;
+      top: -28px;
+      border-radius: 50%;
+      text-align: center;
+
+      background: var(--accent-color);
+      color: var(--text-primary-color);
+      @apply(--paper-font-display1);
+    }
+
+    .shadow {
+      display: inline-block;
+      padding: 8px;
+      margin: 16px;
+      height: 50px;
+      width: 50px;
+    }
+
+    .shadow-2dp {
+      @apply(--shadow-elevation-2dp);
+    }
+
+    .shadow-3dp {
+      @apply(--shadow-elevation-3dp);
+    }
+
+    .shadow-4dp {
+      @apply(--shadow-elevation-4dp);
+    }
+
+    .shadow-6dp {
+      @apply(--shadow-elevation-6dp);
+    }
+
+    .shadow-8dp {
+      @apply(--shadow-elevation-8dp);
+    }
+
+    .shadow-12dp {
+      @apply(--shadow-elevation-12dp);
+    }
+
+    .shadow-16dp {
+      @apply(--shadow-elevation-16dp);
+    }
+  </style>
+
+  <body unresolved>
+    <h1>paper-styles</h1>
+
+    <section id="default-theme">
+      <h2>default-theme.html</h2>
+
+      <section class="mobile-app">
+        <div class="toolbar">
+          Title
+        </div>
+        <div class="item">
+          <div class="fab">+</div>
+          <div class="primary">Primary text</div>
+          <div class="secondary">Secondary text</div>
+        </div>
+        <div class="disabled-item">
+          Disabled
+        </div>
+      </section>
+    </section>
+
+    <section id="typography">
+      <h2>typography.html</h2>
+      <p>
+        Grumpy wizards make toxic brew for the evil Queen and Jack.
+      </p>
+      <section class="redlines paragraph">
+        <div class="paper-font-display4">Display 4</div>
+        <div class="paper-font-display3">Display 3</div>
+        <div class="paper-font-display2">Display 2</div>
+        <div class="paper-font-display1">Display 1</div>
+        <div class="paper-font-headline">Headline</div>
+        <div class="paper-font-title">Title</div>
+        <div class="paper-font-subhead">Subhead</div>
+        <div class="paper-font-body2">Body 2</div>
+        <div class="paper-font-body1">Body 1</div>
+        <div class="paper-font-caption">Caption</div>
+        <div class="paper-font-menu">Menu</div>
+        <div class="paper-font-button">Button</div>
+      </section>
+
+      <h3>Paragraphs</h3>
+
+      <h4>body2</h4>
+      <section class="paper-font-body2 redlines">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+          tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
+          purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
+          dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
+          egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
+          faucibus in leo.
+        </p>
+        <p>
+          Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
+          interdum neque magna, eget dapibus est auctor et. Donec accumsan
+          libero nec augue scelerisque, ac egestas ante tincidunt. Proin
+          sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
+          sollicitudin tellus quam non sapien.
+        </p>
+      </section>
+
+      <h4>body1</h4>
+      <section class="paper-font-body1 redlines">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+          tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
+          purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
+          dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
+          egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
+          faucibus in leo.
+        </p>
+        <p>
+          Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
+          interdum neque magna, eget dapibus est auctor et. Donec accumsan
+          libero nec augue scelerisque, ac egestas ante tincidunt. Proin
+          sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
+          sollicitudin tellus quam non sapien.
+        </p>
+      </section>
+    </section>
+
+    <section id="shadow">
+      <h2>shadow.html</h2>
+      <div class="shadow shadow-2dp">2dp</div>
+      <div class="shadow shadow-3dp">3dp</div>
+      <div class="shadow shadow-4dp">4dp</div>
+      <div class="shadow shadow-6dp">6dp</div>
+      <div class="shadow shadow-8dp">8dp</div>
+      <div class="shadow shadow-12dp">12dp</div>
+      <div class="shadow shadow-16dp">16dp</div>
+    </section>
+
+    <section id="demo-page">
+      <h2>demo-pages.html</h2>
+
+      <h3>Horizontal sections</h3>
+      <div class="horizontal-section-container">
+        <div>
+          <h4>Column 1</h4>
+          <div class="horizontal-section">
+            <div>Oxygen</div>
+            <div>Carbon</div>
+            <div>Hydrogen</div>
+            <div>Nitrogen</div>
+            <div>Calcium</div>
+          </div>
+        </div>
+
+        <div>
+          <h4>Column 2</h4>
+          <div class="horizontal-section">
+            <div>Oxygen</div>
+            <div>Carbon</div>
+            <div>Hydrogen</div>
+            <div>Nitrogen</div>
+            <div>Calcium</div>
+          </div>
+        </div>
+
+        <div>
+          <h4>Column 3</h4>
+          <div class="horizontal-section">
+            <div>Oxygen</div>
+            <div>Carbon</div>
+            <div>Hydrogen</div>
+            <div>Nitrogen</div>
+            <div>Calcium</div>
+          </div>
+        </div>
+      </div>
+
+      <h3>Vertical sections</h3>
+      <div class="vertical-section-container">
+        <div>
+          <h4>Section 1</h4>
+          <div class="vertical-section">
+            <div>Oxygen</div>
+            <div>Carbon</div>
+            <div>Hydrogen</div>
+            <div>Nitrogen</div>
+            <div>Calcium</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="vertical-section-container centered">
+        <h4>Section 2 (centered)</h4>
+        <div class="vertical-section">
+          <div>Oxygen</div>
+          <div>Carbon</div>
+          <div>Hydrogen</div>
+          <div>Nitrogen</div>
+          <div>Calcium</div>
+        </div>
+      </div>
+    </section>
+
+  </body>
+</html>