Add deck.js slide deck with basic layout
[kai/lca12.git] / themes / transition / vertical-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 rotate($deg) {
10         -webkit-transform:rotate($deg);
11         -moz-transform:rotate($deg);
12         -ms-transform:rotate($deg);
13         -o-transform:rotate($deg);
14         transform:rotate($deg);
15 }
16
17 @mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
18         -webkit-transition:$prop $duration $easing $delay;
19         -moz-transition:$prop $duration $easing $delay;
20         -ms-transition:$prop $duration $easing $delay;
21         -o-transition:$prop $duration $easing $delay;
22         transition:$prop $duration $easing $delay;
23 }
24
25 @mixin transform($val) {
26         -webkit-transform:$val;
27         -moz-transform:$val;
28         -ms-transform:$val;
29         -o-transform:$val;
30         transform:$val;
31 }
32
33 .csstransitions.csstransforms {
34         .deck-container {
35                 overflow-y:hidden;
36                 
37                 > .slide {
38                         -webkit-transition:-webkit-transform 500ms ease-in-out;
39                         -moz-transition:-moz-transform 500ms ease-in-out;
40                         -ms-transition:-ms-transform 500ms ease-in-out;
41                         -o-transition:-o-transform 500ms ease-in-out;
42                         transition:transform 500ms ease-in-out;
43                 }
44         }
45         
46         .deck-container:not(.deck-menu) {
47                 > .slide {
48                         position:absolute;
49                         top:0;
50                         left:0;
51                         -webkit-box-sizing: border-box;
52                         -moz-box-sizing: border-box;
53                         box-sizing: border-box;
54                         width:100%;
55                         padding:0 48px;
56                         
57                         .slide {
58                                 position:relative;
59                                 left:0;
60                                 top:0;
61                                 -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
62                                 -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
63                                 -ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
64                                 -o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
65                                 transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
66                         }
67
68                         .deck-next, .deck-after {
69                                 visibility:visible;
70                                 @include translate(0, 1600px);
71                         }
72
73                         .deck-before, .deck-previous {
74                                 opacity:0.4;
75                         }
76                 }
77
78                 > .deck-previous {
79                         @include translate(0, -200%);
80                 }
81
82                 > .deck-before {
83                         @include translate(0, -400%);
84                 }
85
86                 > .deck-next {
87                         @include translate(0, 200%);
88                 }
89
90                 > .deck-after {
91                         @include translate(0, 400%);
92                 }
93                 
94                 > .deck-before, > .deck-previous {
95                         .slide {
96                                 visibility:visible;
97                         }
98                 }
99
100                 > .deck-child-current {
101                         @include transform(none);
102                 }
103         }
104         
105         .deck-prev-link {
106                 left:auto;
107                 right:8px;
108                 top:59px;
109                 @include rotate(90deg);
110         }
111         
112         .deck-next-link {
113                 top:99px;
114                 @include rotate(90deg);
115         }
116 }