/*message state style*/
.message {
width: 240px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px;
mix-blend-mode: normal;
opacity: 0.9;
box-shadow: 0px 2px 6px rgba(66, 74, 97, 0.12);
border-radius: 4px;
mix-blend-mode: normal;
margin-bottom: 5px;
animation: slideMessage 1s;
-moz-animation: slideMessage 1s; /* Firefox */
-webkit-animation: slideMessage 1s; /* Safari and Chrome */
-o-animation: slideMessage 1s; /* Opera */
}
.state-message-container {
position: fixed;
bottom: 1%;
z-index: 2000;
}
.state-message-container.n-bottom-left {
left: 2%;
}
.state-message-container.n-bottom-right {
right: 2%;
}
.message.type-warning {
background-color: #FFF7E9;
}
.message.type-sucess {
background-color: #E6FAF0;
}
.message.type-info {
background-color: #EAF7FE;
}
.message.type-error {
background-color: #FFF3F2;
}
/*
.message .icon:before,
.message .icon {
color: #FFFFFF;
padding: 10px
}
.info-icon:before {
content: "\e912";
}
.sucess-icon:before {
content: "\e920";
}
.warning-icon:before {
content: "\e925";
}
.error-icon:before {
content: "\e90b";
}*/
.message .icon {
width: 20px;
height: 20px;
margin-right: 10px;
background-repeat: no-repeat;
align-self: flex-start;
}
.message .message-text {
width: 90%;
}
.info-icon {
background-image: url('data:image/svg+xml,');
}
.sucess-icon {
background-image: url('data:image/svg+xml,');
}
.warning-icon {
background-image: url('data:image/svg+xml,');
}
.error-icon {
background-image: url('data:image/svg+xml,');
}
@keyframes slideMessage {
from {
opacity: 0;
left: -30%;
}
to {
opacity: 0.9;
left: 5%;
}
}
@-moz-keyframes slideMessage { /* Firefox */
from {
opacity: 0;
left: -30%;
}
to {
opacity: 0.9;
left: 5%;
}
}
@-webkit-keyframes slideMessage { /* Safari and Chrome */
from {
opacity: 0;
left: -30%;
}
to {
opacity: 0.9;
left: 5%;
}
}
@-o-keyframes slideMessage { /* Opera */
from {
opacity: 0;
left: -30%;
}
to {
opacity: 0.9;
left: 5%;
}
}
.state-message-body {
position: relative;
color: #0C0C0F;
font-size: 14px;
line-height: 18px;
font-weight: 400;
}
/*message state style*/