1 .b-toaster { 2 top: 75px!important; // make sure toasts do not hide top header 3 } 4 5 // Toast component and status icon style 6 .toast { 7 padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2; 8 border-width: 0 0 0 3px; 9 box-shadow: $box-shadow; 10 .close { 11 font-weight: 300; 12 opacity: 1; 13 } 14 } 15 16 .toast-header { 17 display: flex; 18 align-items: flex-start; 19 background-color: inherit!important; //override specificity 20 border: none; 21 color: theme-color("dark")!important; //override specificity 22 padding-bottom: 0; 23 } 24 25 .toast-icon { 26 display: flex; 27 margin-right: 1rem; 28 29 svg { 30 margin-left: -2.5rem; 31 } 32 33 + .close { 34 line-height: .9; 35 } 36 } 37 38 .toast-body { 39 color: theme-color("dark"); 40 padding-top: 0; 41 } 42 43 .b-toast-success .toast { 44 border-left-color: theme-color("success")!important; 45 background-color: theme-color-light("success")!important; 46 } 47 48 .b-toast-info .toast { 49 border-left-color: theme-color("info")!important; 50 background-color: theme-color-light("info")!important; 51 } 52 53 .b-toast-danger .toast { 54 border-left-color: theme-color("danger")!important; 55 background-color: theme-color-light("danger")!important; 56 } 57 58 .b-toast-warning .toast { 59 border-left-color: theme-color("warning")!important; 60 background-color: theme-color-light("warning")!important; 61 }