xref: /openbmc/webui-vue/src/assets/styles/bmc/custom/_toasts.scss (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1// Toast container positioning - below AppHeader
2.b-toaster,
3.toast-container {
4  top: calc(#{$header-height} + #{$spacer})!important; // position below AppHeader (48px + spacing)
5}
6
7// Toast component and status icon style
8.toast {
9  padding: calc(#{$spacer} / 2) calc(#{$spacer} / 2) calc(#{$spacer} / 2) $spacer+2;
10  border-width: 0 0 0 3px; // physical width retained; color via logical property
11  box-shadow: $box-shadow;
12  margin-bottom: $spacer; // vertical spacing between stacked toasts
13  .close {
14    font-weight: 300;
15    opacity: 1;
16  }
17  // Hide progress bar in all toasts (CSS workaround since JS props don't work as documented in Bootstrap Vue Next 0.40.8)
18  .progress {
19    display: none !important;
20  }
21}
22
23.toast-header {
24  display: flex;
25  align-items: flex-start;
26  background-color: inherit!important; //override specificity
27  border: none;
28  color: theme-color("dark")!important; //override specificity
29  padding-bottom: calc(#{$spacer} / 4); // spacing between header and body
30}
31
32.toast-icon {
33  display: flex;
34  margin-inline-end: 1rem;
35
36  svg {
37    margin-inline-start: -2.5rem;
38  }
39
40  + .close {
41    line-height: .9;
42  }
43}
44
45.toast-body {
46  color: theme-color("dark");
47  padding-top: calc(#{$spacer} / 4); // spacing below header
48  white-space: pre-line; // Preserve newlines from \n characters
49  line-height: 1.6; // Better line spacing for multi-line content and timestamps
50}
51
52// Bootstrap Vue 2 class names (backward compatibility)
53.b-toast-success .toast {
54  border-inline-start-color: theme-color("success")!important;
55  background-color: theme-color-light("success")!important;
56}
57
58.b-toast-info .toast {
59  border-inline-start-color: theme-color("info")!important;
60  background-color: theme-color-light("info")!important;
61}
62
63.b-toast-danger .toast {
64  border-inline-start-color: theme-color("danger")!important;
65  background-color: theme-color-light("danger")!important;
66}
67
68.b-toast-warning .toast {
69  border-inline-start-color: theme-color("warning")!important;
70  background-color: theme-color-light("warning")!important;
71}
72
73// Bootstrap Vue Next class names
74.toast.bg-success {
75  border-inline-start-color: theme-color("success")!important;
76  background-color: theme-color-light("success")!important;
77}
78
79.toast.bg-info {
80  border-inline-start-color: theme-color("info")!important;
81  background-color: theme-color-light("info")!important;
82}
83
84.toast.bg-danger {
85  border-inline-start-color: theme-color("danger")!important;
86  background-color: theme-color-light("danger")!important;
87}
88
89.toast.bg-warning {
90  border-inline-start-color: theme-color("warning")!important;
91  background-color: theme-color-light("warning")!important;
92}
93
94// Override Bootstrap's solid variant backgrounds
95.toast.text-bg-success,
96.toast.text-bg-info,
97.toast.text-bg-danger,
98.toast.text-bg-warning {
99  color: theme-color("dark")!important;
100}
101
102.toast.text-bg-success {
103  border-inline-start-color: theme-color("success")!important;
104  background-color: theme-color-light("success")!important;
105}
106
107.toast.text-bg-info {
108  border-inline-start-color: theme-color("info")!important;
109  background-color: theme-color-light("info")!important;
110}
111
112.toast.text-bg-danger {
113  border-inline-start-color: theme-color("danger")!important;
114  background-color: theme-color-light("danger")!important;
115}
116
117.toast.text-bg-warning {
118  border-inline-start-color: theme-color("warning")!important;
119  background-color: theme-color-light("warning")!important;
120}