Index: third_party/polymer/components-chromium/core-pages/demo.html |
diff --git a/third_party/polymer/components-chromium/core-pages/demo.html b/third_party/polymer/components-chromium/core-pages/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..a9806535d9df7fd9e7336feb8f21586188a01f80 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-pages/demo.html |
@@ -0,0 +1,130 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ |
+ <meta charset="utf-8"> |
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
+ |
+ <title>core-pages</title> |
+ |
+ <script src="../platform/platform.js"></script> |
+ |
+ <link rel="import" href="core-pages.html"> |
+ |
+ <style> |
+ |
+ html, body { |
+ height: 100%; |
+ } |
+ |
+ body { |
+ display: flex; |
+ justify-content: center; |
+ align-items: center; |
+ font-family: sans-serif; |
+ } |
+ |
+ core-pages { |
+ width: 300px; |
+ height: 300px; |
+ border: 1px solid black; |
+ -webkit-user-select: none; |
+ border-radius: 5px; |
+ } |
+ |
+ core-pages > div { |
+ display: flex; |
+ justify-content: center; |
+ align-items: center; |
+ border-radius: inherit; |
+ } |
+ |
+ core-pages.fancy { |
+ border: none; |
+ margin-left: 2em; |
+ } |
+ |
+ core-pages.fancy > div { |
+ opacity: 0; |
+ -webkit-transform: translate3d(-100px, 0, 0) scale(0.9); |
+ transform: translate3d(-100px, 0, 0) scale(0.9); |
+ transition: all 1s cubic-bezier(.03,.56,.7,.98); |
+ color: white; |
+ } |
+ |
+ core-pages.fancy > div:nth-child(1) { |
+ background-color: red; |
+ } |
+ |
+ core-pages.fancy > div:nth-child(2) { |
+ background-color: green; |
+ } |
+ |
+ core-pages.fancy > div:nth-child(3) { |
+ background-color: blue; |
+ } |
+ |
+ core-pages.fancy > div:nth-child(4) { |
+ background-color: purple; |
+ } |
+ |
+ core-pages.fancy > div:nth-child(5) { |
+ background-color: black; |
+ } |
+ |
+ core-pages.fancy .core-selected + div { |
+ -webkit-transform: translate3d(100px, 0, 0) scale(0.9); |
+ transform: translate3d(100px, 0, 0) scale(1); |
+ } |
+ |
+ core-pages.fancy .core-selected { |
+ opacity: 1; |
+ -webkit-transform: translateX(0); |
+ transform: translateX(0); |
+ } |
+ |
+ core-pages.fancy div.begin { |
+ -webkit-transform: translate3d(100px, 0, 0) scale(0.9); |
+ transform: translate3d(100px, 0, 0) scale(0.9); |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body unresolved> |
+ |
+ <core-pages id="first" selected="0"> |
+ <div>One</div> |
+ <div>Two</div> |
+ <div>Three</div> |
+ <div>Four</div> |
+ <div>Five</div> |
+ </core-pages> |
+ |
+ <core-pages class="fancy" selected="0"> |
+ <div>One</div> |
+ <div>Two</div> |
+ <div>Three</div> |
+ <div>Four</div> |
+ <div>Five</div> |
+ </core-pages> |
+ |
+ <script> |
+ document.querySelector('#first').onclick = function(e) { |
+ this.selected = (this.selected + 1) % this.items.length; |
+ }; |
+ |
+ document.querySelector('core-pages.fancy').onclick = function(e) { |
+ this.selected = (this.selected + 1) % this.items.length; |
+ this.async(function() { |
+ if (this.selectedIndex == 0) { |
+ this.selectedItem.classList.remove('begin'); |
+ } else if (this.selectedIndex == this.items.length - 1) { |
+ this.items[0].classList.add('begin'); |
+ } |
+ }); |
+ }; |
+ </script> |
+ |
+</body> |
+</html> |