Notification light refactor

stable
Xavier Julián 2015-10-15 15:13:06 +02:00
parent daec7312c0
commit 6972a1d0c0
1 changed files with 20 additions and 15 deletions

View File

@ -96,40 +96,45 @@
} }
.notification-light { .notification-light {
align-items: center;
background: rgba($gray-light, .95); background: rgba($gray-light, .95);
color: $white; color: $white;
left: calc(50% - 200px); display: flex;
padding: 1rem 1rem .2rem; justify-content: space-between;
opacity: 0;
padding: 1rem;
position: absolute; position: absolute;
top: 0; top: 0;
transform: translateY(-100%); transform: translateY(-100%);
width: 400px; transition: all .6s;
width: 100%;
z-index: 99999; z-index: 99999;
&.inactive { &.inactive {
transition: all .6s ease-in-out; opacity: 0;
transform: translateY(-100%);
transition: all .6s;
} }
&.active { &.active {
opacity: 1;
transform: translateY(0); transform: translateY(0);
transition: all .6s ease-in-out; transition: all .6s;
} }
.text { p {
display: inline-block; @extend %light;
margin-left: .5rem; @extend %small;
width: 80%; margin: 0;
} }
.warning { .warning {
@extend %large;
@extend %bold;
color: $white; color: $white;
line-height: 2.4rem; line-height: 1.5rem;
} }
.icon-delete { .icon-delete {
@extend %larger;
color: $white; color: $white;
position: absolute; margin-right: 1rem;
right: 1rem;
} }
} }
.notification-message-light-error { .notification-message-light-error {
background: rgba($red, .95); background: rgba($red, .8);
} }