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

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

@import "constants.styl"

section.show > [data-control="pull"]
  position: absolute
  z-index: -1
  top: HEADER_HEIGHT
  width: 100%
  height: 80px
  padding: 10px 0
  text-align: center

  & > .icon
    display: inline-block
    width: 48px
    height: 48px
    font-size: 44px
    line-height: 48px
    transition( all 300ms @defaultTrasition )

  & > .loading
    display: none
    left: 0%

  & > strong
    position: relative
    top: -16px
    margin-left: 4px
    font-size: 1.1em

  &.rotate
    & > .icon
      transform( rotate(180deg) )

  &.refresh
    & > .icon
      display: none
    & > .loading
      display: inline-block