Add deck.js slide deck with basic layout
[kai/lca12.git] / themes / transition / horizontal-slide.css
1 .csstransitions.csstransforms {
2   overflow-x: 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(200%, 0, 0);
34   -moz-transform: translate(200%, 0);
35   -ms-transform: translate(200%, 0);
36   -o-transform: translate(200%, 0);
37   transform: translate3d(200%, 0, 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(-200%, 0, 0);
44   -moz-transform: translate(-200%, 0);
45   -ms-transform: translate(-200%, 0);
46   -o-transform: translate(-200%, 0);
47   transform: translate3d(-200%, 0, 0);
48 }
49 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
50   -webkit-transform: translate3d(-400%, 0, 0);
51   -moz-transform: translate(-400%, 0);
52   -ms-transform: translate(-400%, 0);
53   -o-transform: translate(-400%, 0);
54   transform: translate3d(-400%, 0, 0);
55 }
56 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
57   -webkit-transform: translate3d(200%, 0, 0);
58   -moz-transform: translate(200%, 0);
59   -ms-transform: translate(200%, 0);
60   -o-transform: translate(200%, 0);
61   transform: translate3d(200%, 0, 0);
62 }
63 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
64   -webkit-transform: translate3d(400%, 0, 0);
65   -moz-transform: translate(400%, 0);
66   -ms-transform: translate(400%, 0);
67   -o-transform: translate(400%, 0);
68   transform: translate3d(400%, 0, 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 }