merge from dev

This commit is contained in:
Luke Pulverenti 2016-01-14 12:04:42 -05:00
parent d96250df7f
commit bcfee41a57
318 changed files with 54424 additions and 6419 deletions

View file

@ -17,17 +17,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="x-card.html">
<link rel="import" href="x-cards-list.html">
<style>
<style is="custom-style">
body {
padding: 15px;
@apply(--layout-fullbleed);
@apply(--paper-font-common-base);
}
neon-animated-pages {
@ -64,38 +66,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
left: 30px;
}
.card-contents {
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--layout-fit);
}
.button-container {
@apply(--layout-flex);
@apply(--layout-horizontal);
@apply(--layout-around-justified);
}
</style>
</head>
<body class="fullbleed">
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<x-cards-list id="list">
<div class="fit layout vertical center-center">
<div class="card-contents">
<h2>Choose a subject</h2>
<div class="flex layout horizontal around-justified large">
<div class="button-container large">
<div class="blue raised button" on-click="_onPolymerClick">
POLYMER
</div>
<div class="blue raised button" on-click="_onAngularClick">
ANGULAR
</div>
</div>
</div>
</x-cards-list>
<x-card>
<div class="fit layout vertical center-center">
<div class="card-contents">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
@ -108,14 +112,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
<x-card>
<div class="fit layout vertical center-center">
<div class="card-contents">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
@ -128,12 +129,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
</neon-animated-pages>
</neon-animated-pages>
</template>
<script>

View file

@ -9,26 +9,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-card">
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
}
</style>
<template>
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
@apply(--layout-fit);
}
</style>
<div id="placeholder" class="fit"></div>
<div id="placeholder"></div>
<div id="container">
<content select="div"></content>
</div>

View file

@ -9,26 +9,25 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-cards-list">
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
}
</style>
<template>
<style>
:host {
display: block;
overflow: hidden;
}
<div id="placeholder" class="fit"></div>
#placeholder {
opacity: 0;
background-color: grey;
@apply(--layout-fit);
}
</style>
<div id="placeholder"></div>
<div id="container">
<content select="div"></content>
</div>

View file

@ -17,24 +17,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animatable.html">
<link rel="import" href="../../neon-animations.html">
<style>
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
@apply(--layout-vertical);
}
.toolbar {
padding: 8px;
}
</style>
<style is="custom-style">
neon-animated-pages {
@apply(--layout-flex);
}
neon-animatable {
color: white;
@ -66,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</style>
</head>
<body class="fullbleed layout vertical">
<body>
<template is="dom-bind">
@ -75,7 +78,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<button on-click="_onNextClick">&gt;&gt;</button>
</div>
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>1</neon-animatable>
<neon-animatable>2</neon-animatable>
<neon-animatable>3</neon-animatable>

View file

@ -1,47 +0,0 @@
<!doctype html>
<!--
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>
<title>neon-animation demo: basic</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="my-animatable.html">
</head>
<body>
<template is="dom-bind">
<button on-click="_onButtonClick">click me</button>
<br>
<my-animatable></my-animatable>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onButtonClick = function(event) {
var node = document.querySelector('my-animatable');
if (node) {
node.animate();
}
};
</script>
</body>
</html>

View file

@ -17,26 +17,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="my-animatable.html">
<link rel="import" href="my-dialog.html">
</head>
<style>
my-animatable {
margin-top: 50px;
}
</style>
<body>
<template is="dom-bind">
<button on-click="_onButtonClick">Toggle</button>
<button on-click="_onCircleButtonClick">toggle circle</button>
<button on-click="_onDialogButtonClick">toggle dialog</button>
<div style="text-align: center">
<my-dialog>Hello World!</my-dialog>
</div>
<my-animatable></my-animatable>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onButtonClick = function(event) {
scope._onCircleButtonClick = function(event) {
var node = document.querySelector('my-animatable');
if (node) {
node.animate();
}
};
scope._onDialogButtonClick = function(event) {
var node = document.querySelector('my-dialog');
if (node) {
if (node.opened) {

View file

@ -11,25 +11,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../animations/scale-down-animation.html">
<dom-module id="my-animatable">
<style>
:host {
display: inline-block;
border-radius: 50%;
width: 300px;
height: 300px;
background: orange;
}
</style>
<template>
<style>
:host {
display: inline-block;
border-radius: 50%;
width: 300px;
height: 300px;
background: orange;
}
</style>
<content></content>
</template>
</dom-module>
<script>

View file

@ -7,30 +7,26 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../animations/scale-up-animation.html">
<link rel="import" href="../../animations/fade-out-animation.html">
<dom-module id="my-dialog">
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
margin: 0 auto;
@apply(--shadow-elevation-2dp);
}
</style>
<template>
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
margin: 0 auto;
z-index: 100;
position: absolute;
@apply(--shadow-elevation-2dp);
}
</style>
<content></content>
</template>

View file

@ -7,31 +7,23 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<dom-module id="animated-dropdown">
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
@apply(--shadow-elevation-2dp);
}
</style>
<template>
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
@apply(--shadow-elevation-2dp);
}
</style>
<content></content>
</template>
</dom-module>
<script>

View file

@ -17,7 +17,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="animated-dropdown.html">

View file

@ -7,70 +7,68 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">
@ -79,7 +77,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</template>
</dom-module>
<script>

View file

@ -8,38 +8,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="fullsize-page-with-card">
<link rel="import" type="css" href="../shared.css">
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]"></div>
</template>

