designer

designer.html

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.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-menu/core-submenu.html">
<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-icons/core-icons.html">
<link rel="import" href="../core-icons/iconsets/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">

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

  <template>
    <style>    
      body {
        font-family: Roboto;
        font-weight: 300;
      }
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_scaffold {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgb(28, 168, 244);
      }
      #core_header_panel {
        background-color: rgb(255, 255, 255);
      }
      #core_toolbar {
        color: rgb(3, 169, 244);
        background-color: rgb(28, 168, 244);
      }
      #core_animated_pages {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgb(238, 238, 238);
      }
      #core_card {
        width: 260px;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        padding: 20px;
        background-color: rgb(255, 255, 255);
      }
      #score_card {
        width: 300px;
        height: 300px;
        padding: 16px;
        background-color: rgb(255, 255, 255);
      }
      .spacer {
        width: 16px;
      }
      paper-fab {
        background-color: green;
      }
    </style>
    <core-scaffold id="core_scaffold">
      <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
        <core-toolbar id="core_toolbar"></core-toolbar>
        <core-menu selected="Add score" valueattr="label" selectedindex="0" id="main_menu" theme="core-light-theme">
          <core-item label="Add score" icon="add-box" size="24" id="menu_add_score" horizontal center layout active></core-item>
          <core-item label="Leaderboard" icon="book" size="24" id="menu_leaderboard" horizontal center layout></core-item>
        </core-menu>
      </core-header-panel>
      <span id="span" tool>Eat. Work. Train. Sleep. Repeat.</span>
      <core-animated-pages transitions="cross-fade" selected="{{ $.main_menu.selectedIndex }}" selectedindex="0" notap id="core_animated_pages">
        <section id="add_score" layout horizontal center center-justified active>
          <core-card id="score_card" layout vertical cross-fade>
            <div id="div" center horizontal layout>
              <h1 id="h1" flex>
              	Please enter your score for yesterday
            	</h1>
              <paper-fab icon="check" id="save"></paper-fab>
            </div>
            <div id="div" center horizontal layout>
              <core-item label="Nutrition" size="24" id="nutrition_label" flex horizontal center layout></core-item>
              <paper-slider snaps pin immediatevalue="{{ score }}" value="4" max="5" id="nutrition" horizontal center layout></paper-slider>
              <core-item label="{{ $.nutrition.immediateValue }}" size="24" id="nutrition_score" horizontal center layout></core-item>
            </div>
            <div id="div1" center horizontal layout>
              <core-item label="Workout" size="24" id="workout_label" flex horizontal center layout></core-item>
              <paper-toggle-button checked id="workout" touch-action="pan-y"></paper-toggle-button>
              <div id="div2" class="spacer"></div>
              <core-item label="1" size="24" id="workout_score" horizontal center layout></core-item>
            </div>
            <div id="div3" center horizontal layout>
              <core-item label="Mobility" size="24" id="mobility_label" flex horizontal center layout></core-item>
              <paper-toggle-button id="mobility" touch-action="pan-y"></paper-toggle-button>
              <div id="div4" class="spacer"></div>
              <core-item label="0" size="24" id="mobility_score" horizontal center layout></core-item>
            </div>
            <div id="div5" center horizontal layout>
              <core-item label="Supplement" size="24" id="supplement_label" flex horizontal center layout></core-item>
              <paper-toggle-button id="supplement" touch-action="pan-y"></paper-toggle-button>
              <div id="div6" class="spacer"></div>
              <core-item label="0" size="24" id="supplement_score" horizontal center layout></core-item>
            </div>
            <div id="div7" center horizontal layout>
              <core-item label="Lifestyle" size="24" id="lifestyle_label" flex horizontal center layout></core-item>
              <paper-toggle-button id="lifestyle" touch-action="pan-y"></paper-toggle-button>
              <div id="div8" class="spacer"></div>
              <core-item label="0" size="24" id="lifestyle_score" horizontal center layout></core-item>
            </div>
          </core-card>
        </section>
        <section id="leaderboard" layout horizontal center center-justified>
          <core-card id="leaderboard_card" layout vertical cross-fade>
            Foobar
          </core-card>
        </section>
      </core-animated-pages>
    </core-scaffold>
  </template>

  <script>

    Polymer('my-element', {
      score: 4
    });

  </script>

</polymer-element>