Merge pull request #3201 from vcostin/feature/20676-stackable-notifications

[20676] add stackable nodifications in LSG

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.lsg

@@ -46,3 +46,58 @@
   </div>
 </div>
 ```
+
+## Stackable
+
+
+```
+<div class="controls">
+  <button class="button stuck-message" id="test-notifier">click</button>
+</div>
+<div class="notification-box--wrapper">
+  <div class="notification-box--casing"></div>
+</div>
+
+<script type="text\template" id="warning-message-zx00x">
+  <div class="notification-box -warning">
+    <a href="#" class="notification-box--close">&times;</a>
+    <div class="notification-box--content">
+      <p>This is a warning. You may ignore it, but bad things might happen. notificationNo {{number}}</p>
+    </div>
+  </div>
+</script>
+```
+
+```
+@javascript
+(function($){
+
+  var viewArea = $('.notification-box--casing');
+  var notificationMessageTemplate = {
+    notificationNumber: 0,
+    printNotification: function(){
+      this.notificationNumber++;
+      return $('#warning-message-zx00x').html()
+        .replace(/{{number}}/g, this.notificationNumber);
+    }
+  };
+
+  $('#test-notifier').on('click', function(e){
+    e.preventDefault();
+    viewArea.prepend(notificationMessageTemplate.printNotification());
+  });
+
+  $(document).on('click', '.notification-box--close', function(e){
+    e.preventDefault();
+    $(this).closest('.notification-box').animate({
+                'padding-top': 0,
+                'padding-bottom': 0,
+                'height': 0,
+                'opacity': 0
+            }, 'fast', function() {
+                $(this).remove();
+            });
+  });
+
+})(jQuery);
+```

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,18 +124,20 @@ $nm-padding-default-box: rem-calc(10px)
       @include messages-icon
       @extend %nm-icon-warning
 
+  //@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
+.notification-box--wrapper
+  position: absolute
+  top: rem-calc(52px) //this value probably will change
+  width: $nm-notification-width
+  margin-left: -($nm-notification-width / 2)
+  left: 50%
+  .notification-box--casing
+    position: relative
+    .notification-box
+      margin-bottom: rem-calc(3px)