Last active
August 29, 2015 14:09
-
-
Save ihsanberahim/0dbfb487df20baf46ea9 to your computer and use it in GitHub Desktop.
designer
This file contains hidden or 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-animated-pages/core-animated-pages.html"> | |
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> | |
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-down.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-up.html"> | |
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.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="../paper-button/paper-button.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
.core_animated_pages { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
left: 0px; | |
top: 0px; | |
position: absolute; | |
background-color: rgb(238, 238, 238); | |
} | |
.core_animated_pages > section { | |
background-color: rgb(255, 255, 255); | |
} | |
.background-test { | |
height: 300px; | |
width: 100%; | |
background-image: url(http://lorempixel.com/400/200/); | |
background-color: rgb(250, 250, 250); | |
background-size: cover; | |
background-position: 50% 50%; | |
} | |
.formWrapper { | |
margin: 0px auto; | |
width: 80%; | |
display: block; | |
} | |
.paper_button { | |
margin-top: 20px; | |
color: rgb(255, 255, 255); | |
height: 60px; | |
line-height: 30px; | |
font-size: 24px; | |
background-color: rgb(85, 88, 98); | |
} | |
.core_field { | |
border: 1px solid rgb(221, 221, 221); | |
margin: 10px; | |
height: 60px; | |
width: 80%; | |
} | |
.core_field core-input { | |
width: 100%; | |
height: 100%; | |
} | |
.background-test { | |
height: 300px; | |
width: 90%; | |
background-image: url(http://lorempixel.com/400/200/); | |
background-color: rgb(250, 250, 250); | |
background-size: cover; | |
background-position: 50% 50%; | |
} | |
</style> | |
<core-animated-pages selectedindex="0" notap id="core_animated_pages" class="core_animated_pages" vertical layout> | |
<section id="formPage" layout vertical active fit> | |
<div id="formWrapper" class="formWrapper" vertical center-justified layout> | |
<div layout horizontal> | |
<h2>Product Picture</h2> | |
</div> | |
<div layout horizontal center-justified> | |
<div class="background-test"></div> | |
</div> | |
<div layout horizontal> | |
<h2>Product Info</h2> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="title_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout> | |
<core-input id="c_field" flex></core-input> | |
</core-field> | |
<core-field class="core_field" center horizontal layout> | |
<core-input id="u_field" flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="weight_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="cateogry_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<div three flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>New</paper-button> | |
</div> | |
<div nine flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>Share In Facebook</paper-button> | |
</div> | |
</div> | |
<div layout horizontal> | |
<div twelve flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>Submit</paper-button> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section id="requestPage" fit> | |
</section> | |
</core-animated-pages> | |
</template> | |
<script> | |
Polymer({ | |
}); | |
</script> | |
</polymer-element> |
This file contains hidden or 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-animated-pages/core-animated-pages.html"> | |
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> | |
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-down.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-up.html"> | |
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.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="../paper-button/paper-button.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
.core_animated_pages { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
left: 0px; | |
top: 0px; | |
position: absolute; | |
background-color: rgb(238, 238, 238); | |
} | |
.core_animated_pages > section { | |
background-color: rgb(255, 255, 255); | |
} | |
.background-test { | |
height: 300px; | |
width: 100%; | |
background-image: url(http://lorempixel.com/400/200/); | |
background-color: rgb(250, 250, 250); | |
background-size: cover; | |
background-position: 50% 50%; | |
} | |
.formWrapper { | |
margin: 0px auto; | |
width: 80%; | |
display: block; | |
} | |
.paper_button { | |
margin-top: 20px; | |
color: rgb(255, 255, 255); | |
height: 60px; | |
line-height: 30px; | |
font-size: 24px; | |
background-color: rgb(85, 88, 98); | |
} | |
.core_field { | |
border: 1px solid rgb(221, 221, 221); | |
margin: 10px; | |
height: 60px; | |
width: 80%; | |
} | |
.core_field core-input { | |
width: 100%; | |
height: 100%; | |
} | |
.background-test { | |
height: 300px; | |
width: 90%; | |
background-image: url(http://lorempixel.com/400/200/); | |
background-color: rgb(250, 250, 250); | |
background-size: cover; | |
background-position: 50% 50%; | |
} | |
</style> | |
<core-animated-pages selectedindex="0" notap id="core_animated_pages" class="core_animated_pages" vertical layout> | |
<section id="formPage" layout vertical active fit> | |
<div id="formWrapper" class="formWrapper" vertical center-justified layout> | |
<div layout horizontal> | |
<h2>Product Picture</h2> | |
</div> | |
<div layout horizontal center-justified> | |
<div class="background-test"></div> | |
</div> | |
<div layout horizontal> | |
<h2>Product Info</h2> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="title_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout> | |
<core-input id="c_field" flex></core-input> | |
</core-field> | |
<core-field class="core_field" center horizontal layout> | |
<core-input id="u_field" flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="weight_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<core-field class="core_field" center horizontal layout twelve flex> | |
<core-input id="cateogry_field" twelve flex></core-input> | |
</core-field> | |
</div> | |
<div layout horizontal> | |
<div three flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>New</paper-button> | |
</div> | |
<div nine flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>Share In Facebook</paper-button> | |
</div> | |
</div> | |
<div layout horizontal> | |
<div twelve flex layout horizontal> | |
<paper-button class="paper_button" twelve flex>Submit</paper-button> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section id="requestPage" fit> | |
</section> | |
</core-animated-pages> | |
</template> | |
<script> | |
Polymer({ | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment