Skip to content

Commit 17d8d2d

Browse files
PeeterPaalPeeterPaal
authored
Merge pull request #5 from Voog/4-product-modal-styles
Align product modal styles with regular buy button styles
2 parents bedea73 + 6eb6ca0 commit 17d8d2d

File tree

5 files changed

+1076
-997
lines changed

5 files changed

+1076
-997
lines changed

‎sources/stylesheets/_content-formatted.scss

+78-56
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,4 @@
11
.content-formatted {
2-
.custom-btn,
3-
.form_submit_input,
4-
.edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn {
5-
display: inline-block;
6-
padding: 12px 40px;
7-
transition: all .1s ease-in-out;
8-
9-
&.custom-btn-disabled {
10-
border-color: $grey-1;
11-
background-color: $grey-1;
12-
color: $grey-2;
13-
}
14-
}
15-
162
.edy-texteditor-container {
173
margin: 8px;
184
}
@@ -171,48 +157,6 @@
171157
}
172158
}
173159

174-
.edy-buy-button .edy-buy-button-title,
175-
.edy-js-buy-button {
176-
&:before {
177-
content: '+';
178-
margin-right: 4px;
179-
}
180-
}
181-
182-
.edy-buy-button-variants {
183-
display: flex;
184-
flex-direction: column;
185-
padding-bottom: 48px;
186-
187-
.form_field {
188-
display: grid;
189-
grid-template-columns: 1fr 1fr 3fr;
190-
gap: 8px;
191-
align-items: center;
192-
padding-top: 16px;
193-
padding-bottom: 16px;
194-
border-top: 0.5px solid rgba($black, .1);
195-
border-bottom: 0.5px solid rgba($black, .1);
196-
197-
& + .form_field {
198-
border-top: none;
199-
}
200-
201-
.form_field_label:after {
202-
content: ':';
203-
}
204-
205-
.form_field_select {
206-
border: none;
207-
background: none;
208-
209-
&:focus {
210-
outline: none;
211-
}
212-
}
213-
}
214-
}
215-
216160
.edy-buy-button-align-center .form_field {
217161
grid-template-columns: repeat(4, 1fr);
218162

@@ -269,6 +213,84 @@
269213
}
270214
}
271215

216+
.custom-btn,
217+
.form_submit_input,
218+
.edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn,
219+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
220+
display: inline-block;
221+
padding: 12px 40px;
222+
transition: all .1s ease-in-out;
223+
224+
&.custom-btn-disabled {
225+
border-color: $grey-1;
226+
background-color: $grey-1;
227+
color: $grey-2;
228+
}
229+
}
230+
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+
272294
@media screen and (max-width: $mobile-width) {
273295
.content-formatted {
274296
.form_field_size_medium,

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

+47-28
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);
@@ -30,6 +38,41 @@ body {
3038
color: revert;
3139
}
3240

41+
.custom-btn,
42+
.custom-btn.edy-buy-button,
43+
.form_submit_input,
44+
.edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn,
45+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
46+
&:not(.custom-btn-disabled) {
47+
border-radius: var(--button-border-radius);
48+
border: var(--button-border-size) solid var(--button-border-color);
49+
color: var(--button-color);
50+
background-color: var(--button-background-color);
51+
font-size: var(--button-font-size);
52+
font-weight: var(--button-font-weight);
53+
font-style: var(--button-font-style);
54+
text-decoration: var(--button-text-decoration);
55+
text-transform: var(--button-text-transform);
56+
hyphens: var(--button-hyphens);
57+
58+
&:hover {
59+
color: var(--button-hover-color);
60+
background-color: var(--button-hover-background-color);
61+
border-color: var(--button-hover-border-color);
62+
}
63+
64+
&:active {
65+
color: var(--button-active-color);
66+
background-color: var(--button-active-background-color);
67+
border-color: var(--button-active-border-color);
68+
}
69+
}
70+
}
71+
72+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
73+
white-space: nowrap;
74+
}
75+
3376
.content-formatted {
3477
font-size: var(--content-body-font-size);
3578
color: var(--content-body-color);
@@ -65,33 +108,6 @@ body {
65108
}
66109
}
67110

68-
.custom-btn,
69-
.form_submit_input,
70-
.edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn {
71-
border-radius: var(--button-border-radius);
72-
border: var(--button-border-size) solid var(--button-border-color);
73-
color: var(--button-color);
74-
background-color: var(--button-background-color);
75-
font-size: var(--button-font-size);
76-
font-weight: var(--button-font-weight);
77-
font-style: var(--button-font-style);
78-
text-decoration: var(--button-text-decoration);
79-
text-transform: var(--button-text-transform);
80-
hyphens: var(--button-hyphens);
81-
82-
&:hover {
83-
color: var(--button-hover-color);
84-
background-color: var(--button-hover-background-color);
85-
border-color: var(--button-hover-border-color);
86-
}
87-
88-
&:active {
89-
color: var(--button-active-color);
90-
background-color: var(--button-active-background-color);
91-
border-color: var(--button-active-border-color);
92-
}
93-
}
94-
95111
.edy-product-widget-grid .edy-product-widget-item {
96112
.edy-product-widget-item-title,
97113
.edy-product-widget-item-details-flex-wrap .edy-product-widget-item-btn {
@@ -198,7 +214,10 @@ body {
198214
}
199215

200216
.edy-buy-button-price-container {
201-
color: var(--primary-color);
217+
.edy-buy-button-price-original,
218+
.edy-buy-button-effective-price {
219+
color: var(--primary-color);
220+
}
202221

203222
.edy-buy-button-price-original {
204223
opacity: .4;

‎sources/stylesheets/main.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
@import 'components/header';
77
@import 'components/search';
88

9-
@import 'custom-styles/main-styles.scss';
10-
119
@import 'layouts/auto-generated-product';
1210
@import 'layouts/common-page';
1311
@import 'layouts/front-page';
@@ -20,3 +18,5 @@
2018
@import 'content-formatted';
2119
@import 'fonts';
2220
@import 'general';
21+
22+
@import 'custom-styles/main-styles.scss';

0 commit comments

Comments
 (0)