designer

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-header-panel/core-header-panel.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../topeka-elements/theme.html">
<link rel="import" href="../topeka-elements/topeka-resources.html">
<link rel="import" href="../topeka-elements/topeka-app.html">
<link rel="import" href="../topeka-elements/topeka-categories.html">
<link rel="import" href="../topeka-elements/topeka-leaderboard.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #core_header_panel {
        width: 1250px;
        height: 650px;
        left: 0px;
        top: 60px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        width: 1250px;
        height: 60px;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(255, 26, 26);
      }
      #section {
        height: 1000px;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #paper_input {
        left: 960px;
        top: 250px;
        position: absolute;
      }
      #paper_button {
        left: -500px;
        top: -134px;
        position: absolute;
      }
      #paper_button1 {
        left: -500px;
        top: -134px;
        position: absolute;
      }
      #paper_button2 {
        left: -500px;
        top: -134px;
        position: absolute;
      }
      #paper_checkbox {
        left: 810px;
        top: 220px;
        position: absolute;
      }
      #paper_fab {
        left: 760px;
        top: 300px;
        position: absolute;
      }
      #div1 {
        left: 450px;
        top: 360px;
        position: absolute;
      }
      #paper_fab1 {
        left: 820px;
        top: 130px;
        position: absolute;
      }
      #paper_input1 {
        left: 880px;
        top: 60px;
        position: absolute;
      }
      #paper_radio_button {
        left: 990px;
        top: 440px;
        position: absolute;
      }
      #paper_slider {
        left: 770px;
        top: 440px;
        position: absolute;
      }
      #paper_tab {
        width: 120px;
        height: 40px;
        left: 870px;
        top: 180px;
        position: absolute;
      }
      #section1 {
        box-sizing: border-box;
        width: 420px;
        height: 630px;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(255, 255, 141);
      }
      #div2 {
        box-sizing: border-box;
        position: relative;
        height: 150px;
        width: 150px;
        color: rgb(255, 255, 255);
        font-size: 100px;
        background-color: rgb(255, 235, 59);
      }
      #topeka_app {
        width: 300px;
        height: 300px;
        min-height: 450px;
        left: 0px;
        top: -60px;
        position: absolute;
      }
      #topeka_app1 {
        width: 300px;
        height: 300px;
        min-height: 450px;
        left: 1510px;
        top: -20px;
      }
      #topeka_categories {
        width: 640px;
        height: 540px;
        left: 440px;
        top: 50px;
        position: absolute;
      }
      #topeka_leaderboard {
        width: 300px;
        height: 300px;
        left: 910px;
        top: 200px;
        position: absolute;
      }
    </style>
    <core-toolbar id="core_toolbar">
      <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
      <div id="div">Header</div>
    </core-toolbar>
    <core-header-panel mode="standard" id="core_header_panel" vertical layout>
      <section id="section">
        <paper-button id="paper_button">button</paper-button>
        <paper-button id="paper_button1">button</paper-button>
        <paper-button id="paper_button2">button</paper-button>
        <paper-fab icon="av:play-arrow" id="paper_fab"></paper-fab>
        <div id="div1" layout horizontal>
			</div>
        <paper-radio-button label="Radio Button" id="paper_radio_button"></paper-radio-button>
        <paper-slider id="paper_slider"></paper-slider>
        <paper-tab id="paper_tab" inline flex center-center horizontal layout>TAB</paper-tab>
        <paper-input label="Type something..." floatinglabel id="paper_input1" eleven flex vertical layout around-justified></paper-input>
        <paper-fab icon="check" id="paper_fab1"></paper-fab>
        <paper-checkbox checked label="click me" id="paper_checkbox"></paper-checkbox>
        <paper-input label="Type something..." id="paper_input" horizontal layout start></paper-input>
        <section id="section1" layout vertical center center-justified>
          <div id="div2" hero layout vertical center center-justified>
            <span id="span">+8</span>
          </div>
        </section>
        <topeka-app selected="profile" disableleaderboard id="topeka_app" vertical layout></topeka-app>
        <topeka-categories id="topeka_categories" vertical layout></topeka-categories>
        <topeka-leaderboard selected="1" id="topeka_leaderboard" vertical layout></topeka-leaderboard>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>