GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estilizacao versao mobile na parte de pagamento profile, envio e pagamento

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-18 22:48:30 -03:00
parent d7efd87bcb
commit 79b7bc13fa
2 changed files with 198 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -1139,7 +1139,6 @@ div#payments-title::after {
grid-template-columns: 1fr 6fr 1fr 1fr;
grid-template-rows: 1fr;
td.product-image {
grid-column: 1 / 2;
grid-row: 1 / 3;
@ -1194,11 +1193,8 @@ div#payments-title::after {
justify-content: flex-end;
align-items: flex-start;
}
}
.row-fluid.summary {
display: flex !important;
flex-direction: column;
@ -1216,7 +1212,167 @@ div#payments-title::after {
}
}
ul.slick-dots {
display: none !important;
}
@media (max-width: 1024px) {
.row-fluid.orderform-template.span12.active {
display: flex;
flex-direction: column;
}
.orderform-template-holder.span8 {
width: 100%;
}
.orderform-template-holder.span8 .row-fluid {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
div#client-profile-data {
width: 100%;
}
div#shipping-data {
width: 100%;
}
fieldset.payment-group {
width: 100%;
justify-content: center;
display: flex;
align-items: center;
}
.required.payment-group-list-btn {
width: 100%;
}
.steps-view {
width: 100% !important;
padding: 0 2px;
}
iframe.span12 {
width: 100%;
}
.cart-template.mini-cart.span4 {
width: 100% !important;
}
.cart-fixed.cart-fixed-transition {
width: 100%;
}
h2[data-i18n="totalizers.summary"] {
width: 100%;
}
td.monetary {
width: 100%;
}
.orderform-template-holder.span8 {
width: 100% !important;
}
.required.payment-group-list-btn a {
padding: unset !important;
}
div#payment-data {
width: 100%;
}
fieldset.box-client-info-pf {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
p.client-email.input.text.required {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
p.client-first-name.input.pull-left.text.required {
grid-column: 1 / 2;
grid-row: 2/ 3;
}
p.client-last-name.input.pull-left.text.required {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
p.client-document.input.pull-left.text.required.mask {
grid-column: 1 / 2;
grid-row: 3/ 4;
}
div {
grid-column: 2/ 3;
grid-row: 3/ 4;
width: 100%;
}
}
input#client-email {
all: unset;
width: 100% !important;
border: 1px solid $color-gray5;
height: 42px;
border-radius: 0.5rem;
padding-left: 10px;
}
p.client-email.input.text.required {
width: 100% !important;
}
p.client-first-name.input.pull-left.text.required {
width: 98%;
}
input#client-first-name {
width: 100%;
}
p.client-last-name.input.pull-left.text.required {
width: 98%;
margin-left: 10px;
}
input#client-last-name {
width: 100%;
}
p.client-document.input.pull-left.text.required.mask {
width: 98%;
}
p.client-phone.input.pull-left.text.required.mask {
width: 98%;
margin-left: 10px;
}
input#client-phone {
width: 100%;
}
input#client-document {
width: 100%;
}
label.checkbox.newsletter-label {
justify-content: flex-start;
gap: 10px;
}
}

38
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -45,7 +45,6 @@
width: 100%;
}
}
}
&__stamps {
@ -109,3 +108,40 @@
}
}
}
@media (max-width: 1024px) {
.footerCheckout__wrapper {
.container {
display: grid;
grid-template-columns: fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
.footerCheckout__address {
grid-column: 1 / 2;
grid-row: 2/ 3;
max-width: unset;
}
ul.footerCheckout__stamps {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
ul.footerCheckout__developedBy {
grid-column: 1 / 2;
grid-row: 3 / 4;
display: flex;
justify-content: flex-start;
}
}
}
}
@media (max-width: 375px) {
.footerCheckout__wrapper {
.container {
grid-template-columns: 1fr;
}
}
}