third_party/polymer/components-chromium/paper-shadow/demo.html

   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>