X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=scss%2Fbootstrap%2F_toasts.scss;fp=scss%2Fbootstrap%2F_toasts.scss;h=d6ba4ca1413dcf80638da862b0a8f3a67d97cacf;hb=8430d6a060aeeb59f6bfd733e3abbae2927f4b25;hp=0000000000000000000000000000000000000000;hpb=40df769531f3a9fc7d9567586a8c0aa26964771a;p=roojs1

diff --git a/scss/bootstrap/_toasts.scss b/scss/bootstrap/_toasts.scss
new file mode 100644
index 0000000000..d6ba4ca141
--- /dev/null
+++ b/scss/bootstrap/_toasts.scss
@@ -0,0 +1,34 @@
+.toast {
+  display: none;
+  max-width: $toast-max-width;
+  overflow: hidden; // cheap rounded corners on nested items
+  font-size: $toast-font-size; // knock it down to 14px
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+  border: $toast-border-width solid $toast-border-color;
+  border-radius: $toast-border-radius;
+  box-shadow: $toast-box-shadow;
+  backdrop-filter: blur(10px);
+
+  + .toast {
+    margin-top: $toast-padding-x;
+  }
+
+  &.show {
+    display: block;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: $toast-padding-y $toast-padding-x;
+  color: $toast-header-color;
+  background-color: $toast-header-background-color;
+  background-clip: padding-box;
+  border-bottom: $toast-border-width solid $toast-header-border-color;
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+}