Tom-Marble/deck.js/themes/transition/vertical-slide.scss

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