Created
July 13, 2014 19:10
-
-
Save rcotrina94/587305eef1716fcecbd3 to your computer and use it in GitHub Desktop.
designer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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-header-panel/core-header-panel.html"> | |
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html"> | |
<link rel="import" href="../core-field/core-field.html"> | |
<link rel="import" href="../core-icon/core-icon.html"> | |
<link rel="import" href="../core-input/core-input.html"> | |
<link rel="import" href="../core-icons/core-icons.html"> | |
<link rel="import" href="../core-menu/core-submenu.html"> | |
<link rel="import" href="../core-item/core-item.html"> | |
<link rel="import" href="../core-icons/iconsets/av-icons.html"> | |
<link rel="import" href="../paper-fab/paper-fab.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
#core_header_panel { | |
width: 980px; | |
height: 600px; | |
left: 30px; | |
top: 20px; | |
position: static; | |
} | |
#core_toolbar { | |
color: rgb(255, 255, 255); | |
background-color: rgb(79, 125, 201); | |
} | |
#section { | |
position: static; | |
height: 100%; | |
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)); | |
} | |
#core_drawer_panel { | |
right: 0px; | |
bottom: 0px; | |
} | |
#section1 { | |
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; | |
background-color: rgb(205, 205, 205); | |
} | |
#section2 { | |
height: 100%; | |
box-sizing: border-box; | |
background-color: rgb(221, 221, 221); | |
} | |
#core_menu_button { | |
left: 1070px; | |
top: 410px; | |
} | |
#core_pages { | |
width: 400px; | |
height: 400px; | |
border: 1px solid silver; | |
left: 1240px; | |
top: 380px; | |
} | |
#core_scroll_header_panel { | |
width: 380px; | |
height: 460px; | |
left: 1250px; | |
top: 480px; | |
} | |
#core_drawer_panel1 { | |
right: 0px; | |
bottom: 0px; | |
} | |
#section3 { | |
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; | |
background-color: rgb(250, 250, 250); | |
} | |
#section4 { | |
box-sizing: border-box; | |
padding: 30px; | |
background-color: rgb(255, 255, 255); | |
} | |
#paper_fab { | |
position: absolute; | |
right: 20px; | |
bottom: 20px; | |
background-color: rgb(238, 238, 238); | |
} | |
.core_icon { | |
height: 24px; | |
width: 24px; | |
} | |
.core_menu { | |
font-size: 16px; | |
} | |
.core_menu1 { | |
font-size: 16px; | |
} | |
.core_card { | |
width: 100%; | |
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; | |
margin-bottom: 20px; | |
background-color: rgb(255, 255, 255); | |
} | |
.core_toolbar2 { | |
right: 0px; | |
color: rgb(0, 0, 0); | |
fill: rgb(255, 255, 255); | |
background-color: rgb(231, 231, 231); | |
} | |
.core_field1 { | |
border-bottom-width: 1px; | |
border-bottom-style: solid; | |
border-bottom-color: rgb(223, 223, 223); | |
} | |
.core_icon1 { | |
height: 24px; | |
width: 24px; | |
} | |
#core_submenu4 { | |
background-color: rgb(218, 218, 218); | |
} | |
#core_field { | |
background-color: rgb(222, 222, 222); | |
} | |
#core_toolbar2 { | |
background-color: rgb(234, 234, 234); | |
} | |
.core_icon_button2 { | |
position: absolute; | |
right: 0px; | |
bottom: 0px; | |
border-top-left-radius: 5px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 0px; | |
border-bottom-left-radius: 0px; | |
margin: 0px; | |
color: white; | |
opacity: 0.4; | |
background-color: rgb(127, 127, 127); | |
} | |
</style> | |
<core-header-panel mode="standard" id="core_header_panel"> | |
<core-toolbar id="core_toolbar"> | |
<core-icon-button icon="menu" id="core_icon_button"></core-icon-button> | |
<div id="div">Header</div> | |
</core-toolbar> | |
<section id="section"> | |
<core-drawer-panel id="core_drawer_panel"> | |
<section id="section1" drawer> | |
<core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout> | |
<core-icon icon="search" id="core_icon"></core-icon> | |
</core-field> | |
<core-menu selected="0" selectedindex="0" id="core_menu"> | |
<core-submenu active selected="1" label="Favorites" icon="settings" valueattr="name" id="core_submenu1"> | |
<core-item label="Favorite 1" icon="arrow-forward" size="24" id="core_item2" horizontal center layout></core-item> | |
<core-item label="Favorite 2" icon="arrow-forward" size="24" id="core_item3" horizontal center layout active></core-item> | |
<core-item label="Favorite 3" icon="arrow-forward" size="24" id="core_item4" horizontal center layout></core-item> | |
</core-submenu> | |
</core-menu> | |
<core-icon-button icon="chevron-left" id="core_icon_button2" class="core_icon_button2" theme="core-light-theme"></core-icon-button> | |
</section> | |
<section id="section2" main> | |
<core-drawer-panel id="core_drawer_panel1"> | |
<section id="section3" drawer> | |
<core-toolbar id="core_toolbar2">Favorite 2</core-toolbar> | |
<core-menu selected="0" id="core_menu1"> | |
</core-menu> | |
<core-submenu label="Topics" icon="settings" valueattr="name" id="core_submenu4"> | |
<core-item label="Topic 1" size="24" id="core_item10" horizontal center layout></core-item> | |
<core-item label="Topic 2" size="24" id="core_item11" horizontal center layout></core-item> | |
</core-submenu> | |
<core-submenu label="Other thing" icon="settings" valueattr="name" id="core_submenu"> | |
<core-item label="Topic 1" size="24" id="core_item" horizontal center layout></core-item> | |
<core-item label="Topic 2" size="24" id="core_item1" horizontal center layout></core-item> | |
</core-submenu> | |
<core-icon-button icon="chevron-left" id="core_icon_button2" class="core_icon_button2" theme="core-light-theme"></core-icon-button> | |
</section> | |
<section id="section4" main vertical layout one flex center start-justified> | |
<paper-fab icon="add" id="paper_fab"></paper-fab> | |
<core-card id="core_card" class="core_card" layout vertical> | |
<core-toolbar id="core_toolbar1" class="core_toolbar2"> | |
<core-icon-button icon="menu" class="core_icon_button1"></core-icon-button> | |
<div id="div1" class="div1" flex>Toolbar</div> | |
</core-toolbar> | |
<core-field class="core_field1" icon="search" theme="core-light-theme" center horizontal layout> | |
<core-icon icon="search" class="core_icon1"></core-icon> | |
<core-input placeholder="text input" id="core_input" class="core_input1" flex></core-input> | |
</core-field> | |
</core-card> | |
<core-card class="core_card" layout vertical> | |
<core-toolbar class="core_toolbar2"> | |
<core-icon-button icon="menu" id="core_icon_button1"></core-icon-button> | |
<div class="div1" flex>Toolbar</div> | |
</core-toolbar> | |
<core-field class="core_field1" icon="search" theme="core-light-theme" center horizontal layout> | |
<core-icon icon="search" class="core_icon1"></core-icon> | |
<core-input placeholder="text input" class="core_input1" flex></core-input> | |
</core-field> | |
</core-card> | |
</section> | |
</core-drawer-panel> | |
</section> | |
</core-drawer-panel> | |
</section> | |
</core-header-panel> | |
</template> | |
<script> | |
Polymer('my-element', { | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment