Applied updated design for notifications

css/_mixins.scss

@@ -19,11 +19,11 @@
 }
 
 @mixin flex() {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
 }
 
 /**
@@ -45,53 +45,92 @@
 }
 
 @mixin circle($diameter) {
-    width: $diameter;
-    height: $diameter;
-    border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+  border-radius: 50%;
 }
 
 @mixin absoluteAligning($sizeX, $sizeY) {
-    top: 50%;
-    left: 50%;
-    position: absolute;
-    @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
 }
 
 @mixin transform($func) {
-    -moz-transform: $func;
-    -ms-transform: $func;
-    -webkit-transform: $func;
-    -o-transform: $func;
-    transform: $func;
+  -moz-transform: $func;
+  -ms-transform: $func;
+  -webkit-transform: $func;
+  -o-transform: $func;
+  transform: $func;
 }
 
 @mixin transition($transition...) {
-    -moz-transition:    $transition;
-    -o-transition:      $transition;
-    -webkit-transition: $transition;
-    transition:         $transition;
-}
-
-@mixin box-shadow($type, $h, $y, $blur, $color) {
-    -webkit-box-shadow: $type $h $y $blur $color;
-    -moz-box-shadow: $type $h $y $blur $color;
-    box-shadow: $type $h $y $blur $color;
+  -moz-transition:    $transition;
+  -o-transition:      $transition;
+  -webkit-transition: $transition;
+  transition:         $transition;
 }
 
 /**
 * Mixin styling placeholder
 **/
 @mixin placeholder() {
-    $selectors: (
-        "::-webkit-input-placeholder",
-        "::-moz-placeholder",
-        ":-moz-placeholder",
-        ":-ms-input-placeholder"
-    );
-
-    @each $selector in $selectors {
-        #{$selector} {
-            @content;
-        }
+  $selectors: (
+          "::-webkit-input-placeholder",
+          "::-moz-placeholder",
+          ":-moz-placeholder",
+          ":-ms-input-placeholder"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
     }
+  }
+}
+
+@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow: inset $h $y $blur $color;
+    -moz-box-shadow: inset $h $y $blur $color;
+    box-shadow: inset $h $y $blur $color;
+  } @else {
+    -webkit-box-shadow: $h $y $blur $color;
+    -moz-box-shadow: $h $y $blur $color;
+    box-shadow: $h $y $blur $color;
+  }
+}
+
+@mixin no-box-shadow {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+@mixin box-sizing($box-model) {
+  -webkit-box-sizing: $box-model; // Safari <= 5
+     -moz-box-sizing: $box-model; // Firefox <= 19
+          box-sizing: $box-model;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  border-radius: $radius;
+  /* stops bg color from leaking outside the border: */
+  background-clip: padding-box;
+}
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
+  filter: alpha(opacity=$opacity-ie); //IE8
+}
+
+@mixin text-truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

css/_toastr.scss

@@ -7,206 +7,100 @@
  *
  * Author: John Papa and Hans Fjällemark
  * Project: https://github.com/CodeSeven/toastr
+ * 
+ * Last updated: October 13, 2016
  */
