Commit | Line | Data |
---|---|---|
d0f6c3cd AE |
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 | @mixin transform($val) { | |
13 | -webkit-transform:$val; | |
14 | -ms-transform:$val; | |
15 | transform:$val; | |
16 | } | |
17 | ||
18 | .csstransitions.csstransforms { | |
19 | overflow-x:hidden; | |
20 | ||
21 | .deck-container > .slide { | |
22 | -webkit-transition:-webkit-transform 500ms ease-in-out; | |
23 | transition:transform 500ms ease-in-out; | |
24 | } | |
25 | ||
26 | .deck-container:not(.deck-menu) { | |
27 | > .slide { | |
28 | position:absolute; | |
29 | top:0; | |
30 | left:0; | |
31 | ||
32 | .slide { | |
33 | position:relative; | |
34 | left:0; | |
35 | top:0; | |
36 | -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
37 | transition:transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
38 | } | |
39 | ||
40 | .deck-next, .deck-after { | |
41 | visibility:visible; | |
42 | @include translate(200%); | |
43 | } | |
44 | } | |
45 | ||
46 | > .deck-previous { | |
47 | @include translate(-200%); | |
48 | } | |
49 | ||
50 | > .deck-before { | |
51 | @include translate(-400%); | |
52 | } | |
53 | ||
54 | > .deck-next { | |
55 | @include translate(200%); | |
56 | } | |
57 | ||
58 | > .deck-after { | |
59 | @include translate(400%); | |
60 | } | |
61 | ||
62 | > .deck-before, > .deck-previous { | |
63 | .slide { | |
64 | visibility:visible; | |
65 | } | |
66 | } | |
67 | ||
68 | > .deck-child-current { | |
69 | @include transform(none); | |
70 | } | |
71 | } | |
72 | } |