add stackable nodifications in LSG

app/assets/stylesheets/content/_notifications.lsg

@@ -46,3 +46,59 @@
   </div>
 </div>
 ```
+
+## Stackable
+
+
+```
+<div class="example" id="example-zx00x">
+  <div class="controls">
+    <button class="button stuck-message" id="test-notifier">click</button>
+  </div>
+  <div class="content" style="height: 200px;"></div>
+</div>
+
+<script type="text\template" id="warning-message-zx00x">
+  <div class="notification-box -warning -stack-top-center">
+    <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 workArea = $('#example-zx00x');
+  var viewArea = workArea.find('.content');
+  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
+            }, 300, function() {
+                $(this).remove();
+            });
+  });
+
+})(jQuery);
+```

app/assets/stylesheets/content/_notifications.sass

@@ -81,6 +81,13 @@ $nm-padding-default-box: rem-calc(10px)
   background-color: $nm-color-default-background
   color: $nm-font-color
 
+  &.-stack-top-center
+    margin-left: auto
+    margin-right: auto
+    left: 0
+    right: 0
+    z-index: 9999
+
   & .button
     margin: rem-calc(10px 10px 0 0)