Add deck.js slide deck with basic layout
[kai/lca12.git] / themes / transition / horizontal-slide.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 @mixin transform($val) {
18         -webkit-transform:$val;
19         -moz-transform:$val;
20         -ms-transform:$val;
21         -o-transform:$val;
22         transform:$val;
23 }
24
25 .csstransitions.csstransforms {
26         overflow-x:hidden;
27         
28         .deck-container > .slide {
29                 -webkit-transition:-webkit-transform 500ms ease-in-out;
30                 -moz-transition:-moz-transform 500ms ease-in-out;
31                 -ms-transition:-ms-transform 500ms ease-in-out;
32                 -o-transition:-o-transform 500ms ease-in-out;
33                 transition:transform 500ms ease-in-out;
34         }
35         
36         .deck-container:not(.deck-menu) {
37                 > .slide {
38                         position:absolute;
39                         top:0;
40                         left:0;
41                         -webkit-box-sizing: border-box;
42                         -moz-box-sizing: border-box;
43                         box-sizing: border-box;
44                         width:100%;
45                         padding:0 48px;
46                         
47                         .slide {
48                                 position:relative;
49                                 left:0;
50                                 top:0;
51                                 -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
52                                 -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
53                                 -ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
54                                 -o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
55                                 transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
56                         }
57
58                         .deck-next, .deck-after {
59                                 visibility:visible;
60                                 @include translate(200%);
61                         }
62
63                         .deck-before, .deck-previous {
64                                 opacity:0.4;
65                         }
66                 }
67
68                 > .deck-previous {
69                         @include translate(-200%);
70                 }
71
72                 > .deck-before {
73                         @include translate(-400%);
74                 }
75
76                 > .deck-next {
77                         @include translate(200%);
78                 }
79
80                 > .deck-after {
81                         @include translate(400%);
82                 }
83                 
84                 > .deck-before, > .deck-previous {
85                         .slide {
86                                 visibility:visible;
87                         }
88                 }
89
90                 > .deck-child-current {
91                         @include transform(none);
92                 }
93         }
94 }