five-bells-visualization
Version:
Tool to visualize Five Bells payments
165 lines (128 loc) • 4.04 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
-->
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../x-elements/x-toolbar.html">
<link rel="import" href="../../x-elements/x-overlay.html">
<link rel="import" href="../../x-elements/x-icon.html">
<link rel="import" href="../../x-elements/x-icon-button.html">
<link rel="import" href="../../x-elements/x-pages.html">
<link rel="import" href="../../x-elements/x-selector.html">
<link rel="import" href="../../x-elements/x-search-input.html">
<link rel="import" href="../../x-elements/x-drop-button.html">
<link rel="import" href="../../x-elements/paper-button.html">
<link rel="import" href="../../assets/icons.html">
<style>
body {
font-family: sans-serif;
}
x-icon-button {
height: 38px;
}
#overlay {
width: 500px;
height: 200px;
background-color: white;
border: 1px outset silver;
padding: 24px;
}
#overlay2 {
width: 200px;
height: 600px;
background-color: white;
border: 1px outset silver;
padding: 24px;
}
#overlay3 {
xwidth: 100px;
background-color: white;
border: 1px outset silver;
}
#overlay3 [selected] {
background-color: lightblue;
}
#overlay3 h3 {
padding: 8px 24px;
margin: 0;
}
#overlay3 [tools] {
padding: 4px;
}
paper-button {
background-color: lightblue;
}
page {
display: block;
}
#one {
background-color: whitesmoke;
}
#two {
background-color: #FFDCCA;
}
x-drop-button {
xdisplay: block;
border: 1px dotted silver;
padding: 4px;
}
</style>
<body fullbleed vertical layout>
<x-toolbar>
<x-icon-button icon="menu"></x-icon-button>
<h2>Hello World</h2>
<x-search-input></x-search-input>
<span flex></span>
<x-icon-button icon="schedule" onclick="pages.selected = 1"></x-icon-button>
<x-icon-button icon="settings" onclick="pages.selected = 0"></x-icon-button>
<span flex five></span>
</x-toolbar>
<x-pages id="pages" flex scroll>
<page id="one">
<div style="height: 500px; padding: 16px;">
<x-drop-button onclick="overlay3.open(this.getBoundingClientRect(), true);">Foo</x-drop-button>
</div>
<paper-button onclick="overlay.open();">Dialog</paper-button>
<paper-button onclick="overlay3.open(this.getBoundingClientRect(), true);">Pop</paper-button>
<div style="height: 2500px;"></div>
</page>
<page id="two">
<br>
<h2>Two</h2>
<br>
</page>
</x-pages>
<x-overlay id="overlay" vertical layout>
<div horizontal end-justified layout>
<paper-button onclick="overlay2.open();">Nest</paper-button>
</div>
<div flex></div>
<div horizontal end-justified layout>
<paper-button onclick="overlay.close();">Close</paper-button>
</div>
</x-overlay>
<x-overlay id="overlay2" vertical layout>
<div horizontal end-justified layout>
<paper-button onclick="overlay3.open(this.getBoundingClientRect());">Nest 2</paper-button>
</div>
<div flex></div>
<div horizontal end-justified layout>
<paper-button onclick="overlay2.close();">Close</paper-button>
</div>
</x-overlay>
<x-overlay id="overlay3" vertical layout>
<x-selector block flex>
<h3>Alpha</h3>
<h3>Beta</h3>
<h3>Gamma</h3>
</x-selector>
<div tools horizontal end-justified layout>
<paper-button onclick="overlay3.close();">Close</paper-button>
</div>
</x-overlay>
</body>