_toasts.scss 990 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. &:not(:last-child) {
  14. margin-bottom: $toast-padding-x;
  15. }
  16. &.showing {
  17. opacity: 1;
  18. }
  19. &.show {
  20. display: block;
  21. opacity: 1;
  22. }
  23. &.hide {
  24. display: none;
  25. }
  26. }
  27. .toast-header {
  28. display: flex;
  29. align-items: center;
  30. padding: $toast-padding-y $toast-padding-x;
  31. color: $toast-header-color;
  32. background-color: $toast-header-background-color;
  33. background-clip: padding-box;
  34. border-bottom: $toast-border-width solid $toast-header-border-color;
  35. }
  36. .toast-body {
  37. padding: $toast-padding-x; // apply to both vertical and horizontal
  38. }