designer

designer.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="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_drawer_panel {
        position: absolute;
        top: -10px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      #section {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        width: 350px;
        background-color: rgb(250, 250, 250);
      }
      #section1 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #core_icon {
        height: 24px;
        width: 24px;
      }
      #core_input1 {
        left: 25px;
        padding: 15px;
      }
      #paper_input {
        left: 25px;
      }
    </style>
    <core-item icon="account-circle" class="label-outline" horizontal="" center="" layout="">
      <div flex="">
        <div style="font-size: 18px;">John Doe</div>
        <div style="font-size: 12px;">123 A Street, San Francisco, CA</div>
      </div>
      <core-icon icon="more-vert" style="height: 24px; width: 24px;"><svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path></g></svg></core-icon>
    </core-item>
    <core-drawer-panel selected="drawer" id="core_drawer_panel">
      <section id="section" drawer>
        <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
          <core-icon id="core_icon"></core-icon>
        </core-field>
        <core-input placeholder="Type something..." inputvalue="sads" value="sads" id="core_input1"></core-input>
        <paper-input label="Type something..." id="paper_input"></paper-input>
      </section>
      <section id="section1" main>
        <paper-icon-button icon="menu" id="paper_icon_button"></paper-icon-button>
        <paper-icon-button label="zxczx" icon="menu" id="paper_icon_button1"></paper-icon-button>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>