summaryrefslogtreecommitdiff
path: root/css/components/slideshow.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/components/slideshow.css')
-rwxr-xr-xcss/components/slideshow.css144
1 files changed, 144 insertions, 0 deletions
diff --git a/css/components/slideshow.css b/css/components/slideshow.css
new file mode 100755
index 0000000..ce3d4f2
--- /dev/null
+++ b/css/components/slideshow.css
@@ -0,0 +1,144 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2/* ========================================================================
3 Component: Slideshow
4 ========================================================================== */
5/*
6 * 1. Create position context
7 * 2. Create stacking context to prevent z-index issues with other components
8 * 3. Set width because child elements are positioned absolute. Height is set via JS
9 * 4. Reset list style
10 * 5. Clip child elements
11 * 6. Deactivate browser history navigation in IE11
12 */
13.uk-slideshow {
14 /* 1 */
15 position: relative;
16 /* 2 */
17 z-index: 0;
18 /* 3 */
19 width: 100%;
20 /* 4 */
21 margin: 0;
22 padding: 0;
23 list-style: none;
24 /* 5 */
25 overflow: hidden;
26 /* 6 */
27 touch-action: pan-y;
28}
29/*
30 * Sub-object item
31 * 1. Position items above each other
32 * 2. Expand to parent container width
33 * 3. Hide by default
34 */
35.uk-slideshow > li {
36 /* 1 */
37 position: absolute;
38 top: 0;
39 left: 0;
40 /* 2 */
41 width: 100%;
42 /* 3 */
43 opacity: 0;
44}
45/*
46 * Active
47 * 1. Stack at first
48 * 2. Show slide
49 */
50.uk-slideshow > .uk-active {
51 /* 1 */
52 z-index: 10;
53 /* 2 */
54 opacity: 1;
55}
56/*
57 * Hide default images which is only relevant to keep existing proportions
58 */
59.uk-slideshow > li > img {
60 visibility: hidden;
61}
62/*
63 * Pointer for controls
64 */
65[data-uk-slideshow-slide] {
66 cursor: pointer;
67}
68/* Modifier: `uk-slideshow-fullscreen`
69 ========================================================================== */
70.uk-slideshow-fullscreen,
71.uk-slideshow-fullscreen > li {
72 height: 100vh;
73}
74/* Animations
75 ========================================================================== */
76/*
77 * Fade
78 */
79.uk-slideshow-fade-in {
80 -webkit-animation: uk-fade 0.5s linear;
81 animation: uk-fade 0.5s linear;
82}
83.uk-slideshow-fade-out {
84 -webkit-animation: uk-fade 0.5s linear reverse;
85 animation: uk-fade 0.5s linear reverse;
86}
87/*
88 * Scroll
89 */
90.uk-slideshow-scroll-forward-in {
91 -webkit-animation: uk-slide-right 0.5s ease-in-out;
92 animation: uk-slide-right 0.5s ease-in-out;
93}
94.uk-slideshow-scroll-forward-out {
95 -webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
96 animation: uk-slide-left 0.5s ease-in-out reverse;
97}
98.uk-slideshow-scroll-backward-in {
99 -webkit-animation: uk-slide-left 0.5s ease-in-out;
100 animation: uk-slide-left 0.5s ease-in-out;
101}
102.uk-slideshow-scroll-backward-out {
103 -webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
104 animation: uk-slide-right 0.5s ease-in-out reverse;
105}
106/*
107 * Scale
108 */
109.uk-slideshow-scale-out {
110 -webkit-animation: uk-fade-scale-15 0.5s ease-in-out reverse;
111 animation: uk-fade-scale-15 0.5s ease-in-out reverse;
112}
113/*
114 * Swipe
115 */
116.uk-slideshow-swipe-forward-in {
117 -webkit-animation: uk-slide-left-33 0.5s ease-in-out;
118 animation: uk-slide-left-33 0.5s ease-in-out;
119}
120.uk-slideshow-swipe-forward-out {
121 -webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
122 animation: uk-slide-left 0.5s ease-in-out reverse;
123}
124.uk-slideshow-swipe-backward-in {
125 -webkit-animation: uk-slide-right-33 0.5s ease-in-out;
126 animation: uk-slide-right-33 0.5s ease-in-out;
127}
128.uk-slideshow-swipe-backward-out {
129 -webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
130 animation: uk-slide-right 0.5s ease-in-out reverse;
131}
132.uk-slideshow-swipe-forward-in:before,
133.uk-slideshow-swipe-backward-in:before {
134 content: '';
135 position: absolute;
136 top: 0;
137 bottom: 0;
138 left: 0;
139 right: 0;
140 z-index: 1;
141 background: rgba(0, 0, 0, 0.6);
142 -webkit-animation: uk-fade 0.5s ease-in-out reverse;
143 animation: uk-fade 0.5s ease-in-out reverse;
144}