Created
November 30, 2016 06:12
-
-
Save hontas/a5bc3c8262658f74d508f48f80f19a52 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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