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

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

@import "__init.styl"

LOADING = 104px
WINDOW_WIDTH = 280px

.notification
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 1980
  display: none

  &.show
    display-box()
    box-align(center)
    box-pack(center)

  &.push
    height: (HEADER_HEIGHT / 1.75)

  & .window
    position: relative
    opacity: 0
    text-align: center
    transition-duration (TRANSITION_TIME / 2)
    // transition-duration TRANSITION_TIME
    transition-timing-function DEFAULT_TRANSITION
    backface-visibility hidden

    &.show
      opacity: 1

    &:not(.push)
      transition-property opacity, margin-top
      margin-top: 100%
      &.show
        margin-top: 0%

    &.growl
      width: LOADING
      height: LOADING
      padding: 0 8px
      & > .icon
        font-size: 52px
        line-height: LOADING
        & ~ strong
          position: relative
          top: -(LOADING / 4.5)
          height: 18px
          overflow: hidden
      & > .loading
        top: 26px
        display: block

    &.success, &.error, &.confirm, &.html
      width: WINDOW_WIDTH
      margin-top: 100%

    &.success, &.error, &.confirm
      padding-top: 16px
      & > .icon
        font-size: 5em
        line-height: 1.0em
      & > strong
        font-size: FONT_SIZE_BIG
        padding-top: 4px
      & small
        padding-top: 8px
        padding-bottom: 16px
      & > strong, & small
        padding-left: 16px
        padding-right: 16px

    &.html .title
      height: HEADER_HEIGHT
      line-height: HEADER_HEIGHT
      font-size: FONT_SIZE_LARGE

    &.push
      position: absolute
      text-align: left
      height: H = (HEADER_HEIGHT / 1.75)
      line-height: H
      padding: 0 8px
      width: 100%
      transition-property opacity, top
      top: -(H)
      &.show
        top: 0px
      & .icon
        font-size: FONT_SIZE_LARGE
        float: left
        display: inline
        margin-right: 6px

    & button, & .button
      display: block
      margin-bottom: 1px
      height: 48px
      line-height: 48px
      border: none
      font-size: FONT_SIZE_LARGE
    & strong, small
      display: block