feat(toast): top and bottom attached and centered support

new position variants top attached and bottom attached which will show the toast over the whole width of the screen. Just like notificatons on mobile devices
support for centered content and actions as we now have in other components as well
fixed a visual bug when more than 2 vertical attached action buttons were used
made compact variant unselectable at compile time

Author: lubber-de

src/definitions/modules/toast.less

@@ -25,6 +25,42 @@
 .ui.toast-container {
     position: fixed;
     z-index: 9999;
+  &.ui.attached when (@variationToastAttached) {
+    width: 100%;
+    left: 0;
+    margin-top: -@toastAttachedMargin;
+    & .vertical.attached when (@variationToastVertical) {
+      border-radius: 0;
+    }
+    &.ui.ui .attached.actions .button when (@variationToastActions) {
+      border-radius: 0;
+    }
+    & .toast-box {
+      margin-top: -@toastAttachedMargin;
+      margin-bottom: 0;
+      width: 100%;
+      border-radius: 0;
+      & > .vertical > .content when (@variationToastVertical) {
+        flex: 1;
+      }
+      & > * {
+        width: 100%;
+        border-radius: 0;
+        & > .vertical:not(.actions) when (@variationToastVertical) {
+          flex: 1;
+        }
+      }
+      & > .attached.actions when (@variationToastActions) {
+        margin-right: @toastLeftRightMargin;
+      }
+    }
+    &.top when (@variationToastTop) {
+      top: 0;
+    }
+    &.bottom when (@variationToastBottom) {
+      bottom: 0;
+    }
+  }
   &.top when (@variationToastTop) {
     &.right when (@variationToastRight) {
       top: @toastContainerDistance;
@@ -88,9 +124,11 @@
         border: @toastBoxBorder;
       }
     }
-    &.compact,
-    > .compact {
-      width: @toastWidth;
+    & when (@variationToastCompact) {
+      &.compact,
+      > .compact {
+        width: @toastWidth;
+      }
     }
     & > .ui.toast,
       > .ui.message {
@@ -348,9 +386,6 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
-      & .button:not(:first-child):not(:last-child) {
-        margin-left: -@toastLeftRightMargin;
-      }
     }
     &.message.message.message when (@variationToastMessage) {
       border-top-right-radius: @toastBorderRadius;
@@ -426,8 +461,15 @@
     font-size: @toastIconFontSize;
   }
   &:not(.vertical) {
+    &:not(.centered):not(.center) {
+      & > i.icon:not(.close) when (@variationToastIcon) {
+        position: absolute;
+      }
+      & > .ui.image when (@variationToastImage) {
+        position: absolute;
+      }
+    }
     & > i.icon:not(.close) when (@variationToastIcon) {
-      position: absolute;
       & + .content {
         padding-left: @toastIconContentPadding;
       }
@@ -436,7 +478,6 @@
       padding-left: @toastCloseDistance;
     }
     & > .ui.image when (@variationToastImage) {
-      position: absolute;
       &.avatar + .content {
         padding-left: @toastAvatarImageContentPadding;
         min-height: @toastAvatarImageHeight;
@@ -454,7 +495,7 @@
         min-height: @toastSmallImageHeight;
       }
     }
-    & when (@variationToastImage) or (@variationToastIcon) {
+    &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
       & > .centered.image,
       > .centered.icon {
         transform: translateY(-50%);
@@ -516,6 +557,36 @@
     margin-right: auto;
 }
 
+& when (@variationToastCentered) {
+  .ui.ui.toast-container .toast-box .centered.toast,
+  .ui.ui.toast-container .toast-box .center.aligned.toast {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+
+    & > .content,
+    & > .ui.image,
+    & > i.icon:not(.close) {
+      align-self: center;
+    }
+  }
+
+  .ui.toast-container .toast-box .toast .centered.content,
+  .ui.toast-container .toast-box .toast .center.aligned.content {
+    text-align: center;
+  }
+
+  .ui.toast-container .toast-box .centered.actions,
+  .ui.toast-container .toast-box .center.aligned.actions {
+    text-align: center;
+
+    &:not(.attached) > .button:not(.fluid) {
+      margin-left: @toastActionCenteredMargin;
+      margin-right: @toastActionCenteredMargin;
+    }
+  }
+}
+
 /*--------------
      Colors
 -------------- */

src/themes/default/globals/variation.variables

@@ -552,6 +552,8 @@
 @variationToastActions: true;
 @variationToastVertical: true;
 @variationToastAttached: true;
+@variationToastCompact: true;
+@variationToastCentered: true;
 
 /* Transition */
 @variationTransitionDisabled: true;

src/themes/default/modules/toast.variables

@@ -18,6 +18,7 @@
 @toastTextColor: @invertedTextColor;
 @toastInvertedTextColor: @textColor;
 @toastNeutralTextColor: @textColor;
+@toastAttachedMargin: 1px;
 
 /* Mobile */
 @mobileToastBreakpoint: 420px;
@@ -81,4 +82,5 @@
 @toastActionMarginLeft: 1em;
 @toastActionMarginBottom: 0.3em;
 @toastActionPadding: 0.5em;
-@toastActionPaddingBottom: 0.75em;
+@toastActionPaddingBottom: 0.75em;
+@toastActionCenteredMargin: 0.25em;