Skip to content

Commit 6591ac5

Browse files
PeeterPaalPeeterPaal
committed
Unify button styles
As product modal is not inside of formatted content, bring button styles out of formatted content styles.
1 parent 35b4e42 commit 6591ac5

File tree

4 files changed

+103
-86
lines changed

4 files changed

+103
-86
lines changed

‎sources/stylesheets/_content-formatted.scss

+15-14
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
}
@@ -269,6 +255,21 @@
269255
}
270256
}
271257

258+
.custom-btn,
259+
.form_submit_input,
260+
.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,
261+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
262+
display: inline-block;
263+
padding: 12px 40px;
264+
transition: all .1s ease-in-out;
265+
266+
&.custom-btn-disabled {
267+
border-color: $grey-1;
268+
background-color: $grey-1;
269+
color: $grey-2;
270+
}
271+
}
272+
272273
@media screen and (max-width: $mobile-width) {
273274
.content-formatted {
274275
.form_field_size_medium,

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

+32-27
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,38 @@ body {
3030
color: revert;
3131
}
3232

33+
.custom-btn,
34+
.form_submit_input,
35+
.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,
36+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
37+
border-radius: var(--button-border-radius);
38+
border: var(--button-border-size) solid var(--button-border-color);
39+
color: var(--button-color);
40+
background-color: var(--button-background-color);
41+
font-size: var(--button-font-size);
42+
font-weight: var(--button-font-weight);
43+
font-style: var(--button-font-style);
44+
text-decoration: var(--button-text-decoration);
45+
text-transform: var(--button-text-transform);
46+
hyphens: var(--button-hyphens);
47+
48+
&:hover {
49+
color: var(--button-hover-color);
50+
background-color: var(--button-hover-background-color);
51+
border-color: var(--button-hover-border-color);
52+
}
53+
54+
&:active {
55+
color: var(--button-active-color);
56+
background-color: var(--button-active-background-color);
57+
border-color: var(--button-active-border-color);
58+
}
59+
}
60+
61+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
62+
white-space: nowrap;
63+
}
64+
3365
.content-formatted {
3466
font-size: var(--content-body-font-size);
3567
color: var(--content-body-color);
@@ -65,33 +97,6 @@ body {
6597
}
6698
}
6799

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-
95100
.edy-product-widget-grid .edy-product-widget-item {
96101
.edy-product-widget-item-title,
97102
.edy-product-widget-item-details-flex-wrap .edy-product-widget-item-btn {

‎stylesheets/main.css

+55-44
Original file line numberDiff line numberDiff line change
@@ -1475,20 +1475,6 @@ body.edy-checkout-button-visible {
14751475
display: none;
14761476
}
14771477
}
1478-
.content-formatted .custom-btn,
1479-
.content-formatted .form_submit_input,
1480-
.content-formatted .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 {
1481-
display: inline-block;
1482-
padding: 12px 40px;
1483-
transition: all 0.1s ease-in-out;
1484-
}
1485-
.content-formatted .custom-btn.custom-btn-disabled,
1486-
.content-formatted .form_submit_input.custom-btn-disabled,
1487-
.content-formatted .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.custom-btn-disabled {
1488-
border-color: #F7F7F2;
1489-
background-color: #F7F7F2;
1490-
color: #888888;
1491-
}
14921478
.content-formatted .edy-texteditor-container {
14931479
margin: 8px;
14941480
}
@@ -1688,6 +1674,23 @@ body.edy-checkout-button-visible {
16881674
border-right: 1px solid var(--darkmode-color);
16891675
}
16901676

1677+
.custom-btn,
1678+
.form_submit_input,
1679+
.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,
1680+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
1681+
display: inline-block;
1682+
padding: 12px 40px;
1683+
transition: all 0.1s ease-in-out;
1684+
}
1685+
.custom-btn.custom-btn-disabled,
1686+
.form_submit_input.custom-btn-disabled,
1687+
.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.custom-btn-disabled,
1688+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn.custom-btn-disabled {
1689+
border-color: #F7F7F2;
1690+
background-color: #F7F7F2;
1691+
color: #888888;
1692+
}
1693+
16911694
@media screen and (max-width: 640px) {
16921695
.content-formatted .form_field_size_medium,
16931696
.content-formatted .form_field_size_large {
@@ -2327,6 +2330,44 @@ h4 {
23272330
color: revert;
23282331
}
23292332

2333+
.custom-btn,
2334+
.form_submit_input,
2335+
.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,
2336+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
2337+
border-radius: var(--button-border-radius);
2338+
border: var(--button-border-size) solid var(--button-border-color);
2339+
color: var(--button-color);
2340+
background-color: var(--button-background-color);
2341+
font-size: var(--button-font-size);
2342+
font-weight: var(--button-font-weight);
2343+
font-style: var(--button-font-style);
2344+
-webkit-text-decoration: var(--button-text-decoration);
2345+
text-decoration: var(--button-text-decoration);
2346+
text-transform: var(--button-text-transform);
2347+
-webkit-hyphens: var(--button-hyphens);
2348+
hyphens: var(--button-hyphens);
2349+
}
2350+
.custom-btn:hover,
2351+
.form_submit_input:hover,
2352+
.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:hover,
2353+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn:hover {
2354+
color: var(--button-hover-color);
2355+
background-color: var(--button-hover-background-color);
2356+
border-color: var(--button-hover-border-color);
2357+
}
2358+
.custom-btn:active,
2359+
.form_submit_input:active,
2360+
.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:active,
2361+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn:active {
2362+
color: var(--button-active-color);
2363+
background-color: var(--button-active-background-color);
2364+
border-color: var(--button-active-border-color);
2365+
}
2366+
2367+
.edy-product-widget-modal .edy-product-widget-modal-btn-wrapper .custom-btn {
2368+
white-space: nowrap;
2369+
}
2370+
23302371
.content-formatted {
23312372
font-size: var(--content-body-font-size);
23322373
color: var(--content-body-color);
@@ -2360,36 +2401,6 @@ h4 {
23602401
color: var(--darkmode-color);
23612402
opacity: 0.7;
23622403
}
2363-
.content-formatted .custom-btn,
2364-
.content-formatted .form_submit_input,
2365-
.content-formatted .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 {
2366-
border-radius: var(--button-border-radius);
2367-
border: var(--button-border-size) solid var(--button-border-color);
2368-
color: var(--button-color);
2369-
background-color: var(--button-background-color);
2370-
font-size: var(--button-font-size);
2371-
font-weight: var(--button-font-weight);
2372-
font-style: var(--button-font-style);
2373-
-webkit-text-decoration: var(--button-text-decoration);
2374-
text-decoration: var(--button-text-decoration);
2375-
text-transform: var(--button-text-transform);
2376-
-webkit-hyphens: var(--button-hyphens);
2377-
hyphens: var(--button-hyphens);
2378-
}
2379-
.content-formatted .custom-btn:hover,
2380-
.content-formatted .form_submit_input:hover,
2381-
.content-formatted .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:hover {
2382-
color: var(--button-hover-color);
2383-
background-color: var(--button-hover-background-color);
2384-
border-color: var(--button-hover-border-color);
2385-
}
2386-
.content-formatted .custom-btn:active,
2387-
.content-formatted .form_submit_input:active,
2388-
.content-formatted .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:active {
2389-
color: var(--button-active-color);
2390-
background-color: var(--button-active-background-color);
2391-
border-color: var(--button-active-border-color);
2392-
}
23932404
.content-formatted .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-title,
23942405
.content-formatted .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-flex-wrap .edy-product-widget-item-btn {
23952406
font-family: var(--font-family);

‎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)