PluginProbe
WP Directory Kit / 1.2.7
WP Directory Kit v1.2.7
1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 1.4.0 1.4.1 All 35 releases
wpdirectorykit / elementor-elements / assets / css / widgets / wdk-listing-carousel.css

wdk-listing-carousel.css in WP Directory Kit 1.2.7, at elementor-elements/assets/css/widgets/wdk-listing-carousel.css

311 lines 8.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wdk-listing-carousel {
2 display: -webkit-flex;
3 display: -webkit-box;
4 display: -ms-flexbox;
5 display: flex;
6 -webkit-flex-wrap: wrap;
7 -ms-flex-wrap: wrap;
8 flex-wrap: wrap;
9 margin: 0 -15px;
10 margin-bottom: -15px;
11 }
12
13 .wdk-listing-carousel .wdk_listing_slider_box,
14 .wdk-listing-carousel .wdk-cls-banner-thumbs {
15 margin-bottom: 15px;
16 -webkit-box-flex: 0;
17 -webkit-flex: 0 0 calc(100% / 1);
18 -ms-flex: 0 0 calc(100% / 1);
19 flex: 0 0 calc(100% / 1);
20 width: calc(100% / 1);
21 padding: 0 15px;
22 }
23
24 .wdk-listing-carousel .wdk_listing_slider_box.full_width,
25 .wdk-listing-carousel .wdk-cls-banner-thumbs.full_width {
26 margin-bottom: 15px;
27 -webkit-box-flex: 0;
28 -webkit-flex: 0 0 calc(100% / 1);
29 -ms-flex: 0 0 calc(100% / 1);
30 flex: 0 0 calc(100% / 1);
31 width: calc(100% / 1);
32 padding: 0 15px;
33 }
34
35 .wdk-listing-carousel .wdk_listing_slider_ini {
36 margin: -10px;
37 }
38
39 .wdk-listing-carousel .wdk_listing_slider_ini:not(.slick-initialized) > div:not(:nth-child(1)) {
40 display: none !important;
41 }
42
43 .wdk-listing-carousel .wdk-listing-image {
44 object-fit: cover;
45 object-position: center center;
46 width: 100%;
47 height: 350px;
48 max-width: 100%;
49 }
50
51 .wdk-listing-carousel .banner-thumbs .banner-thumb > video.wdk-listing-image,
52 .wdk-listing-carousel .banner-thumbs .banner-thumb > img.wdk-listing-image {
53 border: 0;
54 }
55
56 .wdk-listing-carousel .slick-slide > div {
57 font-size: 0;
58 padding: 10px;
59 }
60
61 .wdk-listing-carousel .wdk-listing-image.auto_height {
62 object-fit: initial !important;
63 height: auto !important;
64 }
65
66 .wdk-listing-carousel .wdk_listing_slider_ini:not(.slick-initialized) .wdk_lr_s_item:not(:nth-child(1)) {
67 display: none !important;
68 }
69
70 .wdk-listing-carousel .wdk_listing_slider_ini .wdk-listing-card {
71 margin: 15px 15px;
72 }
73
74 .wdk-listing-carousel .wdk_listing_slider_box {
75 display: flex;
76 flex-direction: column;
77 position: relative;
78 }
79
80 .wdk-listing-carousel .wdk_listing_slider_box .wdk-listing-image-card {
81 overflow: hidden;
82 background: #9f9f9f;
83 cursor: pointer;
84 position: relative;
85 display: block;
86 height: 100%;
87 }
88
89 .wdk-listing-carousel .wdk_listing_slider_box video.wdk-listing-image-card {
90 height: 100%;
91 object-fit: cover;
92 }
93
94 .wdk-listing-carousel .wdk_listing_slider_box .wdk-listing-image {
95 object-fit: cover;
96 }
97
98 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_top {
99 flex-direction: column-reverse;
100 }
101
102 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow {
103 position: absolute;
104 top: 50%;
105 transform: translateY(-50%);
106 }
107
108 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-prev {
109 left: 0;
110 }
111
112 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-next {
113 right: 0;
114 }
115
116 .wdk-listing-carousel .wdk_listing_slider_box.wdk_lr_slider_dots_in .slick-dots, .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_bottom.wdk-listing-carousel_arrows_in .wdk-listing-carousel_arrows {
117 position: absolute;
118 width: 100%;
119 margin-bottom: 10px;
120 bottom: 0;
121 }
122
123 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_top.wdk-listing-carousel_arrows_in .wdk-listing-carousel_arrows {
124 position: absolute;
125 width: 100%;
126 margin-top: 10px;
127 top: 0;
128 }
129
130 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow {
131 position: absolute;
132 top: 50%;
133 transform: translateY(-50%);
134 }
135
136 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-prev {
137 left: -55px;
138 margin: 0;
139 }
140
141 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-next {
142 right: -55px;
143 margin: 0;
144 }
145
146 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_out .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow {
147 border: 2px solid #000;
148 color: #000;
149 }
150
151 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle.wdk-listing-carousel_arrows_in .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-prev {
152 left: 15px;
153 margin: 15px;
154 margin-top: -10px;
155 }
156
157 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_middle.wdk-listing-carousel_arrows_in .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-next {
158 right: 15px;
159 margin: 15px;
160 margin-top: -10px;
161 }
162
163 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider {
164 margin-bottom: 0;
165 }
166
167 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider .slick-list .slick-track .slick-slide div .wdk-listing-image,
168 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider .slick-list .slick-track .slick-slide div,
169 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider .slick-list .slick-track .slick-slide,
170 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider .slick-list .slick-track,
171 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider .slick-list,
172 .wdk-listing-carousel .wdk_listing_slider_box .slick-dotted.slick-slider {
173 height: 100%;
174 }
175
176 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_dots_in .slick-dots, .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_arrows_bottom.wdk-listing-carousel_arrows_in .wdk-listing-carousel_arrows {
177 position: absolute;
178 margin-bottom: 10px;
179 bottom: 0;
180 }
181
182 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_dots_in .slick-dots {
183 width: initial;
184 flex-wrap: wrap;
185 }
186
187 .wdk-listing-carousel .wdk_listing_slider_box.wdk-listing-carousel_dots_in .slick-dots li {
188 flex: 0 0;
189 }
190
191 .wdk-listing-carousel .wdk_listing_slider_box .wdk-listing-image-card:after {
192 content: '';
193 display: block;
194 bottom: 0;
195 top: 0;
196 left: 0;
197 right: 0;
198 width: 100%;
199 height: 100%;
200 position: absolute;
201 }
202
203 .wdk-listing-carousel .wdk-listing-carousel_arrows {
204 display: flex;
205 justify-content: center;
206 align-content: center;
207 align-items: center;
208 }
209
210 .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow {
211 width: 40px;
212 height: 40px;
213 display: inline-block;
214 line-height: 40px;
215 border: 2px solid #FFFFFF30;
216 border-radius: 50%;
217 text-align: center;
218 display: flex;
219 justify-content: center;
220 align-content: center;
221 align-items: center;
222 cursor: pointer;
223 margin: 15px 15px;
224 color: #FFFFFF30;
225 }
226
227 .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow:hover {
228 border-color: #FFFFFF;
229 color: #FFFFFF;
230 }
231
232 .wdk-listing-carousel .slick-dots {
233 padding: 5px 5px;
234 position: initial;
235 display: flex;
236 justify-content: center;
237 }
238
239 .wdk-listing-carousel .slick-dots li {
240 width: auto;
241 height: auto;
242 margin: 5px 5px;
243 }
244
245 .wdk-listing-carousel .slick-dots li .wdk_dot {
246 color: #0201019C;
247 }
248
249 .wdk-listing-carousel .slick-dots li .wdk_dot:hover, .wdk-listing-carousel .slick-dots li.slick-active .wdk_dot {
250 color: #020101;
251 }
252
253 .wdk-listing-carousel .wdk_listing_slider_ini .wdk_lr_s_item_box_line .wdk_lr_s_item_box_title .wdk_lr_s_item_box_link,
254 .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow {
255 transition: all 0.4s ease-in-out;
256 }
257
258 .wdk-listing-carousel .wdk-cls-banner-thumbs {
259 width: 100%;
260 z-index: 99;
261 overflow: hidden;
262 }
263
264 .wdk-listing-carousel .wdk-cls-banner-thumbs .banner-thumbs {
265 width: initial;
266 height: calc(100% + 10px * 2);
267 display: flex;
268 flex-wrap: wrap;
269 margin: -10px;
270 justify-content: stretch;
271 align-items: stretch;
272 }
273
274 .wdk-listing-carousel .wdk-cls-banner-thumbs .banner-thumbs .banner-grid {
275 box-sizing: border-box;
276 break-inside: avoid;
277 padding: 0;
278 margin: 0;
279 position: relative;
280 overflow: hidden;
281 flex: 2 1 calc(100% / 3);
282 min-width: 150px;
283 padding: 10px;
284 height: initial;
285 }
286
287 .wdk-listing-carousel .wdk-cls-banner-thumbs .banner-thumbs .banner-grid .banner-thumb {
288 margin-right: 0;
289 padding: 0;
290 position: relative;
291 width: 100%;
292 height: 100%;
293 overflow: hidden;
294 }
295
296 .wdk-listing-carousel .wdk-cls-banner-thumbs .banner-thumbs .banner-grid .banner-thumb .banner-thumb-link {
297 display: block;
298 position: absolute;
299 left: 0;
300 right: 0;
301 top: 0;
302 bottom: 0;
303 width: 100%;
304 height: 100%;
305 }
306
307 .wdk-listing-carousel .wdk-cls-banner-thumbs.cols-4 .banner-thumbs .banner-grid {
308 flex: 2 1 calc(100% / 4);
309 min-width: calc(100% / 4);
310 }
311