| Index: third_party/polymer/components/core-animated-pages/demos/music.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/demos/music.html b/third_party/polymer/components/core-animated-pages/demos/music.html
|
| deleted file mode 100644
|
| index 769bf0ac22a5e604eb79afecfda3c80150264ef0..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components/core-animated-pages/demos/music.html
|
| +++ /dev/null
|
| @@ -1,182 +0,0 @@
|
| -<!--
|
| - @license
|
| - Copyright (c) 2014 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
|
| --->
|
| -<!doctype html>
|
| -<html>
|
| -<head>
|
| - <title>core-animated-pages</title>
|
| -
|
| - <script src="../../webcomponentsjs/webcomponents.js"></script>
|
| - <link href="../core-animated-pages.html" rel="import">
|
| -
|
| - <style>
|
| - body {
|
| - font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
| - margin: 0;
|
| - background: #f1f1f1;
|
| - }
|
| -
|
| - .green {
|
| - position: absolute;
|
| - top: 0;
|
| - right: 0;
|
| - left: 0;
|
| - height: 350px;
|
| - background: #70c26f;
|
| - }
|
| - </style>
|
| -</head>
|
| -<body>
|
| -
|
| - <polymer-element name="music-demo">
|
| - <template>
|
| -
|
| - <style>
|
| - .chip-container {
|
| - position: absolute;
|
| - top: 275px;
|
| - right: 0;
|
| - left: 0;
|
| - text-align: center;
|
| - }
|
| -
|
| - .chip {
|
| - display: inline-block;
|
| - position: relative;
|
| - border-radius: 3px;
|
| - margin: 4px;
|
| - overflow: hidden;
|
| - text-align: start;
|
| - background-color: #fff;
|
| - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
|
| - }
|
| -
|
| - .chip-top {
|
| - width: 200px;
|
| - height: 200px;
|
| - }
|
| -
|
| - .chip-bottom {
|
| - padding: 8px;
|
| - line-height: 1.5;
|
| - }
|
| -
|
| - .chip-album-title {
|
| - font-weight: bold;
|
| - }
|
| -
|
| - #details {
|
| - padding: 200px 10% 0;
|
| - }
|
| -
|
| - .card {
|
| - height: 400px;
|
| - border-radius: 3px;
|
| - text-align: start;
|
| - overflow: hidden;
|
| - background: #fff;
|
| - box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
| - }
|
| -
|
| - .card-left {
|
| - width: 400px;
|
| - }
|
| -
|
| - .card-right {
|
| - padding: 24px;
|
| - }
|
| -
|
| - .card-icon {
|
| - border-radius: 50%;
|
| - width: 60px;
|
| - height: 60px;
|
| - margin-right: 16px;
|
| - }
|
| -
|
| - .card-album-title {
|
| - font-size: 2em;
|
| - }
|
| - </style>
|
| -
|
| - <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
|
| -
|
| - <section>
|
| -
|
| - <div class="chip-container" hero-p on-tap="{{transition}}">
|
| -
|
| - <template repeat="{{items as item}}">
|
| -
|
| - <div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
|
| - <div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
|
| - <div class="chip-bottom">
|
| - <div class="chip-album-title">{{item.album}}</div>
|
| - <div class="chip-artist">{{item.artist}}</div>
|
| - </div>
|
| - </div>
|
| -
|
| - </template>
|
| -
|
| - </div>
|
| - </section>
|
| -
|
| - <section id="details">
|
| -
|
| - <div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
|
| - <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
|
| - <div class="card-right" flex>
|
| - <div layout horizontal center>
|
| - <div>
|
| - <div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
|
| - </div>
|
| - <div flex>
|
| - <div class="card-album-title">{{selectedAlbum.album}}</div>
|
| - <div class="card-album-artist">{{selectedAlbum.artist}}</div>
|
| - </div>
|
| - </div>
|
| - </div>
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - </core-animated-pages>
|
| -
|
| - </template>
|
| - <script>
|
| -
|
| - Polymer('music-demo', {
|
| -
|
| - page: 0,
|
| -
|
| - items: [
|
| - { artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
|
| - { artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
|
| - { artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
|
| - { artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
|
| - ],
|
| -
|
| - selectedAlbum: null,
|
| -
|
| - transition: function(e) {
|
| - if (this.page === 0 && e.target.templateInstance.model.item) {
|
| - this.selectedAlbum = e.target.templateInstance.model.item;
|
| - this.page = 1;
|
| - } else {
|
| - this.page = 0;
|
| - }
|
| - }
|
| - });
|
| -
|
| - </script>
|
| - </polymer-element>
|
| -
|
| - <div class="green"></div>
|
| -
|
| - <music-demo></music-demo>
|
| -</body>
|
| -</html>
|
|
|