Core: Toast - updated MD styles

Author: nolimits4web

src/core/components/toast/toast-ios.less

@@ -2,16 +2,49 @@
   @import (multiple) '../../less/colors-ios.less';
 
   .toast {
+    transition-duration: 450ms;
     background: rgba(0,0,0,0.75);
     opacity: 0;
+    width: 100%;
+    left: 0;
 
     @supports (backdrop-filter: blur(10px)) {
       background: rgba(0,0,0,0.65);
       backdrop-filter: blur(10px);
     }
 
     &.toast-center {
+      width: auto;
+      left: 50%;
       border-radius: 8px;
+      transform: translate3d(-50%, -50%, 0);
+      &.modal-in {
+        transform: translate3d(-50%, -50%, 0);
+        opacity: 1;
+      }
+    }
+    &.toast-top {
+      top: 0;
+      transform: translate3d(0, -100%, 0);
+      &.modal-in {
+        transform: translate3d(0, 0%, 0);
+        opacity: 1;
+      }
+    }
+    &.toast-bottom {
+      bottom: 0;
+      transform: translate3d(0, 100%, 0);
+      &.modal-in {
+        transform: translate3d(0, 0%, 0);
+        opacity: 1;
+      }
+    }
+    @media (min-width: 569px) {
+      left: 50%;
+      margin-left: -568px / 2;
+      &.toast-center {
+        margin-left: 0;
+      }
     }
 
     @media (min-width: 569px) {
@@ -24,6 +57,8 @@
       }
     }
     @media (min-width: 1024px) {
+      margin-left: 0;
+      width: auto;
       &.toast-bottom, &.toast-top {
         left: 15px;
       }

src/core/components/toast/toast-md.less

@@ -1,15 +1,50 @@
 .md {
   @import (multiple) '../../less/colors-md.less';
   .toast {
+    transition-duration: 200ms;
+    border-radius: 4px;
     background: #323232;
+    opacity: 0;
+    left: 8px;
+    width: ~"calc(100% - 16px)";
+    transform: scale(0.9);
+    &.modal-in {
+      transform: scale(1);
+      opacity: 1;
+    }
+    &.modal-out {
+      transform: scale(1);
+      opacity: 0;
+    }
     &.toast-center {
-      border-radius: 2px;
+      left: 50%;
+      width: auto;
       background: rgba(0,0,0,0.75);
+      transform: scale(0.9) translate3d(-55%, -55%, 0);
+      &.modal-in {
+        transform: scale(1) translate3d(-50%, -50%, 0);
+      }
+      &.modal-out {
+        transform: scale(1) translate3d(-50%, -50%, 0);
+      }
     }
-    @media (min-width: 569px) {
-      border-radius: 2px;
+    &.toast-bottom {
+      bottom: 8px;
+    }
+    &.toast-top {
+      top: 8px;
+    }
+    // 568 + 16
+    @media (min-width: 584px) {
+      left: 50%;
+      margin-left: -568px / 2;
+      &.toast-center {
+        margin-left: 0;
+      }
     }
     @media (min-width: 1024px) {
+      margin-left: 0;
+      width: auto;
       &.toast-bottom, &.toast-top {
         left: 24px;
       }
@@ -47,8 +82,8 @@
       }
       @media (min-width: 1024px) {
         &.modal-in {
-          transform: translate3d(0, ~"calc(0px - constant(safe-area-inset-bottom))", 0);
-          transform: translate3d(0, ~"calc(0px - env(safe-area-inset-bottom))", 0);
+          margin-bottom: constant(safe-area-inset-bottom);
+          margin-bottom: env(safe-area-inset-bottom);
         }
       }
     }

src/core/components/toast/toast.less

@@ -1,16 +1,15 @@
 /* === Toast === */
 .toast {
-  transition-duration: 450ms;
   transition-property: transform, opacity;
   position: absolute;
-  width: 100%;
   max-width: 568px;
-  left: 0;
   z-index: 20000;
   color: #fff;
   font-size: 14px;
   box-sizing: border-box;
-
+  &.modal-in {
+    opacity: 1;
+  }
   .toast-content {
     display: flex;
     justify-content: space-between;
@@ -46,46 +45,11 @@
   }
   &.toast-center {
     top: 50%;
-    left: 50%;
-    width: auto;
     opacity: 0;
-    transform: translate3d(-50%, -50%, 0);
-    &.modal-in {
-      transform: translate3d(-50%, -50%, 0);
-      opacity: 1;
-    }
-  }
-  &.toast-top {
-    top: 0;
-    transform: translate3d(0, -100%, 0);
-    &.modal-in {
-      transform: translate3d(0, 0%, 0);
-      opacity: 1;
-    }
-  }
-  &.toast-bottom {
-    bottom: 0;
-    transform: translate3d(0, 100%, 0);
-    &.modal-in {
-      transform: translate3d(0, 0%, 0);
-      opacity: 1;
-    }
   }
 
-  @media (min-width: 569px) {
-    left: 50%;
-    margin-left: -568px / 2;
-    &.toast-center {
-      margin-left: 0;
-    }
-  }
   @media (min-width: 1024px) {
     opacity: 0;
-    margin-left: auto;
-    width: auto;
-    &.toast-center {
-      margin-left: 0;
-    }
   }
 }