Skip to content

Instantly share code, notes, and snippets.

@JaisonBrooks

JaisonBrooks/designer.html

Last active August 29, 2015 14:08
Show Gist options
  • Save JaisonBrooks/896b200b53307c50e1d7 to your computer and use it in GitHub Desktop.
Save JaisonBrooks/896b200b53307c50e1d7 to your computer and use it in GitHub Desktop.
Download ZIP
designer
Raw
designer.html
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
top: 0px;
left: 0px;
}
#core_card {
position: absolute;
width: 390px;
height: 600px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
left: 150px;
top: 210px;
background-color: rgb(255, 255, 255);
}
#core_card1 {
position: absolute;
width: 390px;
height: 600px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
left: 690px;
top: 210px;
background-color: rgb(255, 255, 255);
}
#core_card2 {
position: absolute;
width: 390px;
height: 600px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
left: 1230px;
top: 210px;
background-color: rgb(255, 255, 255);
}
#core_submenu {
left: 1510px;
top: 680px;
}
#core_pages {
width: 400px;
height: 400px;
border: 1px solid silver;
left: 1580px;
top: 840px;
}
#core_selector {
width: 100%;
height: 50px;
left: 1470px;
top: 650px;
}
#core_toolbar {
right: 0px;
left: 0px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
top: 0px;
position: absolute;
height: 72px;
background-color: rgb(255, 147, 0);
}
#paper_tabs {
width: 1820px;
color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
left: 0px;
top: 70px;
position: absolute;
opacity: 1;
background-color: rgb(94, 94, 94);
}
#core_tooltip {
left: 1450px;
top: 760px;
}
#core_field {
left: 1530px;
top: 690px;
}
#core_drawer_panel {
position: absolute;
top: 700px;
right: 0px;
bottom: 0px;
left: 1480px;
}
#core_card3 {
position: absolute;
width: 300px;
height: 300px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
left: 1450px;
top: 650px;
background-color: rgb(255, 255, 255);
}
#core_ajax {
left: 1480px;
top: 580px;
}
#paper_toast {
left: 1560px;
top: 790px;
}
#paper_tabs1 {
width: 480px;
color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
left: 1490px;
top: 750px;
background-color: rgb(0, 188, 212);
}
#paper_tab4 {
width: 120px;
height: 40px;
left: 1500px;
top: 730px;
}
#paper_slider {
left: 1440px;
top: 680px;
}
#paper_ripple {
width: 300px;
height: 300px;
left: 1560px;
top: 640px;
}
#paper_radio_group {
left: 1540px;
top: 630px;
}
#paper_progress {
left: 1590px;
top: 600px;
}
#paper_item {
left: 1570px;
top: 620px;
}
#paper_input {
left: 1530px;
top: 590px;
}
#paper_icon_button {
left: 1540px;
top: 570px;
}
#paper_checkbox {
left: 1560px;
top: 720px;
}
#paper_calculator {
width: 400px;
height: 560px;
left: 1510px;
top: 690px;
}
#paper_button {
left: 1510px;
top: 660px;
}
#topeka_category {
width: 300px;
height: 300px;
left: 1540px;
top: 750px;
}
#topeka_datasource {
left: 1440px;
top: 690px;
}
#core_icon {
height: 64px;
width: 64px;
left: 1670px;
top: 700px;
}
#topeka_profile {
width: 300px;
height: 300px;
left: 1460px;
top: 760px;
}
#code_mirror {
width: 400px;
height: 300px;
left: 1480px;
top: 620px;
}
#notification_alert {
left: 1500px;
top: 780px;
}
#cool_clock {
width: 400px;
height: 300px;
left: 1590px;
top: 560px;
}
#smoothie_chart {
left: 1490px;
top: 650px;
}
#speech_mic {
left: 1570px;
top: 650px;
}
#core_scroll_header_panel {
width: 390px;
height: 600px;
}
#core_toolbar1 {
color: rgb(241, 241, 241);
fill: rgb(241, 241, 241);
background-color: rgb(66, 133, 244);
}
#div2 {
left: 0px;
top: 0px;
position: absolute;
}
</style>
<core-card id="core_card" layout vertical></core-card>
<core-card id="core_card1" layout vertical>
<core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel">
<core-toolbar id="core_toolbar1" class="tall">
<div id="div1" flex></div>
<core-icon-button icon="more-vert" id="core_icon_button3"></core-icon-button>
<div id="div2" class="bottom indent">Usage</div>
</core-toolbar>
</core-scroll-header-panel>
</core-card>
<core-card id="core_card2" layout vertical></core-card>
<core-toolbar id="core_toolbar">
<core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
<div id="div" flex>[e] Title</div>
</core-toolbar>
<paper-tabs selected="0" selectedindex="0" id="paper_tabs" center>
<paper-tab id="paper_tab" active>SUMMARY</paper-tab>
<paper-tab id="paper_tab1">SOLAR</paper-tab>
<paper-tab id="paper_tab2">USAGE</paper-tab>
<paper-tab id="paper_tab3">STORAGE</paper-tab>
</paper-tabs>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment