style notifications with zurb app

app/assets/stylesheets/_settings.scss

@@ -55,7 +55,7 @@ $include-css: (
   menu-bar: false,
   modal: false,
   motion: false,
-  notification: false,
+  notification: true,
   off-canvas: false,
   panel: false,
   popup: false,

app/assets/stylesheets/content/_notifications.sass

@@ -33,6 +33,7 @@ $nm-font-size: rem-calc(13px)
 $nm-border-radius: rem-calc(2px)
 $nm-box-padding: rem-calc(10px 35px 10px 35px)
 $nm-font-color: $body-font-color
+$nm-notification-width: rem-calc(550)
 
 $nm-color-error-border: #ca3f3f
 $nm-color-error-icon: #ca3f3f
@@ -46,9 +47,9 @@ $nm-color-warning-border: #b5b078
 $nm-color-warning-icon: #000
 $nm-color-warning-background: #f4f4aa
 
-$nm-color-default-border: #8fc0db
-$nm-color-default-background: #e3f5ff
-$nm-padding-default-box: rem-calc(10px)
+$nm-color-border: #8fc0db
+$nm-color-background: #e3f5ff
+$nm-padding-box: rem-calc(10px)
 
 %nm-icon-error
   @extend .icon-attention2:before
@@ -63,33 +64,41 @@ $nm-padding-default-box: rem-calc(10px)
   color: $nm-color-warning-icon
 
 
-@mixin messages-icon
+@mixin messages-icon($top:rem-calc(11), $left:rem-calc(10), $size:rem-calc(18))
   @include icon-common
   position: absolute
-  top: rem-calc(11px)
-  left: rem-calc(10px)
-  font-size: rem-calc(18px)
+  top: $top
+  left: $left
+  font-size: $size
 
 .notification-box
+  @extend %notification
+  +notification-layout($x: left, $y: top, $size: auto, $offset: rem-calc(0))
+  +notification-style($background: $nm-color-background, $color: $nm-font-color, $padding: $nm-padding-box, $radius: $nm-border-radius)
+  .notification-icon
+    +notification-icon($size: $notification-icon-size, $margin: $notification-icon-margin, $align: $notification-icon-align)
+  display: flex
   box-shadow: rem-calc(1px 2px 3px) #dddddd
-  border: rem-calc(1px) solid $nm-color-default-border
-  padding: $nm-padding-default-box
-  border-radius: $nm-border-radius
+  border: rem-calc(1px) solid $nm-color-border
   font-size: $nm-font-size
-  position: relative
   word-wrap: break-word
-  background-color: $nm-color-default-background
-  color: $nm-font-color
-
   & .button
     margin: rem-calc(10px 10px 0 0)
 
-  //@hack adapting to provided styles
-  //messy I dont have all the details for a magic resolve, this might change
-  & p, & ul
-    margin-bottom: 0
-  & p, & ul>li, & .button
-    font-size: $nm-font-size
+  .notification-box--close
+    position: absolute
+    top: rem-calc(10px)
+    right: rem-calc(10px)
+    color: #000000
+    background-color: rgba(0, 0, 0, 0.08)
+    border-radius: rem-calc(50px)
+    width: rem-calc(23px)
+    height: rem-calc(23px)
+    text-align: center
+    font-size: rem-calc(23px)
+    line-height: rem-calc(20px)
+    &:hover
+      text-decoration: none
 
   &.-error, &.-success, &.-warning
     padding: $nm-box-padding
@@ -115,21 +124,12 @@ $nm-padding-default-box: rem-calc(10px)
       @include messages-icon
       @extend %nm-icon-warning
 
-
-  .notification-box--close
-    position: absolute
-    top: rem-calc(10px)
-    right: rem-calc(10px)
-    color: #000000
-    background-color: rgba(0, 0, 0, 0.08)
-    border-radius: rem-calc(50px)
-    width: rem-calc(23px)
-    height: rem-calc(23px)
-    text-align: center
-    font-size: rem-calc(23px)
-    line-height: rem-calc(20px)
-    &:hover
-      text-decoration: none
+  //@hack adapting to provided styles
+  //messy I dont have all the details for a magic resolve, this might change
+  & p, & ul
+    margin-bottom: 0
+  & p, & ul>li, & .button
+    font-size: $nm-font-size
 
 .op-message-container-holder
   position: absolute
@@ -138,8 +138,6 @@ $nm-padding-default-box: rem-calc(10px)
     position: relative
     .notification-box
       min-width: rem-calc(250px)
-      max-width: rem-calc(550px)
+      max-width: $nm-notification-width
       margin-bottom: rem-calc(3px)
       z-index: 9999
-
-