Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(428)

Side by Side Diff: third_party/polymer/components-chromium/core-pages/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!doctype html>
2 <html>
3 <head>
4
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
8 <title>core-pages</title>
9
10 <script src="../platform/platform.js"></script>
11
12 <link rel="import" href="core-pages.html">
13
14 <style>
15
16 html, body {
17 height: 100%;
18 }
19
20 body {
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 font-family: sans-serif;
25 }
26
27 core-pages {
28 width: 300px;
29 height: 300px;
30 border: 1px solid black;
31 -webkit-user-select: none;
32 border-radius: 5px;
33 }
34
35 core-pages > div {
36 display: flex;
37 justify-content: center;
38 align-items: center;
39 border-radius: inherit;
40 }
41
42 core-pages.fancy {
43 border: none;
44 margin-left: 2em;
45 }
46
47 core-pages.fancy > div {
48 opacity: 0;
49 -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
50 transform: translate3d(-100px, 0, 0) scale(0.9);
51 transition: all 1s cubic-bezier(.03,.56,.7,.98);
52 color: white;
53 }
54
55 core-pages.fancy > div:nth-child(1) {
56 background-color: red;
57 }
58
59 core-pages.fancy > div:nth-child(2) {
60 background-color: green;
61 }
62
63 core-pages.fancy > div:nth-child(3) {
64 background-color: blue;
65 }
66
67 core-pages.fancy > div:nth-child(4) {
68 background-color: purple;
69 }
70
71 core-pages.fancy > div:nth-child(5) {
72 background-color: black;
73 }
74
75 core-pages.fancy .core-selected + div {
76 -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
77 transform: translate3d(100px, 0, 0) scale(1);
78 }
79
80 core-pages.fancy .core-selected {
81 opacity: 1;
82 -webkit-transform: translateX(0);
83 transform: translateX(0);
84 }
85
86 core-pages.fancy div.begin {
87 -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
88 transform: translate3d(100px, 0, 0) scale(0.9);
89 }
90
91 </style>
92
93 </head>
94 <body unresolved>
95
96 <core-pages id="first" selected="0">
97 <div>One</div>
98 <div>Two</div>
99 <div>Three</div>
100 <div>Four</div>
101 <div>Five</div>
102 </core-pages>
103
104 <core-pages class="fancy" selected="0">
105 <div>One</div>
106 <div>Two</div>
107 <div>Three</div>
108 <div>Four</div>
109 <div>Five</div>
110 </core-pages>
111
112 <script>
113 document.querySelector('#first').onclick = function(e) {
114 this.selected = (this.selected + 1) % this.items.length;
115 };
116
117 document.querySelector('core-pages.fancy').onclick = function(e) {
118 this.selected = (this.selected + 1) % this.items.length;
119 this.async(function() {
120 if (this.selectedIndex == 0) {
121 this.selectedItem.classList.remove('begin');
122 } else if (this.selectedIndex == this.items.length - 1) {
123 this.items[0].classList.add('begin');
124 }
125 });
126 };
127 </script>
128
129 </body>
130 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698