css-magic/less/plugins/flash.less

Include Ray's CSS Library

*[data-flash] {
	.crisp;
	position: @relative;
	.inline-block;
	.padding(2%,8%);
	.margin(4%,@zero,@zero,@zero);
	.crisp;
	text-decoration: @none;
	.appearance(@none);
	background: @none;
	.border(@none);
	> .top,
	> .right,
	> .bottom,
	> .left {
		background-color: @black;
		.transition(.5s,@all);
		.crisp;
	}
	> .top {
		.box(@absolute,@initial,@zero,@zero,@initial,@initial,@hunnid,1px);
	}
	> .right {
		.box(@absolute,@initial,@initial,@zero,@zero,@initial,1px,@hunnid);
	}
	> .bottom {
		.box(@absolute,@initial,@initial,@initial,@zero,@zero,@hunnid,1px);
	}
	> .left {
		.box(@absolute,@initial,@zero,@initial,@initial,@zero,1px,@hunnid);
	}
	> .text {
		.box(@relative,1,@initial,@initial,@initial,@initial,@initial,@initial);
		.transition(.5s,@all);
		.crisp;
		.capitalize;
		font-weight: 600;
		color: @black;
		text-decoration: @none;
	}
	&:before {
		.box(@absolute,0,@initial,0%,0%,@initial,@hunnid,@zero);
		.block;
		.content(" ");
		.transition(.5s,@all);
		opacity: 0;
		.crisp;
		background-color: @black;
	}
	html:not(.touch) &:hover,
	&:active {
		> .top,
		> .right,
		> .bottom,
		> .left {
			opacity: 0;
		}
		> .top {
			width: @zero;
		}
		> .right {
			height: @zero;
		}
		> .bottom {
			width: @zero;
		}
		> .left {
			height: @zero;
		}
		> .text {
			color: @white;
		}
	}
	html:not(.touch) &:hover:before,
	&:active:before {
		height: @hunnid;
		opacity: 1;
	}
}