git.roojs.org Git - roojs1/blob - scss/bootstrap/_toasts.scss

   1 .toast {
   2   // Prevents from shrinking in IE11, when in a flex container
   3   // See https://github.com/twbs/bootstrap/issues/28341
   4   flex-basis: $toast-max-width;
   5   max-width: $toast-max-width;
   6   @include font-size($toast-font-size);
   7   color: $toast-color;
   8   background-color: $toast-background-color;
   9   background-clip: padding-box;
  10   border: $toast-border-width solid $toast-border-color;
  11   box-shadow: $toast-box-shadow;
  12   opacity: 0;
  13   @include border-radius($toast-border-radius);
  14
  15   &:not(:last-child) {
  16     margin-bottom: $toast-padding-x;
  17   }
  18
  19   &.showing {
  20     opacity: 1;
  21   }
  22
  23   &.show {
  24     display: block;
  25     opacity: 1;
  26   }
  27
  28   &.hide {
  29     display: none;
  30   }
  31 }
  32
  33 .toast-header {
  34   display: flex;
  35   align-items: center;
  36   padding: $toast-padding-y $toast-padding-x;
  37   color: $toast-header-color;
  38   background-color: $toast-header-background-color;
  39   background-clip: padding-box;
  40   border-bottom: $toast-border-width solid $toast-header-border-color;
  41   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
  42 }
  43
  44 .toast-body {
  45   padding: $toast-padding-x; // apply to both vertical and horizontal
  46 }