1
2
3
{
  "text": "“Behavioral Science in Business: Understanding People to Drive Results” added to cart!"
}

1
2
3
<div class="a-toast">
	{{ text }}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@keyframes a-toast {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

.message,
.a-toast {
  @include theme-toast;
  background-color: var(--color--background);
  @include background-fill;
  padding-top: 28px;
  padding-bottom: 28px;
  @include f-ui-1;
  animation: a-toast $timing--long $bezier--miguel;
  transform: translateY(0%);
  transition: transform $timing--long $bezier--miguel;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  @extend %container;

  &.s-hide {
    transform: translateY(100%);
  }
}