| Index: polymer_0.5.0/bower_components/paper-shadow/demo.html
|
| diff --git a/polymer_0.5.0/bower_components/paper-shadow/demo.html b/polymer_0.5.0/bower_components/paper-shadow/demo.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..cc5b1bd053d682fcb229f317e485ffcf50ab6b4e
|
| --- /dev/null
|
| +++ b/polymer_0.5.0/bower_components/paper-shadow/demo.html
|
| @@ -0,0 +1,134 @@
|
| +<!doctype html>
|
| +<!--
|
| +Copyright 2013 The Polymer Authors. All rights reserved.
|
| +Use of this source code is governed by a BSD-style
|
| +license that can be found in the LICENSE file.
|
| +-->
|
| +<html>
|
| +<head>
|
| + <title>paper-shadow</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.js"></script>
|
| + <link href="paper-shadow.html" rel="import">
|
| +
|
| + <style>
|
| + body {
|
| + font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
| + font-size: 14px;
|
| + margin: 0;
|
| + padding: 24px;
|
| + -webkit-tap-highlight-color: rgba(0,0,0,0);
|
| + -webkit-touch-callout: none;
|
| + }
|
| +
|
| + section {
|
| + padding: 20px 0;
|
| + }
|
| +
|
| + section > div {
|
| + padding: 14px;
|
| + font-size: 16px;
|
| + }
|
| +
|
| + .card {
|
| + display: inline-block;
|
| + background: white;
|
| + box-sizing: border-box;
|
| + width: 100px;
|
| + height: 100px;
|
| + margin: 16px;
|
| + padding: 16px;
|
| + border-radius: 2px;
|
| + }
|
| +
|
| + .fab {
|
| + display: inline-block;
|
| + background: white;
|
| + box-sizing: border-box;
|
| + width: 56px;
|
| + height: 56px;
|
| + margin: 16px;
|
| + padding: 16px;
|
| + border-radius: 50%;
|
| + text-align: center;
|
| + }
|
| +
|
| + </style>
|
| +</head>
|
| +<body unresolved>
|
| +
|
| +<template is="auto-binding">
|
| +
|
| + <section>
|
| +
|
| + <div>Shadows</div>
|
| +
|
| + <paper-shadow class="card" z="0">
|
| + z = 0
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="card" z="1">
|
| + z = 1
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="card" z="2">
|
| + z = 2
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="card" z="3">
|
| + z = 3
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="card" z="4">
|
| + z = 4
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="card" z="5">
|
| + z = 5
|
| + </paper-shadow>
|
| +
|
| + </section>
|
| +
|
| + <section on-tap="{{tapAction}}">
|
| +
|
| + <div>Animated</div>
|
| +
|
| + <paper-shadow class="card" z="0" animated>
|
| + tap
|
| + </paper-shadow>
|
| +
|
| + <paper-shadow class="fab" z="0" animated layout center-center>
|
| + tap
|
| + </paper-shadow>
|
| +
|
| + </section>
|
| +
|
| +</template>
|
| +
|
| +<script>
|
| +
|
| + var scope = document.querySelector('template[is=auto-binding]');
|
| +
|
| + scope.tapAction = function(e) {
|
| + var target = e.target;
|
| + if (!target.down) {
|
| + target.setZ(target.z + 1);
|
| + if (target.z === 5) {
|
| + target.down = true;
|
| + }
|
| + } else {
|
| + target.setZ(target.z - 1);
|
| + if (target.z === 0) {
|
| + target.down = false;
|
| + }
|
| + }
|
| + };
|
| +
|
| +</script>
|
| +
|
| +</body>
|
| +</html>
|
|
|