bloqhead
4/3/2014 - 9:51 PM

MODULERTS!

MODULERTS!

modulerts.html
content_copyfile_download
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	</head>
	<body>
		
		<div class="alert-help">
			<p><i class="fa fa-exclamation-triangle"></i> This is an alert!</p>
		</div>

		<div class="alert-info">
			<p><i class="fa fa-info-circle"></i> This is an alert!</p>
		</div>

		<div class="alert-error">
			<p><i class="fa fa-times"></i> This is an alert!</p>
		</div>

		<div class="alert-success">
			<p><i class="fa fa-check-square"></i> This is an alert!</p>
		</div>
		
	</body>
</html>
modular-alerts.scss
content_copyfile_download
/**
 * Colors and Settings
 */

$alert-adjust: 		10%;
$alert-offset: 		13;
$link-adjust: 		15;
$hover-adjust: 		8;
$trans-type: 		color;
$trans-duration: 	0.2s;
$trans-easing: 		ease-in-out;
$alert-yellow: 		#ebe16f;
$alert-red: 		#fbe3e4;
$alert-green: 		#e6efc2;
$alert-green: 		#e6efc2;
$alert-blue: 		#d5edf8;

%alert {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid;

	p {
		margin: 0;
		padding: 0;
	}

	i {
		vertical-align: middle;
		display: inline-block;
		line-height: inherit;
		font-size: 24px;
		margin-right: 10px;
		padding-right: 10px;
		border-right: 1px solid;
	}

	a {
		-webkit-transition: #{$trans-type} #{$trans-duration} #{$trans-easing};
		   -moz-transition: #{$trans-type} #{$trans-duration} #{$trans-easing};
		        transition: #{$trans-type} #{$trans-duration} #{$trans-easing};
	}
}

.alert-help {
	@extend %alert;
	background-color: $alert-yellow;
	border-color: darken($alert-yellow, $alert-adjust);

	i {
		color: darken($alert-yellow, ($alert-adjust + $alert-offset));
		border-color: darken($alert-yellow, ($alert-adjust + $alert-offset));
	}

	a {
		color: darken($alert-yellow, ($alert-adjust + $alert-offset + $link-adjust));

		&:hover {
			color: darken($alert-yellow, ($alert-adjust + $alert-offset + $link-adjust + $hover-adjust));
		}
	}
}

.alert-info {
	@extend %alert;
	background-color: $alert-blue;
	border-color: darken($alert-blue, $alert-adjust);

	i {
		color: darken($alert-blue, ($alert-adjust + $alert-offset));
		border-color: darken($alert-blue, ($alert-adjust + $alert-offset));
	}

	a {
		color: darken($alert-blue, ($alert-adjust + $alert-offset + $link-adjust));

		&:hover {
			color: darken($alert-blue, ($alert-adjust + $alert-offset + $link-adjust + $hover-adjust));
		}
	}
}

.alert-error {
	@extend %alert;
	background-color: $alert-red;
	border-color: darken($alert-red, $alert-adjust);

	i {
		color: darken($alert-red, ($alert-adjust + $alert-offset));
		border-color: darken($alert-red, ($alert-adjust + $alert-offset));
	}

	a {
		color: darken($alert-red, ($alert-adjust + $alert-offset + $link-adjust));

		&:hover {
			color: darken($alert-red, ($alert-adjust + $alert-offset + $link-adjust + $hover-adjust));
		}
	}
}

.alert-success {
	@extend %alert;
	background-color: $alert-green;
	border-color: darken($alert-green, $alert-adjust);

	i {
		color: darken($alert-green, ($alert-adjust + $alert-offset));
		border-color: darken($alert-green, ($alert-adjust + $alert-offset));
	}

	a {
		color: darken($alert-green, ($alert-adjust + $alert-offset + $link-adjust));

		&:hover {
			color: darken($alert-green, ($alert-adjust + $alert-offset + $link-adjust + $hover-adjust));
		}
	}
}