Eventure Components

by AaronLayton

HTML

<script src="http://www.validatethis.co.uk/playground/components/polymer.js"></script>
<!-- Decalare our custom element, prefixing everything with ev (all custom elements must have a '-' -->

<element name="ev-quickbasket">
    <template>
        <div class="quickbasket">
            <content selector="*"></content>
            <div class="basketContainer">
                This is the drop basket
            </div>
        </div>
        <style>
            .quickbasket {
                position:relative;
            }
            .basketContainer {
                background:#f7f7f7;
                border:1px solid #777;
                
                opacity:0;
                padding:15px;
                position:absolute;
                right:0;
                top:100%;
                width:250px;
                
                transition:opacity 2s;
            }
            
            .quickbasket:hover .basketContainer {
                
                opacity:100;
            }
        </style>  
    </template>
      
    <script>
        Polymer.register(this);
    </script>
</element>


<div class="header clearfix">
    <h1>Logo</h1>
    <div class="header-basket" is="ev-quickbasket">
        <strong>Shopping Bag</strong><br />
        <span id="totalItems">12 Items</span> - <span id="totalPrice">&pound;202.50</span>
    </div>
</div>
    

<ev-quickbasket>
    Anything you want
</ev-quickbasket>

SCSS

body {
    font-family:arial;
}
.header {
    background:#f0f0f0;
    margin:0 0 30px;
    padding:25px 20px;
    
    h1 {
        float:left;
        margin:0;
    }
}
.header-basket {
    background:url(http://www.suitdirect.co.uk/images/skin/feb13/shopping-bag.png) left top no-repeat;
    float:right;
    font-size:12px;
    padding:0 0 0 43px;
    text-align:right;
}





.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }