PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.2.8
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.2.8
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / modules / product-labels / product-labels.css

product-labels.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.2.8, at assets/css/modules/product-labels/product-labels.css

247 lines 7.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Product Labels.
3 * Frontend view
4 *
5 */
6 .merchant-product-labels {
7 -ms-flex-wrap: wrap;
8 flex-wrap: wrap;
9 gap: 10px;
10 -webkit-box-pack: start;
11 -ms-flex-pack: start;
12 justify-content: flex-start;
13 display: none;
14 }
15 @media (min-width: 769px) {
16 .merchant-product-labels.show-on-desktop {
17 display: block;
18 }
19 }
20 @media (max-width: 768px) {
21 .merchant-product-labels.show-on-mobile {
22 display: block;
23 }
24 }
25 .merchant-product-labels ~ .merchant-product-labels {
26 display: none;
27 }
28 .merchant-product-labels__regular {
29 position: absolute;
30 top: 0;
31 z-index: 999;
32 }
33 .merchant-product-labels__regular.position-top-left {
34 left: 10px;
35 -webkit-box-pack: start;
36 -ms-flex-pack: start;
37 justify-content: flex-start;
38 }
39 .merchant-product-labels__regular.position-top-right {
40 right: 10px;
41 }
42 .merchant-product-labels--multiple {
43 width: 100%;
44 }
45 .merchant-product-labels__position {
46 position: absolute;
47 z-index: 999;
48 gap: 10px;
49 width: 100%;
50 }
51 .merchant-product-labels__position--top-left {
52 top: 10px;
53 left: 10px;
54 }
55 .merchant-product-labels__position--top-right {
56 top: 10px;
57 right: 10px;
58 }
59 .merchant-product-labels__label-wrapper {
60 position: absolute;
61 -webkit-box-align: center;
62 -ms-flex-align: center;
63 align-items: center;
64 -webkit-box-pack: center;
65 -ms-flex-pack: center;
66 justify-content: center;
67 }
68 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-5.position-top-left {
69 -webkit-transform: rotate(-45deg) translate(-50%, 50%);
70 transform: rotate(-45deg) translate(-50%, 50%);
71 -webkit-transform-origin: left;
72 transform-origin: left;
73 }
74 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-5.position-top-right {
75 -webkit-transform: rotate(45deg) translate(50%, 50%);
76 transform: rotate(45deg) translate(50%, 50%);
77 -webkit-transform-origin: right;
78 transform-origin: right;
79 }
80 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-5.position-absolute {
81 -webkit-transform: rotate(45deg) translate(-50%, 50%);
82 transform: rotate(45deg) translate(-50%, 50%);
83 -webkit-transform-origin: left;
84 transform-origin: left;
85 }
86 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-6.position-top-left {
87 -webkit-transform: rotate(-45deg) translate(-50%, 25%);
88 transform: rotate(-45deg) translate(-50%, 25%);
89 -webkit-transform-origin: left;
90 transform-origin: left;
91 }
92 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-6.position-top-right {
93 -webkit-transform: rotate(45deg) translate(50%, 25%);
94 transform: rotate(45deg) translate(50%, 25%);
95 -webkit-transform-origin: right;
96 transform-origin: right;
97 }
98 .merchant-product-labels__label-wrapper.merchant-product-labels__text-shape-6.position-absolute {
99 -webkit-transform: rotate(45deg) translate(-50%, 25%);
100 transform: rotate(45deg) translate(-50%, 25%);
101 -webkit-transform-origin: left;
102 transform-origin: left;
103 }
104 .merchant-product-labels__text .merchant-label {
105 position: relative;
106 padding: 0 8px;
107 }
108 .merchant-product-labels__image img {
109 height: 100%;
110 width: 100%;
111 display: block;
112 }
113 .merchant-product-labels .merchant-label {
114 line-height: 1;
115 width: 100%;
116 height: 100%;
117 display: -webkit-box;
118 display: -ms-flexbox;
119 display: flex;
120 -webkit-box-align: center;
121 -ms-flex-align: center;
122 align-items: center;
123 -webkit-box-pack: center;
124 -ms-flex-pack: center;
125 justify-content: center;
126 gap: 2px;
127 text-align: center;
128 }
129 .merchant-product-labels .merchant-label .woocommerce-Price-amount {
130 color: inherit;
131 }
132 .merchant-product-labels .merchant-label-shape-rounded {
133 border-radius: 4px;
134 }
135 .merchant-product-labels__text-shape-2 {
136 border-top-right-radius: 0 !important;
137 border-bottom-right-radius: 0 !important;
138 }
139 .merchant-product-labels__text-shape-2 .merchant-label {
140 background: inherit;
141 border-top-left-radius: inherit;
142 border-bottom-left-radius: inherit;
143 padding-left: 10px;
144 }
145 .merchant-product-labels__text-shape-2 .merchant-label:after {
146 content: "";
147 position: absolute;
148 width: 15px;
149 top: 0;
150 bottom: 0;
151 right: -10px;
152 background: inherit;
153 z-index: -1;
154 clip-path: polygon(0 0, 100% 0%, 34% 100%, 0% 100%);
155 }
156 .merchant-product-labels__text-shape-3 {
157 clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
158 }
159 .merchant-product-labels__text-shape-3 .merchant-label {
160 padding-left: 12px;
161 }
162 .merchant-product-labels__text-shape-4 {
163 clip-path: polygon(100% 0px, 100% 100%, 0% 100%, 10px 50%, 0% 0%);
164 border-top-left-radius: 0 !important;
165 border-bottom-left-radius: 0 !important;
166 }
167 .merchant-product-labels__text-shape-4 .merchant-label {
168 padding-left: 12px;
169 }
170 .merchant-product-labels__text-shape-5 {
171 -webkit-box-pack: center;
172 -ms-flex-pack: center;
173 justify-content: center;
174 }
175 .merchant-product-labels__text-shape-5.position-top-left {
176 -webkit-transform: rotate(-45deg) translate(-50%, 50%);
177 transform: rotate(-45deg) translate(-50%, 50%);
178 -webkit-transform-origin: left;
179 transform-origin: left;
180 }
181 .merchant-product-labels__text-shape-5.position-top-right {
182 -webkit-transform: rotate(-45deg) translate(50%, 50%);
183 transform: rotate(-45deg) translate(50%, 50%);
184 -webkit-transform-origin: right;
185 transform-origin: right;
186 }
187 .merchant-product-labels__text-shape-6 {
188 -webkit-box-pack: center;
189 -ms-flex-pack: center;
190 justify-content: center;
191 -webkit-transform: rotate(-45deg) translate(-50%, 50%);
192 transform: rotate(-45deg) translate(-50%, 50%);
193 -webkit-transform-origin: left;
194 transform-origin: left;
195 }
196 .merchant-product-labels__text-shape-6.position-top-left {
197 -webkit-transform: rotate(-45deg) translate(-50%, 25%);
198 transform: rotate(-45deg) translate(-50%, 25%);
199 -webkit-transform-origin: left;
200 transform-origin: left;
201 }
202 .merchant-product-labels__text-shape-6.position-top-right {
203 -webkit-transform: rotate(-45deg) translate(50%, 25%);
204 transform: rotate(-45deg) translate(50%, 25%);
205 -webkit-transform-origin: right;
206 transform-origin: right;
207 }
208 .merchant-product-labels__text-shape-6:after {
209 content: "";
210 background: inherit;
211 position: absolute;
212 z-index: -1;
213 top: -100%;
214 bottom: 0;
215 left: 0;
216 right: 0;
217 }
218 .merchant-product-labels__text-shape-8 {
219 border-radius: 50%;
220 }
221
222 .merchant-product-labels-image-wrap {
223 overflow: hidden;
224 }
225
226 li.type-product,
227 div.type-product {
228 position: relative;
229 }
230 li.type-product a img,
231 div.type-product a img {
232 width: 100%;
233 }
234
235 ul.wc-block-product-template li.product,
236 ul.wc-block-grid__products li.wc-block-grid__product,
237 ul.wc-block-grid__products li.product,
238 ul.products li.wc-block-grid__product,
239 ul.products li.product {
240 overflow: hidden;
241 }
242
243 .theme-kadence .editor-styles-wrapper .merchant_product-labels-grid_item_html a,
244 .theme-kadence .editor-styles-wrapper .merchant_product-labels-grid_item_html .wc-block-grid__product-image,
245 .theme-kadence .editor-styles-wrapper .merchant_product-labels-grid_item_html .wc-block-grid__product-image img {
246 width: 100% !important;
247 }