ultimate-store-kit / assets / css / usk-product-category.css

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

241 lines 6.6 KB

Raw Download Zip

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