Skip to content

Instantly share code, notes, and snippets.

@waynelkh

waynelkh/designer.html

Created September 8, 2015 23:54
Download ZIP

Revisions

  1. waynelkh revised this gist Sep 8, 2015. No changes.
  2. waynelkh revised this gist Sep 8, 2015. No changes.
  3. waynelkh created this gist Sep 8, 2015.
    109 changes: 109 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    <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-input/core-input.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: 414px;
    height: 736px;
    box-sizing: border-box;
    }
    #core_card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    left: 0px;
    top: 0px;
    background-color: rgb(255, 255, 255);
    }
    #paper_toast {
    left: 780px;
    top: 450px;
    position: absolute;
    }
    #paper_toast1 {
    left: 780px;
    top: 480px;
    position: absolute;
    }
    #section {
    width: 100%;
    height: 100%;
    border: 5px solid rgb(204, 204, 204);
    left: 0px;
    top: 0px;
    position: absolute;
    }
    #paper_tabs {
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    }
    #core_header_panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    #core_toolbar {
    color: rgb(255, 255, 255);
    background-color: rgb(79, 125, 201);
    }
    #section2 {
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
    }
    #core_toolbar1 {
    right: 0px;
    left: -30px;
    color: rgb(255, 255, 255);
    fill: rgb(255, 255, 255);
    top: 250px;
    background-color: rgb(79, 125, 201);
    }
    #input {
    padding: 15px;
    left: 170px;
    top: 10px;
    }
    </style>
    <core-card id="core_card" layout vertical>
    <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>
    <core-icon-button icon="menu" id="core_icon_button1" theme="core-light-theme"></core-icon-button>
    <core-icon-button icon="menu" id="core_icon_button2" theme="core-light-theme"></core-icon-button>
    <input id="input" placeholder="type something..." is="core-input">
    </core-toolbar>
    <section id="section2">
    <section id="section" vertical layout reverse>
    <paper-tabs noink nobar selected="1" selectedindex="1" id="paper_tabs" horizontal center layout>
    <paper-tab id="paper_tab" inline flex center-center horizontal layout>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" inline flex center-center horizontal layout active>ITEM TWO</paper-tab>
    </paper-tabs>
    <section id="section1" flex relative>
    </section>
    </section>
    </section>
    </core-header-panel>
    </core-card>
    </template>

    <script>

    Polymer({

    });

    </script>

    </polymer-element>