designer

designer.html

<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.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-item/paper-item.html">
<link rel="import" href="../paper-progress/paper-progress.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #paper_tabs {
        width: 1000px;
        color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
        left: 130px;
        top: 80px;
        position: absolute;
        background-color: rgb(0, 166, 53);
      }
      #core_card {
        position: absolute;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 130px;
        top: 160px;
        width: 225px;
        height: 300px;
        background-color: rgb(255, 255, 255);
      }
      #paper_item {
        background-color: rgb(89, 180, 125);
      }
      #core_card1 {
        position: absolute;
        width: 500px;
        height: 600px;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 380px;
        top: 160px;
        background-color: rgb(255, 255, 255);
      }
      #core_card2 {
        position: absolute;
        width: 225px;
        height: 300px;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 900px;
        top: 160px;
        background-color: rgb(255, 255, 255);
      }
      #paper_item3 {
        background-color: rgb(85, 181, 123);
      }
      #paper_item4 {
        background-color: rgb(85, 181, 123);
      }
      #core_card3 {
        position: absolute;
        width: 225px;
        height: 300px;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 130px;
        top: 470px;
        background-color: rgb(255, 255, 255);
      }
      #paper_item5 {
        background-color: rgb(85, 181, 123);
      }
      #core_icon {
        width: 35px;
        height: 35px;
        left: 20px;
        top: 20px;
      }
      #paper_item14 {
        left: 75px;
        top: -20px;
      }
      #core_icon1 {
        left: 20px;
        width: 35px;
        height: 35px;
      }
      #paper_item15 {
        left: 75px;
        top: -40px;
      }
    </style>
    <paper-tabs selected="0" selectedindex="0" id="paper_tabs" horizontal center layout>
      <paper-tab id="paper_tab" inline flex center-center horizontal layout active>DASHBOARD</paper-tab>
      <paper-tab id="paper_tab1" inline flex center-center horizontal layout>PRIMARY EXPENSES</paper-tab>
      <paper-tab id="paper_tab2" inline flex center-center horizontal layout>SECONDARY EXPENSES</paper-tab>
      <paper-tab id="paper_tab3" inline flex center-center horizontal layout>TRANSACTIONS</paper-tab>
      <paper-tab id="paper_tab4" inline flex center-center horizontal layout>CURRENT BALANCES</paper-tab>
    </paper-tabs>
    <core-card id="core_card" layout vertical>
      <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
        <core-input id="core_input" flex></core-input>
      </core-field>
      <paper-item id="paper_item" icon="settings" label="Item" center center-justified>Primary Expenses</paper-item>
      <paper-item id="paper_item1" icon="settings" label="Item">Rent - $500 / $1,000</paper-item>
      <paper-progress step="10" value="50" ratio="50" id="paper_progress"></paper-progress>
      <paper-item id="paper_item2" icon="settings" label="Item">Groceries - $500 / $500</paper-item>
      <paper-progress value="100" ratio="100" id="paper_progress1"></paper-progress>
    </core-card>
    <core-card id="core_card1" layout vertical>
      <paper-item id="paper_item3" icon="settings" label="Item">Overview for January</paper-item>
      <core-icon icon="remove-circle-outline" id="core_icon"></core-icon>
      <paper-item id="paper_item14" icon="settings" label="Item">$895 of $1,700 of primary expenses</paper-item>
      <core-icon icon="done" id="core_icon1"></core-icon>
      <paper-item id="paper_item15" icon="settings" label="Item">Buffer is worth 100% of primary expenses</paper-item>
    </core-card>
    <core-card id="core_card3" layout vertical>
      <paper-item id="paper_item5" icon="settings" label="Item">Secondary Expenses</paper-item>
      <paper-item id="paper_item6" icon="settings" label="Item">Vacation - $150</paper-item>
      <paper-item id="paper_item7" icon="settings" label="Item">Emergency Fund - $400</paper-item>
      <paper-item id="paper_item8" icon="settings" label="Item">Computer Fund - $200</paper-item>
    </core-card>
    <core-card id="core_card2" layout vertical>
      <paper-item id="paper_item4" icon="settings" label="Item">Transactions</paper-item>
      <paper-item id="paper_item9" icon="settings" label="Item">+ $1,500 - Freelance Job</paper-item>
      <paper-item id="paper_item10" icon="settings" label="Item">- $57 - Groceries</paper-item>
      <paper-item id="paper_item11" icon="settings" label="Item">+ $1,000 - Book Revenue</paper-item>
      <paper-item id="paper_item12" icon="settings" label="Item">- $800 - Rent</paper-item>
      <paper-item id="paper_item13" icon="settings" label="Item">- $200 - Computer Fund</paper-item>
    </core-card>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>