Applied updated design for notifications

css/_mixins.scss

@@ -72,12 +72,6 @@
   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;
-}
-
 /**
 * Mixin styling placeholder
 **/
@@ -95,3 +89,48 @@
     }
   }
 }
+
+@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 {
+.toast-message label,
-  color: #ffffff;
+.toast-message .connected,
-}
+.toast-message .disconnected {
-
+  color: $notificationLinkColor;
-.toast-message .nickname {
-  font-weight: bold;
-}
-
-.toast-message a:hover {
-  color: #cccccc;
   text-decoration: none;
 }
 
+.toast-message a:hover {
+  text-decoration: underline;
+}
+
+.toast-message br {
+  display: none;
+}
+
+// close button
 .toast-close-button {
-  position: relative;
+  color: $notificationColor;
-  right: -0.3em;
+  background: transparent;
-  top: -0.3em;
+
-  float: right;
   font-size: 15px;
-  height: 15px;
+  line-height: 1.2;
-  width: 15px;
+
-  font-weight: bold;
+  height: 20px;
-  color: #ffffff;
+  width: 20px;
-  background: transparent !important;
+  padding: 0;
-  -webkit-text-shadow: 0 1px 0 #ffffff;
+  border: 0;
-  text-shadow: 0 1px 0 #ffffff;
+  margin: -6px -10px 0 0;
-  opacity: 0.8;
+  float: right;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+
-  filter: alpha(opacity=80);
+  cursor: pointer;
+  @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-close-button:hover,
 .toast-close-button:focus {
-  color: #ffffff;
+  @include opacity(1);
-  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="#"`.*/
+.toast {
-button.toast-close-button {
+  color: $notificationColor;
-  padding: 0;
+  background-color: $notificationBackground;
-  cursor: pointer;
+
-  background: transparent;
+  font-size: $notificationFontSize;
-  border: 0;
+
-  -webkit-appearance: none;
+  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-top-full-width {
+
-  top: 0;
+.toast:hover {
-  right: 0;
+  @include opacity(1);
-  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;
+  z-index: $notificationZ;
-  /*overrides*/
-
-}
-#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;
-}
-
-#toast-container.toast-top-full-width > div,
-#toast-container.toast-bottom-full-width > div {
-  width: 100%;
-  margin: auto;
-}
-.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;
-  }
 }
 
 #toast-container.notification-bottom-right {
-  bottom: 140px;
+  bottom: 135px;
-  right: 5px;
+  right: 13px;
 }
 
-#toast-container.notification-bottom-right-center {
+#toast-container * {
-  right: 205px;
+  @include box-sizing(border-box);
 }
 
-#toast-container .toast-info {
+#toast-container .toast {
-  -webkit-box-shadow: none;
+  width: 200px;
-  box-shadow: none;
+  margin: 0 0 8px;
-}
-
-.toast-close-button {
-  right: -7px;
-  top: -19px;
-}
-
-#toast-container .toast-info {
-  background-color: black;
-  border: 1px solid #3a3a3a;
-  width: 220px;
-  padding: 10px 10px 10px 50px;
 }

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 {