Lungo.js/src/stylesheets/lungo.widgets.notification.styl

/**
 * Stylesheet
 *
 * @namespace Lungo.Widgets
 * @class Notification
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.styl"

OPACITY = rgba(0,0,0,0.75)
LOADING = 104px
WINDOW_WIDTH = 280px

.notification
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 3
  display: none
  background-color: OPACITY

  & .window
    position: relative
    opacity: 0
    transition (all TRANSITION_TIME)
    text-align: center

    &.show
      opacity: 1
      transition-delay(TRANSITION_TIME)
    & strong, small
      display: block

    &.growl
      left: 50%
      top: 50%
      width: LOADING
      margin: -(LOADING / 2) auto auto -(LOADING / 2)
      padding: 24px 8px
      transform(scale(0.2))
      &.show
        transform(scale(1.0))
      & > .icon
        font-size: 3.6em
        line-height: 1.0em
        & ~ strong
          margin-bottom: -12px
      & small
        display: none

    &:not(.growl)
      width: WINDOW_WIDTH
      left: 0
      top: 0
      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