1<!doctype html>
2<!--
3Copyright 2013 The Polymer Authors. All rights reserved.
4Use of this source code is governed by a BSD-style
5license that can be found in the LICENSE file.
6-->
7<html>
8<head>
9  <title>paper-shadow</title>
10
11  <meta charset="utf-8">
12  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
13  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
14
15  <script src="../webcomponentsjs/webcomponents.js"></script>
16  <link href="paper-shadow.html" rel="import">
17
18  <style>
19      body {
20      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
21      font-size: 14px;
22      margin: 0;
23      padding: 24px;
24      -webkit-tap-highlight-color: rgba(0,0,0,0);
25      -webkit-touch-callout: none;
26    }
27
28    section {
29      padding: 20px 0;
30    }
31
32    section > div {
33      padding: 14px;
34      font-size: 16px;
35    }
36
37    .card {
38      display: inline-block;
39      background: white;
40      box-sizing: border-box;
41      width: 100px;
42      height: 100px;
43      margin: 16px;
44      padding: 16px;
45      border-radius: 2px;
46    }
47
48    .fab {
49      display: inline-block;
50      background: white;
51      box-sizing: border-box;
52      width: 56px;
53      height: 56px;
54      margin: 16px;
55      padding: 16px;
56      border-radius: 50%;
57      text-align: center;
58    }
59
60  </style>
61</head>
62<body unresolved>
63
64<template is="auto-binding">
65
66  <section>
67
68    <div>Shadows</div>
69
70    <paper-shadow class="card" z="0">
71      z = 0
72    </paper-shadow>
73
74    <paper-shadow class="card" z="1">
75      z = 1
76    </paper-shadow>
77
78    <paper-shadow class="card" z="2">
79      z = 2
80    </paper-shadow>
81
82    <paper-shadow class="card" z="3">
83      z = 3
84    </paper-shadow>
85
86    <paper-shadow class="card" z="4">
87      z = 4
88    </paper-shadow>
89
90    <paper-shadow class="card" z="5">
91      z = 5
92    </paper-shadow>
93
94  </section>
95
96  <section on-tap="{{tapAction}}">
97
98    <div>Animated</div>
99
100    <paper-shadow class="card" z="0" animated>
101      tap
102    </paper-shadow>
103
104    <paper-shadow class="fab" z="0" animated layout center-center>
105      tap
106    </paper-shadow>
107
108  </section>
109
110</template>
111
112<script>
113
114  var scope = document.querySelector('template[is=auto-binding]');
115
116  scope.tapAction = function(e) {
117    var target = e.target;
118    if (!target.down) {
119      target.setZ(target.z + 1);
120      if (target.z === 5) {
121        target.down = true;
122      }
123    } else {
124      target.setZ(target.z - 1);
125      if (target.z === 0) {
126        target.down = false;
127      }
128    }
129  };
130
131</script>
132
133</body>
134</html>
135