Home | History | Annotate | Download | only in paper-shadow 
      1 <!doctype html>
      2 <!--
      3 Copyright 2013 The Polymer Authors. All rights reserved.
      4 Use of this source code is governed by a BSD-style
      5 license 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