Tom-Marble/deck.js/themes/transition/fade.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 transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
   8   -webkit-transition:$prop $duration $easing $delay;
   9   transition:$prop $duration $easing $delay;
  10 }
  11
  12 .csstransitions.csstransforms {
  13   .deck-container .slide {
  14     @include transition(opacity, 500ms);
  15   }
  16
  17   .deck-container:not(.deck-menu) {
  18     > .slide {
  19       position:absolute;
  20       top:0;
  21       left:0;
  22
  23       .slide {
  24         position:relative;
  25         left:0;
  26         top:0;
  27       }
  28
  29       .deck-next, .deck-after {
  30         opacity:0;
  31       }
  32
  33       .deck-current {
  34         opacity:1;
  35       }
  36     }
  37
  38     > .deck-previous, > .deck-before, > .deck-next, > .deck-after {
  39       opacity:0;
  40       pointer-events:none;
  41     }
  42
  43     > .deck-before, > .deck-previous {
  44       .slide {
  45         visibility:visible;
  46       }
  47     }
  48
  49     > .deck-child-current {
  50       opacity:1;
  51       visibility:visible;
  52       pointer-events:auto;
  53
  54       .deck-next, .deck-after {
  55         visibility:hidden;
  56       }
  57     }
  58   }
  59 }