PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 2.0.5
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v2.0.5
3.1.4 3.0.8 3.0.9 3.1.0 3.1.2 3.1.3 3.0.7 3.0.5 3.0.4 3.0.3 3.0.2 trunk 1.5.0 1.5.1 1.5.2 1.6.1 1.6.2 1.6.3 1.6.4 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 All 93 releases
ultimate-store-kit / assets / css / usk-edd-category-carousel.css

usk-edd-category-carousel.css in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 2.0.5, at assets/css/usk-edd-category-carousel.css

269 lines 9.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .usk-edd-category-carousel .category-link {
2 text-decoration: none;
3 }
4 .usk-edd-category-carousel .edd-item {
5 position: relative;
6 transition: all 0.3s ease;
7 overflow: hidden;
8 border: 1px solid #ece8e8;
9 border-radius: 10px;
10 }
11 .usk-edd-category-carousel .edd-content {
12 position: absolute;
13 }
14 .usk-edd-category-carousel .usk-edd-category-carousel-image img {
15 width: 100%;
16 height: 100%;
17 object-fit: cover;
18 }
19 .usk-edd-category-carousel .title {
20 color: #2b2d42;
21 font-size: 18px;
22 font-weight: 700;
23 line-height: 22px;
24 margin: 0;
25 text-transform: uppercase;
26 text-decoration: none;
27 transition: all 0.3s ease;
28 margin-bottom: 6px;
29 }
30 .usk-edd-category-carousel .title:hover {
31 color: #d90429;
32 }
33 .usk-edd-category-carousel .edd-category-count {
34 color: #ef233c;
35 font-size: 13px;
36 text-transform: uppercase;
37 margin: 0;
38 transition: all 0.3s ease;
39 }
40 .usk-edd-category-carousel .edd-category-count .edd-count-text {
41 padding-left: 5px;
42 }
43 .usk-edd-category-carousel .edd-item-overlay {
44 position: absolute;
45 top: 0;
46 left: 0;
47 height: 100%;
48 width: 100%;
49 background: transparent;
50 }
51 .usk-edd-category-carousel.style-1 .edd-item:hover {
52 transition: all 0.3s ease;
53 }
54 .usk-edd-category-carousel.style-1 .usk-edd-category-carousel-image {
55 object-fit: cover;
56 min-height: 240px;
57 height: 100%;
58 width: 100%;
59 }
60 .usk-edd-category-carousel.style-1 .edd-content {
61 text-align: center;
62 padding: 20px;
63 width: 200px;
64 background: rgba(255, 255, 255, 0.582);
65 border-radius: 5px;
66 top: 50%;
67 left: 50%;
68 transform: translate(-50%, -50%);
69 z-index: 1;
70 }
71 .usk-edd-category-carousel.style-2 .edd-item {
72 height: 100px;
73 overflow: hidden;
74 }
75 .usk-edd-category-carousel.style-2 .edd-item:hover .usk-edd-category-carousel-image img {
76 transform: scale(1.1);
77 }
78 .usk-edd-category-carousel.style-2 .usk-edd-category-carousel-image {
79 width: 100%;
80 height: 100%;
81 }
82 .usk-edd-category-carousel.style-2 .usk-edd-category-carousel-image img {
83 transition: all 0.3s ease;
84 }
85 .usk-edd-category-carousel.style-2 .edd-content {
86 top: 50%;
87 transform: translateY(-50%);
88 display: flex;
89 align-items: center;
90 width: 100%;
91 padding: 20px;
92 z-index: 1;
93 }
94 .usk-edd-category-carousel.style-2 .title {
95 color: #fff;
96 margin: 0;
97 }
98 .usk-edd-category-carousel.style-2 .title:hover {
99 color: #d90429;
100 }
101 .usk-edd-category-carousel.style-2 .edd-category-count {
102 margin-left: auto;
103 }
104 .usk-edd-category-carousel.style-2 .edd-count-text {
105 display: none;
106 }
107 .usk-edd-category-carousel.style-2 .edd-count-number {
108 background: #fff;
109 color: #2b2d42;
110 width: 30px;
111 height: 30px;
112 line-height: 30px;
113 text-align: center;
114 display: inherit;
115 border-radius: 100px;
116 }
117 .usk-edd-category-carousel.style-2 .edd-count-number:hover {
118 color: #fff;
119 background: #d90429;
120 }
121 .usk-edd-category-carousel.style-3 .edd-item {
122 background: #fff;
123 }
124 .usk-edd-category-carousel.style-3 .edd-content {
125 position: static;
126 padding: 20px;
127 z-index: 1;
128 }
129 .usk-edd-category-carousel.style-3 .usk-edd-category-carousel-image {
130 object-fit: cover;
131 height: 240px;
132 width: 100%;
133 }
134 .usk-edd-category-carousel.style-4 .edd-item:hover .usk-edd-category-carousel-image img {
135 transform: scale(1.1);
136 }
137 .usk-edd-category-carousel.style-4 .edd-item:hover .title {
138 transform: translateY(0);
139 }
140 .usk-edd-category-carousel.style-4 .edd-item:hover .edd-category-count {
141 opacity: 1;
142 transform: translateY(0);
143 }
144 .usk-edd-category-carousel.style-4 .usk-edd-category-carousel-image {
145 object-fit: cover;
146 height: 220px;
147 width: 100%;
148 }
149 .usk-edd-category-carousel.style-4 .usk-edd-category-carousel-image img {
150 transition: all 0.3s ease;
151 }
152 .usk-edd-category-carousel.style-4 .edd-content {
153 bottom: 0;
154 padding: 20px;
155 overflow: hidden;
156 z-index: 1;
157 }
158 .usk-edd-category-carousel.style-4 .title {
159 color: #fff;
160 transform: translateY(30px);
161 transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease;
162 }
163 .usk-edd-category-carousel.style-4 .title:hover {
164 color: #d90429;
165 }
166 .usk-edd-category-carousel.style-4 .edd-category-count {
167 color: #d4d7ea;
168 opacity: 0;
169 transform: translateY(25px);
170 overflow: hidden;
171 transition: transform 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.4s step-end, opacity 0.4s ease;
172 }
173 .usk-edd-category-carousel.style-5 .edd-item {
174 display: flex;
175 align-items: center;
176 justify-content: center;
177 }
178 .usk-edd-category-carousel.style-5 .edd-item .usk-edd-category-carousel-image {
179 height: 220px;
180 }
181 .usk-edd-category-carousel.style-5 .edd-item:hover .usk-edd-category-carousel-image img {
182 transform: scale(1.1);
183 }
184 .usk-edd-category-carousel.style-5 .edd-item:hover .title {
185 opacity: 0;
186 }
187 .usk-edd-category-carousel.style-5 .edd-item:hover .edd-category-count {
188 opacity: 1;
189 transform: scale(1.1) translateY(-10px);
190 }
191 .usk-edd-category-carousel.style-5 .usk-edd-category-carousel-image {
192 height: 100%;
193 width: 100%;
194 object-fit: cover;
195 }
196 .usk-edd-category-carousel.style-5 .usk-edd-category-carousel-image img {
197 transition: all 0.3s ease;
198 }
199 .usk-edd-category-carousel.style-5 .edd-content {
200 top: 50%;
201 transform: translateY(-50%);
202 text-align: center;
203 z-index: 1;
204 }
205 .usk-edd-category-carousel.style-5 .title {
206 background-color: #2b2d42;
207 padding: 8px 20px;
208 border-radius: 2px;
209 color: #fff;
210 font-size: 14px;
211 line-height: 1;
212 transform: translateY(20px);
213 opacity: 1;
214 transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease;
215 }
216 .usk-edd-category-carousel.style-5 .title:hover {
217 color: #d90429;
218 }
219 .usk-edd-category-carousel.style-5 .edd-category-count {
220 color: #fff;
221 transform: translateY(-10px);
222 opacity: 0;
223 transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease;
224 line-height: 1;
225 }
226 .usk-edd-category-carousel .edd-item-overlay {
227 transition: all 0.3s ease;
228 }
229
230 .edd-item-match-height--yes .usk-edd-category-carousel .swiper-slide {
231 height: initial;
232 }
233
234 .elementor-widget-usk-edd-category-carousel .usk-arrows-container {
235 -webkit-transform: translate(var(--usk-edd-category-carousel-arrows-ncx, 0), var(--usk-edd-category-carousel-arrows-ncy, 40));
236 transform: translate(var(--usk-edd-category-carousel-arrows-ncx, 0), var(--usk-edd-category-carousel-arrows-ncy, 40));
237 }
238 .elementor-widget-usk-edd-category-carousel .usk-dots-container {
239 -webkit-transform: translate(var(--usk-edd-category-carousel-dots-nnx, 0), var(--usk-edd-category-carousel-dots-nny, 30));
240 transform: translate(var(--usk-edd-category-carousel-dots-nnx, 0), var(--usk-edd-category-carousel-dots-nny, 30));
241 }
242 .elementor-widget-usk-edd-category-carousel .usk-arrows-dots-container {
243 -webkit-transform: translate(var(--usk-edd-category-carousel-both-ncx, 0), var(--usk-edd-category-carousel-both-ncy, 40));
244 transform: translate(var(--usk-edd-category-carousel-both-ncx, 0), var(--usk-edd-category-carousel-both-ncy, 40));
245 }
246 .elementor-widget-usk-edd-category-carousel .usk-arrows-fraction-container {
247 -webkit-transform: translate(var(--usk-edd-category-carousel-arrows-fraction-ncx, 0), var(--usk-edd-category-carousel-arrows-fraction-ncy, 40));
248 transform: translate(var(--usk-edd-category-carousel-arrows-fraction-ncx, 0), var(--usk-edd-category-carousel-arrows-fraction-ncy, 40));
249 }
250 .elementor-widget-usk-edd-category-carousel .usk-position-center-left .usk-arrows-container,
251 .elementor-widget-usk-edd-category-carousel .usk-position-center-right .usk-arrows-container {
252 -webkit-transform: translate(var(--usk-edd-category-carousel-arrows-ncx, 0), var(--usk-edd-category-carousel-arrows-ncy, 0)) rotate(90deg);
253 transform: translate(var(--usk-edd-category-carousel-arrows-ncx, 0), var(--usk-edd-category-carousel-arrows-ncy, 0)) rotate(90deg);
254 }
255 .elementor-widget-usk-edd-category-carousel .usk-position-center-left .usk-dots-container,
256 .elementor-widget-usk-edd-category-carousel .usk-position-center-right .usk-dots-container {
257 -webkit-transform: translate(var(--usk-edd-category-carousel-dots-nnx, 0), var(--usk-edd-category-carousel-dots-nny, 0)) rotate(90deg);
258 transform: translate(var(--usk-edd-category-carousel-dots-nnx, 0), var(--usk-edd-category-carousel-dots-nny, 0)) rotate(90deg);
259 }
260 .elementor-widget-usk-edd-category-carousel .usk-position-center-left .usk-arrows-dots-container,
261 .elementor-widget-usk-edd-category-carousel .usk-position-center-right .usk-arrows-dots-container {
262 -webkit-transform: translate(var(--usk-edd-category-carousel-both-ncx, 0), var(--usk-edd-category-carousel-both-ncy, 0)) rotate(90deg);
263 transform: translate(var(--usk-edd-category-carousel-both-ncx, 0), var(--usk-edd-category-carousel-both-ncy, 0)) rotate(90deg);
264 }
265 .elementor-widget-usk-edd-category-carousel .usk-position-center-left .usk-arrows-fraction-container,
266 .elementor-widget-usk-edd-category-carousel .usk-position-center-right .usk-arrows-fraction-container {
267 -webkit-transform: translate(var(--usk-edd-category-carousel-arrows-fraction-ncx, 0), var(--usk-edd-category-carousel-arrows-fraction-ncy, 0)) rotate(90deg);
268 transform: translate(var(--usk-edd-category-carousel-arrows-fraction-ncx, 0), var(--usk-edd-category-carousel-arrows-fraction-ncy, 0)) rotate(90deg);
269 }