fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.20

package/src/definitions/modules/toast.less

@@ -8,12 +8,11 @@
  *
  */
 
-
 /*******************************
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'toast';
 
 @import (multiple) '../../theme.config';
@@ -25,417 +24,417 @@
 .ui.toast-container {
     position: fixed;
     z-index: 9999;
-  &.absolute {
-    position: absolute;
-  }
-  &.ui.attached when (@variationToastAttached) {
-    width: 100%;
-    left: 0;
-    & .vertical.attached when (@variationToastVertical) {
-      border-radius: 0;
-    }
-    &.ui.ui .attached.actions .button when (@variationToastActions) {
-      border-radius: 0;
+    &.absolute {
+        position: absolute;
     }
-    & .toast-box {
-      margin: 0;
-      width: 100%;
-      border-radius: 0;
-      & > .ui.toast,
-      > .ui.message {
-        margin-left: 0;
-      }
-      & when (@variationToastFloating) {
-        &.floating,
-        &.hoverfloating:hover {
-          border: none;
-        }
-      }
-      & > .vertical > .content when (@variationToastVertical) {
-        flex: 1;
-      }
-      & > * {
+    &.ui.attached when (@variationToastAttached) {
         width: 100%;
-        border-radius: 0;
-        & > .vertical:not(.actions) when (@variationToastVertical) {
-          flex: 1;
+        left: 0;
+        & .vertical.attached when (@variationToastVertical) {
+            border-radius: 0;
+        }
+        &.ui.ui .attached.actions .button when (@variationToastActions) {
+            border-radius: 0;
+        }
+        & .toast-box {
+            margin: 0;
+            width: 100%;
+            border-radius: 0;
+            & > .ui.toast,
+            > .ui.message {
+                margin-left: 0;
+            }
+            & when (@variationToastFloating) {
+                &.floating,
+                &.hoverfloating:hover {
+                    border: none;
+                }
+            }
+            & > .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;
         }
-      }
-      & > .attached.actions when (@variationToastActions) {
-        margin-right: @toastLeftRightMargin;
-      }
     }
     &.top when (@variationToastTop) {
-      top: 0;
+        &.right when (@variationToastRight) {
+            top: @toastContainerDistance;
+            right: @toastContainerDistance;
+            margin-left: @toastContainerDistance;
+        }
+        &.left when (@variationToastLeft) {
+            top: @toastContainerDistance;
+            left: @toastContainerDistance;
+            margin-right: @toastContainerDistance;
+        }
+        &.center when (@variationToastCenter) {
+            left: 50%;
+            transform: translate(-50%, 0);
+            top: @toastContainerDistance;
+        }
     }
     &.bottom when (@variationToastBottom) {
-      bottom: 0;
-    }
-  }
-  &.top when (@variationToastTop) {
-    &.right when (@variationToastRight) {
-      top: @toastContainerDistance;
-      right: @toastContainerDistance;
-      margin-left: @toastContainerDistance;
-    }
-    &.left when (@variationToastLeft) {
-      top: @toastContainerDistance;
-      left: @toastContainerDistance;
-      margin-right: @toastContainerDistance;
-    }
-    &.center when (@variationToastCenter) {
-      left: 50%;
-      transform: translate(-50%, 0);
-      top: @toastContainerDistance;
-    }
-  }
-  &.bottom when (@variationToastBottom) {
-    &.right when (@variationToastRight) {
-      bottom: @toastContainerDistance;
-      right: @toastContainerDistance;
-      margin-left: @toastContainerDistance;
-    }
-    &.left when (@variationToastLeft) {
-      bottom: @toastContainerDistance;
-      left: @toastContainerDistance;
-      margin-right: @toastContainerDistance;
-    }
-    &.center when (@variationToastCenter) {
-      left: 50%;
-      transform: translate(-50%, 0);
-      bottom: @toastContainerDistance;
-    }
-  }
-  &.centered when (@variationToastCentered) {
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-  }
-  & .visible.toast-box,
-  .animating.toast-box,
-  .toast-box {
-    display: table !important;
-  }
-  &.horizontal when (@variationToastHorizontal) {
-    display: flex;
-    flex-direction: row;
-    & .toast-box {
-      margin-right: @toastBoxMarginRight;
-    }
-  }
-  & .toast-box {
-    margin-bottom: @toastBoxMarginBottom;
-    border-radius: @defaultBorderRadius;
-    cursor: default;
-    will-change: transform, opacity;
-    &:hover {
-      opacity: @toastOpacityOnHover;
-    }
-    &:not(.unclickable):hover {
-      cursor: @toastCursorOnHover;
-    }
-    & when (@variationToastFloating) {
-      &.floating,
-      &.hoverfloating:hover {
-        box-shadow: @floatingShadow;
-        border: @toastBoxBorder;
-      }
-    }
-    & when (@variationToastCompact) {
-      &.compact,
-      > .compact {
-        width: @toastWidth;
-      }
-    }
-    & > .ui.toast,
-      > .ui.message {
-      margin: @toastMargin;
-      position: relative;
-    }
-    & > .attached.progress when (@variationToastProgress) {
-      z-index:1;
-      &.bottom {
-        margin: @toastMarginProgress -@toastLeftRightMargin @toastMarginBottom;
-      }
-      &.top {
-        margin: @toastMarginBottom -@toastLeftRightMargin @toastMarginProgress;
-      }
-      & .bar {
-        min-width: 0;
-      }
-      &.info .bar.bar.bar {
-        background: @toastInfoProgressColor;
-      }
-      &.warning .bar.bar.bar {
-        background: @toastWarningProgressColor;
-      }
-      &.success .bar.bar.bar {
-        background: @toastSuccessProgressColor;
-      }
-      &.error .bar.bar.bar {
-        background: @toastErrorProgressColor;
-      }
-      &.neutral .bar.bar.bar {
-        background: @toastNeutralProgressColor;
-      }
-    }
-    & > .ui.message when (@variationToastMessage) {
-      & > .close.icon when (@variationToastClose){
-        top: @toastCloseTopDistance;
-        right: @toastCloseRightDistance;
-      }
-      & > .actions:last-child when (@variationToastActions) {
-        margin-bottom: @toastActionMargin;
-      }
-      &.icon when (@variationToastIcon) {
-        align-items: inherit;
-        & > :not(.icon):not(.actions) {
-          padding-left: @toastIconMessageContentPadding;
+        &.right when (@variationToastRight) {
+            bottom: @toastContainerDistance;
+            right: @toastContainerDistance;
+            margin-left: @toastContainerDistance;
         }
-        & > i.icon:not(.close) when (@variationToastIcon) {
-          display: inline-block;
-          position: absolute;
-          width: @toastIconMessageWidth;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        &:not(.vertical) {
-          &.actions > i.icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
-            top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
-            transform: none;
-          }
-          &.icon.icon.icon when (@variationToastIcon){
-            display: block;
-          }
+        &.left when (@variationToastLeft) {
+            bottom: @toastContainerDistance;
+            left: @toastContainerDistance;
+            margin-right: @toastContainerDistance;
+        }
+        &.center when (@variationToastCenter) {
+            left: 50%;
+            transform: translate(-50%, 0);
+            bottom: @toastContainerDistance;
         }
-      }
     }
-    & .ui.toast {
-      & > .close.icon when (@variationToastClose){
-        cursor: pointer;
-        margin: 0;
-        opacity: @toastCloseOpacity;
-        transition: @toastCloseTransition;
+    &.centered when (@variationToastCentered) {
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+    }
+    & .visible.toast-box,
+    .animating.toast-box,
+    .toast-box {
+        display: table !important;
+    }
+    &.horizontal when (@variationToastHorizontal) {
+        display: flex;
+        flex-direction: row;
+        & .toast-box {
+            margin-right: @toastBoxMarginRight;
+        }
+    }
+    & .toast-box {
+        margin-bottom: @toastBoxMarginBottom;
+        border-radius: @defaultBorderRadius;
+        cursor: default;
+        will-change: transform, opacity;
         &:hover {
-          opacity: 1;
-        }
-      }
-      &.vertical > .close.icon when (@variationToastVertical) and (@variationToastClose) {
-        margin-top: -@toastCloseTopDistance;
-        margin-right: -@toastCloseTopDistance;
-      }
-      &:not(.vertical) > .close.icon when (@variationToastClose) {
-        position: absolute;
-        top: @toastCloseTopDistance;
-        &:not(.left) {
-          right: @toastCloseRightDistance;
+            opacity: @toastOpacityOnHover;
         }
-        &.left {
-          margin-left: -@toastCloseRightDistance;
+        &:not(.unclickable):hover {
+            cursor: @toastCursorOnHover;
         }
-      }
-    }
-    & .ui.card when (@variationToastCard) {
-      margin:0;
-      &.attached:not(.vertical) when (@variationToastAttached) {
-        &.bottom {
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-          &.horizontal {
-            & > .image > img {
-              border-top-left-radius: 0;
+        & when (@variationToastFloating) {
+            &.floating,
+            &.hoverfloating:hover {
+                box-shadow: @floatingShadow;
+                border: @toastBoxBorder;
             }
-            & > .image:last-child > img {
-              border-top-right-radius: 0;
+        }
+        & when (@variationToastCompact) {
+            &.compact,
+            > .compact {
+                width: @toastWidth;
             }
-          }
         }
-        &.top {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-          &.horizontal {
-            & > .image > img {
-              border-bottom-left-radius: 0;
+        & > .ui.toast,
+        > .ui.message {
+            margin: @toastMargin;
+            position: relative;
+        }
+        & > .attached.progress when (@variationToastProgress) {
+            z-index: 1;
+            &.bottom {
+                margin: @toastMarginProgress -@toastLeftRightMargin @toastMarginBottom;
             }
-            & > .image:last-child > img {
-              border-bottom-right-radius: 0;
+            &.top {
+                margin: @toastMarginBottom -@toastLeftRightMargin @toastMarginProgress;
+            }
+            & .bar {
+                min-width: 0;
+            }
+            &.info .bar.bar.bar {
+                background: @toastInfoProgressColor;
+            }
+            &.warning .bar.bar.bar {
+                background: @toastWarningProgressColor;
+            }
+            &.success .bar.bar.bar {
+                background: @toastSuccessProgressColor;
+            }
+            &.error .bar.bar.bar {
+                background: @toastErrorProgressColor;
+            }
+            &.neutral .bar.bar.bar {
+                background: @toastNeutralProgressColor;
             }
-          }
-        }
-      }
-      &.horizontal.actions when (@variationToastActions) {
-        & > .image > img {
-          border-bottom-left-radius: 0;
         }
-        & > .image:last-child > img {
-          border-bottom-right-radius: 0;
+        & > .ui.message when (@variationToastMessage) {
+            & > .close.icon when (@variationToastClose) {
+                top: @toastCloseTopDistance;
+                right: @toastCloseRightDistance;
+            }
+            & > .actions:last-child when (@variationToastActions) {
+                margin-bottom: @toastActionMargin;
+            }
+            &.icon when (@variationToastIcon) {
+                align-items: inherit;
+                & > :not(.icon):not(.actions) {
+                    padding-left: @toastIconMessageContentPadding;
+                }
+                & > i.icon:not(.close) when (@variationToastIcon) {
+                    display: inline-block;
+                    position: absolute;
+                    width: @toastIconMessageWidth;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+                &:not(.vertical) {
+                    &.actions > i.icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
+                        top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
+                        transform: none;
+                    }
+                    &.icon.icon.icon when (@variationToastIcon) {
+                        display: block;
+                    }
+                }
+            }
         }
-      }
-    }
-    & .progressing {
-      animation-iteration-count: 1;
-      animation-timing-function: linear;
-      &  when (@variationToastProgress) {
-        &.up {
-          animation-name: progressUp;
+        & .ui.toast {
+            & > .close.icon when (@variationToastClose) {
+                cursor: pointer;
+                margin: 0;
+                opacity: @toastCloseOpacity;
+                transition: @toastCloseTransition;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+            &.vertical > .close.icon when (@variationToastVertical) and (@variationToastClose) {
+                margin-top: -@toastCloseTopDistance;
+                margin-right: -@toastCloseTopDistance;
+            }
+            &:not(.vertical) > .close.icon when (@variationToastClose) {
+                position: absolute;
+                top: @toastCloseTopDistance;
+                &:not(.left) {
+                    right: @toastCloseRightDistance;
+                }
+                &.left {
+                    margin-left: -@toastCloseRightDistance;
+                }
+            }
         }
-        &.down {
-          animation-name: progressDown;
+        & .ui.card when (@variationToastCard) {
+            margin: 0;
+            &.attached:not(.vertical) when (@variationToastAttached) {
+                &.bottom {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    &.horizontal {
+                        & > .image > img {
+                            border-top-left-radius: 0;
+                        }
+                        & > .image:last-child > img {
+                            border-top-right-radius: 0;
+                        }
+                    }
+                }
+                &.top {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    &.horizontal {
+                        & > .image > img {
+                            border-bottom-left-radius: 0;
+                        }
+                        & > .image:last-child > img {
+                            border-bottom-right-radius: 0;
+                        }
+                    }
+                }
+            }
+            &.horizontal.actions when (@variationToastActions) {
+                & > .image > img {
+                    border-bottom-left-radius: 0;
+                }
+                & > .image:last-child > img {
+                    border-bottom-right-radius: 0;
+                }
+            }
         }
-      }
-      &.wait {
-        animation-name: progressWait;
-      }
-    }
-    &:hover .pausable.progressing {
-      animation-play-state: paused;
-    }
-    & .ui.toast:not(.vertical) {
-      display:block;
-    }
-    & :not(.comment) {
-      &:not(.card) .actions when (@variationToastActions) {
-        margin: @toastActionMarginTop @toastActionMargin @toastActionMargin @toastActionMargin;
-      }
-      & .actions when (@variationToastActions) {
-        padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
-        text-align: right;
-        &.attached:not(.vertical) when (@variationToastAttached) {
-          margin-right: @toastLeftRightMargin;
+        & .progressing {
+            animation-iteration-count: 1;
+            animation-timing-function: linear;
+            &  when (@variationToastProgress) {
+                &.up {
+                    animation-name: progressUp;
+                }
+                &.down {
+                    animation-name: progressDown;
+                }
+            }
+            &.wait {
+                animation-name: progressWait;
+            }
         }
-        &:not(.basic):not(.attached) {
-          background: @toastActionBackground;
-          border-top: @toastActionBorder;
+        &:hover .pausable.progressing {
+            animation-play-state: paused;
         }
-        &.left {
-          text-align: left;
+        & .ui.toast:not(.vertical) {
+            display: block;
         }
-      }
-    }
-    & when (@variationToastVertical) {
-      & .vertical.actions > .button,
-      & > .vertical > .vertical.vertical,
-      & > .vertical.vertical.vertical {
-        display: flex;
-      }
-    }
-    & :not(.comment) .vertical.actions when (@variationToastVertical) and (@variationToastActions) {
-      flex-direction: column;
-      & > .button {
-        justify-content: center;
-      }
-      &.attached > .button when (@variationToastAttached) {
-        align-items: center;
-      }
-      &:not(.attached) {
-        border-top: 0;
-        margin-top: -@toastActionPaddingBottom;
-        margin-bottom: -@toastActionPaddingBottom;
-        margin-left: @toastActionMarginLeft;
-        justify-content: space-around;
-        &:not(.basic) {
-          border-left: @toastActionBorder;
-        }
-        & > .button:not(:last-child) {
-          margin-bottom: @toastActionMarginBottom;
+        & :not(.comment) {
+            &:not(.card) .actions when (@variationToastActions) {
+                margin: @toastActionMarginTop @toastActionMargin @toastActionMargin @toastActionMargin;
+            }
+            & .actions when (@variationToastActions) {
+                padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
+                text-align: right;
+                &.attached:not(.vertical) when (@variationToastAttached) {
+                    margin-right: @toastLeftRightMargin;
+                }
+                &:not(.basic):not(.attached) {
+                    background: @toastActionBackground;
+                    border-top: @toastActionBorder;
+                }
+                &.left {
+                    text-align: left;
+                }
+            }
         }
-        &.top {
-          justify-content: flex-start;
+        & when (@variationToastVertical) {
+            & .vertical.actions > .button,
+            & > .vertical > .vertical.vertical,
+            & > .vertical.vertical.vertical {
+                display: flex;
+            }
         }
-        &.bottom {
-          justify-content: flex-end;
+        & :not(.comment) .vertical.actions when (@variationToastVertical) and (@variationToastActions) {
+            flex-direction: column;
+            & > .button {
+                justify-content: center;
+            }
+            &.attached > .button when (@variationToastAttached) {
+                align-items: center;
+            }
+            &:not(.attached) {
+                border-top: 0;
+                margin-top: -@toastActionPaddingBottom;
+                margin-bottom: -@toastActionPaddingBottom;
+                margin-left: @toastActionMarginLeft;
+                justify-content: space-around;
+                &:not(.basic) {
+                    border-left: @toastActionBorder;
+                }
+                & > .button:not(:last-child) {
+                    margin-bottom: @toastActionMarginBottom;
+                }
+                &.top {
+                    justify-content: flex-start;
+                }
+                &.bottom {
+                    justify-content: flex-end;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .ui.vertical.attached when (@variationToastVertical) and (@variationToastAttached) {
-  &:not(.left) {
-    &.card when (@variationToastCard) {
-      & > .image > img {
-        border-top-right-radius: 0;
-      }
-      &.horizontal > .image:last-child > img {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-    &.card,
-    &.toast {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &.actions when (@variationToastActions) {
-      border-top-right-radius: @toastBorderRadius;
-      border-bottom-right-radius: @toastBorderRadius;
-      & .button:first-child,
-        .button:last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    &.message when (@variationToastMessage) {
-      border-top-right-radius: 0;
-      border-bottom-left-radius: @toastBorderRadius;
-    }
-  }
-  &.left {
-    &.card when (@variationToastCard) {
-      & > .image > img {
-        border-top-left-radius: 0;
-      }
-      &.horizontal > .image > img {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    &.card,
-    &.toast {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &.actions when (@variationToastActions) {
-      border-top-left-radius: @toastBorderRadius;
-      border-bottom-left-radius: @toastBorderRadius;
-      & .button:first-child,
-        .button:last-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-    &.message.message.message when (@variationToastMessage) {
-      border-top-right-radius: @toastBorderRadius;
-      border-bottom-right-radius: @toastBorderRadius;
-    }
-  }
+    &:not(.left) {
+        &.card when (@variationToastCard) {
+            & > .image > img {
+                border-top-right-radius: 0;
+            }
+            &.horizontal > .image:last-child > img {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+        &.card,
+        &.toast {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+        &.actions when (@variationToastActions) {
+            border-top-right-radius: @toastBorderRadius;
+            border-bottom-right-radius: @toastBorderRadius;
+            & .button:first-child,
+            .button:last-child {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+        &.message when (@variationToastMessage) {
+            border-top-right-radius: 0;
+            border-bottom-left-radius: @toastBorderRadius;
+        }
+    }
+    &.left {
+        &.card when (@variationToastCard) {
+            & > .image > img {
+                border-top-left-radius: 0;
+            }
+            &.horizontal > .image > img {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+        &.card,
+        &.toast {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &.actions when (@variationToastActions) {
+            border-top-left-radius: @toastBorderRadius;
+            border-bottom-left-radius: @toastBorderRadius;
+            & .button:first-child,
+            .button:last-child {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+        &.message.message.message when (@variationToastMessage) {
+            border-top-right-radius: @toastBorderRadius;
+            border-bottom-right-radius: @toastBorderRadius;
+        }
+    }
 }
 
 .ui.attached:not(.vertical) when (@variationToastAttached) {
-  &:not(.top) {
-    &.actions when (@variationToastActions) {
-      border-bottom-left-radius: @toastBorderRadius;
-      border-bottom-right-radius: @toastBorderRadius;
-      & .button:first-child {
-        border-bottom-left-radius: @toastBorderRadius;
-      }
-      & .button:last-child {
-        border-bottom-right-radius: @toastBorderRadius;
-      }
-    }
-  }
-  &.top {
-    &.actions when (@variationToastActions) {
-      border-top-left-radius: @toastBorderRadius;
-      border-top-right-radius: @toastBorderRadius;
-      & .button:first-child {
-        border-top-left-radius: @toastBorderRadius;
-      }
-      & .button:last-child {
-        border-top-right-radius: @toastBorderRadius;
-      }
-    }
-  }
+    &:not(.top) {
+        &.actions when (@variationToastActions) {
+            border-bottom-left-radius: @toastBorderRadius;
+            border-bottom-right-radius: @toastBorderRadius;
+            & .button:first-child {
+                border-bottom-left-radius: @toastBorderRadius;
+            }
+            & .button:last-child {
+                border-bottom-right-radius: @toastBorderRadius;
+            }
+        }
+    }
+    &.top {
+        &.actions when (@variationToastActions) {
+            border-top-left-radius: @toastBorderRadius;
+            border-top-right-radius: @toastBorderRadius;
+            & .button:first-child {
+                border-top-left-radius: @toastBorderRadius;
+            }
+            & .button:last-child {
+                border-top-right-radius: @toastBorderRadius;
+            }
+        }
+    }
 }
 
 /*******************************
@@ -449,149 +448,148 @@
     margin: @toastMargin;
     color: @toastInvertedTextColor;
     background-color: @toastNeutralColor;
-  & > .content > .header {
-    font-weight: bold;
-    color: inherit;
-    margin:0;
-  }
-  &.info when (@variationToastInfo) {
-    background-color: @toastInfoColor;
-    color: @toastTextColor;
-  }
-  &.warning when (@variationToastWarning) {
-    background-color: @toastWarningColor;
-    color: @toastTextColor;
-  }
-  &.success when (@variationToastSuccess) {
-    background-color: @toastSuccessColor;
-    color: @toastTextColor;
-  }
-  &.error when (@variationToastError) {
-    background-color: @toastErrorColor;
-    color: @toastTextColor;
-  }
-  &.neutral {
-    background-color: @toastNeutralColor;
-    color: @toastNeutralTextColor;
-  }
-  & > i.icon:not(.close) when (@variationToastIcon) {
-    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) {
-      & + .content {
-        padding-left: @toastIconContentPadding;
-      }
-    }
-    & > .close.icon + .content when (@variationToastClose){
-      padding-left: @toastCloseDistance;
-    }
-    & > .ui.image when (@variationToastImage) {
-      &.avatar + .content {
-        padding-left: @toastAvatarImageContentPadding;
-        min-height: @toastAvatarImageHeight;
-      }
-      &.mini + .content {
-        padding-left: @toastMiniImageContentPadding;
-        min-height: @toastMiniImageHeight;
-      }
-      &.tiny + .content {
-        padding-left: @toastTinyImageContentPadding;
-        min-height: @toastTinyImageHeight;
-      }
-      &.small + .content {
-        padding-left: @toastSmallImageContentPadding;
-        min-height: @toastSmallImageHeight;
-      }
-    }
-    &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
-      & > .centered.image,
-      > .centered.icon {
-        transform: translateY(-50%);
-        top: 50%;
-      }
+    & > .content > .header {
+        font-weight: bold;
+        color: inherit;
+        margin: 0;
     }
-    &.actions > .centered.image when (@variationToastActions) and (@variationToastImage) {
-      top: e(%("calc(50%% - %d)", @toastImageCenteredAdjustment));
+    &.info when (@variationToastInfo) {
+        background-color: @toastInfoColor;
+        color: @toastTextColor;
     }
-    &.actions > .centered.icon when (@variationToastActions) and (@variationToastIcon) {
-      top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
+    &.warning when (@variationToastWarning) {
+        background-color: @toastWarningColor;
+        color: @toastTextColor;
     }
-  }
-  &.vertical when (@variationToastVertical) {
-    & > .content {
-      flex-grow: 1;
+    &.success when (@variationToastSuccess) {
+        background-color: @toastSuccessColor;
+        color: @toastTextColor;
     }
-    &.attached when (@variationToastAttached){
-      flex-grow: 1;
+    &.error when (@variationToastError) {
+        background-color: @toastErrorColor;
+        color: @toastTextColor;
     }
-    & > .close.icon + .content when (@variationToastClose){
-      padding-left: @toastCloseDistanceVertical;
+    &.neutral {
+        background-color: @toastNeutralColor;
+        color: @toastNeutralTextColor;
     }
-    & when (@variationToastImage) or (@variationToastIcon) {
-      & > .ui.image + .content,
-      > i.icon:not(.close) + .content {
-        padding-left: @toastImageContentPadding;
-      }
+    & > i.icon:not(.close) when (@variationToastIcon) {
+        font-size: @toastIconFontSize;
     }
-    & > .ui.image when (@variationToastImage){
-      align-self: flex-start;
-      flex-shrink:0; /* IE11 fix */
+    &: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) {
+            & + .content {
+                padding-left: @toastIconContentPadding;
+            }
+        }
+        & > .close.icon + .content when (@variationToastClose) {
+            padding-left: @toastCloseDistance;
+        }
+        & > .ui.image when (@variationToastImage) {
+            &.avatar + .content {
+                padding-left: @toastAvatarImageContentPadding;
+                min-height: @toastAvatarImageHeight;
+            }
+            &.mini + .content {
+                padding-left: @toastMiniImageContentPadding;
+                min-height: @toastMiniImageHeight;
+            }
+            &.tiny + .content {
+                padding-left: @toastTinyImageContentPadding;
+                min-height: @toastTinyImageHeight;
+            }
+            &.small + .content {
+                padding-left: @toastSmallImageContentPadding;
+                min-height: @toastSmallImageHeight;
+            }
+        }
+        &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
+            & > .centered.image,
+            > .centered.icon {
+                transform: translateY(-50%);
+                top: 50%;
+            }
+        }
+        &.actions > .centered.image when (@variationToastActions) and (@variationToastImage) {
+            top: e(%("calc(50%% - %d)", @toastImageCenteredAdjustment));
+        }
+        &.actions > .centered.icon when (@variationToastActions) and (@variationToastIcon) {
+            top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
+        }
     }
