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