[Summary view] [Print] [Text view]

   1  .toast {
   2    width: $toast-max-width;
   3    max-width: 100%;
   4    @include font-size($toast-font-size);
   5    color: $toast-color;
   6    pointer-events: auto;
   7    background-color: $toast-background-color;
   8    background-clip: padding-box;
   9    border: $toast-border-width solid $toast-border-color;
  10    box-shadow: $toast-box-shadow;
  11    @include border-radius($toast-border-radius);
  12  
  13    &.showing {
  14      opacity: 0;
  15    }
  16  
  17    &:not(.show) {
  18      display: none;
  19    }
  20  }
  21  
  22  .toast-container {
  23    width: max-content;
  24    max-width: 100%;
  25    pointer-events: none;
  26  
  27    > :not(:last-child) {
  28      margin-bottom: $toast-spacing;
  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    @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
  41  
  42    .btn-close {
  43      margin-right: $toast-padding-x * -.5;
  44      margin-left: $toast-padding-x;
  45    }
  46  }
  47  
  48  .toast-body {
  49    padding: $toast-padding-x; // apply to both vertical and horizontal
  50    word-wrap: break-word;
  51  }