View file

@ -17,38 +17,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="animated-grid.html">
<link rel="import" href="fullsize-page-with-card.html">
<style>
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
neon-animated-pages {
height: 100%;
}
</style>
</head>
<body class="fullbleed">
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
</fullsize-page-with-card>
</neon-animated-pages>
</template>
<script>

View file

@ -1,7 +1,45 @@
<a href="declarative/index.html">declarative</a><br>
<a href="dropdown/index.html">dropdown</a><br>
<a href="grid/index.html">grid</a><br>
<a href="list/index.html">list</a><br>
<a href="load/index.html">load</a><br>
<a href="tiles/index.html">tiles</a><br>
<a href="card/index.html">card</a><br>
<!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 lang="en">
<head>
<title>neon-animated pages demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<style>
a {
display: block;
margin-bottom: 10px;
}
</style>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Sample demos</h4>
<div class="horizontal-section">
<a href="doc/index.html">basic</a>
<a href="declarative/index.html">declarative</a>
<a href="dropdown/index.html">dropdown</a>
<a href="grid/index.html">grid</a>
<a href="list/index.html">list</a>
<a href="load/index.html">load</a>
<a href="tiles/index.html">tiles</a>
<a href="card/index.html">card</a>
</div>
</div>
</div>
</body>
</html>

View file

@ -7,47 +7,43 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="full-view">
<style>
:host {
@apply(--layout-vertical);
}
.main {
background: white;
@apply(--layout-flex);
@apply(--layout-scroll);
@apply(--shadow-elevation-8dp);
}
.image-container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.image {
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#f5f5f5,
#f5f5f5 8px,
#e0e0e0 8px,
#e0e0e0 16px
);
}
</style>
<template>
<style>
:host {
@apply(--layout-vertical);
}
.main {
background: white;
@apply(--layout-flex);
@apply(--layout-scroll);
@apply(--shadow-elevation-8dp);
}
.image-container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.image {
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#f5f5f5,
#f5f5f5 8px,
#e0e0e0 8px,
#e0e0e0 16px
);
}
</style>
<paper-toolbar class="medium-tall">
<paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
</paper-toolbar>
@ -58,9 +54,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</div>
</div>
</template>
</dom-module>
<script>

View file

@ -14,16 +14,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="list-demo.html">
</head>
<body class="fullbleed relative">
<list-demo class="fit"></list-demo>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
list-demo {
@apply(--layout-fit);
}
</style>
<body>
<list-demo></list-demo>
</body>
</html>

View file

@ -7,7 +7,6 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
@ -15,29 +14,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="full-view.html">
<dom-module id="list-demo">
<style>
:host {
display: block;
}
neon-animated-pages {
height: 100%;
}
</style>
<template>
<style>
:host {
display: block;
}
neon-animated-pages {
height: 100%;
}
</style>
<neon-animated-pages id="pages" selected="0">
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
</neon-animated-pages>
</template>
</dom-module>

View file

@ -9,33 +9,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-icons/iron-icons.html">
<link rel="import" href="../../../iron-icon/iron-icon.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-item/paper-item.html">
<link rel="import" href="../../../paper-item/paper-item-body.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="list-view">
<style>
:host {
@apply(--layout-vertical);
}
.main {
@apply(--layout-flex);
@apply(--layout-scroll);
}
iron-icon {
color: var(--google-grey-500);
}
</style>
<template>
<style>
:host {
@apply(--layout-vertical);
}
.main {
@apply(--layout-flex);
@apply(--layout-scroll);
}
iron-icon {
color: var(--google-grey-500);
}
</style>
<paper-toolbar class="medium-tall">
<paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
</paper-toolbar>

View file

@ -7,70 +7,68 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">

View file

