Skip to content

Instantly share code, notes, and snippets.

@vincentsimard

vincentsimard/designer.html

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

  • Select an option

    Learn more about clone URLs
  • Save vincentsimard/f5cdd9dc48a060df6987 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vincentsimard/f5cdd9dc48a060df6987 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vincentsimard revised this gist Sep 2, 2014. No changes.
  2. vincentsimard revised this gist Sep 2, 2014. No changes.
  3. vincentsimard revised this gist Sep 2, 2014. 1 changed file with 184 additions and 17 deletions.
    201 changes: 184 additions & 17 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,8 @@
    <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-icons.html">
    <link rel="import" href="../core-icon/core-icon.html">

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

    @@ -59,35 +61,200 @@
    overflow: hidden;
    background-color: rgb(238, 238, 238);
    }
    #core_card1 {
    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);
    #section3 {
    box-sizing: border-box;
    width: 420px;
    height: 582px;
    }
    #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_icon {
    height: 128px;
    width: 128px;
    }
    #div1 {
    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;
    }
    #section6 {
    background-color: rgb(255, 255, 141);
    }
    #core_icon1 {
    height: 128px;
    width: 128px;
    }
    #div2 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 235, 59);
    }
    #div3 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(185, 246, 202);
    }
    #core_icon2 {
    height: 128px;
    width: 128px;
    }
    #div4 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 157, 88);
    }
    #div5 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(255, 138, 128);
    }
    #core_icon3 {
    height: 128px;
    width: 128px;
    }
    #div6 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(219, 68, 55);
    }
    #div7 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(130, 177, 255);
    }
    #core_icon4 {
    height: 128px;
    width: 128px;
    }
    #div8 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(66, 133, 244);
    }
    #div9 {
    box-sizing: border-box;
    float: left;
    height: 30%;
    width: 48%;
    margin: 3px;
    background-color: rgb(179, 136, 255);
    }
    #core_icon5 {
    height: 128px;
    width: 128px;
    }
    #div10 {
    padding: 8px;
    color: rgb(255, 255, 255);
    background-color: rgb(126, 87, 194);
    }
    </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 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 selected="{{ $.paper_tabs.selected }}" lastselected="0" selectedindex="1" notap id="core_animated_pages">
    <section id="section2" layout horizontal center center-justified>
    <core-card id="core_card" layout vertical>
    <core-animated-pages transitions="slide-up slide-down fade tile-cascade" selected="{{ $.paper_tabs.selected }}" lastselected="1" selectedindex="0" notap id="core_animated_pages">
    <section id="section2" layout horizontal center center-justified active>
    <core-card id="core_card" layout vertical slide-up>
    <paper-input label="Letters" error="Only letters please!" willvalidate pattern="^[A-Za-z]*$" id="paper_input" layout vertical></paper-input>
    <paper-input label="Numbers" error="Numbers only please!" willvalidate pattern="\d*" id="paper_input1" layout vertical></paper-input>
    <div id="div" end-justified horizontal layout one flex end>
    <paper-fab icon="check" id="paper_fab"></paper-fab>
    </div>
    </core-card>
    </section>
    <section id="section4" active>
    <core-card id="core_card1" layout vertical></core-card>
    <section id="section4">
    <section id="section3" layout vertical designmeta="quiz-demo-grid">
    <div id="toolbar" class="tall-toolbar categories" horizontal center-justified center layout slide-down>
    <span id="span">Quiz Demo</span>
    </div>
    <div id="tiles-container" class="tiles-container" layout wrap horizontal around-justified center relative fade tile-cascade>
    <div id="tile-profile" class="tile" layout vertical relative>
    <section id="section5" class="tile-top" flex layout horizontal center center-justified>
    <core-icon icon="category-icons:food" id="core_icon" designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div1" class="tile-bottom">
    Category 1
    </div>
    </div>
    <div id="tile-general" class="tile" layout vertical relative>
    <section id="section6" class="tile-top" flex layout horizontal center center-justified hero hero-id="top">
    <core-icon icon="category-icons:knowledge" id="core_icon1" cross-fade-delayed designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div2" class="tile-bottom" hero hero-id="bottom">
    <span id="span1">General Knowledge</span>
    </div>
    </div>
    <div id="div3" class="tile" layout vertical relative>
    <section id="section7" class="tile-top" flex layout horizontal center center-justified>
    <core-icon icon="category-icons:history" id="core_icon2" designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div4" class="tile-bottom">
    Category 2
    </div>
    </div>
    <div id="div5" class="tile" layout vertical relative>
    <section id="section8" class="tile-top" flex layout horizontal center center-justified>
    <core-icon icon="category-icons:geography" id="core_icon3" designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div6" class="tile-bottom">
    Category 3
    </div>
    </div>
    <div id="div7" class="tile" layout vertical relative>
    <section id="section9" class="tile-top" flex layout horizontal center center-justified>
    <core-icon icon="category-icons:entertainment" id="core_icon4" designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div8" class="tile-bottom">
    Category 4
    </div>
    </div>
    <div id="div9" class="tile" layout vertical relative>
    <section id="section10" class="tile-top" flex layout horizontal center center-justified>
    <core-icon icon="category-icons:music" id="core_icon5" designmeta="topeka-icon"></core-icon>
    </section>
    <div id="div10" class="tile-bottom">
    Category 5
    </div>
    </div>
    </div>
    </section>
    </section>
    </core-animated-pages>
    </section>
  4. vincentsimard revised this gist Sep 2, 2014. No changes.
  5. vincentsimard created this gist Sep 2, 2014.
    105 changes: 105 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <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">
    <link rel="import" href="../paper-input/paper-input.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;
    }
    #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;
    padding: 2em;
    background-color: rgb(255, 255, 255);
    }
    #paper_icon_button {
    left: 960px;
    top: 700px;
    }
    #paper_button {
    left: 950px;
    top: 650px;
    }
    #section {
    width: 420px;
    height: 630px;
    border: 5px solid rgb(204, 204, 204);
    left: 70px;
    top: 40px;
    position: absolute;
    }
    #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_animated_pages {
    width: 420px;
    height: 582px;
    overflow: hidden;
    background-color: rgb(238, 238, 238);
    }
    #core_card1 {
    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="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>
    <core-animated-pages selected="{{ $.paper_tabs.selected }}" lastselected="0" selectedindex="1" notap id="core_animated_pages">
    <section id="section2" layout horizontal center center-justified>
    <core-card id="core_card" layout vertical>
    <paper-input label="Letters" error="Only letters please!" willvalidate pattern="^[A-Za-z]*$" id="paper_input" layout vertical></paper-input>
    <paper-input label="Numbers" error="Numbers only please!" willvalidate pattern="\d*" id="paper_input1" layout vertical></paper-input>
    <div id="div" end-justified horizontal layout one flex end>
    <paper-fab icon="check" id="paper_fab"></paper-fab>
    </div>
    </core-card>
    </section>
    <section id="section4" active>
    <core-card id="core_card1" layout vertical></core-card>
    </section>
    </core-animated-pages>
    </section>
    </section>
    </template>

    <script>

    Polymer('my-element', {

    });

    </script>

    </polymer-element>