merge from dev
This commit is contained in:
parent
d96250df7f
commit
bcfee41a57
318 changed files with 54424 additions and 6419 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">>></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>
|
||||
|
|
|
@ -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>
|
|
@ -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) {
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)]]">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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)]]">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
47
dashboard-ui/bower_components/neon-animation/demo/shared-styles.html
vendored
Normal file
47
dashboard-ui/bower_components/neon-animation/demo/shared-styles.html
vendored
Normal 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>
|
|
@ -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);
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue