added styles for notifications

This commit is contained in:
Felix Hamann 2018-06-26 21:51:47 +02:00
parent 01054b1725
commit 5ddc0627d2
2 changed files with 52 additions and 2 deletions

View File

@ -1,5 +1,5 @@
<div .alert .alert-danger>
<div .alert__content>
<div .notification .notification-danger>
<div .notification__content>
<h1>
Hinweis zum Datenschutz
<p>

View File

@ -0,0 +1,50 @@
.notification {
position: relative;
border-radius: 3px;
padding: 10px 20px 20px;
margin: 40px 0;
color: var(--color-lighter);
box-shadow: 0 0 4px 2px inset currentColor;
padding-left: 20%;
color: #318dc5 ;
&::before {
content: 'i';
position: absolute;
display: flex;
left: 0;
top: 0;
height: 100%;
width: 20%;
font-size: 100px;
align-items: center;
justify-content: center;
}
}
@media (max-width: 768px) {
.notification {
padding-left: 40px;
&::before {
height: auto;
width: 45px;
font-size: 40px;
top: 15px;
}
}
}
.notification-danger {
color: #c51919 ;
&::before {
content: '!';
}
}
.notification__content {
color: var(--color-font);
}