-    & when (@variationToastImage) or (@variationToastIcon) {
-      & > .centered.image,
-      > .centered.icon {
-        align-self: center;
-      }
+    &.vertical when (@variationToastVertical) {
+        & > .content {
+            flex-grow: 1;
+        }
+        &.attached when (@variationToastAttached) {
+            flex-grow: 1;
+        }
+        & > .close.icon + .content when (@variationToastClose) {
+            padding-left: @toastCloseDistanceVertical;
+        }
+        & when (@variationToastImage) or (@variationToastIcon) {
+            & > .ui.image + .content,
+            > i.icon:not(.close) + .content {
+                padding-left: @toastImageContentPadding;
+            }
+        }
+        & > .ui.image when (@variationToastImage) {
+            align-self: flex-start;
+            flex-shrink: 0; /* IE11 fix */
+        }
+        & when (@variationToastImage) or (@variationToastIcon) {
+            & > .centered.image,
+            > .centered.icon {
+                align-self: center;
+            }
+        }
     }
-  }
 
-  &.attached when (@variationToastAttached) {
-    &.bottom {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-    &.top {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    &.attached when (@variationToastAttached) {
+        &.bottom {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        &.top {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
     }
-  }
 
-  &.ui.ui.ui.image when (@variationToastImage) {
-    padding: 0;
-    & > .content {
-      padding-top: @inputVerticalPadding;
-      padding-bottom: @inputVerticalPadding;
-      padding-right: @inputHorizontalPadding;
-    }
-    & > .actions when (@variationToastActions) {
-      margin: 0;
-    }
-    & > .ui.image {
-      border-top-left-radius: @defaultBorderRadius;
-      border-bottom-left-radius: @defaultBorderRadius;
-      &.mini {
-        min-width: @toastImageMiniImageAdjustment;
-        & + .content {
-          min-height: @toastImageMiniImageAdjustment;
-          padding-left: @toastImageMiniImagePadding;
-        }
-      }
-    }
-  }
+    &.ui.ui.ui.image when (@variationToastImage) {
+        padding: 0;
+        & > .content {
+            padding-top: @inputVerticalPadding;
+            padding-bottom: @inputVerticalPadding;
+            padding-right: @inputHorizontalPadding;
+        }
+        & > .actions when (@variationToastActions) {
+            margin: 0;
+        }
+        & > .ui.image {
+            border-top-left-radius: @defaultBorderRadius;
+            border-bottom-left-radius: @defaultBorderRadius;
+            &.mini {
+                min-width: @toastImageMiniImageAdjustment;
+                & + .content {
+                    min-height: @toastImageMiniImageAdjustment;
+                    padding-left: @toastImageMiniImagePadding;
+                }
+            }
+        }
+    }
 }
 
-
 .ui.hoverfloating.message:hover when (@variationToastMessage) and (@variationToastFloating) {
-  box-shadow: 0 0 0 1px inset, @floatingShadow;
+    box-shadow: 0 0 0 1px inset, @floatingShadow;
 }
 
 .ui.center.toast-container .toast-box,
@@ -604,114 +602,114 @@
 }
 
 & 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;
+    .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;
+        & > .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 .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;
+    .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;
+        &:not(.attached) > .button:not(.fluid) {
+            margin-left: @toastActionCenteredMargin;
+            margin-right: @toastActionCenteredMargin;
+        }
     }
-  }
 }
 
