bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored checkout flow on button click from pricing page, started to redsign the checkout page

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-06 12:23:27 +01:00
parent ff03643ec7
commit d9ccca3a5e
11 changed files with 204 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -2222,6 +2222,34 @@ article.card {
#pricing-modal-login-register #login-register > section form input[type="password"] {
max-width: 11em; }
#main-content form.commerce-checkout-flow {
max-width: 641px; }
#main-content form.commerce-checkout-flow .layout-checkout-form {
display: flex;
flex-flow: column; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main {
width: 100%;
float: none;
order: 2;
background-color: #ff9f50;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
width: 100%;
float: none;
order: 1; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary > h3 {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary {
background-color: #69cdcf;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption {
background-color: #50aa3c;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption input[type="text"] {
width: 5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer {
order: 3; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

6
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

46
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -1482,6 +1482,52 @@ article.card{
}
}
}
#main-content form.commerce-checkout-flow{
$w:3;
max-width: $column_width * $w + $column_goutiere * ($w - 1);
.layout-checkout-form{
display: flex;
flex-flow: column;
.layout-region-checkout-main{
// disable default style
width:100%;
float: none;
// apply custom style
order:2;
background-color: $color-webshowroom;
padding: 1em;
}
.layout-region-checkout-secondary{
// disable default style
width:100%;
float: none;
// apply custom style
order: 1;
// display: flex;
// flex-flow: row nowrap;
// >.checkout-pane{
// flex: 0 0 50%;
// }
>h3{display:none;}
#edit-order-summary{
background-color: $color-base;
padding:1em;
}
#edit-coupon-redemption{
background-color: $color-showrooms;
padding:1em;
input[type="text"]{
width: 5em;
}
}
}
.layout-region-checkout-footer{
order: 3;
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|