Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.notifications {
// Used for calculations
$defaultWidth = 320;
$success = $brand-happy;
$error = $brand-angry;
$warning = $warning;
$info = $brand-turquoise;
$defaultShadowOpacity = "0.9";
&-wrapper {}
&-tl,
&-tc,
&-tr,
&-bl,
&-bc,
&-br {
font-family: inherit;
position: fixed;
width: $defaultWidth;
padding: 0 10px 10px 10px;
margin: 0;
z-index: 9998;
box-sizing: border-box;
height: auto;
}
&-tl {
top: 0;
bottom: auto;
left: 0;
right: auto;
}
&-tr {
top: 0;
bottom: auto;
left: auto;
right: 0;
}
&-tc {
top: 0;
bottom: auto;
margin: auto;
left: 50%;
margin-left: -($defaultWidth / 2);
}
&-bl {
top: auto;
bottom: 0;
left: 0;
right: auto;
}
&-br {
top: auto;
bottom: 0;
left: auto;
right: 0;
}
&-bc {
top: auto;
bottom: 0;
margin: 'auto';
left: '50%';
margin-left: -($defaultWidth / 2);
}
$block = ".notification";
{$block} {
position: relative;
width: 100%;
cursor: pointer;
border: 1px solid transparent;
border-left-width: 4px;
border-radius: 0;
font-size: 13px;
margin: 5px 0 0;
padding: 10;
display: block;
box-sizing: border-box;
opacity: 0;
transition: 0.3s ease-in-out;
will-change: transform opacity;
&-hidden {
opacity: 0
}
&-visible {
opacity: 1
}
&-title {
fontSize: 14px;
margin: 0 0 5px 0;
padding: 0;
fontWeight: bold;
}
&-message {
margin: 0;
padding: 0;
}
&-dismiss {
font-family: Arial;
font-size: 17px;
position: absolute;
top: 4px;
right: 5px;
line-height: 15px;
background-color: #dededf;
color: white;
border-radius: 50%;
width: 14px;
height: 14px;
font-weight: bold;
text-align: center;
}
&-action-wrapper {
margin: 0;
padding: 0;
}
&-action-button {
background: #ffffff;
border-radius: 2px;
padding: 6px 20;
font-weight: bold;
margin: 10 0 0 0;
border: 0
}
&-success {
border-color: $success;
background-color: #f0f5ea;
color: #4b583a;
&{$block}-dismiss {
color: #f0f5ea;
background-color: #b0ca92;
}
&{$block}-action-button {
background-color: $success;
color: #ffffff;
}
}
&-error {
border-color: $error;
background-color: #f4e9e9;
color: #412f2f;
&{$block}-dismiss {
color: #f4e9e9;
background-color: #e4bebe;
}
&{$block}-action-button {
backgroundC-color: $error;
color: #ffffff;
}
}
&-warning {
border-top: $warning;
background-color: #f9f6f0;
color: #5a5343;
&{$block}-dismiss {
color: #f9f6f0;
background-color: #e1cfac;
}
&{$block}-action-button {
background-color: $warning;
color: #ffffff;
}
}
&-info {
border-top: $info;
background-color: #e8f0f4;
color: #41555d;
&{$block}-dismiss {
color: #e8f0f4;
backgroundc-Color: #a4becb;
}
&{$block}-action-button {
background-color: $info;
color: #ffffff;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.