Files

60 lines
1.5 KiB
CSS

.component_notification {
position: fixed;
bottom: 20px;
left: 20px;
right: 70px;
font-size: 0.95em;
z-index: 1001;
}
.component_notification .component_notification--container {
overflow: hidden;
width: 400px;
text-align: left;
display: inline-block;
padding: 15px 20px 15px 15px;
border-radius: 2px;
box-shadow: rgba(158, 163, 172, 0.3) 5px 5px 20px;
display: flex;
align-items: center;
}
.component_notification .component_notification--container.info {
background: var(--color);
color: rgba(255, 255, 255, 0.8);
}
.component_notification .component_notification--container.error {
background: var(--error);
color: rgba(0, 0, 0, 0.5);
}
.component_notification .component_notification--container.success {
background: var(--success);
color: rgba(0, 0, 0, 0.5);
}
.component_notification .component_notification--container .message {
flex: 1 1 auto;
max-height: 92px;
max-width: 100%;
overflow: hidden;
}
.component_notification .component_notification--container .close {
cursor: pointer;
padding: 0 2px;
}
.component_notification .component_notification--container .close .component_icon {
height: 18px;
}
@media (max-width: 490px) {
.component_notification {
bottom: 0px;
left: 0px;
}
.component_notification .component_notification--container {
width: 100%;
box-sizing: border-box;
}
}
.component_notification .component_notification--container {
box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 20px;
}