Skip to content

Instantly share code, notes, and snippets.

@ethancoder151

ethancoder151/designer.html

Last active August 29, 2015 14:06
Show Gist options
  • Save ethancoder151/11fc1189e5f1c37a30c5 to your computer and use it in GitHub Desktop.
Save ethancoder151/11fc1189e5f1c37a30c5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 29 additions and 18 deletions.
    47 changes: 29 additions & 18 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    <link rel="import" href="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.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">

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

    @@ -11,28 +15,35 @@
    height: 100%;
    box-sizing: border-box;
    }
    #section {
    width: 420px;
    height: 630px;
    border: 5px solid rgb(204, 204, 204);
    left: 250px;
    #core_animated_pages {
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #paper_tabs {
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    #core_card {
    width: 300px;
    height: 300px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    background-color: rgb(255, 255, 255);
    }
    </style>
    <section id="section" layout vertical>
    <paper-tabs noink nobar selected="0" selectedindex="0" id="paper_tabs">
    <paper-tab id="paper_tab" active>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1">ITEM TWO</paper-tab>
    </paper-tabs>
    <section id="section1" flex relative>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section" layout horizontal center center-justified active>
    <core-card id="core_card" layout vertical></core-card>
    </section>
    <section id="section1">
    </section>
    <section id="section2">
    </section>
    </section>
    </core-animated-pages>
    </template>

    <script>
  2. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 15 additions and 41 deletions.
    56 changes: 15 additions & 41 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,64 +1,38 @@
    <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-header-panel/core-header-panel.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
    <link rel="import" href="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    <template>
    <style>
    body {
    font-family: sans-serif;
    }
    core-header-panel {
    height: 100vh;
    width: 100vw;
    background: white;
    }
    core-toolbar {
    background-color: rgb(3, 169, 244);
    }
    p {
    margin: 20px;
    padding: 80px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(238, 238, 238);
    :host {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
    #core_header_panel {
    left: 0px;
    #section {
    width: 420px;
    height: 630px;
    border: 5px solid rgb(204, 204, 204);
    left: 250px;
    top: 0px;
    position: absolute;
    }
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    left: 200px;
    top: 70px;
    position: absolute;
    background-color: rgb(0, 188, 212);
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    <paper-icon-button icon="arrow-back" id="navicon"></paper-icon-button>
    <span id="span" flex>Lean Tutor</span>
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <paper-tabs selected="0" selectedindex="0" id="paper_tabs">
    <section id="section" layout vertical>
    <paper-tabs noink nobar selected="0" selectedindex="0" id="paper_tabs">
    <paper-tab id="paper_tab" active>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1">ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2">ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3">ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4">ITEM FIVE</paper-tab>
    </paper-tabs>
    </core-header-panel>
    <section id="section1" flex relative>
    </section>
    </section>
    </template>

    <script>
  3. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 18 additions and 1 deletion.
    19 changes: 18 additions & 1 deletion designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,8 @@
    <link rel="import" href="../core-header-panel/core-header-panel.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
    <link rel="import" href="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -33,14 +35,29 @@
    top: 0px;
    position: absolute;
    }
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    left: 200px;
    top: 70px;
    position: absolute;
    background-color: rgb(0, 188, 212);
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    <paper-icon-button icon="arrow-back" id="navicon"></paper-icon-button>
    <span id="span" flex>Lean Tutor</span>
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <p id="p">Sample content.</p>
    <paper-tabs selected="0" selectedindex="0" id="paper_tabs">
    <paper-tab id="paper_tab" active>ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1">ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2">ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3">ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4">ITEM FIVE</paper-tab>
    </paper-tabs>
    </core-header-panel>
    </template>

  4. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 1 addition and 39 deletions.
    40 changes: 1 addition & 39 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,12 +3,6 @@
    <link rel="import" href="../core-header-panel/core-header-panel.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../paper-icon-button/paper-icon-button.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">

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

    @@ -39,46 +33,14 @@
    top: 0px;
    position: absolute;
    }
    #core_animated_pages {
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #core_header_panel1 {
    width: 300px;
    height: 400px;
    left: 1150px;
    top: 420px;
    }
    #core_card {
    position: absolute;
    width: 470px;
    height: 60px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    left: 250px;
    top: 66px;
    background-color: rgb(255, 255, 255);
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    <paper-icon-button icon="arrow-back" id="navicon"></paper-icon-button>
    <span id="span" flex>Lean Tutor</span>
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section2" active>
    <core-card id="core_card" layout vertical></core-card>
    </section>
    </core-animated-pages>
    <p id="p">Sample content.</p>
    </core-header-panel>
    </template>

  5. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 18 additions and 7 deletions.
    25 changes: 18 additions & 7 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,6 @@
    <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="../paper-tabs/paper-tab.html">

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

    @@ -49,12 +48,24 @@
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #paper_tab {
    width: 120px;
    height: 40px;
    left: 240px;
    top: 86px;
    #core_header_panel1 {
    width: 300px;
    height: 400px;
    left: 1150px;
    top: 420px;
    }
    #core_card {
    position: absolute;
    width: 470px;
    height: 60px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
    left: 250px;
    top: 66px;
    background-color: rgb(255, 255, 255);
    }
    </style>
    <core-header-panel id="core_header_panel">
    @@ -65,7 +76,7 @@
    </core-toolbar>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section2" active>
    <paper-tab id="paper_tab">TAB</paper-tab>
    <core-card id="core_card" layout vertical></core-card>
    </section>
    </core-animated-pages>
    </core-header-panel>
  6. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@
    <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="../paper-tabs/paper-tab.html">

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

    @@ -48,6 +49,13 @@
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #paper_tab {
    width: 120px;
    height: 40px;
    left: 240px;
    top: 86px;
    position: absolute;
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    @@ -57,7 +65,8 @@
    </core-toolbar>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section2" active>
    </section>
    <paper-tab id="paper_tab">TAB</paper-tab>
    </section>
    </core-animated-pages>
    </core-header-panel>
    </template>
  7. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 1 addition and 25 deletions.
    26 changes: 1 addition & 25 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,8 +9,6 @@
    <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="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -50,17 +48,6 @@
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    }
    #section {
    left: 220px;
    top: 26px;
    position: absolute;
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    @@ -69,18 +56,7 @@
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section1" active>
    <section id="section" layout horizontal center around-justified>
    <paper-tabs selected="3" selectedindex="3" id="paper_tabs">
    <paper-tab id="paper_tab">ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1">ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2">ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3" active>ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4">ITEM FIVE</paper-tab>
    </paper-tabs>
    </section>
    </section>
    <section id="section2">
    <section id="section2" active>
    </section>
    </core-animated-pages>
    </core-header-panel>
  8. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 44 additions and 2 deletions.
    46 changes: 44 additions & 2 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,14 @@
    <link rel="import" href="../core-header-panel/core-header-panel.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../paper-icon-button/paper-icon-button.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="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -33,14 +41,48 @@
    top: 0px;
    position: absolute;
    }
    #core_animated_pages {
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgb(238, 238, 238);
    }
    #paper_tabs {
    width: 480px;
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    }
    #section {
    left: 220px;
    top: 26px;
    position: absolute;
    }
    </style>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    <paper-icon-button icon="arrow-back" id="navicon"></paper-icon-button>
    <span id="span" flex>Title</span>
    <span id="span" flex>Lean Tutor</span>
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <p id="p">Sample content.</p>
    <core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section1" active>
    <section id="section" layout horizontal center around-justified>
    <paper-tabs selected="3" selectedindex="3" id="paper_tabs">
    <paper-tab id="paper_tab">ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1">ITEM TWO</paper-tab>
    <paper-tab id="paper_tab2">ITEM THREE</paper-tab>
    <paper-tab id="paper_tab3" active>ITEM FOUR</paper-tab>
    <paper-tab id="paper_tab4">ITEM FIVE</paper-tab>
    </paper-tabs>
    </section>
    </section>
    <section id="section2">
    </section>
    </core-animated-pages>
    </core-header-panel>
    </template>

  9. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 28 additions and 21 deletions.
    49 changes: 28 additions & 21 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,39 +1,46 @@
    <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-header-panel/core-header-panel.html">
    <link rel="import" href="../core-icons/core-icons.html">
    <link rel="import" href="../paper-icon-button/paper-icon-button.html">

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

    <template>
    <style>
    :host {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    body {
    font-family: sans-serif;
    }
    core-header-panel {
    height: 100vh;
    width: 100vw;
    background: white;
    }
    core-toolbar {
    background-color: rgb(3, 169, 244);
    }
    p {
    margin: 20px;
    padding: 80px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(238, 238, 238);
    }
    #core_header_panel {
    width: 1020px;
    height: 80px;
    left: 0px;
    top: -10px;
    position: absolute;
    }
    #core_toolbar {
    color: rgb(255, 255, 255);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(79, 125, 201);
    position: absolute;
    }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
    <core-toolbar id="core_toolbar">
    <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
    <div id="div">Header</div>
    <core-header-panel id="core_header_panel">
    <core-toolbar id="mainheader">
    <paper-icon-button icon="arrow-back" id="navicon"></paper-icon-button>
    <span id="span" flex>Title</span>
    <paper-icon-button icon="search" id="searchbutton"></paper-icon-button>
    </core-toolbar>
    <p id="p">Sample content.</p>
    </core-header-panel>
    </template>

  10. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 20 additions and 18 deletions.
    38 changes: 20 additions & 18 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    <link rel="import" href="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.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-header-panel/core-header-panel.html">

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

    @@ -11,28 +12,29 @@
    height: 100%;
    box-sizing: border-box;
    }
    #section {
    width: 100%;
    height: 100%;
    border: 5px solid rgb(204, 204, 204);
    #core_header_panel {
    width: 1020px;
    height: 80px;
    left: 0px;
    top: 0px;
    top: -10px;
    position: absolute;
    }
    #paper_tabs {
    #core_toolbar {
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(79, 125, 201);
    }
    </style>
    <section id="section" layout vertical>
    <paper-tabs noink nobar selected="1" selectedindex="1" id="paper_tabs">
    <paper-tab id="paper_tab">ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" active>ITEM TWO</paper-tab>
    </paper-tabs>
    <section id="section1" flex relative>
    </section>
    </section>
    <core-header-panel mode="standard" id="core_header_panel">
    <core-toolbar id="core_toolbar">
    <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
    <div id="div">Header</div>
    </core-toolbar>
    </core-header-panel>
    </template>

    <script>
  11. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 19 additions and 25 deletions.
    44 changes: 19 additions & 25 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    <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="../paper-tabs/paper-tabs.html">
    <link rel="import" href="../paper-tabs/paper-tab.html">

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

    @@ -12,33 +11,28 @@
    height: 100%;
    box-sizing: border-box;
    }
    #core_scroll_header_panel {
    width: 380px;
    height: 460px;
    left: 210px;
    #section {
    width: 100%;
    height: 100%;
    border: 5px solid rgb(204, 204, 204);
    left: 0px;
    top: 0px;
    position: absolute;
    }
    #core_toolbar {
    color: rgb(241, 241, 241);
    fill: rgb(241, 241, 241);
    background-color: rgb(66, 133, 244);
    }
    #section {
    height: 5000px;
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
    #paper_tabs {
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
    background-color: rgb(0, 188, 212);
    }
    </style>
    <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="section" content></section>
    </core-scroll-header-panel>
    <section id="section" layout vertical>
    <paper-tabs noink nobar selected="1" selectedindex="1" id="paper_tabs">
    <paper-tab id="paper_tab">ITEM ONE</paper-tab>
    <paper-tab id="paper_tab1" active>ITEM TWO</paper-tab>
    </paper-tabs>
    <section id="section1" flex relative>
    </section>
    </section>
    </template>

    <script>
  12. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 22 additions and 27 deletions.
    49 changes: 22 additions & 27 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,6 @@
    <link rel="import" href="../core-scaffold/core-scaffold.html">
    <link rel="import" href="../core-header-panel/core-header-panel.html">
    <link rel="import" href="../core-menu/core-menu.html">
    <link rel="import" href="../core-item/core-item.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-menu/core-submenu.html">
    <link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html">

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

    @@ -16,34 +12,33 @@
    height: 100%;
    box-sizing: border-box;
    }
    #core_scaffold {
    position: absolute;
    #core_scroll_header_panel {
    width: 380px;
    height: 460px;
    left: 210px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }
    #core_header_panel {
    background-color: rgb(255, 255, 255);
    position: absolute;
    }
    #core_toolbar {
    color: rgb(255, 255, 255);
    background-color: rgb(79, 125, 201);
    color: rgb(241, 241, 241);
    fill: rgb(241, 241, 241);
    background-color: rgb(66, 133, 244);
    }
    #core_menu {
    font-size: 16px;
    #section {
    height: 5000px;
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
    }
    </style>
    <core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
    <core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
    <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    </core-scaffold>
    <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="section" content></section>
    </core-scroll-header-panel>
    </template>

    <script>
  13. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 32 additions and 8 deletions.
    40 changes: 32 additions & 8 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,10 @@
    <link rel="import" href="../topeka-elements/topeka-resources.html">
    <link rel="import" href="../topeka-elements/topeka-profile.html">
    <link rel="import" href="../core-scaffold/core-scaffold.html">
    <link rel="import" href="../core-header-panel/core-header-panel.html">
    <link rel="import" href="../core-menu/core-menu.html">
    <link rel="import" href="../core-item/core-item.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-menu/core-submenu.html">

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

    @@ -11,15 +16,34 @@
    height: 100%;
    box-sizing: border-box;
    }
    #topeka_profile {
    width: 380px;
    height: 540px;
    left: 340px;
    top: 0px;
    #core_scaffold {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }
    #core_header_panel {
    background-color: rgb(255, 255, 255);
    }
    #core_toolbar {
    color: rgb(255, 255, 255);
    background-color: rgb(79, 125, 201);
    }
    #core_menu {
    font-size: 16px;
    }
    </style>
    <topeka-profile id="topeka_profile" center layout vertical></topeka-profile>
    <core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
    <core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
    <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div>
    </core-scaffold>
    </template>

    <script>
  14. ethancoder151 revised this gist Sep 25, 2014. No changes.
  15. ethancoder151 revised this gist Sep 25, 2014. No changes.
  16. ethancoder151 revised this gist Sep 25, 2014. 1 changed file with 7 additions and 172 deletions.
    179 changes: 7 additions & 172 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,5 @@
    <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">
    <link rel="import" href="../topeka-elements/category-images.html">
    <link rel="import" href="../core-icon/core-icon.html">
    <link rel="import" href="../topeka-elements/topeka-resources.html">
    <link rel="import" href="../topeka-elements/topeka-profile.html">

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

    @@ -14,177 +11,15 @@
    height: 100%;
    box-sizing: border-box;
    }
    #section {
    box-sizing: border-box;
    width: 420px;
    height: 582px;
    left: 130px;
    #topeka_profile {
    width: 380px;
    height: 540px;
    left: 340px;
    top: 0px;
    position: absolute;
    }
    #section1 {
    background-color: rgb(255, 255, 141);
    }
    #core_icon {
    height: 256px;
    width: 256px;
    z-index: 100;
    }
    #div {
    box-sizing: border-box;
    position: relative;
    height: 80px;
    padding: 24px;
    color: rgb(255, 255, 255);
    font-size: 32px;
    background-color: rgb(255, 235, 59);
    }
    #div2 {
    position: absolute;
    color: rgb(255, 255, 255);
    bottom: 50px;
    right: 24px;
    }
    #paper_fab {
    background-color: rgb(255, 64, 129);
    }
    #section2 {
    box-sizing: border-box;
    width: 420px;
    height: 582px;
    left: 610px;
    top: 20px;
    position: absolute;
    }
    #toolbar {
    box-sizing: border-box;
    height: 15%;
    position: relative;
    color: rgb(255, 255, 255);
    font-size: 48px;
    background-color: rgb(0, 187, 211);
    }
    #tiles-container {
    padding-left: 3px;
    height: 85%;
    }
    #tile-profile {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(204, 204, 204);
    }
    #core_icon1 {
    height: 128px;
    width: 128px;
    }
    #div3 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(170, 170, 170);
    }
    #tile-general {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    }
    #section4 {
    background-color: rgb(255, 255, 141);
    }
    #core_icon2 {
    height: 128px;
    width: 128px;
    }
    #div4 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 235, 59);
    }
    #div5 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(185, 246, 202);
    }
    #core_icon3 {
    height: 128px;
    width: 128px;
    }
    #div6 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 157, 88);
    }
    #div7 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(255, 138, 128);
    }
    #core_icon4 {
    height: 128px;
    width: 128px;
    }
    #div8 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(219, 68, 55);
    }
    #div9 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(130, 177, 255);
    }
    #core_icon5 {
    height: 128px;
    width: 128px;
    }
    #div10 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(66, 133, 244);
    }
    #div11 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(179, 136, 255);
    }
    #core_icon6 {
    height: 128px;
    width: 128px;
    }
    #div12 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(126, 87, 194);
    }
    </style>
    <section id="section" layout vertical>
    <div id="div" class="bottom" hero hero-id="bottom">
    <span id="span">General Knowledge</span>
    </div>
    <div id="div1" hero class="dummy"></div>
    <div id="div2" class="fab fab-0">
    <paper-fab icon="av:play-arrow" id="paper_fab" cross-fade-delayed></paper-fab>
    </div>
    <section id="section1" class="top" flex layout horizontal center center-justified hero hero-id="top">
    <core-icon icon="category-images:knowledge" id="core_icon" cross-fade-delayed designmeta="topeka-image"></core-icon>
    </section>
    </section>
    <topeka-profile id="topeka_profile" center layout vertical></topeka-profile>
    </template>

    <script>
  17. ethancoder151 created this gist Sep 25, 2014.
    198 changes: 198 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,198 @@
    <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">
    <link rel="import" href="../topeka-elements/category-images.html">
    <link rel="import" href="../core-icon/core-icon.html">

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

    <template>
    <style>
    :host {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
    #section {
    box-sizing: border-box;
    width: 420px;
    height: 582px;
    left: 130px;
    top: 0px;
    position: absolute;
    }
    #section1 {
    background-color: rgb(255, 255, 141);
    }
    #core_icon {
    height: 256px;
    width: 256px;
    z-index: 100;
    }
    #div {
    box-sizing: border-box;
    position: relative;
    height: 80px;
    padding: 24px;
    color: rgb(255, 255, 255);
    font-size: 32px;
    background-color: rgb(255, 235, 59);
    }
    #div2 {
    position: absolute;
    color: rgb(255, 255, 255);
    bottom: 50px;
    right: 24px;
    }
    #paper_fab {
    background-color: rgb(255, 64, 129);
    }
    #section2 {
    box-sizing: border-box;
    width: 420px;
    height: 582px;
    left: 610px;
    top: 20px;
    position: absolute;
    }
    #toolbar {
    box-sizing: border-box;
    height: 15%;
    position: relative;
    color: rgb(255, 255, 255);
    font-size: 48px;
    background-color: rgb(0, 187, 211);
    }
    #tiles-container {
    padding-left: 3px;
    height: 85%;
    }
    #tile-profile {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(204, 204, 204);
    }
    #core_icon1 {
    height: 128px;
    width: 128px;
    }
    #div3 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(170, 170, 170);
    }
    #tile-general {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    }
    #section4 {
    background-color: rgb(255, 255, 141);
    }
    #core_icon2 {
    height: 128px;
    width: 128px;
    }
    #div4 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 235, 59);
    }
    #div5 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(185, 246, 202);
    }
    #core_icon3 {
    height: 128px;
    width: 128px;
    }
    #div6 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 157, 88);
    }
    #div7 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(255, 138, 128);
    }
    #core_icon4 {
    height: 128px;
    width: 128px;
    }
    #div8 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(219, 68, 55);
    }
    #div9 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(130, 177, 255);
    }
    #core_icon5 {
    height: 128px;
    width: 128px;
    }
    #div10 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(66, 133, 244);
    }
    #div11 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(179, 136, 255);
    }
    #core_icon6 {
    height: 128px;
    width: 128px;
    }
    #div12 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(126, 87, 194);
    }
    </style>
    <section id="section" layout vertical>
    <div id="div" class="bottom" hero hero-id="bottom">
    <span id="span">General Knowledge</span>
    </div>
    <div id="div1" hero class="dummy"></div>
    <div id="div2" class="fab fab-0">
    <paper-fab icon="av:play-arrow" id="paper_fab" cross-fade-delayed></paper-fab>
    </div>
    <section id="section1" class="top" flex layout horizontal center center-justified hero hero-id="top">
    <core-icon icon="category-images:knowledge" id="core_icon" cross-fade-delayed designmeta="topeka-image"></core-icon>
    </section>
    </section>
    </template>

    <script>

    Polymer({

    });

    </script>

    </polymer-element>