Lungo.js/src/stylesheets/lungo.media.tablet.styl

@import "__init.styl"


/* ==== Tablet ==== */
@media only screen and (min-width: 768px)
  body
    display-box()
    box-orient(horizontal)
    overflow: hidden
    vendor(perspective, 800px)
    vendor(transform-style, preserve-3d)

    & > section, & > aside
      backface-visibility hidden
      vendor(animation-timing-function, DEFAULT_TRANSITION)
      vendor(animation-duration, TRANSITION_TIME)
      vendor(animation-fill-mode, forwards)

    & > aside
      &.box
        z-index: 0
        display: none
        &.show
          ordinal-group(1)
          display-box()

      &:not(.box)
        position: absolute
        z-index: 0
        left: 0
        top: 0
        visibility: hidden
        &.show
          visibility: visible

    & > section
      z-index: 1
      display: none
      &.show
        ordinal-group(2)
        display-box()

      &.asideShowing
        z-index: 2
        vendor(animation-name, withAside)
      &.asideHidding
        vendor(animation-name, withoutAside)
      &.aside
        z-index: 2
        transform translateX(ASIDE_WIDTH)

      &.shadowing
        vendor(animation-name, withAsideOpacity)
      &.unshadowing
        vendor(animation-name, withoutAsideOpacity)
      &.shadow
        transform translateX(ASIDE_WIDTH)
        opacity: .6

      &:not([data-children])
        box-flex(1)

      &[data-children]
        width: 320px


@keyframes withAside
  0%   {transform translateX(0)}
  100% {transform translateX(ASIDE_WIDTH)}

@keyframes withoutAside
  0%   {transform translateX(ASIDE_WIDTH)}
  100% {transform translateX(0)}

@keyframes withAsideOpacity
  0%   {transform translateX(0)}
  100% {transform translateX(ASIDE_WIDTH); opacity: .6;}

@keyframes withoutAsideOpacity
  0%   {transform translateX(ASIDE_WIDTH); opacity: .6;}
  100% {transform translateX(0)}