#app
	ti-ripple-button(text="I'm a ripple button")

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

$black: #000;
$white: #fff;
$shocking-pink: #ff1ead;

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family: Inconsolata, monospace;
	font-size: 24px;
	background-color: $black;
	display: grid;
	place-items: center;
}

.ti-btn {
	color: $white;
	font: inherit;
	background-color: $black;
	border: solid 4px $white;
	padding: 20px 30px;
	outline: 0;
	overflow: hidden;
	display: inline-block;
	position: relative;
	user-select: none;
	box-shadow: 0 0 0 0 rgba($white, 0.5);
	transition: box-shadow 150ms ease-out;
	&:focus {
		box-shadow: 0 0 0 8px rgba($white, 0.5);
	}
}

.ripple {
	background-color: $shocking-pink;
	width: 1rem;
	height: 1rem;
	position: absolute;
	border-radius: 50%;
	transform: translateX(-100%) translateY(-100%);
	mix-blend-mode: screen;
	animation: ripple 1250ms ease-out forwards, fade 1500ms ease-out forwards;
}

@keyframes ripple {
	0%   { transform: translate(-100%, -100%); }
	80%  { transform: translate(-100%, -100%) scale(50); }
	100% { transform: translate(-100%, -100%) scale(50); opacity: 0; }
}

@keyframes fade {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

Vue.component('ti-ripple-button', {
	props: ['text'],
	data: function() {
		return {
			ripples: []
		}
	},
	methods: {
		animateRipple: function(e) {
			let el  = this.$refs.tiBtn;
			let pos = el.getBoundingClientRect();
			
			this.ripples.push({
				x: e.clientX - pos.left,
				y: e.clientY - pos.top,
				show: true
			});
		},
		rippleEnd: function(i) {
			this.ripples[i].show = false;
		}
	},
	template: `
<button class="ti-btn" ref="tiBtn" v-on:click="animateRipple">
	{{text}}
	<transition-group>
		<span
			class="ripple"
			v-bind:ref="'ripple-' + i"
			v-bind:key="'ripple' + i"
			v-for="(val, i) in ripples"
			v-if="val.show === true"
			v-bind:style="{'top': val.y + 'px', 'left': val.x + 'px'}"
			v-on:animationend="rippleEnd(i)">
		</span>
	</transition-group>
</button>
`
});

var app = new Vue({
	el: '#app'
});