@ -7,43 +7,38 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="animated-grid.html">
<dom-module id="full-page">
<style>
:host {
background: black;
visibility: hidden;
@apply(--layout-vertical);
}
.toolbar {
background: #9c27b0;
height: 72px;
z-index: 1;
@apply(--shadow-elevation-2dp);
}
animated-grid {
height: calc(100% - 72px);
@apply(--layout-flex);
}
</style>
<template>
<style>
:host {
background: black;
visibility: hidden;
@apply(--layout-vertical);
}
.toolbar {
background: #9c27b0;
height: 72px;
z-index: 1;
@apply(--shadow-elevation-2dp);
}
animated-grid {
height: calc(100% - 72px);
@apply(--layout-flex);
}
</style>
<div id="toolbar" class="toolbar"></div>
<animated-grid id="grid"></animated-grid>
</template>
</dom-module>
<script>

View file

@ -16,22 +16,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="full-page.html">
<style>
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
full-page {
@apply(--layout-fit);
}
</style>
</head>
<body class="fullbleed relative">
<body>
<full-page class="fit"></full-page>
<full-page></full-page>
<script>

View file

@ -7,70 +7,70 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">

View file

@ -8,42 +8,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="fullsize-page-with-card">
<link rel="import" type="css" href="../shared.css">
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]"></div>
</template>
</dom-module>
<script>

View file

@ -16,33 +16,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="reprojected-pages.html">
<link rel="import" href="animated-grid.html">
<link rel="import" href="fullsize-page-with-card.html">
<style>
neon-animated-pages {
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
reprojected-pages {
height: 100%;
}
</style>
</head>
<body class="fullbleed">
<body>
<template is="dom-bind">
<reprojected-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
</fullsize-page-with-card>
</reprojected-pages>
</template>

View file

@ -11,15 +11,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../neon-animated-pages.html">
<dom-module id="reprojected-pages">
<template>
<style>
neon-animated-pages {
height: 100%;
}
</style>
<neon-animated-pages selected="{{selected}}">
<content></content>
</neon-animated-pages>
</template>
</dom-module>
<script>

View file

@ -0,0 +1,47 @@
<!--
@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
-->
<dom-module id="shared-styles">
<template>
<style>
.red-100 {
background: var(--google-red-100);
}
.yellow-100 {
background: var(--google-yellow-100);
}
.blue-100 {
background: var(--google-blue-100);
}
.green-100 {
background: var(--google-green-100);
}
.red-300 {
background: var(--google-red-300);
}
.yellow-300 {
background: var(--google-yellow-300);
}
.blue-300 {
background: var(--google-blue-300);
}
.green-300 {
background: var(--google-green-300);
}
</style>
</template>
</dom-module>

View file

@ -1,40 +0,0 @@
/*
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
*/
.red-100 {
background: var(--google-red-100);
}
.yellow-100 {
background: var(--google-yellow-100);
}
.blue-100 {
background: var(--google-blue-100);
}
.green-100 {
background: var(--google-green-100);
}
.red-300 {
background: var(--google-red-300);
}
.yellow-300 {
background: var(--google-yellow-300);
}
.blue-300 {
background: var(--google-blue-300);
}
.green-300 {
background: var(--google-green-300);
}

View file

@ -7,31 +7,27 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="circles-page">
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-center-center);
}
.circle {
display: inline-block;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 16px;
border-radius: 50%;
background: var(--color-one);
}
</style>
<template>
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-center-center);
}
.circle {
display: inline-block;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 16px;
border-radius: 50%;
background: var(--color-one);
}
</style>
<div>
<div class="circle"></div>

View file

@ -17,44 +17,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="circles-page.html">
<link rel="import" href="squares-page.html">
<style>
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
neon-animated-pages {
height: 100%;
}
</style>
<style is="custom-style">
:root {
--color-one: #4dd0e1;
--color-two: #ff9800;
--color-one: var(--paper-cyan-300);
--color-two: var(--paper-orange-500);
}
</style>
</head>
<body class="fullbleed">
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<circles-page on-circle-click="_onCircleClick"></circles-page>
<squares-page on-click="_onSquaresClick"></squares-page>
</neon-animated-pages>
</template>

View file

@ -7,35 +7,30 @@ 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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="squares-page">
<style>
.header {
height: 40%;
background: var(--color-one);
}
.body {
text-align: center;
padding: 8px;
}
.square {
display: inline-block;
width: 150px;
height: 150px;
margin: 8px;
background: var(--color-two);
}
</style>
<template>
<style>
.header {
height: 40%;
background: var(--color-one);
}
.body {
text-align: center;
padding: 8px;
}
.square {
display: inline-block;
width: 150px;
height: 150px;
margin: 8px;
background: var(--color-two);
}
</style>
<div id="header" class="header"></div>
<div class="body">