/** * Stylesheet * * @namespace Lungo.Widgets * @class Notification * * @author Javier Jimenez Villar || @soyjavi */ .notification { position: absolute; top: 0; width: 100%; height: 100%; z-index: 3; display: none; background-color: rgba(0,0,0,0.75); } .notification .window { position: relative; opacity: 0; -webkit-transition: all 350ms; -moz-transition: all 350ms; transition: all 350ms; text-align: center; } .notification .window.show { opacity: 1; -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; transition-delay: 350ms; } .notification .window strong, .notification .window small { display: block; } .notification .window.growl { left: 50%; top: 50%; width: 104px; margin: -52px auto auto -52px; padding: 24px 8px; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); } .notification .window.growl.show { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .notification .window.growl > .icon { font-size: 3.6em; line-height: 1em; } .notification .window.growl > .icon ~ strong { margin-bottom: -12px; } .notification .window.growl small { display: none; } .notification .window:not(.growl) { width: 280px; left: 0; top: 0; margin: 22px auto 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } .notification .window:not(.growl).show { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); } .notification .window:not(.growl):not(.html) { padding-top: 24px; } .notification .window:not(.growl):not(.html) > .icon { font-size: 4em; line-height: 1em; } .notification .window:not(.growl):not(.html) > strong { font-size: 1.2em; } .notification .window:not(.growl):not(.html) > strong, .notification .window:not(.growl):not(.html) small { padding: 0 16px 16px 16px; } .notification .window:not(.growl).html .close { position: absolute; top: -14px; right: -14px; font-size: 14px; line-height: 24px; font-weight: normal; width: 24px; height: 24px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; }