drop-zone.html

<dom-module is="drop-zone">

<style>
.border {
position: fixed;
margin: 40px;
border: 10px dashed #999;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
}
:host{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: block;
color: #888;
z-index: 100;   
pointer-events: none;
}
.centre_content{
text-align: center;
position: relative;
margin: 0 auto;
height: 100%;
pointer-events: initial;
}
.centre_content_inner{
position: relative;
top: 50%;
transform: translateY(-60%);
display: inline-block;
}
.primary_text{
font-size: 52px;
margin-bottom: 20px;
}
.secondary_text{
font-size: 12px;
}
.initial_extra_under_title{
font-size: 12px;
}
.backstop{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #fff;
}
.initial_extra_bottom_right{
position: absolute;
bottom: 60px;
right: 60px;
text-align: right;
}
.centre_content_inner:before{
position: absolute;
width: 120%;
height: 160%;
margin-left: -60%;
content: '';
z-index: -1;
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 30%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
margin-top: -8%;
}

@-webkit-keyframes spaceboots {
    /* Taken from http://www.cssreset.com/demos/css3/webkit-animation-shake-links/spaceboots.html */
    0%   { -webkit-transform: translate(2px, 1px)   rotate(0deg); }
    10%  { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20%  { -webkit-transform: translate(-3px, 0px)  rotate(1deg); }
    30%  { -webkit-transform: translate(0px, 2px)   rotate(0deg); }
    40%  { -webkit-transform: translate(1px, -1px)  rotate(1deg); }
    50%  { -webkit-transform: translate(-1px, 1px)  rotate(-1deg); }
    60%  { -webkit-transform: translate(-3px, -2px)  rotate(0deg); }
    70%  { -webkit-transform: translate(2px, 1px)   rotate(-1deg); }
    80%  { -webkit-transform: translate(-1px, -2px) rotate(1deg); }
    90%  { -webkit-transform: translate(2px, -1px)   rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px)  rotate(-1deg); }
}
.wibbly_wobbly{
    -webkit-animation-name: 'spaceboots';
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;    
}
</style>


<template>
<div class="backstop" style$="[[_show(show_initial)]]"></div>
<div class="border" style$="[[_show(show_initial)]]"></div> 

<div class="centre_content" style$="[[_show(drop_in_progress, show_initial)]]"><div class="centre_content_inner">
    <div class$="primary_text [[_wobble(drop_in_progress)]]"><content select=".primary_text"></content></div>
    <div class="secondary_text"><content select=".secondary_text"></content></div>
    <div class="initial_extra_under_secondary" style$="[[_show(show_initial)]]"><content select=".initial_extra_under_secondary"></content></div>
</div></div>

<div class="initial_extra_bottom_right" style$="[[_show(show_initial)]]">
    <content select=".initial_extra_bottom_right"></content>
</div>
</template>

<script>
    Polymer({
        is: 'drop-zone',
        properties: {
            show_initial: {
                type: Boolean,
                value: true,
                notify: true
            },
            drop_in_progress: {
                type: Boolean,
                value: false,
                notify: true
            }
        }, _show: function(a,b){
            return a || b ? '' : 'display:none;';
        }, _wobble: function(a){
            return a ? 'wibbly_wobbly' : '';
        }
    })
</script>
</dom-module>