New notification system

kitchen-sink/app/events.notification.js

@@ -1,15 +1,11 @@
 
 Lungo.Events.init({
     'tap section#notification a[data-action=normal]': function() {
-        Lungo.Notification.show('Title', 'Description', 'message', false, 2);
-    },
-
-    'tap section#notification a[data-action=animate]': function() {
-        Lungo.Notification.show('Title', 'Description', 'message', true, 2);
+        Lungo.Notification.show('Title', 'message', 2);
     },
 
     'tap section#notification a[data-action=loading]': function() {
-        Lungo.Notification.loading();
+        Lungo.Notification.show();
         setTimeout(Lungo.Notification.hide, 3000);
     },
 
@@ -21,10 +17,6 @@ Lungo.Events.init({
         Lungo.Notification.error('Title', 'Description', 'message', 2);
     },
 
-    'tap section#notification a[data-action=alert]': function() {
-        Lungo.Notification.alert('Title', 'Description', 'message', 2);
-    },
-
     'tap section#notification a[data-action=confirm]': function() {
         Lungo.Notification.confirm({
             title: 'Title',
@@ -49,7 +41,7 @@ Lungo.Events.init({
     },
 
     'tap section#notification a[data-action=chaining]': function() {
-        Lungo.Notification.show('Title', 'Description', 'message', false, 2, function() {
+        Lungo.Notification.show('Title', 'message', 2, function() {
             Lungo.Notification.error('Title 2', 'Description 2', 'message',  2, function() {
                 Lungo.Notification.show('Title 3', 'Description 3', 'message', false, 2, function() {
                     Lungo.Notification.html('<h1>Hello World</h1>', true);

kitchen-sink/app/events.trigger.js

@@ -7,4 +7,26 @@ Lungo.Events.init({
 Lungo.ready(function() {
     // Lungo.View.Aside.show('features');
     App.environment();
+    // Lungo.Router.section("notification");
+
+    // Lungo.Notification.show();
+    // Lungo.Notification.show("Please wait", "user", 2, function(){ alert(1); });
+    // Lungo.Notification.error('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel');
+    // Lungo.Notification.success('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel', 2, function(){alert(1)});
+    Lungo.Notification.confirm({
+        icon: 'user',
+        title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
+        accept: {
+            icon: 'checkmark',
+            label: 'Accept',
+            callback: function(){ alert("Yes!"); }
+        },
+        cancel: {
+            icon: 'close',
+            label: 'Cancel',
+            callback: function(){ alert("No!"); }
+        }
+    });
+
 });

kitchen-sink/app/sections/notification.html

@@ -8,16 +8,14 @@
     <article class="list scroll indented">
         <div>
             <a href="#" class="button anchor" data-label="Normal" data-action="normal"></a>
-            <a href="#" class="button anchor" data-label="Normal + Animation" data-action="animate"></a>
             <a href="#" class="button anchor" data-label="Loading" data-label="Loading" data-action="loading"></a>
             <a href="#" class="button anchor" data-label="Confirm" data-action="confirm"></a>
             <a href="#" class="button anchor" data-label="Html" data-action="html"></a>
 
-            <a href="#" class="button anchor green" data-label="Success" data-action="success"></a>
-            <a href="#" class="button anchor red" data-label="Error" data-action="error"></a>
-            <a href="#" class="button anchor yellow" data-label="Alert" data-action="alert"></a>
+            <a href="#" class="button anchor accept" data-label="Success" data-action="success"></a>
+            <a href="#" class="button anchor cancel" data-label="Error" data-action="error"></a>
 
-            <a href="#" class="button anchor blue" data-label="Chaining" data-action="chaining"></a>
+            <a href="#" class="button anchor " data-label="Chaining" data-action="chaining"></a>
         </div>
     </article>
 </section>

src/Lungo.Notification.js

@@ -23,7 +23,7 @@ Lungo.Notification = (function(lng, undefined) {
         NOTIFICATION: '.notification',
         MODAL: '.notification .window',
         MODAL_HREF: '.notification .window a',
-        WINDOW_CLOSABLE: '.notification > .url .close',
+        WINDOW_CLOSABLE: '.notification > [data-action=close], .notification > .error, .notification > .success',
         CONFIRM_BUTTONS: '.notification .confirm a.button'
     };
 
@@ -41,10 +41,16 @@ Lungo.Notification = (function(lng, undefined) {
     /**
      *
      */
-    var show = function(title, description, icon, animate, seconds, callback) {
-        _new_instance(true, animate);
+    var show = function(title, icon, seconds, callback) {
+        var markup;
+        if (title !== undefined) {
+            markup = _markup(title, null, icon);
+        } else {
+            var data_loading = lng.Attributes.Data.Loading.html;
+            markup = data_loading.replace(BINDING.START + BINDING.KEY + BINDING.END, 'icon white');
+        }
 
-        _show(_markup(title, description, icon));
+        _show(markup, 'growl');
         _hide(seconds, callback);
     };
 
@@ -54,7 +60,7 @@ Lungo.Notification = (function(lng, undefined) {
     var hide = function() {
         _window.removeClass('show');
         setTimeout(function() {
-            _el.style('display', 'none').removeClass('url').removeClass('confirm').removeClass('modal');
+            _el.style('display', 'none').removeClass('html').removeClass('confirm').removeClass('notify').removeClass('growl');
         }, ANIMATION_MILISECONDS - 50);
     };
 
@@ -63,21 +69,12 @@ Lungo.Notification = (function(lng, undefined) {
      */
     var confirm = function(options) {
         _options = options;
-        _new_instance(true);
 
-        var markup = '<p>' + _markup(options.title, options.description, options.icon) + '</p><hr/>';
+        var markup = _markup(options.title, options.description, options.icon);
         markup += _button_markup(options.accept, 'accept');
         markup += _button_markup(options.cancel, 'cancel');
 
-        _window.addClass('special confirm');
-        _show(markup);
-    };
-
-    /**
-     *
-     */
-    var alert = function(title, description, icon, seconds, callback) {
-        _notify(title, description, icon, 'alert', seconds, callback);
+        _show(markup, 'confirm');
     };
 
     /**
@@ -97,35 +94,21 @@ Lungo.Notification = (function(lng, undefined) {
     /**
      *
      */
-    var _notify = function(title, description, icon, type, seconds, callback) {
-        _new_instance(false);
-
-        _window.addClass(type || 'info').addClass('special notify');
-        _show(_markup(title, description, icon));
-        _hide(seconds, callback);
+    var _notify = function(title, description, icon, stylesheet, seconds, callback) {
+        _show(_markup(title, description, icon), stylesheet);
+        if (seconds) {
+            _hide(seconds, callback);
+        }
     };
 
     /**
      *
      */
     var html = function(markup, closable) {
-        _new_instance(true);
-
-        _window.addClass('url');
-        markup += (closable) ? '<span class="icon close"></span>' : '';
-        _show(markup);
+        markup += (closable) ? '<a href="#" class="button large anchor" data-action="close">Close</a>' : '';
+        _show(markup, 'html');
     };
 
-    /**
-     *
-     */
-    var loading = function() {
-        _new_instance(true);
-
-        var data_loading = lng.Attributes.Data.Loading.html;
-        var html_binded = data_loading.replace(BINDING.START + BINDING.KEY + BINDING.END, 'icon loading white');
-        _show(html_binded);
-    };
 
     var _init = function() {
         lng.dom(SELECTOR.BODY).append(MARKUP_NOTIFICATION);
@@ -135,20 +118,13 @@ Lungo.Notification = (function(lng, undefined) {
         _subscribeEvents();
     };
 
-    var _new_instance = function(modal, animate) {
-        _el.style('display') === 'none' && _el.show();
-        modal && _el.addClass(STYLE.MODAL) || _el.removeClass(STYLE.MODAL);
-
-        _window.removeClass(STYLE.SHOW).removeClass(STYLE.WORKING);
-        _window.removeClass('url').removeClass('notify').removeClass('confirm').removeClass('special').removeClass('working');
-        _window.removeClass('error').removeClass('alert').removeClass('success');
-        if (animate) {
-            _window.addClass(STYLE.WORKING);
-        }
-    };
-
-    var _show = function(html) {
+    var _show = function(html, stylesheet) {
+        _el.show();
+        _window.removeClass(STYLE.SHOW);
+        _window.removeClass('error').removeClass('success').removeClass('html').removeClass('growl');
+        _window.addClass(stylesheet);
         _window.html(html);
+
         setTimeout(function() {
             _window.addClass(STYLE.SHOW);
         }, DELAY_TIME);
@@ -168,20 +144,14 @@ Lungo.Notification = (function(lng, undefined) {
 
     var _markup = function(title, description, icon) {
         description = !description ? "&nbsp;" : description;
-        return '<span class="icon ' + icon + '"></span><strong>' + title + '</strong><small>' + description + '</small>';
+        return '<span class="icon ' + icon + '"></span><strong class="text bold">' + title + '</strong><small>' + description + '</small>';
     };
 
     var _button_markup = function(options, callback) {
-        return '<a href="#" data-callback="' + callback + '" class="button ' + options.color + '" data-icon="' + options.icon + '">' + options.label + '</a>';
+        return '<a href="#" data-callback="' + callback + '" class="button anchor large text thin">' + options.label + '</a>';
     };
 
     var _subscribeEvents = function() {
-        _window.tap(function(event) {
-            if (_window.hasClass('notify')) {
-                hide();
-            }
-        });
-
         lng.dom(SELECTOR.CONFIRM_BUTTONS).tap(function(event) {
             var button = lng.dom(this);
             var callback = _options[button.data('callback')].callback;
@@ -198,11 +168,9 @@ Lungo.Notification = (function(lng, undefined) {
         show: show,
         hide: hide,
         error: error,
-        alert: alert,
         success: success,
         confirm: confirm,
-        html: html,
-        loading: loading
+        html: html
     };
 
 })(Lungo);

src/stylesheets/Lungo.theme.default.styl

@@ -8,8 +8,7 @@
  */
 
 @import "import/vendor.styl"
-// @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700")
-// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
 
 WHITE = white
 
@@ -37,7 +36,7 @@ COLOR = #484a49
 
 body
   background-color: DARK
-  font-family: "Helvetica Neue", "Open Sans", "Titillium Web",  Helvetica, Arial, sans-serif
+  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif
   font-weight: 400
   font-size: 13px
   line-height: 1.3em
@@ -192,23 +191,27 @@ nav
 .notification
   color: #fff
   & .window
-    &.confirm
-      background: #333
-    &.notify
-      text-shadow: 0 1px 0px rgba(0,0,0,0.1)
-      .box-shadow( inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25) )
+    &.growl
+      background: rgba(0,0,0,0.8)
+
+    &:not(.growl)
+      background: #e6e6e6
+      color: #222
+      box-shadow(0 0 8px #000)
+      & button, .button
+        background: #fff !important
+        box-shadow: none !important
+        color: THEME_dark !important
+        border-radius 0px !important
+        border: none !important
+        margin-bottom: 1px
+
       &.error
-        background: COLOR_cancel
-      &.alert
-        background: COLOR_secondary
+        background: darken(COLOR_cancel, 25%)
+        color: #fff
       &.success
-        background: COLOR_accept
-    &.url
-      & .close
-        background: #000
-        border: solid 2px #fff
-        box-shadow: 0 0 4px black
-
+        background: darken(COLOR_accept, 25%)
+        color: #fff
 
 /* -------------------------- BUTTONS -------------------------- */
 a.button, button

src/stylesheets/Lungo.widgets.button.styl

@@ -50,3 +50,4 @@
     padding: 0 8px
     font-size: FONT_SIZE_SMALL
     line-height: (h - 2)
+

src/stylesheets/css/Lungo.theme.default.css

@@ -6,10 +6,11 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
 /* -------------------------- THEME -------------------------- */
 body {
   background-color: #222;
-  font-family: "Helvetica Neue", "Open Sans", "Titillium Web", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 13px;
   line-height: 1.3em;
@@ -271,41 +272,36 @@ footer .tag {
 .notification {
   color: #fff;
 }
-.notification .window.confirm {
-  background: #333;
-}
-.notification .window.notify {
-  -webkit-text-shadow: 0 1px 0px rgba(0,0,0,0.1);
-  -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.1);
-  text-shadow: 0 1px 0px rgba(0,0,0,0.1);
-}
-.notification .window.notify .box-shadow( inset 0 1px 0 rgba(255,
-.notification .window.notify 255,
-.notification .window.notify 255,
-.notification .window.notify 0.2),
-.notification .window.notify inset 0-1px0rgba(0,
-.notification .window.notify 0,
-.notification .window.notify 0,
-.notification .window.notify 0.2),
-.notification .window.notify 0px1px2pxrgba(0,
-.notification .window.notify 0,
-.notification .window.notify 0,
-.notification .window.notify 0.25) ),
-.notification .window.notify.error {
-  background: #ee6557;
-}
-.notification .window.notify.alert {
-  background: #bfbfbf;
-}
-.notification .window.notify.success {
-  background: #3fb58e;
-}
-.notification .window.url .close {
-  background: #000;
-  border: solid 2px #fff;
-  -webkit-box-shadow: 0 0 4px #000;
-  -moz-box-shadow: 0 0 4px #000;
-  box-shadow: 0 0 4px #000;
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #007db5 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
 }
 /* -------------------------- BUTTONS -------------------------- */
 a.button,

src/stylesheets/css/Lungo.widgets.notification.css

@@ -11,105 +11,80 @@
   width: 100%;
   height: 100%;
   z-index: 3;
-  background: none;
-  display: none;
-}
-.notification.modal {
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0,0,0,0.75);
 }
 .notification .window {
   position: relative;
   opacity: 0;
-  -webkit-transition: all 200ms easeOutSine;
-  -moz-transition: all 200ms easeOutSine;
-  transition: all 200ms easeOutSine;
+  -webkit-transition: all 300ms;
+  -moz-transition: all 300ms;
+  transition: all 300ms;
+  text-align: center;
 }
 .notification .window.show {
   opacity: 1;
+  -webkit-transition-delay: 300ms;
+  -moz-transition-delay: 300ms;
+  transition-delay: 300ms;
 }
 .notification .window strong,
 .notification .window small {
   display: block;
 }
-.notification .window small {
-  font-size: 0.7em;
-}
-.notification .window:not(.special) {
+.notification .window.growl {
   left: 50%;
   top: 50%;
   width: 104px;
-  margin: -MODAL_SIZE_middle auto auto -MODAL_SIZE_middle;
-  padding: 8px;
-  background-color: rgba(0,0,0,0.8);
-  text-align: center;
-  -webkit-transform: scale(0.8);
-  -moz-transform: scale(0.8);
-  transform: scale(0.8);
+  margin: -52px auto auto -52px;
+  padding: 24px 8px;
+  -webkit-transform: scale(0.2);
+  -moz-transform: scale(0.2);
+  transform: scale(0.2);
 }
-.notification .window:not(.special).show {
+.notification .window.growl.show {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   transform: scale(1);
 }
-.notification .window:not(.special) .icon {
-  display: block;
-  font-size: 4em;
+.notification .window.growl > .icon {
+  font-size: 3.6em;
+  line-height: 1em;
 }
-.notification .window:not(.special) .icon.loading {
-  margin-top: 24px;
-  margin-bottom: 20px;
+.notification .window.growl > .icon ~ strong {
+  margin-bottom: -12px;
 }
-.notification .window:not(.special) small {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.notification .window.growl small {
+  display: none;
 }
-.notification .window.confirm,
-.notification .window.notify {
+.notification .window:not(.growl) {
+  width: 280px;
+  left: 0;
   top: 0;
-  font-size: 1.1em !important;
-  -webkit-transform: translate3d(0, -100%, 0);
-  -moz-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-}
-.notification .window.confirm.show,
-.notification .window.notify.show {
-  -webkit-transform: translate3d(0, 0%, 0);
-  -moz-transform: translate3d(0, 0%, 0);
-  transform: translate3d(0, 0%, 0);
-}
-.notification .window.confirm .icon,
-.notification .window.notify .icon {
-  float: left;
-  font-size: 2em;
-  margin: -3px 10px 0 0;
-}
-.notification .window.confirm {
-  opacity: 1;
-  padding: 10px 12px;
+  margin: 22px auto 0;
+  -webkit-transform: translateY(100%);
+  -moz-transform: translateY(100%);
+  transform: translateY(100%);
 }
-.notification .window.confirm p {
-  height: 44px;
+.notification .window:not(.growl).show {
+  -webkit-transform: translateY(0%);
+  -moz-transform: translateY(0%);
+  transform: translateY(0%);
 }
-.notification .window.confirm .button {
-  width: 42%;
+.notification .window:not(.growl):not(.html) {
+  padding-top: 24px;
 }
-.notification .window.confirm .button:last-child {
-  float: right;
+.notification .window:not(.growl):not(.html) > .icon {
+  font-size: 4em;
+  line-height: 1em;
 }
-.notification .window.notify {
-  padding: 8px;
-  top: 0;
+.notification .window:not(.growl):not(.html) > strong {
+  font-size: 1.2em;
 }
-.notification .window.url {
-  left: 0;
-  top: 0;
-  width: 280px;
-  height: auto;
-  margin: 64px auto 0px;
-  padding: 0px;
+.notification .window:not(.growl):not(.html) > strong,
+.notification .window:not(.growl):not(.html) small {
+  padding: 0 16px 16px 16px;
 }
-.notification .window.url .close {
+.notification .window:not(.growl).html .close {
   position: absolute;
   top: -14px;
   right: -14px;
@@ -122,19 +97,3 @@
   -moz-border-radius: 14px;
   border-radius: 14px;
 }
-.notification .window.working span {
-  -webkit-animation: notification-working 1s infinite;
-}
-@-webkit-keyframes notification-working {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

src/stylesheets/lungo.widgets.notification.less

@@ -1,132 +0,0 @@
-@import "constants.less";
-
-@notification_opacity: rgba(0,0,0,0.5);
-@defaultTrasition : @easeOutSine;
-@keyframe: 200ms;
-
-@modal_opacity: rgba(0,0,0,0.8);
-@modal_size: 104px;
-    @modal_size_middle: 52px;
-
-.notification {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 3;
-    background: none;
-    display: none;
-
-    &.modal { background-color: @notification_opacity; }
-
-    & .window {
-        position: relative;
-        opacity: 0;
-        .transition(all @keyframe @defaultTrasition);
-
-        &.show {
-            opacity: 1;
-            .transition-delay(@keyframe);
-        }
-
-        & strong, small {
-            display: block;
-        }
-
-        & small {
-            font-size: 0.7em;
-        }
-
-        &:not(.special) {
-            left: 50%;
-            top: 50%;
-            width: @modal_size;
-            margin: -@modal_size_middle auto auto -@modal_size_middle;
-            padding: 8px;
-            background-color: @modal_opacity;
-            text-align: center;
-            .transform(scale(0.8));
-
-            &.show {
-                .transform(scale(1.0));
-            }
-
-            & .icon {
-                display: block;
-                font-size: 4.0em;
-                &.loading {
-                    margin-top: 24px;
-                    margin-bottom: 20px;
-                }
-            }
-
-            & small {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &.confirm, &.notify {
-            top: 0;
-            font-size: 1.1em !important;
-            .transform(translate3d(0, -100%, 0));
-
-            &.show { .transform(translate3d(0, 0%, 0)); }
-
-            & .icon {
-                float: left;
-                font-size: 2.0em;
-                margin: -3px 10px 0 0;
-            }
-        }
-
-        &.confirm {
-            opacity: 1;
-            padding: 10px 12px;
-
-            & p { height: 44px;}
-
-            & .button {
-               width: 42%;
-               &:last-child {float: right;}
-            }
-        }
-
-        &.notify {
-            padding: 8px;
-            top:  0;
-        }
-
-        &.url {
-            left: 0;
-            top: 0;
-            width: 280px;
-            height: auto;
-            margin: 64px auto 0px;
-            padding: 0px;
-
-            & .close {
-                position: absolute;
-                top: -14px;
-                right: -14px;
-
-                font-size: 14px;
-                line-height: 24px;
-                font-weight: normal;
-                width: 24px;
-                height: 24px;
-                border-radius: 14px;
-            }
-        }
-    }
-}
-
-.notification .window.working span{
-    -webkit-animation: notification-working 1s infinite;
-}
-
-@-webkit-keyframes notification-working {
-    0% {opacity: 1;}
-    50% {opacity: 0;}
-    100% {opacity: 1;}
-}

src/stylesheets/lungo.widgets.notification.styl

@@ -10,119 +10,76 @@
 @import "import/constants.styl"
 @import "import/vendor.styl"
 
-OPACITY = rgba(0,0,0,0.5)
-KEYFRAME = 200ms
-MODAL_OPACITY = rgba(0,0,0,0.8)
-MODAL_SIZE = 104px
-MODAL_SIZE_middle = 52px
+OPACITY = rgba(0,0,0,0.75)
+KEYFRAME = 300ms
+LOADING = 104px
 
 .notification
   position: absolute
   width: 100%
   height: 100%
   z-index: 3
-  background: none
-  display: none
+  // display: none
 
-  &.modal
-    background-color: OPACITY
+  background-color: OPACITY
 
   & .window
     position: relative
     opacity: 0
-    transition( all KEYFRAME DEFAULT_TRANSITION )
+    transition (all KEYFRAME)
+    text-align: center
 
     &.show
       opacity: 1
-      Transition-delay( KEYFRAME )
-
+      transition-delay(KEYFRAME)
     & strong, small
       display: block
 
-
-    & small
-      font-size: 0.7em
-
-    &:not(.special)
+    &.growl
       left: 50%
       top: 50%
-      width: MODAL_SIZE
-      margin: -MODAL_SIZE_middle auto auto -MODAL_SIZE_middle
-      padding: 8px
-      background-color: MODAL_OPACITY
-      text-align: center
-      transform( scale(0.8) )
-
+      width: LOADING
+      margin: -(LOADING / 2) auto auto -(LOADING / 2)
+      padding: 24px 8px
+      transform(scale(0.2))
       &.show
-        transform( scale(1.0) )
-
-      & .icon
-        display: block
-        font-size: 4.0em
-        &.loading
-          margin-top: 24px
-          margin-bottom: 20px
-
+        transform(scale(1.0))
+      & > .icon
+        font-size: 3.6em
+        line-height: 1.0em
+        & ~ strong
+          margin-bottom: -12px
       & small
-        overflow: hidden
-        white-space: nowrap
-        text-overflow: ellipsis
-
-    &.confirm, &.notify
-      top: 0
-      font-size: 1.1em !important
-      transform( translate3d(0, -100%, 0) )
-
-      &.show
-        transform( translate3d(0, 0%, 0) )
-
-      & .icon
-        float: left
-        font-size: 2.0em
-        margin: -3px 10px 0 0
-
-    &.confirm
-      opacity: 1
-      padding: 10px 12px
-      & p
-        height: 44px
-      & .button
-        width: 42%
-        &:last-child
-          float: right
-
-    &.notify
-        padding: 8px
-        top:  0
+        display: none
 
-    &.url
+    &:not(.growl)
+      width: 280px
       left: 0
       top: 0
-      width: 280px
-      height: auto
-      margin: 64px auto 0px
-      padding: 0px
-
-      & .close
-        position: absolute
-        top: -14px
-        right: -14px
-
-        font-size: 14px
-        line-height: 24px
-        font-weight: normal
-        width: 24px
-        height: 24px
-        border-radius: 14px
-
-
-  & .window.working span
-    -webkit-animation: notification-working 1s infinite
-
-@-webkit-keyframes notification-working
-    0%
-      opacity: 1
-    50%
-      opacity: 0
-    100%
-      opacity: 1
+      margin: (HEADER_FOOTER_HEIGHT / 2) auto 0
+      transform(translateY(100%))
+      &.show
+        transform(translateY(0%))
+
+      &:not(.html)
+        padding-top: 24px
+        & > .icon
+          font-size: 4.0em
+          line-height: 1.0em
+        & > strong
+          font-size: FONT_SIZE_BIG
+        & > strong, & small
+          padding: 0 16px 16px 16px
+
+      &.html
+        & .close
+          position: absolute
+          top: -14px
+          right: -14px
+
+          font-size: 14px
+          line-height: 24px
+          font-weight: normal
+          width: 24px
+          height: 24px
+          border-radius: 14px