|
0
|
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 }
|
