_toast.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. // Toasts
  2. // toast container customization
  3. .toast-bs-container{
  4. z-index: 1040;
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. width: 100%;
  9. .toast-position{
  10. position: relative;
  11. top: 0;
  12. right: 0;
  13. display: flex;
  14. flex-direction: column;
  15. flex-wrap: wrap-reverse;
  16. .toast.show{
  17. // display: block;
  18. opacity: 1;
  19. z-index: 1030;
  20. }
  21. }
  22. }
  23. // placement of toast on body
  24. .toast-placement{
  25. position: static;
  26. top: 0;
  27. .toast{
  28. position: fixed;
  29. top: 0;
  30. z-index: 1030;
  31. }
  32. }
  33. // default toast customization
  34. .toast {
  35. display: none;
  36. background-color: rgba($white,1);
  37. margin-top: .75rem;
  38. .toast-header{
  39. .close{
  40. &:focus,&:active{
  41. outline: none;
  42. }
  43. }
  44. }
  45. }
  46. // toast on show
  47. .toast.show.toast-wrapper{
  48. position: static;
  49. }
  50. // translucent toast opacity and display
  51. .toast.toast-translucent {
  52. opacity: 1;
  53. display: block;
  54. }
  55. // toast header img size
  56. .toast-header{
  57. img{
  58. width: 35px;
  59. height: 24px;
  60. }
  61. }
  62. // IE Specific CSS
  63. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  64. .toast-bs-container {
  65. position: fixed !important;
  66. left: 74% !important;
  67. }
  68. }
  69. _:-ms-lang(x),
  70. .toast-bs-container {
  71. position: fixed !important;
  72. left: 74% !important;
  73. }