You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.5 KiB
SCSS
88 lines
1.5 KiB
SCSS
1 week ago
|
.notification {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
max-width: 400px;
|
||
|
|
padding: 16px 48px 16px 20px;
|
||
|
|
border-radius: 6px;
|
||
|
|
z-index: 10000;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
|
background-color: #ffffff;
|
||
|
|
color: #333333;
|
||
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.4;
|
||
|
|
transition: opacity 0.4s ease, transform 0.3s ease;
|
||
|
|
animation: fadeIn 0.3s ease forwards;
|
||
|
|
border-left: 8px solid #c9c9c9;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
&.success {
|
||
|
|
background-color: #e8f5e9;
|
||
|
|
border-color: #4caf50;
|
||
|
|
color: #2e7d32;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.error {
|
||
|
|
background-color: #ffebee;
|
||
|
|
border-color: #f44336;
|
||
|
|
color: #c62828;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.warning {
|
||
|
|
background-color: #fffde7;
|
||
|
|
border-color: #ffeb3b;
|
||
|
|
color: #fbc02d;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.info {
|
||
|
|
background-color: #e3f2fd;
|
||
|
|
border-color: #2196f3;
|
||
|
|
color: #1976d2;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fade-out {
|
||
|
|
animation: fadeOut 0.4s ease forwards;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 12px;
|
||
|
|
right: 16px;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
font-size: 20px;
|
||
|
|
color: inherit;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: color 0.3s;
|
||
|
|
line-height: 1;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animations */
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(100px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOut {
|
||
|
|
to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(100px);
|
||
|
|
}
|
||
|
|
}
|