mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
165 lines
3.9 KiB
HTML
165 lines
3.9 KiB
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>
|