39 lines
767 B
SCSS
39 lines
767 B
SCSS
|
/** @format */
|
||
|
|
|
||
|
|
.woocommerce-transient-notices {
|
||
|
|
position: fixed;
|
||
|
|
bottom: $gap-small;
|
||
|
|
left: 0;
|
||
|
|
z-index: 99999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.woocommerce-transient-notice {
|
||
|
|
transform: translateX(calc(-100% - #{$gap}));
|
||
|
|
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
|
||
|
|
max-height: 300px; // Used to animate sliding down when multiple notices exist on exit.
|
||
|
|
|
||
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.slide-enter-active,
|
||
|
|
&.slide-enter-done {
|
||
|
|
transform: translateX(0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.slide-exit-active {
|
||
|
|
transform: translateX(calc(-100% - #{$gap}));
|
||
|
|
}
|
||
|
|
|
||
|
|
&.slide-exit-done {
|
||
|
|
max-height: 0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.components-notice {
|
||
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||
|
|
}
|
||
|
|
}
|