Skip to content

Instantly share code, notes, and snippets.

@mikomatic

mikomatic/designer.html

Created July 3, 2014 10:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikomatic/29a6bcad18f68b6c27ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikomatic/29a6bcad18f68b6c27ee to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mikomatic revised this gist Jul 3, 2014. 1 changed file with 19 additions and 23 deletions.
    42 changes: 19 additions & 23 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,36 +1,32 @@
    <link rel="import" href="../ace-element/ace-element.html">
    <link rel="import" href="../notification-elements/notification-alert.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">
    <link rel="import" href="../paper-button/paper-button.html">

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

    <template>
    <style>
    :host {
    #notification_alert {
    left: 580px;
    top: 360px;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
    #ace_element {
    width: 400px;
    height: 300px;
    left: 780px;
    top: 460px;
    #paper_tab {
    width: 120px;
    height: 40px;
    left: 570px;
    top: 200px;
    position: absolute;
    }
    #paper_button {
    left: 530px;
    top: 440px;
    position: absolute;
    }
    </style>
    <ace-element value="
    Polymer('my-element', {});
    " id="ace_element">
    <polymer-element name="my-element">
    <template></template>
    <script>
    Polymer('my-element', {});
    </script>
    </polymer-element>
    </ace-element>
    <notification-alert message="Hi there!" icon="icon.png" name="notification" id="notification_alert"></notification-alert>
    <paper-tab id="paper_tab">TAB</paper-tab>
    <paper-button label="Paper Button" id="paper_button"></paper-button>
    </template>

    <script>
  2. mikomatic revised this gist Jul 3, 2014. 1 changed file with 19 additions and 15 deletions.
    34 changes: 19 additions & 15 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,4 @@
    <link rel="import" href="../core-field/core-field.html">
    <link rel="import" href="../core-icon/core-icon.html">
    <link rel="import" href="../core-input/core-input.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../ace-element/ace-element.html">

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

    @@ -13,20 +10,27 @@
    height: 100%;
    box-sizing: border-box;
    }
    #core_field {
    left: 700px;
    top: 360px;
    #ace_element {
    width: 400px;
    height: 300px;
    left: 780px;
    top: 460px;
    position: absolute;
    }
    #core_icon {
    height: 24px;
    width: 24px;
    }
    </style>
    <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
    <core-icon icon="search" id="core_icon"></core-icon>
    <core-input placeholder="text input" id="core_input" flex></core-input>
    </core-field>
    <ace-element value="
    Polymer('my-element', {});
    " id="ace_element">
    <polymer-element name="my-element">
    <template></template>
    <script>
    Polymer('my-element', {});
    </script>
    </polymer-element>
    </ace-element>
    </template>

    <script>
  3. mikomatic created this gist Jul 3, 2014.
    40 changes: 40 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <link rel="import" href="../core-field/core-field.html">
    <link rel="import" href="../core-icon/core-icon.html">
    <link rel="import" href="../core-input/core-input.html">
    <link rel="import" href="../core-icons/core-icons.html">

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

    <template>
    <style>
    :host {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
    #core_field {
    left: 700px;
    top: 360px;
    position: absolute;
    }
    #core_icon {
    height: 24px;
    width: 24px;
    }
    </style>
    <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
    <core-icon icon="search" id="core_icon"></core-icon>
    <core-input placeholder="text input" id="core_input" flex></core-input>
    </core-field>
    </template>

    <script>

    Polymer('my-element', {

    });

    </script>

    </polymer-element>