PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.6.1
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.6.1
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-product-category-carousel.css

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

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