-.toast-title {
+
+.toast-title,
+.toast-message .nickname {
   font-weight: bold;
+  margin: 0 0 3px;
+  @include text-truncate;
 }
+
 .toast-message {
   -ms-word-wrap: break-word;
   word-wrap: break-word;
 }
+
 .toast-message a,
-.toast-message label {
-  color: #ffffff;
+.toast-message label,
+.toast-message .connected,
+.toast-message .disconnected {
+  color: $notificationLinkColor;
+  text-decoration: none;
 }
 
-.toast-message .nickname {
-  font-weight: bold;
+.toast-message a:hover {
+  text-decoration: underline;
 }
 
-.toast-message a:hover {
-  color: #cccccc;
-  text-decoration: none;
+.toast-message br {
+  display: none;
 }
 
+// close button
 .toast-close-button {
-  position: relative;
-  right: -0.3em;
-  top: -0.3em;
-  float: right;
+  color: $notificationColor;
+  background: transparent;
+
   font-size: 15px;
-  height: 15px;
-  width: 15px;
-  font-weight: bold;
-  color: #ffffff;
-  background: transparent !important;
-  -webkit-text-shadow: 0 1px 0 #ffffff;
-  text-shadow: 0 1px 0 #ffffff;
-  opacity: 0.8;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-  filter: alpha(opacity=80);
-}
+  line-height: 1.2;
 
-.toast-close-button:hover,
-.toast-close-button:focus {
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 1;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  filter: alpha(opacity=100);
-}
-/*Additional properties for button version
- iOS requires the button element instead of an anchor tag.
- If you want the anchor version, it requires `href="#"`.*/
-button.toast-close-button {
+  height: 20px;
+  width: 20px;
   padding: 0;
-  cursor: pointer;
-  background: transparent;
   border: 0;
-  -webkit-appearance: none;
-}
-.toast-top-full-width {
-  top: 0;
-  right: 0;
-  width: 100%;
-}
-.toast-bottom-full-width {
-  bottom: 0;
-  right: 0;
-  width: 100%;
-}
-.toast-top-left {
-  top: 12px;
-  left: 12px;
-}
-.toast-top-right {
-  top: 12px;
-  right: 12px;
-}
-.toast-bottom-right {
-  right: 12px;
-  bottom: 12px;
-}
-.toast-bottom-left {
-  bottom: 12px;
-  left: 12px;
-}
-#toast-container {
-  position: fixed;
-  z-index: 1012;
-  /*overrides*/
+  margin: -6px -10px 0 0;
+  float: right;
 
-}
-#toast-container * {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-#toast-container > div {
-  margin: 0 0 6px;
-  padding: 15px 15px 15px 15px;
-  width: 300px;
-  -moz-border-radius: 3px 3px 3px 3px;
-  -webkit-border-radius: 3px 3px 3px 3px;
-  border-radius: 3px 3px 3px 3px;
-  background-position: 15px center;
-  background-repeat: no-repeat;
-  -moz-box-shadow: 0 0 12px #999999;
-  -webkit-box-shadow: 0 0 12px #999999;
-  box-shadow: 0 0 12px #999999;
-  color: #ffffff;
-  opacity: 0.8;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-  filter: alpha(opacity=80);
-}
-#toast-container > :hover {
-  -moz-box-shadow: 0 0 12px #000000;
-  -webkit-box-shadow: 0 0 12px #000000;
-  box-shadow: 0 0 12px #000000;
-  opacity: 1;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  filter: alpha(opacity=100);
   cursor: pointer;
-}
-#toast-container .toast-info,
-#toast-container .toast-success,
-#toast-container .toast-error,
-#toast-container .toast-warning
-{
-  padding: 10px 10px 10px 10px !important;
+  @include opacity(0.4);
+  /* Additional properties for button version
+  iOS requires the button element instead of an anchor tag.
+  If you want the anchor version, it requires `href="#"`. */
+  -webkit-appearance: none;
 }
 
-#toast-container.toast-top-full-width > div,
-#toast-container.toast-bottom-full-width > div {
-  width: 100%;
-  margin: auto;
+.toast-close-button:hover,
+.toast-close-button:focus {
+  @include opacity(1);
 }
+
+
 .toast {
-  background-color: #030303;
-}
-.toast-success {
-  background-color: #51a351;
-}
-.toast-error {
-  background-color: #bd362f;
-}
-.toast-info {
-  background-color: #2f96b4;
-}
-.toast-warning {
-  background-color: #f89406;
-}
-/*Responsive Design*/
-@media all and (max-width: 240px) {
-  #toast-container > div {
-    padding: 8px 8px 8px 8px;
-    width: 11em;
-  }
-  #toast-container .toast-close-button {
-    right: -0.2em;
-    top: -0.2em;
-  }
-}
-@media all and (min-width: 241px) and (max-width: 480px) {
-  #toast-container > div {
-    padding: 8px 8px 8px 8px;
-    width: 18em;
-  }
-  #toast-container .toast-close-button {
-    right: -0.2em;
-    top: -0.2em;
-  }
-}
-@media all and (min-width: 481px) and (max-width: 768px) {
-  #toast-container > div {
-    padding: 15px 15px 15px 15px;
-    width: 25em;
-  }
+  color: $notificationColor;
+  background-color: $notificationBackground;
+
+  font-size: $notificationFontSize;
+
+  padding: $notificationPadding;
+  border: 1px solid lighten($notificationBackground, 10%);
+
+  @include border-radius($notificationBorderRadius); 
+  @include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3));
+  @include opacity(0.9);
 }
 
-#toast-container.notification-bottom-right {
-  bottom: 140px;
-  right: 5px;
+.toast:hover {
+  @include opacity(1);
 }
 
-#toast-container.notification-bottom-right-center {
-  right: 205px;
+#toast-container {
+  position: fixed;
+  z-index: $notificationZ;
 }
 
-#toast-container .toast-info {
-  -webkit-box-shadow: none;
-  box-shadow: none;
+#toast-container.notification-bottom-right {
+  bottom: 135px;
+  right: 13px;
 }
 
-.toast-close-button {
-  right: -7px;
-  top: -19px;
+#toast-container * {
+  @include box-sizing(border-box);
 }
 
-#toast-container .toast-info {
-  background-color: black;
-  border: 1px solid #3a3a3a;
-  width: 220px;
-  padding: 10px 10px 10px 50px;
+#toast-container .toast {
+  width: 200px;
+  margin: 0 0 8px;
 }

css/_variables.scss

@@ -66,6 +66,16 @@ $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
 $feedbackCancelFontColor: #333;
 
+// Notifications
+$notificationFontSize: 13px;
+$notificationColor: #FFFFFF;
+$notificationBackground: $tooltipBg;
+$notificationTitleColor: $notificationColor;
+$notificationMessageColor: $notificationColor;
+$notificationPadding: 15px 20px;
+$notificationBorderRadius: 4px;
+$notificationLinkColor: $notificationColor;
+
 /**
  * Misc.
  */
@@ -79,6 +89,7 @@ $sidebarWidth: 200px;
 $tooltipsZ: 901;
 $toolbarZ: 900;
 $overlayZ: 800;
+$notificationZ: 1012;
 
 /**
  * Font Colors TODO: Change colors when general dialogs are implemented.

css/buttons/_button-control.scss

@@ -34,7 +34,7 @@
     }
 
     &:active {
-        @include box-shadow(inset, 0, 0, 1px, $buttonShadowColor);
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
     }
 
     &_light {