kdf/src/themes/default/kd.slide.styl

KD: a non-document focused UI Framework for web applications.

@import "./kdfn"

div.kd-slide
  vendor  perspective, 1200px

div.kd-page

  vendor  transform,          translate3d(0, 0, 0)
  vendor  transform-style,    preserve-3d

  visibility                  hidden
  overflow                    hidden
  abs()

  &.current
    visibility                visible
    z-index                   1

  &.moveToLeft
    vendor  animation, moveToLeft .6s ease both

  &.moveFromLeft
    vendor  animation, moveFromLeft .6s ease both

  &.moveToRight
    vendor  animation, moveToRight .6s ease both

  &.moveFromRight
    vendor  animation, moveFromRight .6s ease both

  &.moveToTop
    vendor  animation, moveToTop .6s ease both

  &.moveFromTop
    vendor  animation, moveFromTop .6s ease both

  &.moveToBottom
    vendor  animation, moveToBottom .6s ease both

  &.moveFromBottom
    vendor  animation, moveFromBottom .6s ease both

  &.rotateToLeft
    vendor  transform-origin, top left
    vendor  animation, rotateToLeft .6s ease both

  &.rotateFromLeft
    vendor  transform-origin, top left
    vendor  animation, rotateFromLeft .6s ease both

  &.rotateToRight
    vendor  transform-origin, top right
    vendor  animation, rotateToRight .6s ease both

  &.rotateFromRight
    vendor  transform-origin, top right
    vendor  animation, rotateFromRight .6s ease both

  &.rotateToTop
    vendor  transform-origin, top left
    vendor  animation, rotateToTop .6s ease both

  &.rotateFromTop
    vendor  transform-origin, top left
    vendor  animation, rotateFromTop .6s ease both

  &.rotateToBottom
    vendor  transform-origin, bottom left
    vendor  animation, rotateToBottom .6s ease both

  &.rotateFromBottom
    vendor  transform-origin, bottom left
    vendor  animation, rotateFromBottom .6s ease both

@-webkit-keyframes moveToLeft
  100%
    -webkit-transform       translateX(-100%)

@-webkit-keyframes moveFromLeft
  0%
    -webkit-transform       translateX(-100%)

@-webkit-keyframes moveToRight
  100%
    -webkit-transform       translateX(100%)

@-webkit-keyframes moveFromRight
  0%
    -webkit-transform       translateX(100%)

@-webkit-keyframes moveToTop
  100%
    -webkit-transform       translateY(-100%)

@-webkit-keyframes moveFromTop
  0%
    -webkit-transform       translateY(-100%)

@-webkit-keyframes moveToBottom
  100%
    -webkit-transform       translateY(100%)

@-webkit-keyframes moveFromBottom
  0%
    -webkit-transform       translateY(100%)


@-webkit-keyframes rotateToLeft
  100%
    opacity 0
    -webkit-transform       rotateY(90deg)

@-webkit-keyframes rotateFromLeft
  0%
    opacity 1
    -webkit-transform       rotateY(90deg)

@-webkit-keyframes rotateToRight
  100%
    opacity 0
    -webkit-transform       rotateY(-90deg)

@-webkit-keyframes rotateFromRight
  0%
    opacity 1
    -webkit-transform       rotateY(-90deg)

@-webkit-keyframes rotateToTop
  100%
    opacity 0
    -webkit-transform       rotateX(-90deg)

@-webkit-keyframes rotateFromTop
  0%
    opacity 1
    -webkit-transform       rotateX(-90deg)

@-webkit-keyframes rotateToBottom
  100%
    opacity 0
    -webkit-transform       rotateX(90deg)

@-webkit-keyframes rotateFromBottom
  0%
    opacity 1
    -webkit-transform       rotateX(90deg)

@-moz-keyframes moveToLeft
  100%
    -moz-transform       translateX(-100%)

@-moz-keyframes moveFromLeft
  0%
    -moz-transform       translateX(-100%)

@-moz-keyframes moveToRight
  100%
    -moz-transform       translateX(100%)

@-moz-keyframes moveFromRight
  0%
    -moz-transform       translateX(100%)

@-moz-keyframes moveToTop
  100%
    -moz-transform       translateY(-100%)

@-moz-keyframes moveFromTop
  0%
    -moz-transform       translateY(-100%)

@-moz-keyframes moveToBottom
  100%
    -moz-transform       translateY(100%)

@-moz-keyframes moveFromBottom
  0%
    -moz-transform       translateY(100%)

@-moz-keyframes rotateToLeft
  100%
    opacity 0
    -moz-transform       rotateY(90deg)

@-moz-keyframes rotateFromLeft
  0%
    opacity 1
    -moz-transform       rotateY(90deg)

@-moz-keyframes rotateToRight
  100%
    opacity 0
    -moz-transform       rotateY(-90deg)

@-moz-keyframes rotateFromRight
  0%
    opacity 1
    -moz-transform       rotateY(-90deg)

@-moz-keyframes rotateToTop
  100%
    opacity 0
    -moz-transform       rotateX(-90deg)

@-moz-keyframes rotateFromTop
  0%
    opacity 1
    -moz-transform       rotateX(-90deg)

@-moz-keyframes rotateToBottom
  100%
    opacity 0
    -moz-transform       rotateX(90deg)

@-moz-keyframes rotateFromBottom
  0%
    opacity 1
    -moz-transform       rotateX(90deg)