five-bells-visualization
Version:
Tool to visualize Five Bells payments
93 lines (69 loc) • 2.57 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>
<title>core-item</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="core-item.html">
<style>
body {
font-family: sans-serif;
font-size: 16px;
margin: 20px;
}
core-item {
width: 300px;
}
core-item.big {
font-size: 24px;
}
core-item.small {
font-size: 12px;
}
core-item.contact-item {
height: 50px;
background-color: #efefef;
border: 1px solid #ddd;
}
core-item.contact-item .name {
font-size: 1.125em;
}
core-item.contact-item .address {
font-size: 0.75em;
}
</style>
</head>
<body unresolved>
<h2>items with icon and label:</h2>
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="account-box" label="Account"></core-item>
<h2>items with label only:</h2>
<core-item label="Settings"></core-item>
<core-item label="Account"></core-item>
<h2>links (via <a>):</h2>
<core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
<core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
<h2>items sized with CSS:</h2>
<core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
<core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
<core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
<core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
<h2>custom item:</h2>
<core-item icon="account-circle" class="contact-item">
<div flex>
<div class="name">John Doe</div>
<div class="address">123 A Street, San Francisco, CA</div>
</div>
<core-icon icon="more-vert"></core-icon>
</core-item>
</body>
</html>