scss/_toasts.scss


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
32
33
34

.toast {
  display: none;
  max-width: $toast-max-width;
  overflow: hidden; // cheap rounded corners on nested items
  font-size: $toast-font-size; // knock it down to 14px
  background-color: $toast-background-color;
  background-clip: padding-box;
  border: $toast-border-width solid $toast-border-color;
  border-radius: $toast-border-radius;
  box-shadow: $toast-box-shadow;
  backdrop-filter: blur(10px);

  + .toast {
    margin-top: $toast-padding-x;
  }
}

.toast.show {
  display: inherit;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: $toast-padding-y $toast-padding-x;
  color: $toast-header-color;
  background-color: $toast-header-background-color;
  background-clip: padding-box;
  border-bottom: $toast-border-width solid $toast-header-border-color;
}

.toast-body {
  padding: $toast-padding-x; // apply to both vertical and horizontal
}