Bulma WIP

Megabit · Feb 22, 2024 · cc69399 · cc69399
1 parent a03dbda
commit cc69399
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 10 deletions.
diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -991,19 +991,34 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     #region Toast
 
-    public override string Toast() => null;
+    public override string Toast() => "toast";
 
-    public override string ToastFade( bool showing, bool hiding ) => null;
+    public override string ToastFade( bool showing, bool hiding ) => showing
+        ? "toast-showing"
+        : hiding
+            ? "toast-hiding"
+            : null;
 
-    public override string ToastVisible( bool visible ) => null;
+    public override string ToastVisible( bool visible ) => visible
+        ? "toast-show"
+        : "toast-hide";
 
-    public override string ToastHeader() => null;
+    public override string ToastHeader() => "toast-header";
 
-    public override string ToastBody() => null;
+    public override string ToastBody() => "toast-body";
 
-    public override string Toaster() => null;
+    public override string Toaster() => "toast-container";
 
-    public override string ToasterPlacement( ToasterPlacement placement ) => null;
+    public override string ToasterPlacement( ToasterPlacement placement ) => placement switch
+    {
+        Blazorise.ToasterPlacement.Top => "toast-container-top",
+        Blazorise.ToasterPlacement.TopStart => "toast-container-top-start",
+        Blazorise.ToasterPlacement.TopEnd => "toast-container-top-end",
+        Blazorise.ToasterPlacement.Bottom => "toast-container-bottom",
+        Blazorise.ToasterPlacement.BottomStart => "toast-container-bottom-start",
+        Blazorise.ToasterPlacement.BottomEnd => "toast-container-bottom-end",
+        _ => null,
+    };
 
     #endregion
 

diff --git a/Source/Blazorise.Bulma/BulmaStyleProvider.cs b/Source/Blazorise.Bulma/BulmaStyleProvider.cs
@@ -59,8 +59,8 @@ public override string OffcanvasBackdropAnimationDuration( bool animated, int an
 
     public override string ToastAnimationDuration( bool animated, int animationDuration )
         => animated
-            ? $"transition-duration: {animationDuration}ms"
-            : "transition-duration: unset";
+            ? $"animation-duration: {animationDuration}ms"
+            : "animation-duration: unset";
 
     #endregion
 }
diff --git a/Source/Blazorise.Bulma/Styles/blazorise.bulma.scss b/Source/Blazorise.Bulma/Styles/blazorise.bulma.scss
@@ -24,6 +24,7 @@
 @import "components/switch";
 @import "components/table";
 @import "components/tabs";
+@import "components/toast";
 
 @import "utilities/align";
 @import "utilities/animations";

diff --git a/Source/Blazorise.Bulma/Styles/components/_toast.scss b/Source/Blazorise.Bulma/Styles/components/_toast.scss
@@ -0,0 +1,118 @@
+.toast-container {
+    width: 100%;
+    z-index: 99999;
+    position: fixed;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+
+
+    &-top {
+        left: 0;
+        right: 0;
+        top: 0;
+        align-items: center;
+    }
+
+    &-top-left {
+        left: 0;
+        top: 0;
+        text-align: left;
+        align-items: flex-start;
+    }
+
+    &-top-right {
+        right: 0;
+        top: 0;
+        text-align: right;
+        align-items: flex-end;
+    }
+
+    &-bottom {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        align-items: center;
+    }
+
+    &-bottom-left {
+        left: 0;
+        bottom: 0;
+        text-align: left;
+        align-items: flex-start;
+    }
+
+    &-bottom-right {
+        right: 0;
+        bottom: 0;
+        text-align: right;
+        align-items: flex-end;
+    }
+}
+
+.toast {
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    position: relative;
+    width: auto;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    white-space: pre-wrap;
+    /*background-color: #3273dc;*/
+    /*color: #fff;*/
+    animation-fill-mode: both;
+    padding: 1.25rem;
+
+    &-show {
+        opacity: 1;
+    }
+
+    &-hide {
+        opacity: 0;
+    }
+
+    &-showing {
+        animation-name: toast-fadeIn
+    }
+
+    &-hiding {
+        animation-name: toast-fadeOut
+    }
+
+    .toast-header {
+        display: flex;
+        align-items: center;
+        font-weight: 700;
+        padding-bottom: .75rem;
+    }
+
+    .toast-body {
+        /*padding-top: .75rem;*/
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 1.5rem;
+    }
+}
+
+@keyframes toast-fadeIn {
+    0% {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes toast-fadeOut {
+    0% {
+        opacity: 1
+    }
+
+    to {
+        opacity: 0
+    }
+}
diff --git a/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.css b/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.css
@@ -3275,6 +3275,107 @@ tr.table-row-selectable:focus[tabindex="0"] {
   border: none;
 }
 
+.toast-container {
+  width: 100%;
+  z-index: 99999;
+  position: fixed;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+.toast-container-top {
+  left: 0;
+  right: 0;
+  top: 0;
+  align-items: center;
+}
+.toast-container-top-left {
+  left: 0;
+  top: 0;
+  text-align: left;
+  align-items: flex-start;
+}
+.toast-container-top-right {
+  right: 0;
+  top: 0;
+  text-align: right;
+  align-items: flex-end;
+}
+.toast-container-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  align-items: center;
+}
+.toast-container-bottom-left {
+  left: 0;
+  bottom: 0;
+  text-align: left;
+  align-items: flex-start;
+}
+.toast-container-bottom-right {
+  right: 0;
+  bottom: 0;
+  text-align: right;
+  align-items: flex-end;
+}
+
+.toast {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  position: relative;
+  width: auto;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  white-space: pre-wrap;
+  /*background-color: #3273dc;*/
+  /*color: #fff;*/
+  animation-fill-mode: both;
+  padding: 1.25rem;
+}
+.toast-show {
+  opacity: 1;
+}
+.toast-hide {
+  opacity: 0;
+}
+.toast-showing {
+  animation-name: toast-fadeIn;
+}
+.toast-hiding {
+  animation-name: toast-fadeOut;
+}
+.toast .toast-header {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  padding-bottom: 0.75rem;
+}
+.toast .toast-body {
+  /*padding-top: .75rem;*/
+}
+.toast:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+@keyframes toast-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes toast-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 .is-vertical-align-baseline {
   vertical-align: baseline !important;
 }

diff --git a/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.min.css b/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.min.css