diff options
Diffstat (limited to 'css/components/slideshow.css')
-rwxr-xr-x | css/components/slideshow.css | 144 |
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 | } | ||