[Summary view] [Print] [Text view]

   1  .toast {
   2    max-width: $toast-max-width;
   3    overflow: hidden; // cheap rounded corners on nested items
   4    @include font-size($toast-font-size);
   5    color: $toast-color;
   6    background-color: $toast-background-color;
   7    background-clip: padding-box;
   8    border: $toast-border-width solid $toast-border-color;
   9    box-shadow: $toast-box-shadow;
  10    backdrop-filter: blur(10px);
  11    opacity: 0;
  12    @include border-radius($toast-border-radius);
  13  
  14    &:not(:last-child) {
  15      margin-bottom: $toast-padding-x;
  16    }
  17  
  18    &.showing {
  19      opacity: 1;
  20    }
  21  
  22    &.show {
  23      display: block;
  24      opacity: 1;
  25    }
  26  
  27    &.hide {
  28      display: none;
  29    }
  30  }
  31  
  32  .toast-header {
  33    display: flex;
  34    align-items: center;
  35    padding: $toast-padding-y $toast-padding-x;
  36    color: $toast-header-color;
  37    background-color: $toast-header-background-color;
  38    background-clip: padding-box;
  39    border-bottom: $toast-border-width solid $toast-header-border-color;
  40  }
  41  
  42  .toast-body {
  43    padding: $toast-padding-x; // apply to both vertical and horizontal
  44  }