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