Enhaced Notifications

src/modules/Lungo.Notification.coffee

@@ -79,16 +79,17 @@ Lungo.Notification = do(lng = Lungo) ->
 
   ###
   ###
-  html = (markup, button) ->
-    markup += (if (button) then "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>" else "")
-    _show markup, "html"
-
+  html = (markup, button, style, seconds) ->
+    if button
+      markup += "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>"
+    _show markup, "html #{style}"
+    _hide seconds
 
   ###
   ###
   push = (title, icon) ->
     _show _markup(title, null, icon), "push", false
-    # _hide seconds = 5
+    _hide seconds = 5
 
   _init = ->
     lng.dom(SELECTOR.BODY).append MARKUP_NOTIFICATION

src/stylesheets/__init.styl

@@ -8,6 +8,7 @@ ASIDE_WIDTH_SMALL      = 64px
 ASIDE_SMALL_ICON       = 48px
 
 DEFAULT_TRANSITION     = easeOutSine
+DEFAULT_TRANSITION     = easeInCubic
 TRANSITION_TIME        = 400ms
 
 FONT_SIZE_TINY         = 11px

src/stylesheets/lungo.widget.notification.styl

@@ -33,23 +33,23 @@ WINDOW_WIDTH = 280px
     position: relative
     opacity: 0
     text-align: center
-    transition-property opacity, margin-top
     transition-duration TRANSITION_TIME
     transition-timing-function DEFAULT_TRANSITION
     backface-visibility hidden
+
     &.show
       opacity: 1
-      margin-top: 0% !important
 
     &:not(.push)
+      transition-property opacity, margin-top
       margin-top: 100%
+      &.show
+        margin-top: 0%
 
     &.growl
       width: LOADING
       height: LOADING
       padding: 0 8px
-      margin-top: 100%
-      &.show
       & > .icon
         font-size: 52px
         line-height: LOADING
@@ -63,8 +63,11 @@ WINDOW_WIDTH = 280px
         display: block
 
     &.success, &.error, &.confirm, &.html
-      padding-top: 16px
       width: WINDOW_WIDTH
+      margin-top: 100%
+
+    &.success, &.error, &.confirm
+      padding-top: 16px
       & > .icon
         font-size: 5em
         line-height: 1.0em
@@ -90,7 +93,10 @@ WINDOW_WIDTH = 280px
       line-height: H
       padding: 0 8px
       width: 100%
-      margin-top: -(H)
+      transition-property opacity, top
+      top: -(H)
+      &.show
+        top: 0px
       & .icon
         font-size: FONT_SIZE_LARGE
         float: left

src/stylesheets/theme/theme.widget.notification.styl

@@ -19,6 +19,9 @@
     border-radius FORM_border_radius
     &.growl
       background: rgba(0,0,0,0.75)
+      & strong
+        opacity: 0.75
+        font-weight: 400
     &:not(.growl)
       box-shadow(0 0 8px #444)
       & button, .button
@@ -40,5 +43,9 @@
       & .title
         background: THEME
         color: #fff
+        border-radius FORM_border_radius FORM_border_radius 0px 0px
     &.push
       background: rgba(0,0,0,0.65)
+    & button, & .button
+      &:last-child
+        border-radius 0px 0px FORM_border_radius FORM_border_radius