xref: /openbmc/webui-vue/src/assets/styles/bmc/custom/_toasts.scss (revision da9f0a6e62ff0f70cb8e82d8489369003826f502)
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 }