five-bells-visualization
Version:
Tool to visualize Five Bells payments
213 lines (156 loc) • 5.43 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Core Tooltip</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="core-tooltip.html">
<style>
body {
font-family: "Open Sans", sans-serif;
font-weight: 300;
padding: 24px;
}
.example {
margin: 35px 15px;
}
.example > * {
margin: 0 15px;
}
.fakebutton {
box-shadow: 0 0 3px #aaa inset;
border-radius: 3px;
padding: 7px 5px;
}
.fakebutton:hover {
background-color: white;
}
img {
width: 400px;
height: 150px;
object-fit: cover;
}
img.large {
border: 15px solid white;
box-sizing: border-box;
}
.profile {
width: 60px;
height: auto;
border-radius: 50%;
vertical-align: middle;
}
a {
color: currentcolor;
text-decoration: none;
}
.rich {
background: hotpink;
color: white;
padding:20px;
border-radius: 5px;
}
</style>
<style shim-shadowdom>
core-tooltip.fancy::shadow .core-tooltip {
opacity: 0;
-webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
core-tooltip.fancy:hover::shadow .core-tooltip,
core-tooltip.fancy:focus::shadow .core-tooltip,
core-tooltip.fancy[show]::shadow .core-tooltip {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body unresolved>
<article>
<button>Toggle all</button>
<section class="small" layout horizontal center-center>
<div class="example">
<core-tooltip label='position="left"' position="left">
<core-icon-button icon="polymer"></core-icon-button>
</core-tooltip>
<core-tooltip label='position="top"' position="top">
<core-icon-button icon="polymer"></core-icon-button>
</core-tooltip>
<core-tooltip label='position="bottom"' position="bottom">
<core-icon-button icon="polymer"></core-icon-button>
</core-tooltip>
<core-tooltip label='position="right"' position="right">
<core-icon-button icon="polymer"></core-icon-button>
</core-tooltip>
</div>
<div class="example">
<core-tooltip label="Fancy effect" class="fancy">
<paper-fab icon="add"></paper-fab>
</core-tooltip>
</div>
</section>
<section layout horizontal center-center>
<div class="example">
<core-tooltip>
<div class="rich">Rich tooltip with HTML</div>
<div tip>
<img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
" class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div>
</core-tooltip>
</div>
<div class="example">
<core-tooltip label="<core-tooltip large>" large>
Larger tooltips for mobile
</core-tooltip>
</div>
<div class="example">
<core-tooltip label="disabled" disabled>
Disabled Tooltip
</core-tooltip>
</div>
</section>
<section layout horizontal center-center>
<div class="example">
<core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large">
</core-tooltip>
</div>
</section>
<section layout horizontal center-center>
<div class="example">
<core-tooltip id="dynamic" show>
Tooltips are only shown (on hover) when a label is set<br> or a html rich snippet is given. →
</core-tooltip>
<button id="fillbutton">Fill tooltip</button>
</div>
</section>
</article>
<script>
document.querySelector('button').addEventListener('click', function(e) {
var tooltips = document.querySelectorAll('core-tooltip');
Array.prototype.forEach.call(tooltips, function(tooltip) {
tooltip.show = !tooltip.show;
});
});
document.querySelector('#fillbutton').addEventListener('click', function(e) {
e.stopPropagation();
var el = document.querySelector('#dynamic');
el.insertAdjacentHTML('beforeend', '<div tip><b>See</b>. Told ya so!</div>');
});
</script>
</body>
</html>