comparison deck.js/themes/transition/fade.scss @ 0:dd1c78c6398f

add having slides
author taiki <taiki@cr.ie.u-ryukyu.ac.jp>
date Mon, 25 Mar 2013 05:14:03 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:dd1c78c6398f
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 }
38
39 .deck-next, .deck-after {
40 opacity:0;
41 }
42
43 .deck-current {
44 opacity:1;
45 }
46 }
47
48 > .deck-previous, > .deck-before, > .deck-next, > .deck-after {
49 opacity:0;
50 pointer-events:none;
51 }
52
53 > .deck-before, > .deck-previous {
54 .slide {
55 visibility:visible;
56 }
57 }
58
59 > .deck-child-current {
60 opacity:1;
61 visibility:visible;
62 pointer-events:auto;
63
64 .deck-next, .deck-after {
65 visibility:hidden;
66 }
67 }
68 }
69 }