five-bells-visualization
Version:
Tool to visualize Five Bells payments
256 lines (204 loc) • 5.93 kB
HTML
<!--
@license
Copyright (c) 2014 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>
<head>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link href="../../core-icons/core-icons.html" rel="import">
<link href="../../core-icons/social-icons.html" rel="import">
<link href="../../core-toolbar/core-toolbar.html" rel="import">
<link href="../../paper-shadow/paper-shadow.html" rel="import">
<link href="../core-animated-pages.html" rel="import">
<style shim-shadowdom>
body {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 420px;
}
.toolbar {
background: #8d3efc;
/* FIXME */
color: #fff ;
fill: #fff;
}
.toolbar-2 {
position: absolute;
top: 0;
left: 0;
background: #000;
color: #fff;
text-align: center;
font-size: 48px;
}
body /deep/ .toolbar-2 {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 420px;
background: #000;
color: #fff;
text-align: center;
font-size: 48px;
}
.container {
background-color: #e7e7e7;
padding: 16px;
}
.card {
position: relative;
background-color: #fff;
border-radius: 2px;
}
.card-top {
background: #f2da2f;
height: 240px;
}
.card-top-2 {
background: #99f8b7;
height: 240px;
}
.card-bottom {
padding: 24px;
}
.headline {
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
position: relative;
background: #000;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
}
.icon::after {
content: 'T';
font-size: 24px;
position: absolute;
top: 7px;
left: 13px;
}
.source-container {
margin-top: 16px;
}
.two-lines {
margin-left: 16px;
}
.source {
font-size: 14px;
}
.time {
color: rgba(0, 0, 0, 0.54);
font-size: 12px;
}
.tiles-container {
margin-top: 16px;
}
.tile {
position: relative;
display: inline-block;
width: 85px;
height: 85px;
background: #fff;
border-radius: 2px;
}
</style>
</head>
<body unresolved>
<polymer-element name="shadow-div" noscript>
<template>
<style>
:host {
display: block;
}
</style>
<paper-shadow target="{{}}" z="1"></paper-shadow>
<content></content>
</template>
</polymer-element>
<core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">
<section id="first">
<core-toolbar class="tall toolbar">
<core-icon icon="menu"></core-icon>
<div flex>Highlights</div>
<core-icon icon="social:share"></core-icon>
<core-icon icon="bookmark"></core-icon>
<core-icon icon="more-vert"></core-icon>
</core-toolbar>
<div class="container" hero-p>
<shadow-div class="card" hero-p onclick="stuff()">
<div class="card-top"></div>
<div class="card-bottom" hero-p>
<div class="headline">Google's Craziest Offices</div>
<div class="source-container" hero-p layout horizontal center>
<div class="icon" hero-id="icon-header" hero></div>
<div class="two-lines">
<div class="source">The New York Times</div>
<div class="time">36 minutes ago</div>
</div>
</div>
</div>
</shadow-div>
<div class="tiles-container" layout horizontal justified>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
</div>
</div>
</section>
<section id="second">
<core-toolbar class="tall" hero-p>
<core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
<div flex class="middle">T</div>
</core-toolbar>
</core-toolbar>
<div class="container">
<shadow-div class="card" onclick="stuff()">
<div class="card-top-2"></div>
<div class="card-bottom">
<div class="headline">Some long overflowing headline</div>
<div class="source-container" layout horizontal center>
<div class="icon" style="background:red;"></div>
<div class="two-lines">
<div class="source">The New York Times</div>
<div class="time">36 minutes ago</div>
</div>
</div>
</div>
</shadow-div>
<div class="tiles-container" layout horizontal justified>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
<shadow-div class="tile"></shadow-div>
</div>
</div>
</section>
</core-animated-pages>
<script>
function stuff(e) {
var p = document.querySelector('core-animated-pages');
p.selected = p.selected ? 0 : 1;
}
</script>
</body>
</html>