<div class="wrapper">
	<div class="desc">
		<h1>Bubble corner effect</h1>
		<p>Pure CSS bubble corner effect for display short messages at hover.</p>

		<div class="todo">
			<span>TODO list:</span>
			<ul>
				<li>Enable compatibility with touch devices</li>
				<li>Clean the code</li>
				<li>Add comments</li>
				<li>Test browser compatibility</li>
			</ul>
		</div>
	</div>

	<div class="box">
		<div class="bubble-aprox"></div>
		<div class="bubble">
			<span class="bubble__icon">i</span>
			<div class="bubble__content">
				Message abdai bdshab jdhsab djhsa b dhsja bdshj abdsahb dhsaj bdshaj bdhsja bdhsaj dsa sahdiusahid hsdia udhsia udhia udhsia uhdisa hdisa idasuh aidu ahi
			</div>
		</div>

		<div class="box__content">
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>	
		</div>
	</div>

	<footer>
		<a target="_blank" href="https://twitter.com/ricardpanades">@ricardpanades</a>
	</footer>
</div>

$transition-time: .8s;

@mixin transition-one(){
	transition: $transition-time/2 ease;
};

@mixin transition-two(){
	transition: $transition-time ease;
};





.box {
	margin: 1em auto;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2em;
	overflow: hidden;
	position: relative;
	color: #333;
	line-height: 1.6;
	font-size: 1.2em;
	z-index: 2;
	
	*:first-child { margin-top: 0; }
	*:last-child { margin-bottom: 0; }
}





// ------------------------------------------------
// BUBBLE HOVER EFFECT CODE
// ------------------------------------------------

.bubble-aprox {
	width: 3em;
	height: 3em;
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 0 0% 100% 0;
	
	&:hover + .bubble,
	&:hover + .bubble:before {
		padding: .2em;
		border-radius: 0 0 90% 0;
	}
}

.bubble {
	position: absolute;
	color: #fff;
	height: 2.5em;
	width: 2.5em;
	transform-style: preserve-3d;
	border-radius: 0 0% 100% 0;
	top: 0;
	left: 0;
	z-index: 2;
	@include transition-one();
	
	&:before {
		content: '';
		height: 2.5em;
		width: 2.5em;
		@include transition-two();
		border-radius: 0 0% 100% 0;
		background: #7CB342;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
	}
	
	&:hover {
		width: 100%;
		height: 100%;
		
		&:before {
			border-radius: 0;
			width: 150%;
			height: 150%;
			@include transition-two();
		}
		
		.bubble__icon {
			top: -50%;
			left: -50%;
			@include transition-two();
		}
		
		.bubble__content {
			@include transition-two();
			top: 50%;
			left: 0;
			z-index: 4;
		}
	}
}

.bubble__icon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	@include transition-two();
	padding: .6em .9em;
	line-height: 1;
	font-size: 1em;
}

.bubble__content {
	position: absolute;
	top: -200%;
	transform: translateY(-50%);
	@include transition-one();
	text-align: center;
	width: 100%;
	color: #fff;
	left: -200%;
	padding: 1.2em;
}