designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">

<polymer-element name="schedule-item">

  <template>
    <style>    
      :host {
        display: block;
        position: relative;
        padding: 12px 6px;
        width: 100%;
        font-size: 1.2rem;
        font-weight: 300;
        background-color: white;
      }
      .card-header {
        margin-bottom: 10px;
      }
      polyfill-next-selector {
        content: '.card-header h2';
      }
      .card-header ::content h2 {
        margin: 0px;
        font-size: 1.8rem;
        font-weight: 300;
      }
      .card-header ::content img {
        width: 70px;
        border-radius: 50%;
        margin: 10px;
      }
      #div1 {
        left: 340px;
        top: 210px;
        position: absolute;
      }
      #edit {
        left: 940px;
        top: 10px;
        position: absolute;
      }
      #delete {
        left: 990px;
        top: 10px;
        position: absolute;
      }
    </style>
    <div id="div" class="card-header" layout horizontal center>
      <content select="img">Picture</content>
      <content select="h2">No Time Has Been Specified</content>
    </div>
    <content id="content">Here is the message that will be sent.</content>
    <div id="div1" layout horizontal>
			</div>
    <core-icon-button id="delete" theme="core-light-theme" on-tap="{{ deleteTapped }}" center wrap twelve flex center-justified>Delete</core-icon-button>
    <core-icon-button id="edit" theme="core-light-theme" on-tap="{{ editTapped }}" center wrap twelve flex center-justified>Edit</core-icon-button>
  </template>

  <script>

    Polymer({
      deleteTapped: function (event, detail, sender) {
        this.fire('delete-tap');
      },
      editTapped: function (event, detail, sender) {
        this.fire('edit-tap');
      }
    });

  </script>

</polymer-element>