@import "constants.styl"


// TRANSITION_TIME = 1s
/* ==== Tablet ==== */
// @media only screen and (min-width: 768px) and (max-width: 1280px)
@media only screen and (min-width: 768px)

  body
    display-box()
    box-orient(horizontal)
    overflow: hidden

  aside
    width 15%
    transform translateX(-100%)

    transition-property transform
    transition-duration TRANSITION_TIME
    &.show
      transform translateX(0%)

  section
    ordinal-group(2)

    display: none
    opacity: 0
    transform translateX(100%)


    &.show
      -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
      -webkit-animation-fill-mode: forwards
      display-box()
    &.hide
      -webkit-animation: hiding TRANSITION_TIME


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

    &[data-child]
      width: 25%
      margin-right: 0.5%

  [data-router=aside]
    display: none !important



  // &[data-transition]
  //     display-box()
  //     transition-propert transform, opacity
  //     transition-duration( TRANSITION_TIME )
  //     transition-timing-function( DEFAULT_TRANSITION )
  //     backface-visibility( hidden )






@-webkit-keyframes showing
  0%
    opacity: 0
    transform translateX(100%)
  100%
    opacity: 1
    transform translateX(0%)

@-webkit-keyframes hiding
  0%
    opacity: 1
    transform translateX(0%)
  100%
    opacity: 0
    transform translateX(100%)