Polymer elements added to third_party/polymer.

third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html

Index: third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html
diff --git a/third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html b/third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html
new file mode 100644
index 0000000000000000000000000000000000000000..afe3c3f7b1e307fd5f03670be4dc9b9792102965
--- /dev/null
+++ b/third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html
@@ -0,0 +1,104 @@
+<link href="../../core-icons/core-icons.html" rel="import">
+<link href="../../core-icon-button/core-icon-button.html" rel="import">
+<link href="../core-animated-pages.html" rel="import">
+
+<polymer-element name="nested-animated-pages">
+<template>
+  <style>
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    core-animated-pages {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .tall-toolbar {
+      box-sizing: border-box;
+      height: 240px;
+    }
+
+    .tall-toolbar.colored {
+      fill: #fff;
+      color: #fff;
+    }
+
+    .tall-toolbar [flex] {
+      font-size: 1.5em;
+    }
+
+    core-icon-button {
+      margin: 16px;
+    }
+
+    .body {
+      background-color: #f1f1f1;
+    }
+
+    .square {
+      position: absolute;
+      width: 150px;
+      height: 150px;
+      left: 16px;
+      top: 175px;
+    }
+
+  </style>
+  <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
+
+    <section id="page1" cross-fade>
+      <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
+        <div layout horizontal center>
+          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+          <div flex>One</div>
+          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+        </div>
+        <div flex></div>
+      </div>
+      <div flex class="body"></div>
+    </section>
+
+    <section layout vertical id="page2" cross-fade>
+      <div class="tall-toolbar" layout vertical>
+        <div layout horizontal center>
+          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+          <div flex>Two</div>
+          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+        </div>
+        <div flex></div>
+      </div>
+      <div flex class="body"></div>
+      <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
+    </section>
+
+  </core-animated-pages>
+</template>
+<script>
+
+  Polymer({
+
+    publish: {
+      page: {value: 0}
+    },
+
+    selectedItem: null,
+    noTransition: true,
+
+    back: function() {
+      this.noTransition = true;
+      this.fire('nested-back');
+    },
+
+    transition: function() {
+      this.noTransition = false;
+      this.page = this.page === 0 ? 1 : 0;
+    }
+
+  });
+</script>
+</polymer-element>