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-tooltip/core-tooltip.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">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #section {
        left: 0px;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(228, 255, 255);
      }
      #core_toolbar {
        right: 0px;
        left: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        top: 0px;
        position: absolute;
        background-color: rgb(79, 125, 201);
      }
      #div1 {
        left: 230px;
        top: 240px;
        position: absolute;
      }
      core-tooltip .fab {
        background-color: rgb(84, 199, 204);
      }
      #paper_fab {
        overflow: visible;
        left: 208px;
        top: 10px;
        position: absolute;
      }
      #paper_fab2 {
        overflow: visible;
        left: 258px;
        top: 10px;
        position: absolute;
      }
      #paper_fab3 {
        overflow: visible;
        left: 308px;
        top: 10px;
        position: absolute;
      }
      #paper_fab4 {
        overflow: visible;
        left: 358px;
        top: 10px;
        position: absolute;
      }
      #paper_fab5 {
        overflow: visible;
        left: 408px;
        top: 10px;
        position: absolute;
      }
      #paper_fab_close {
        overflow: visible;
        right: 15px;
        top: 10px;
        position: absolute;
      }
      core-tooltip.fancy::shadow .core-tooltip {
        opacity: 0;
        transition: all 400ms cubic-bezier(0, 1.92, 0.99, 1.07);
        -webkit-transition: all 400ms cubic-bezier(0, 1.92, 0.99, 1.07);
        -webkit-transform: translate3d(0px, -10px, 0px);
        transform: translate3d(0px, -10px, 0px);
      }
      core-tooltip.fancy:hover::shadow .core-tooltip, core-tooltip.fancy:focus::shadow .core-tooltip {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
      }
      #core_tooltip {
        left: 410px;
        top: 330px;
        position: absolute;
      }
      #paper_fab1 {
        overflow: visible;
      }
      #paper_fab6 {
        overflow: visible;
      }
      #paper_fab7 {
        overflow: visible;
      }
      #paper_fab8 {
        overflow: visible;
      }
      #paper_fab9 {
        overflow: visible;
      }
      #paper_fab10 {
        overflow: visible;
      }
    </style>
    <section id="section">
      <core-toolbar id="core_toolbar">
        <div id="div" flex>SwiftStuff</div>
        <core-tooltip label="New" id="paper_fab" class="fancy">
          <paper-fab icon="add" mini id="paper_fab1" class="fab"></paper-fab>
        </core-tooltip>
        <core-tooltip label="Open" id="paper_fab2" class="fancy">
          <paper-fab icon="folder" mini id="paper_fab9" class="fab"></paper-fab>
        </core-tooltip>
        <core-tooltip label="Import" id="paper_fab3" class="fancy">
          <paper-fab icon="input" mini id="paper_fab6" class="fab"></paper-fab>
        </core-tooltip>
        <core-tooltip label="Export" id="paper_fab4" class="fancy">
          <paper-fab icon="open-in-new" mini id="paper_fab7" class="fab"></paper-fab>
        </core-tooltip>
        <core-tooltip label="Help" id="paper_fab5" class="fancy">
          <paper-fab icon="help" mini id="paper_fab10" class="fab"></paper-fab>
        </core-tooltip>
        <core-tooltip label="Exit" id="paper_fab_close" class="fancy">
          <paper-fab icon="close" mini id="paper_fab8"></paper-fab>
        </core-tooltip>
      </core-toolbar>
      <div id="div1" layout horizontal>
        <paper-dialog id="paper_dialog"></paper-dialog>
      </div>
    </section>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>

run.html

<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
  <title>Polymer Designer</title>
  <!-- normalize url to be same as preview -->
  <script src="https://www.polymer-project.org/tools/designer/components/platform/platform.js"></script>
  <script>
    if (window.top.designWindowLoaded) {
      top.designWindowLoaded();
    }
  </script>

  <link rel="import" href="http://polymer.stephendaves.com:83/tools/designer/components/paper-dialog/paper-dialog.html">

  <link rel="import" href="/sdaves/cfab504f9943165e2ab5/raw">

  <style>

    body {
      font-size: 12px;
      font-family: sans-serif;
      overflow: hidden;
    }

    design-frame {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

  </style>

</head>
<body unresolved>

  <my-element></my-element>

</body>
</html>