OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
9 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | 9 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
10 <link rel="import" href="../iron-selector/iron-selectable.html"> | 10 <link rel="import" href="../iron-selector/iron-selectable.html"> |
11 <link rel="import" href="../paper-styles/paper-styles.html"> | |
12 <link rel="import" href="neon-animation-runner-behavior.html"> | 11 <link rel="import" href="neon-animation-runner-behavior.html"> |
13 <link rel="import" href="animations/opaque-animation.html"> | 12 <link rel="import" href="animations/opaque-animation.html"> |
14 | 13 |
15 <!-- | 14 <!-- |
16 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its | 15 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its |
17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` | 16 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` |
18 animations to be run when switching to or switching out of the page. | 17 animations to be run when switching to or switching out of the page. |
19 | 18 |
20 @group Neon Elements | 19 @group Neon Elements |
21 @element neon-animated-pages | 20 @element neon-animated-pages |
22 @demo demo/index.html | 21 @demo demo/index.html |
23 --> | 22 --> |
24 | 23 |
25 </head><body><dom-module id="neon-animated-pages"> | 24 </head><body><dom-module id="neon-animated-pages"> |
26 | 25 |
27 <style> | 26 <style> |
28 | 27 |
29 :host { | 28 :host { |
30 display: block; | 29 display: block; |
31 position: relative; | 30 position: relative; |
32 } | 31 } |
33 | 32 |
34 :host > ::content > * { | 33 :host > ::content > * { |
35 @apply(--layout-fit); | 34 position: absolute; |
| 35 top: 0; |
| 36 left: 0; |
| 37 bottom: 0; |
| 38 right: 0; |
36 height: 100%; | 39 height: 100%; |
37 } | 40 } |
38 | 41 |
39 :host > ::content > :not(.iron-selected):not(.neon-animating) { | 42 :host > ::content > :not(.iron-selected):not(.neon-animating) { |
40 display: none !important; | 43 display: none !important; |
41 } | 44 } |
42 | 45 |
43 :host > ::content > .neon-animating { | 46 :host > ::content > .neon-animating { |
44 pointer-events: none; | 47 pointer-events: none; |
45 } | 48 } |
46 | 49 |
47 </style> | 50 </style> |
48 | 51 |
49 <template> | 52 <template> |
50 <content id="content"></content> | 53 <content id="content"></content> |
51 </template> | 54 </template> |
52 | 55 |
53 </dom-module> | 56 </dom-module> |
54 | 57 |
55 <script src="neon-animated-pages-extracted.js"></script></body></html> | 58 <script src="neon-animated-pages-extracted.js"></script></body></html> |
OLD | NEW |