Skip to content

Commit 1c5e150

Browse files
PeeterPaalPeeterPaal
committed
Generalize buy button styles
Make buy button styles work with regular buy button & product modal. In addition, fix a few other visual differences between regular buybutton and modal's button.
1 parent 6591ac5 commit 1c5e150

File tree

4 files changed

+133
-78
lines changed

4 files changed

+133
-78
lines changed

‎sources/stylesheets/_content-formatted.scss

+63-42
Original file line numberDiff line numberDiff line change
@@ -157,48 +157,6 @@
157157
}
158158
}
159159

160-
.edy-buy-button .edy-buy-button-title,
161-
.edy-js-buy-button {
162-
&:before {
163-
content: '+';
164-
margin-right: 4px;
165-
}
166-
}
167-
168-
.edy-buy-button-variants {
169-
display: flex;
170-
flex-direction: column;
171-
padding-bottom: 48px;
172-
173-
.form_field {
174-
display: grid;
175-
grid-template-columns: 1fr 1fr 3fr;
176-
gap: 8px;
177-
align-items: center;
178-
padding-top: 16px;
179-
padding-bottom: 16px;
180-
border-top: 0.5px solid rgba($black, .1);
181-
border-bottom: 0.5px solid rgba($black, .1);
182-
183-
& + .form_field {
184-
border-top: none;
185-
}
186-
187-
.form_field_label:after {
188-
content: ':';
189-
}
190-
191-
.form_field_select {
192-
border: none;
193-
background: none;
194-
195-
&:focus {
196-
outline: none;
197-
}
198-
}
199-
}
200-
}
201-
202160
.edy-buy-button-align-center .form_field {
203161
grid-template-columns: repeat(4, 1fr);
204162

@@ -270,6 +228,69 @@
270228
}
271229
}
272230

