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

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

@import "__init.styl"


/* ================================  CLASSES  ================================ */
.hidden
  display: none
.block
  display: block
.inline
  display: inline
.inline-block
  display: inline-block

.indented > *
  padding: INDENT
.margined > *
  margin: INDENT

.margin-top
  margin-top: INDENT
.margin-right
  margin-right: INDENT
.margin-bottom
  margin-bottom: INDENT
.margin-left
  margin-left: INDENT

:not(.icon)
  &.left
    float: left
  &.right
    float: right


/* ================================  SCROLL  ================================ */
.overthrow-enabled .overthrow
  overflow: auto
  -webkit-overflow-scrolling: touch

.scroll
  overflow-x: hidden
  overflow-y: scroll
  -webkit-overflow-scrolling: touch
  -webkit-box-flex: 1

  // & > *
  //   background: -webkit-linear-gradient(white 30%, hsla(0,0%,100%,0)), -webkit-linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, -webkit-radial-gradient(50% 0, rgba(0,0,0,.2), transparent 70%), -webkit-radial-gradient(50% 100%, rgba(0,0,0,.2), transparent 70%) bottom;
  //   background-repeat: no-repeat;
  //   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  //   background-attachment: local, local, scroll, scroll;


  &.horizontal
    overflow-x: scroll
    overflow-y: hidden
    white-space: nowrap
  /* BUG (iOS) POSITION: relative childrens */
  & > *
    -webkit-transform: translate3d(0, 0, 0)


/* ================================  TEXT  ================================ */
.text
  &.thin
    font-weight: 300
  &.normal
    font-weight: 400
  &.bold
    font-weight: 600
  &.extra-bold
    font-weight: 700
  &.italic
    font-style: italic
  &.underline
    text-decoration: underline
  &.line-through
    text-decoration: line-through
  &.align_left
    text-align: left
  &.align_right
    text-align: right
  &.align_center
    text-align: center
  &.align_justify
    text-align: justify
  &.tiny
    font-size: 0.8em
  &.small
    font-size: FONT_SIZE_SMALL
  &.big
    font-size: FONT_SIZE_BIG
  &.opacity
    opacity: 0.5


/* ================================  TAG  ================================ */
.tag
  display: inline-block
  padding: 0px 3px
  font-size: FONT_SIZE_TINY
  line-height: (FONT_SIZE_LARGE / 1.1)
  height: FONT_SIZE_LARGE
  text-align: center
  min-width: 16px
  z-index: 1

size = 5px
.margin
  &.bottom
    margin-bottom: size


/* ================================  .LAYOUT  ================================ */
.layout
  display-box()
  height:  inherit !important
  &:not(.horizontal)
    box-orient(vertical)
    & > [data-layout=middle]
      height: 50%
    & > [data-layout=third]
      height: 33%
    & > [data-layout=quarter]
      height: 25%

  &.horizontal
    box-orient(horizontal)
    & > [data-layout=middle]
      width: 50%
    & > [data-layout=third]
      width: 33%
    & > [data-layout=quarter]
      width: 25%

  & > *
    box-flex(1)
  & > [data-layout=secondary]
    box-flex(2)
  & > [data-layout=primary]
    box-flex(3)


/* ================================  MENU  ================================ */
[data-view-menu]
  &:after
    content: "▼"
    position: relative
    top: -5px
    left: 1px
    font-size: FONT_SIZE_TINY


/* ================================  CAROUSEL  ================================ */
[data-control=carousel]
  overflow: hidden
  list-style: none
  margin: 0

/* ==================================  PULL  ================================== */
body > 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: S = 52px
    height: S
    font-size: S
    line-height: S
    transition-property rotate, color
    transition-duration TRANSITION_TIME
    transition-timing-function DEFAULT_TRANSITION
    backface-visibility hidden

  & > .loading
    display: none
    left: 0%

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

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

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


/* ================================  SPLASH  ================================ */
body > section > article.splash
  text-align: center
  padding: (INDENT * 2.5)
  & .logo
    max-width: 192px
    margin: 20% 0 7.5% 0
    font-size: 2.2em
  & .button, button
    margin-bottom: (INDENT / 1.5)
  & .copyright
    position: absolute
    width: 100%
    bottom: 8px
    left: 0px
    font-size: FONT_SIZE_TINY
    padding: 0px

/* ================================  MESSAGE  ================================ */
body > section > article > .empty
  text-align: center
  width: 256px
  display: block
  margin: 0 auto
  padding-top: 15%
  & > *
    display: block
    margin-bottom: 3%
  & > .icon
    font-size: S = 120px
    line-height: S
  & > strong
    font-weight: 700
    font-size: FONT_SIZE_LARGE
  & > small
    font-weight: 600
    margin-bottom: 5%