designer

designer.html

<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-toast/paper-toast.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-family: 'Roboto Condensed', sans-serif;
        background-color: black;
      }
      #core_card {
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        position: relative;
        width: 90%;
        height: 80%;
        margin: 5%;
        background-color: rgb(59, 59, 59);
      }
      #paper_button {
        position: absolute;
        width: 80%;
        left: 10%;
        height: 10%;
        top: 5%;
        background-color: rgb(118, 118, 118);
      }
      #paper_toast {
        width: 90%;
        position: absolute;
        height: 40%;
        left: 5%;
        top: 40%;
        font-size: 40px;
      }
      #iframe {
        position: absolute;
        width: 98%;
        left: 0px;
        top: 20%;
        height: 75%;
        margin: 1%;
      }
    </style>
    <core-card id="core_card" horizontal layout center-justified>
      <paper-button raised toggle id="paper_button" horizontal layout center-justified center>click me</paper-button>
      <iframe id="iframe" width="420" height="315" src="https://www.youtube.com/embed/MUL68ZeclcA?theme=light" frameborder="0" allowfullscreen></iframe>
      <paper-toast text="Welcome to xectron.com !!" duration="5000" opened="{{ $.paper_button.active }}" id="paper_toast" class="core-transition-bottom core-transition" touch-action="none" horizontal layout center-justified center></paper-toast>
    </core-card>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>