mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
7d299affd3
This ensures morphed flashes hide like other flashes (eg in bulk order actions). I wanted to write a spec to prove it, but Capybara doesn't support mocking setTimeout and I didn't want to use sleep.
I've made it optional because this controller is shared with the shop frontend ([supposedly](5ef34347a3), although angular seems to override it).
62 lines
1.2 KiB
SCSS
62 lines
1.2 KiB
SCSS
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out-hide {
|
|
0% {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
99% {
|
|
opacity: 0;
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.animate-hide-500 {
|
|
animation: fade-out-hide 0.5s;
|
|
opacity: 0; // Stay invisible after animation
|
|
}
|
|
|
|
// @-webkit-keyframes slideOutDown
|
|
// 0%
|
|
// -webkit-transform: translateY(0)
|
|
// transform: translateY(0)
|
|
// 100%
|
|
// -webkit-transform: translateY(20px)
|
|
// transform: translateY(20px)
|
|
|
|
.animate-show {
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
|
|
// line-height: 20px
|
|
// opacity: 1
|
|
|
|
// &.ng-hide
|
|
// -webkit-animation-name: slideOutDown
|
|
// animation-name: slideOutDown
|
|
// -webkit-animation-duration: 0.5s
|
|
// animation-duration: 0.5s
|
|
// -webkit-animation-fill-mode: both
|
|
// animation-fill-mode: both
|
|
// // line-height: 20px
|
|
// // opacity: 1
|
|
}
|