Skip to content

Instantly share code, notes, and snippets.

@freshyill
Created August 17, 2014 03:57
Show Gist options
  • Save freshyill/5d98af95d8ba2e3f3ef2 to your computer and use it in GitHub Desktop.
Save freshyill/5d98af95d8ba2e3f3ef2 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="alert alert--error">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--success">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--info">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--warn">lorem ipsum asdflh asdfklj hsalfs</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
$error: #a94442;
$success: #3c763d;
$info: #31708f;
$warn: #8a6d3b;
$errorbg: #f2dede;
$successbg: #dff0d8;
$infobg: #d9edf7;
$warnbg: #fcf8e3;
$alerts: (success, $success, $successbg),
(info, $info, $infobg),
(warn, $warn, $warnbg),
(error, $error, $errorbg);
@each $type, $textcolor, $bg in $alerts {
.alert--#{$type} {
padding: 1rem;
margin-bottom: 1rem;
color: $textcolor;
background: $bg;
border: 1px solid darken($bg, 10);
}
}
.alert--success {
padding: 1rem;
margin-bottom: 1rem;
color: #3c763d;
background: #dff0d8;
border: 1px solid #c1e2b3;
}
.alert--info {
padding: 1rem;
margin-bottom: 1rem;
color: #31708f;
background: #d9edf7;
border: 1px solid #afd9ee;
}
.alert--warn {
padding: 1rem;
margin-bottom: 1rem;
color: #8a6d3b;
background: #fcf8e3;
border: 1px solid #f7ecb5;
}
.alert--error {
padding: 1rem;
margin-bottom: 1rem;
color: #a94442;
background: #f2dede;
border: 1px solid #e4b9b9;
}
<div class="alert alert--error">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--success">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--info">lorem ipsum asdflh asdfklj hsalfs</div>
<div class="alert alert--warn">lorem ipsum asdflh asdfklj hsalfs</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment