.notifications .mark-read {
|
display: flex;
|
transition: border-color var(--timing) var(--function);
|
}
|
.notifications .mark-read:hover {
|
border: 1px solid var(--pink);
|
transition: border-color var(--timing) var(--function);
|
}
|
|
.notifications .mark-read .hide {
|
position: absolute;
|
}
|
.notifications .mark-read:hover .show,
|
.notifications .mark-read .hide {
|
transform: scale(0);
|
transform-origin: center;
|
opacity: 0;
|
transition: opacity var(--timing) var(--function);
|
transition-property: opacity, transform;
|
}
|
.notifications .mark-read .show,
|
.notifications .mark-read:hover .hide {
|
transform: scale(1);
|
transform-origin: center;
|
opacity: 1;
|
transition: opacity var(--timing) var(--function);
|
transition-property: opacity, transform;
|
}
|
|
.notifications .empty-state {
|
padding: 1rem 0;
|
}
|
.notifications #view-all {
|
background-color: var(--overlay);
|
}
|
|
.notification-preview {
|
transition: all 0.3s ease-out;
|
}
|
|
.notification-preview.fade-in {
|
opacity: 0;
|
transform: translateX(-20px);
|
}
|
|
.notification-preview.fade-out {
|
opacity: 0;
|
transform: translateX(20px);
|
}
|
|
.notification-preview.slide-out {
|
opacity: 0;
|
transform: translateX(100%);
|
}
|
|
.empty-state {
|
transition: opacity 0.3s ease-out;
|
}
|
|
.empty-state.fade-in {
|
opacity: 0;
|
}
|