PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.0
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.0
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 / volume-discounts / volume-discounts.css

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

284 lines 11.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .merchant-volume-discounts {
2 margin: 20px 0;
3 }
4 .merchant-volume-discounts .added_to_cart,
5 .merchant-volume-discounts .wc-forward {
6 display: none !important;
7 }
8 .merchant-volume-discounts .merchant-volume-discounts-title {
9 font-size: 16px;
10 font-weight: normal;
11 color: #212121;
12 }
13 .merchant-volume-discounts .merchant-volume-discounts-item {
14 display: block;
15 background-color: var(--merchant-item-bg-color, #fcf0f1);
16 border: 1px solid var(--merchant-item-border-color, #d83b3b);
17 position: relative;
18 margin-top: 25px;
19 margin-bottom: 25px;
20 padding: 20px 20px 10px;
21 border-radius: 5px;
22 }
23 .merchant-volume-discounts .merchant-volume-discounts-item,
24 .merchant-volume-discounts .merchant-volume-discounts-item ul .woocommerce-Price-amount,
25 .merchant-volume-discounts .merchant-volume-discounts-item .merchant-volume-discounts-buy-label .woocommerce-Price-amount {
26 color: var(--merchant-item-text-color, #3c434a);
27 }
28 .merchant-volume-discounts .merchant-volume-discounts-item:hover {
29 color: var(--merchant-item-text-color-hover, var(--merchant-item-text-color));
30 background: var(--merchant-item-bg-color-hover, var(--merchant-item-bg-color));
31 border-color: var(--merchant-item-border-color-hover, var(--merchant-item-border-color));
32 }
33 .merchant-volume-discounts .merchant-volume-discounts-item:hover ul .woocommerce-Price-amount,
34 .merchant-volume-discounts .merchant-volume-discounts-item:hover .merchant-volume-discounts-buy-label .woocommerce-Price-amount {
35 color: var(--merchant-item-text-color-hover, var(--merchant-item-text-color));
36 }
37 .merchant-volume-discounts .merchant-volume-discounts-item.clickable {
38 cursor: pointer;
39 }
40 .merchant-volume-discounts .merchant-volume-discounts-item del,
41 .merchant-volume-discounts .merchant-volume-discounts-item bdi {
42 font-size: inherit !important;
43 }
44 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form {
45 margin-top: 10px;
46 }
47 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown {
48 margin-bottom: 5px;
49 }
50 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown select {
51 border: 2px solid #f0f0f1;
52 min-height: unset;
53 padding: 12px 10px;
54 font-size: 11px;
55 font-weight: normal;
56 background-image: url("data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%228%22 viewBox%3D%220 0 12 8%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M10.6665 1.81055L5.99984 6.47721L1.33317 1.81055%22 stroke%3D%22%23757575%22 stroke-width%3D%221.8%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
57 background-position: calc(100% - 10px) center;
58 background-repeat: no-repeat;
59 }
60 body.theme-Divi .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown select, body.theme-hello-elementor .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown select {
61 background-image: none;
62 }
63 body.theme-astra .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown select, body.theme-Divi .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .variation-form .variation-dropdown select {
64 width: 100%;
65 }
66 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer {
67 display: -webkit-box;
68 display: -ms-flexbox;
69 display: flex;
70 gap: 5px;
71 }
72 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input {
73 width: 150px;
74 }
75 body.theme-astra .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input, body.theme-hello-elementor .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input {
76 width: unset;
77 -webkit-box-flex: 1;
78 -ms-flex: 1;
79 flex: 1;
80 }
81 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity {
82 height: 45px;
83 border: 2px solid #f0f0f1;
84 background-color: #fff;
85 }
86 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity .botiga-quantity-plus,
87 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity .botiga-quantity-minus {
88 font-size: 14px;
89 color: #757575;
90 }
91 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity {
92 /* Chrome, Safari, Edge, Opera */
93 }
94 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input[type=number]::-webkit-outer-spin-button,
95 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input[type=number]::-webkit-inner-spin-button {
96 -webkit-appearance: none;
97 margin: 0;
98 color: #757575;
99 }
100 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity {
101 /* Firefox */
102 }
103 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input[type=number] {
104 -moz-appearance: textfield;
105 color: #757575;
106 }
107 body.theme-astra .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input.qty, body.theme-Divi .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input.qty, body.theme-hello-elementor .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-quantity-input .quantity input.qty {
108 background-color: unset;
109 padding: unset;
110 width: 100%;
111 height: 100%;
112 }
113 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-submit {
114 -webkit-box-flex: 4;
115 -ms-flex: 4;
116 flex: 4;
117 padding-top: 1.5px;
118 }
119 .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-submit button {
120 width: 100%;
121 font-size: 14px;
122 padding: 7px 15px;
123 border: 2px solid transparent;
124 }
125 body.theme-astra .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-submit button, body.theme-hello-elementor .merchant-volume-discounts .merchant-volume-discounts-item .offer-form .form-footer .offer-submit button {
126 padding: 12px 15px;
127 }
128 .merchant-volume-discounts .merchant-volume-discounts-item .user-message {
129 position: absolute;
130 top: 0;
131 right: 0;
132 left: 0;
133 bottom: 0;
134 border-radius: 5px;
135 visibility: hidden;
136 opacity: 0;
137 -webkit-transition: 300ms;
138 transition: 300ms;
139 background-color: rgba(0, 0, 0, 0.3);
140 }
141 .merchant-volume-discounts .merchant-volume-discounts-item .user-message.show {
142 visibility: visible;
143 opacity: 1;
144 }
145 .merchant-volume-discounts .merchant-volume-discounts-item .user-message .message-text {
146 position: absolute;
147 top: 50%;
148 left: 40px;
149 right: 40px;
150 text-align: center;
151 font-weight: bold;
152 line-height: 50px;
153 border-radius: 5px;
154 -webkit-user-select: none;
155 -moz-user-select: none;
156 -ms-user-select: none;
157 user-select: none;
158 -webkit-transform: translateY(-50%);
159 transform: translateY(-50%);
160 -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
161 box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
162 }
163 .merchant-volume-discounts .merchant-volume-discounts-item .user-message.success .message-text {
164 background-color: #55c649;
165 color: #fff;
166 }
167 .merchant-volume-discounts .merchant-volume-discounts-item .user-message.error .message-text {
168 background-color: #d83b3b;
169 color: #fff;
170 }
171 .merchant-volume-discounts .merchant-volume-discounts-item ul {
172 list-style: none;
173 padding: 0;
174 margin: 0;
175 }
176 .merchant-volume-discounts .merchant-volume-discounts-item ul li {
177 display: -webkit-box;
178 display: -ms-flexbox;
179 display: flex;
180 -webkit-box-pack: justify;
181 -ms-flex-pack: justify;
182 justify-content: space-between;
183 font-size: 13px;
184 padding: 0;
185 margin: 0;
186 }
187 .merchant-volume-discounts .merchant-volume-discounts-item-label > span {
188 background-color: var(--merchant-label-bg-color, #d83b3b);
189 padding: 4px 12px;
190 font-weight: bold;
191 border-radius: 5px;
192 margin-left: 10px;
193 }
194 .merchant-volume-discounts .merchant-volume-discounts-item-label > span,
195 .merchant-volume-discounts .merchant-volume-discounts-item-label > span .woocommerce-Price-amount {
196 color: var(--merchant-label-text-color, #ffffff);
197 }
198 .merchant-volume-discounts .merchant-volume-discounts-item-label {
199 position: absolute;
200 top: -13px;
201 left: 6px;
202 right: 0;
203 }
204 .merchant-volume-discounts.radio-style {
205 border: 3px dashed var(--merchant-item-bg-color, #fcf0f1);
206 padding: 20px;
207 border-radius: 8px;
208 }
209 .merchant-volume-discounts.radio-style .offer-form {
210 opacity: 0;
211 visibility: hidden;
212 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
213 transition: opacity 0.3s ease, visibility 0.3s ease;
214 height: 0;
215 }
216 .merchant-volume-discounts.radio-style .offer-form.visible {
217 opacity: 1;
218 visibility: visible;
219 height: auto;
220 }
221 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container {
222 display: -webkit-box;
223 display: -ms-flexbox;
224 display: flex;
225 -webkit-box-orient: horizontal;
226 -webkit-box-direction: normal;
227 -ms-flex-direction: row;
228 flex-direction: row;
229 gap: 10px;
230 -ms-flex-wrap: nowrap;
231 flex-wrap: nowrap;
232 -webkit-box-align: center;
233 -ms-flex-align: center;
234 align-items: center;
235 }
236 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container .merchant-selected-offer {
237 -webkit-appearance: none;
238 -moz-appearance: none;
239 appearance: none;
240 width: 15px;
241 height: 15px;
242 border: 2px solid #333;
243 border-radius: 50%;
244 outline: none;
245 cursor: pointer;
246 -webkit-transition: all 0.3s ease;
247 transition: all 0.3s ease;
248 position: relative;
249 vertical-align: middle;
250 }
251 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container .merchant-selected-offer:checked {
252 background-color: var(--merchant-item-border-color, #d83b3b);
253 border-color: var(--merchant-item-border-color, #d83b3b);
254 }
255 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container .merchant-selected-offer:checked::after {
256 content: "";
257 display: block;
258 width: 8px;
259 height: 8px;
260 background: #fff;
261 border-radius: 50%;
262 position: absolute;
263 top: 50%;
264 left: 50%;
265 -webkit-transform: translate(-50%, -50%);
266 transform: translate(-50%, -50%);
267 }
268 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container .merchant-selected-offer:hover {
269 border-color: var(--merchant-item-border-color, #d83b3b);
270 }
271 .merchant-volume-discounts.radio-style .merchant-volume-discounts-item-container .merchant-volume-discounts-item-wrapper {
272 width: 100%;
273 }
274 .merchant-volume-discounts.radio-style .add-to-cart-wrapper {
275 display: -webkit-box;
276 display: -ms-flexbox;
277 display: flex;
278 -webkit-box-pack: end;
279 -ms-flex-pack: end;
280 justify-content: flex-end;
281 }
282 .merchant-volume-discounts.radio-style .add-to-cart-wrapper .merchant-blk-discounts-add-to-cart {
283 width: 100%;
284 }