five-bells-visualization
Version:
Tool to visualize Five Bells payments
135 lines (105 loc) • 2.56 kB
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>