themes/transition/vertical-slide.css

   1 .csstransitions.csstransforms .deck-container {
   2   overflow-y: hidden;
   3 }
   4 .csstransitions.csstransforms .deck-container > .slide {
   5   -webkit-transition: -webkit-transform 500ms ease-in-out;
   6   -moz-transition: -moz-transform 500ms ease-in-out;
   7   -ms-transition: -ms-transform 500ms ease-in-out;
   8   -o-transition: -o-transform 500ms ease-in-out;
   9   transition: transform 500ms ease-in-out;
  10 }
  11 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
  12   position: absolute;
  13   top: 0;
  14   left: 0;
  15   -webkit-box-sizing: border-box;
  16   -moz-box-sizing: border-box;
  17   box-sizing: border-box;
  18   width: 100%;
  19   padding: 0 48px;
  20 }
  21 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
  22   position: relative;
  23   left: 0;
  24   top: 0;
  25   -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  26   -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  27   -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  28   -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  29   transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  30 }
  31 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
  32   visibility: visible;
  33   -webkit-transform: translate3d(0, 1600px, 0);
  34   -moz-transform: translate(0, 1600px);
  35   -ms-transform: translate(0, 1600px);
  36   -o-transform: translate(0, 1600px);
  37   transform: translate3d(0, 1600px, 0);
  38 }
  39 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous {
  40   opacity: 0.4;
  41 }
  42 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
  43   -webkit-transform: translate3d(0, -200%, 0);
  44   -moz-transform: translate(0, -200%);
  45   -ms-transform: translate(0, -200%);
  46   -o-transform: translate(0, -200%);
  47   transform: translate3d(0, -200%, 0);
  48 }
  49 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
  50   -webkit-transform: translate3d(0, -400%, 0);
  51   -moz-transform: translate(0, -400%);
  52   -ms-transform: translate(0, -400%);
  53   -o-transform: translate(0, -400%);
  54   transform: translate3d(0, -400%, 0);
  55 }
  56 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
  57   -webkit-transform: translate3d(0, 200%, 0);
  58   -moz-transform: translate(0, 200%);
  59   -ms-transform: translate(0, 200%);
  60   -o-transform: translate(0, 200%);
  61   transform: translate3d(0, 200%, 0);
  62 }
  63 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
  64   -webkit-transform: translate3d(0, 400%, 0);
  65   -moz-transform: translate(0, 400%);
  66   -ms-transform: translate(0, 400%);
  67   -o-transform: translate(0, 400%);
  68   transform: translate3d(0, 400%, 0);
  69 }
  70 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
  71   visibility: visible;
  72 }
  73 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
  74   -webkit-transform: none;
  75   -moz-transform: none;
  76   -ms-transform: none;
  77   -o-transform: none;
  78   transform: none;
  79 }
  80 .csstransitions.csstransforms .deck-prev-link {
  81   left: auto;
  82   right: 8px;
  83   top: 59px;
  84   -webkit-transform: rotate(90deg);
  85   -moz-transform: rotate(90deg);
  86   -ms-transform: rotate(90deg);
  87   -o-transform: rotate(90deg);
  88   transform: rotate(90deg);
  89 }
  90 .csstransitions.csstransforms .deck-next-link {
  91   top: 99px;
  92   -webkit-transform: rotate(90deg);
  93   -moz-transform: rotate(90deg);
  94   -ms-transform: rotate(90deg);
  95   -o-transform: rotate(90deg);
  96   transform: rotate(90deg);
  97 }