Improve notifications, fix styles not being added
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Based on https://petr.codes/blog/rails/modern-rails-flash-messages/part-3/
This commit is contained in:
39
app/assets/stylesheets/components/notifications.css
Normal file
39
app/assets/stylesheets/components/notifications.css
Normal file
@@ -0,0 +1,39 @@
|
||||
@layer components {
|
||||
@keyframes notification-countdown {
|
||||
from { width: 100%; }
|
||||
to { width: 0; }
|
||||
}
|
||||
|
||||
.notification-enter {
|
||||
@apply transform ease-out duration-300 transition;
|
||||
}
|
||||
|
||||
.notification-enter-from {
|
||||
@apply translate-y-2 opacity-0;
|
||||
}
|
||||
|
||||
.notification-enter-to {
|
||||
@apply translate-y-0 opacity-100;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
.notification-enter-from {
|
||||
@apply translate-y-0 translate-x-2;
|
||||
}
|
||||
.notification-enter-to {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-leave {
|
||||
@apply transition ease-in duration-100;
|
||||
}
|
||||
|
||||
.notification-leave-from {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.notification-leave-to {
|
||||
@apply opacity-0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user