funkwhale/front/src/components/ui/alert.scss

39 lines
657 B
SCSS

.funkwhale.alert {
padding: 2rem 2rem;
line-height: 1.2;
display: flex;
flex-direction: column;
h2, h3, h4 {
margin-top: 0;
margin-bottom: 0;
}
> .actions {
margin-left: auto;
}
// Add styles for when alert is used as a notification
&.is-notification {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 1000;
min-width: 200px;
max-width: 400px;
background-color: var(--background-color);
&.fade-enter-active,
&.fade-leave-active {
transition: all 0.3s ease;
}
&.fade-enter-from,
&.fade-leave-to {
opacity: 0;
transform: translateY(1rem);
}
}
}