231+
.edy-buy-button .edy-buy-button-title,
232+
.edy-js-buy-button {
233+
&:before {
234+
content: '+';
235+
margin-right: 4px;
236+
}
237+
}
238+
239+
.edy-buy-button-variants {
240+
.content-formatted &, .edy-product-widget-modal-container & {
241+
display: flex;
242+
flex-direction: column;
243+
padding-bottom: 48px;
244+
245+
.form_field {
246+
display: grid;
247+
grid-template-columns: 1fr 1fr 3fr;
248+
gap: 8px;
249+
align-items: center;
250+
padding-top: 16px;
251+
padding-bottom: 16px;
252+
border-top: 0.5px solid rgba($black, .1);
253+
border-bottom: 0.5px solid rgba($black, .1);
254+
255+
& + .form_field {
256+
border-top: none;
257+
}
258+
259+
.form_field_label:after {
260+
content: ':';
261+
}
262+
263+
.form_field_select {
264+
border: none;
265+
background: none;
266+
267+
&:focus {
268+
outline: none;
269+
}
270+
}
271+
}
272+
}
273+
274+
.edy-product-widget-modal-container & {
275+
padding-bottom: 24px;
276+
277+
.form_field {
278+
&:first-child {
279+
padding-top: 16px;
280+
}
281+
282+
&:last-child {
283+
padding-bottom: 16px;
284+
}
285+
}
286+
}
287+
}
288+
289+
.edy-product-widget-modal .product-price-original {
290+
opacity: .4;
291+
margin-right: 4px;
292+
}
293+
273294
@media screen and (max-width: $mobile-width) {
274295
.content-formatted {
275296
.form_field_size_medium,

‎sources/stylesheets/custom-styles/_main-styles.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ body {
88
}
99
}
1010

11+
.edy-product-widget-modal {
12+
.edy-product-widget-modal-title,
13+
.edy-buy-button-price-container .edy-buy-button-price-original,
14+
.edy-buy-button-price-container .edy-buy-button-effective-price {
15+
color: var(--primary-color);
16+
}
17+
}
18+
1119
@for $heading from 1 through 4 {
1220
h#{$heading} {
1321
font-size: var(--heading-#{$heading}-font-size);
@@ -203,7 +211,10 @@ body {
203211
}
204212

205213
.edy-buy-button-price-container {
206-
color: var(--primary-color);
214+
.edy-buy-button-price-original,
215+
.edy-buy-button-effective-price {
216+
color: var(--primary-color);
217+
}
207218

208219
.edy-buy-button-price-original {
209220
opacity: .4;

‎stylesheets/main.css

+57-34
Original file line numberDiff line numberDiff line change
@@ -1599,39 +1599,6 @@ body.edy-checkout-button-visible {
15991599
text-align: center;
16001600
width: 100%;
16011601
}
1602-
.content-formatted .edy-buy-button .edy-buy-button-title:before,
1603-
.content-formatted .edy-js-buy-button:before {
1604-
content: "+";
1605-
margin-right: 4px;
1606-
}
1607-
.content-formatted .edy-buy-button-variants {
1608-
display: flex;
1609-
flex-direction: column;
1610-
padding-bottom: 48px;
1611-
}
1612-
.content-formatted .edy-buy-button-variants .form_field {
1613-
display: grid;
1614-
grid-template-columns: 1fr 1fr 3fr;
1615-
gap: 8px;
1616-
align-items: center;
1617-
padding-top: 16px;
1618-
padding-bottom: 16px;
1619-
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
1620-
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
1621-
}
1622-
.content-formatted .edy-buy-button-variants .form_field + .form_field {
1623-
border-top: none;
1624-
}
1625-
.content-formatted .edy-buy-button-variants .form_field .form_field_label:after {
1626-
content: ":";
1627-
}
1628-
.content-formatted .edy-buy-button-variants .form_field .form_field_select {
1629-
border: none;
1630-
background: none;
1631-
}
1632-
.content-formatted .edy-buy-button-variants .form_field .form_field_select:focus {
1633-
outline: none;
1634-
}
16351602
.content-formatted .edy-buy-button-align-center .form_field {
16361603
grid-template-columns: repeat(4, 1fr);
16371604
}
@@ -1691,6 +1658,55 @@ body.edy-checkout-button-visible {
16911658
color: #888888;
16921659
}
16931660

1661+
.edy-buy-button .edy-buy-button-title:before,
1662+
.edy-js-buy-button:before {
1663+
content: "+";
1664+
margin-right: 4px;
1665+
}
1666+
1667+
.content-formatted .edy-buy-button-variants, .edy-product-widget-modal-container .edy-buy-button-variants {
1668+
display: flex;
1669+
flex-direction: column;
1670+
padding-bottom: 48px;
1671+
}
1672+
.content-formatted .edy-buy-button-variants .form_field, .edy-product-widget-modal-container .edy-buy-button-variants .form_field {
1673+
display: grid;
1674+
grid-template-columns: 1fr 1fr 3fr;
1675+
gap: 8px;
1676+
align-items: center;
1677+
padding-top: 16px;
1678+
padding-bottom: 16px;
1679+
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
1680+
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
1681+
}
1682+
.content-formatted .edy-buy-button-variants .form_field + .form_field, .edy-product-widget-modal-container .edy-buy-button-variants .form_field + .form_field {
1683+
border-top: none;
1684+
}
1685+
.content-formatted .edy-buy-button-variants .form_field .form_field_label:after, .edy-product-widget-modal-container .edy-buy-button-variants .form_field .form_field_label:after {
1686+
content: ":";
1687+
}
1688+
.content-formatted .edy-buy-button-variants .form_field .form_field_select, .edy-product-widget-modal-container .edy-buy-button-variants .form_field .form_field_select {
1689+
border: none;
1690+
background: none;
1691+
}
1692+
.content-formatted .edy-buy-button-variants .form_field .form_field_select:focus, .edy-product-widget-modal-container .edy-buy-button-variants .form_field .form_field_select:focus {
1693+
outline: none;
1694+
}
1695+
.edy-product-widget-modal-container .edy-buy-button-variants {
1696+
padding-bottom: 24px;
1697+
}
1698+
.edy-product-widget-modal-container .edy-buy-button-variants .form_field:first-child {
1699+
padding-top: 16px;
1700+
}
1701+
.edy-product-widget-modal-container .edy-buy-button-variants .form_field:last-child {
1702+
padding-bottom: 16px;
1703+
}
1704+
1705+
.edy-product-widget-modal .product-price-original {
1706+
opacity: 0.4;
1707+
margin-right: 4px;
1708+
}
1709+
16941710
@media screen and (max-width: 640px) {
16951711
.content-formatted .form_field_size_medium,
16961712
.content-formatted .form_field_size_large {
@@ -2258,6 +2274,12 @@ body .dark-background {
22582274
color: var(--darkmode-color);
22592275
}
22602276

2277+
.edy-product-widget-modal .edy-product-widget-modal-title,
2278+
.edy-product-widget-modal .edy-buy-button-price-container .edy-buy-button-price-original,
2279+
.edy-product-widget-modal .edy-buy-button-price-container .edy-buy-button-effective-price {
2280+
color: var(--primary-color);
2281+
}
2282+
22612283
h1 {
22622284
font-size: var(--heading-1-font-size);
22632285
font-weight: var(--heading-1-font-weight);
@@ -2475,7 +2497,8 @@ h4 {
24752497
.content-formatted .edy-product-widget-item-price-original {
24762498
opacity: 0.4;
24772499
}
2478-
.content-formatted .edy-buy-button-price-container {
2500+
.content-formatted .edy-buy-button-price-container .edy-buy-button-price-original,
2501+
.content-formatted .edy-buy-button-price-container .edy-buy-button-effective-price {
24792502
color: var(--primary-color);
24802503
}
24812504
.content-formatted .edy-buy-button-price-container .edy-buy-button-price-original {

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)