Skip to content

Instantly share code, notes, and snippets.

@mabeledo

mabeledo/designer.html

Last active August 29, 2015 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mabeledo/137aec007b422c4aaaaf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mabeledo/137aec007b422c4aaaaf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mabeledo revised this gist Apr 9, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -45,12 +45,12 @@
    background-color: rgb(238, 238, 238);
    }
    #section1 {
    opacity: 0;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    }
    #chart_js {
    width: 300px;
    height: 200px;
    width: 500px;
    height: 100px;
    }
    </style>
    <core-scroll-header-panel headermargin="128" condenses keepcondensedheader headerheight="192" id="core_scroll_header_panel">
    @@ -61,7 +61,7 @@
    <div id="div1" class="bottom indent">Hola Manuel!</div>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section1" layout horizontal center center-justified active>
    <chart-js id="chart_js"></chart-js>
    <chart-js id="chart_js">A Chart</chart-js>
    </section>
    <section id="section2">
    </section>
  2. mabeledo revised this gist Apr 9, 2015. 1 changed file with 45 additions and 35 deletions.
    80 changes: 45 additions & 35 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,13 @@
    <link rel="import" href="../core-drawer-panel/core-drawer-panel.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-scroll-header-panel/core-scroll-header-panel.html">
    <link rel="import" href="../core-animated-pages/core-animated-pages.html">
    <link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
    <link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
    <link rel="import" href="../core-animated-pages/transitions/slide-down.html">
    <link rel="import" href="../core-animated-pages/transitions/slide-up.html">
    <link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
    <link rel="import" href="../chart-js/chart-js.html">

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

    @@ -13,26 +19,10 @@
    height: 100%;
    box-sizing: border-box;
    }
    #core_drawer_panel {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }
    #section {
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    background-color: rgb(250, 250, 250);
    }
    #section1 {
    height: 100%;
    box-sizing: border-box;
    background-color: rgb(221, 221, 221);
    }
    #core_scroll_header_panel {
    width: 380px;
    height: 460px;
    left: 4px;
    width: 1010px;
    height: 620px;
    left: 0px;
    top: 0px;
    position: absolute;
    }
    @@ -41,26 +31,46 @@
    fill: rgb(241, 241, 241);
    background-color: rgb(66, 133, 244);
    }
    #section2 {
    #section {
    height: 5000px;
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
    }
    #core_animated_pages {
    width: 500px;
    height: 100px;
    overflow: hidden;
    left: 258px;
    top: 30px;
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #section1 {
    opacity: 0;
    background-color: rgb(255, 255, 255);
    }
    #chart_js {
    width: 300px;
    height: 200px;
    }
    </style>
    <core-drawer-panel transition id="core_drawer_panel" touch-action>
    <section id="section" drawer></section>
    <section id="section1" main>
    <core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel">
    <core-toolbar id="core_toolbar" class="tall">
    <core-icon-button icon="arrow-back" id="core_icon_button"></core-icon-button>
    <div id="div" flex></div>
    <core-icon-button icon="search" id="core_icon_button1"></core-icon-button>
    <core-icon-button icon="more-vert" id="core_icon_button2"></core-icon-button>
    <div id="div1" class="bottom indent">Title</div>
    </core-toolbar>
    <section id="section2" content></section>
    </core-scroll-header-panel>
    <core-scroll-header-panel headermargin="128" condenses keepcondensedheader headerheight="192" id="core_scroll_header_panel">
    <core-toolbar id="core_toolbar" class="tall">
    <core-icon-button icon="arrow-back" id="core_icon_button"></core-icon-button>
    <div id="div" flex></div>
    <core-icon-button icon="more-vert" id="core_icon_button2"></core-icon-button>
    <div id="div1" class="bottom indent">Hola Manuel!</div>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section1" layout horizontal center center-justified active>
    <chart-js id="chart_js"></chart-js>
    </section>
    <section id="section2">
    </section>
    <section id="section3">
    </section>
    </core-drawer-panel>
    </core-animated-pages>
    </core-toolbar>
    <section id="section" content></section>
    </core-scroll-header-panel>
    </template>

    <script>
  3. mabeledo created this gist Apr 9, 2015.
    74 changes: 74 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    <link rel="import" href="../core-drawer-panel/core-drawer-panel.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-scroll-header-panel/core-scroll-header-panel.html">

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

    <template>
    <style>
    :host {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
    #core_drawer_panel {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }
    #section {
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    background-color: rgb(250, 250, 250);
    }
    #section1 {
    height: 100%;
    box-sizing: border-box;
    background-color: rgb(221, 221, 221);
    }
    #core_scroll_header_panel {
    width: 380px;
    height: 460px;
    left: 4px;
    top: 0px;
    position: absolute;
    }
    #core_toolbar {
    color: rgb(241, 241, 241);
    fill: rgb(241, 241, 241);
    background-color: rgb(66, 133, 244);
    }
    #section2 {
    height: 5000px;
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
    }
    </style>
    <core-drawer-panel transition id="core_drawer_panel" touch-action>
    <section id="section" drawer></section>
    <section id="section1" main>
    <core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel">
    <core-toolbar id="core_toolbar" class="tall">
    <core-icon-button icon="arrow-back" id="core_icon_button"></core-icon-button>
    <div id="div" flex></div>
    <core-icon-button icon="search" id="core_icon_button1"></core-icon-button>
    <core-icon-button icon="more-vert" id="core_icon_button2"></core-icon-button>
    <div id="div1" class="bottom indent">Title</div>
    </core-toolbar>
    <section id="section2" content></section>
    </core-scroll-header-panel>
    </section>
    </core-drawer-panel>
    </template>

    <script>

    Polymer({

    });

    </script>

    </polymer-element>