Notification light refactor
parent
daec7312c0
commit
6972a1d0c0
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue