designer

designer.html

<link href="../topeka-elements/theme.html" rel="import">
<link href="../topeka-elements/topeka-resources.html" rel="import">
<link href="../topeka-elements/topeka-app.html" rel="import">

<polymer-element relative="" noscript="" extends="topeka-quiz-base" name="topeka-quiz-four-quarter">

  <template>
    <style>    
      #design_host {
        display: block;
        box-sizing: border-box;
        position: absolute ! important;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      .item {
        width: 50%;
        height: 50%;
        box-sizing: border-box;
      }
      .item:nth-of-type(2n+1) {
        border-right: 1px solid rgb(157, 157, 157);
      }
      .item:nth-of-type(1), .item:nth-of-type(2) {
        border-bottom: 1px solid rgb(157, 157, 157);
      }
      paper-button {
        border-radius: 0px;
        transition: background-color 1s ease 0s, color 0.5s ease 0s;
        text-transform: capitalize;
      }
      .item.core-selected > paper-button {
        background-color: rgb(0, 188, 212);
        color: rgb(241, 241, 241);
      }
      paper-button {
        position: relative;
      }
      #topeka_app {
        width: 300px;
        height: 300px;
        min-height: 450px;
        left: 670px;
        top: 250px;
        position: absolute;
      }
    </style>
    <div id="choices" layout wrap horizontal fit>
      <template repeat="{{quiz.options}}"></template>
    </div>
    <core-selector selected target="[object Object]"></core-selector>
    <topeka-app id="topeka_app"></topeka-app>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>