<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/55222/CodeExamples/style.css?mbam02">
</head>
<body>
<div class="wrapper">
<div class="Flash Flash--success">
You did something right!
<a class="Close">
<i class="icon-x-circle"></i>
</a>
</div>
<div class="Flash Flash--alert">
ALERT!
<a class="Close">
<i class="icon-x-circle"></i>
</a>
</div>
<div class="Flash Flash--warning">
Here is a warning!
<a class="Close">
<i class="icon-x-circle"></i>
</a>
</div>
<div class="Flash Flash--info">
Boring info.
<a class="Close">
<i class="icon-x-circle"></i>
</a>
</div>
</div>
</body>
</html>
// ----
// libsass (v3.5.0.beta.2)
// ----
// COLOR VARIABLES
$success: #3ADB76;
$alert: #FF3B30;
$warning: #FF9500;
$info: #5AC8FA;
$body-font-color: #474250;
$black-30: rgba(0, 0, 0, 0.30);
$black-45: rgba(0, 0, 0, 0.45);
$white-45: rgba(255, 255, 255, 0.45);
$white-65: rgba(255, 255, 255, 0.65);
$white: #fff;
$success: #3ADB76;
$secondary: #666E7C;
// $alert: #FF3B30;
// $warning: #FF9500;
// MIXINS:
@mixin global-transition(
$property: all,
$delay: 0,
$duration: 0.2s,
$function: linear,
$direction: null
) {
animation-direction: $direction;
transition-delay: $delay;
transition-duration: $duration;
transition-property: $property;
transition-timing-function: $function;
}
// ALERT-BOX COLORS
$flashes: (success $success),
(alert $alert),
(warning $warning),
(info $info);
@function set-flash-text-color($color: nth($status, 1)) {
@if (lightness($color) > 60) {
@return $body-font-color; // Lighter background, return dark color
} @else {
@return $white; // Darker background, return light color
}
}
@function set-flash-close-button($color: nth($status, 1)) {
@if (lightness($color) > 50) {
@return $black-30; // Lighter background, return dark color
} @else {
@return $white-65; // Darker background, return light color
}
}
@function set-flash-close-button-hover($color: nth($status, 1)) {
@if (lightness($color) > 50) {
@return $black-45; // Lighter background, return dark color
} @else {
@return $white-45; // Darker background, return light color
}
}
@each $status in $flashes {
$flash-close-btn: set-flash-close-button(nth($status, 2));
$flash-close-btn-hover: set-flash-close-button-hover(nth($status, 2));
.Flash--#{nth($status, 1)} {
background: nth($status, 2);
color: set-flash-text-color(nth($status, 2));
.Close {
@include global-transition;
color: $flash-close-btn;
&:hover,
&:active,
&:focus {
color: $flash-close-btn-hover;
}
}
}
}
.Flash {
display: block;
font-family: "Helvetica", sans-serif;
padding: 1rem;
line-height: 1.6;
position: relative;
}
.Close {
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
margin: 0.3rem 0.75rem;
padding: 0;
position: absolute;
right: 0;
top: 0.5rem;
}
.wrapper {
margin: 0.5rem;
}
View Compiled
This Pen doesn't use any external JavaScript resources.