-/*--------------
+/* --------------
      Colors
 -------------- */
 & when not (@variationToastColors = false) {
-  each(@variationToastColors, {
-    @color: @value;
-    @c: @colors[@@color][color];
-    @l: @colors[@@color][light];
+    each(@variationToastColors, {
+        @color: @value;
+        @c: @colors[@@color][color];
+        @l: @colors[@@color][light];
 
-    .ui.@{color}.toast {
-      background-color: @c;
-      color: @toastTextColor;
-    }
-    & when (@variationToastInverted) {
-      .ui.inverted.@{color}.toast,
-      .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
-        background-color: @l;
-        color: @toastInvertedTextColor;
-      }
-    }
-  })
+        .ui.@{color}.toast {
+            background-color: @c;
+            color: @toastTextColor;
+        }
+        & when (@variationToastInverted) {
+            .ui.inverted.@{color}.toast,
+            .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
+                background-color: @l;
+                color: @toastInvertedTextColor;
+            }
+        }
+    })
 }
 
 & when (@variationToastInverted) {
-  .ui.inverted.toast {
-    color: @toastTextColor;
-    background-color: @toastInvertedColor;
-  }
+    .ui.inverted.toast {
+        color: @toastTextColor;
+        background-color: @toastInvertedColor;
+    }
 }
 
 @media only screen and (max-width: @mobileToastBreakpoint) {
-  .ui.toast-container .toast-box {
-    &.toast-box,
-    & > .compact,
-    & > .vertical > *,
-    & > * {
-      width: auto;
-      max-width: 100%;
-    }
-    & > *:not(.vertical) {
-      min-width: @mobileWidth;
-    }
-    & when (@variationToastCard) {
-      & > .ui.card.horizontal,
-      > .vertical > .ui.horizontal.card {
-        min-width: initial;
-      }
-    }
-  }
+    .ui.toast-container .toast-box {
+        &.toast-box,
+        & > .compact,
+        & > .vertical > *,
+        & > * {
+            width: auto;
+            max-width: 100%;
+        }
+        & > *:not(.vertical) {
+            min-width: @mobileWidth;
+        }
+        & when (@variationToastCard) {
+            & > .ui.card.horizontal,
+            > .vertical > .ui.horizontal.card {
+                min-width: initial;
+            }
+        }
+    }
 }
 
-/*---------------
+/* ---------------
    Progress Bar
- ----------------*/
+ ---------------- */
 &  when (@variationToastProgress) {
-  @keyframes progressDown {
-    0% {
-      width: 100%;
+    @keyframes progressDown {
+        0% {
+            width: 100%;
+        }
+        100% {
+            width: 0;
+        }
     }
-    100% {
-      width: 0;
+    @keyframes progressUp {
+        0% {
+            width: 0;
+        }
+        100% {
+            width: 100%;
+        }
     }
-  }
-  @keyframes progressUp {
+}
+@keyframes progressWait {
     0% {
-      width: 0;
+        opacity: 1;
     }
     100% {
-      width: 100%;
+        opacity: 0;
     }
-  }
-}
-@keyframes progressWait {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
 }
 
 .loadUIOverrides();