themes/transition/vertical-slide.scss

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