emmanuelvitor/m3-academy-template-checkout-EmmanuelVitor
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: cria estilizacao para responsividade do cart' (#8) from feature/checkoutCartResponsiveAdjustes into development

Browse Source 
Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#8
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-12-24 04:47:57 +00:00
commit a2aff8ccf2
6 changed files with 365 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -58,9 +58,9 @@
@media (min-width:2500px) { // @media (min-width:2500px) {
max-width: none; // max-width: none;
} // }
input { input {
box-shadow: none; box-shadow: none;
@ -142,12 +142,26 @@
h3 { h3 {
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@media (min-width:2500px) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
display: block;
@media (min-width: 2500px) {
display: block;
}
margin: 0; margin: 0;
li { li {
span { span {
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black;
@ -225,12 +239,16 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
} }
#ship-postalCode { #ship-postalCode {
// width: 100%; width: 100%;
// min-width: 95%; min-width: 95%;
border-radius: 8px; border-radius: 8px;
border: 1px solid $color-gray6; border: 1px solid $color-gray6;
height: 40px; height: 40px;
@media (min-width: 2500px) {
height: 55px;
}
} }
.ship-number { .ship-number {
@ -254,26 +272,32 @@ input#client-last-name,
input#client-document, input#client-document,
input#client-phone { input#client-phone {
width: 100%; width: 100%;
height: 32px;
@media (max-width: 767px) {
width: 98.8%;
}
} }
input#client-first-name { input#client-first-name {
width: 96%; width: 96%;
height: 32px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 96%; width: 96%;
} }
} }
p.client-first-name.input.pull-left.text.required, // p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required { // p.client-last-name.input.pull-left.text.required {
max-width: 48%; // max-width: 48%;
} // }
p.client-last-name.input.pull-left.text.required { p.client-last-name.input.pull-left.text.required {
margin-left: 5px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
max-width: 46.9%; max-width: 47.9%;
} }
} }
@ -282,6 +306,7 @@ input#client-phone {
width: 92%; width: 92%;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 96%; width: 96%;
} }
@ -296,9 +321,14 @@ input#client-phone {
.client-document.input.pull-left.text.required.mask, .client-document.input.pull-left.text.required.mask,
p.client-phone.input.pull-left.text.required.mask { p.client-phone.input.pull-left.text.required.mask {
width: 48%; width: 48%;
height: 42px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 46%; width: 48.6%;
}
@media (max-width: 767px) {
width: 48%;
} }
} }
@ -457,6 +487,45 @@ p.submit.btn-submit-wrapper {
.step.accordion-group.client-profile-data.active { .step.accordion-group.client-profile-data.active {
width: 88.5%; width: 88.5%;
height: auto; height: auto;
@media (min-width: 2500px) {
width: 100%;
}
@media (max-width: 1024px) {
width: 95.41% !important;
margin: 0 16px 18px;
}
}
.step.accordion-group.shipping-data {
@media (max-width: 1024px) {
width: 95.313% !important;
margin: 0 16px 18px;
}
}
.payment-data .step {
@media (max-width: 1024px) {
width: 95.41% !important;
margin: 0 16px 18px;
}
}
.cart-fixed.affix-top.cart-fixed-transition {
@media (max-width: 1024px) {
width: 96.68%;
margin: 0 16px;
}
} }
.cart-template .cart-fixed { .cart-template .cart-fixed {
@ -537,7 +606,15 @@ p.input.ship-postalCode.required.text {
input#client-email { input#client-email {
width: 96%; width: 96%;
height: 42px;
@media (max-width:1024px) {
width: 98.536%;
}
@media (max-width: 767px) {
min-width: 100%;
}
} }
.box-client-info { .box-client-info {
@ -552,6 +629,12 @@ input#client-email {
height: 100%; height: 100%;
padding: 0; padding: 0;
@media (max-width: 1024px) {
width: 96.29% !important;
margin: 0 16px 17px;
}
.accordion-toggle { .accordion-toggle {
@ -597,6 +680,10 @@ input#ship-receiverName {
p.client-first-name.input.pull-left.text.required, p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required { p.client-last-name.input.pull-left.text.required {
width: 46%; width: 46%;
@media (max-width: 1025px) {
width: 49.167%;
}
} }
.client-notice, .client-notice,
@ -614,6 +701,8 @@ p.client-last-name.input.pull-left.text.required {
i::before { i::before {
display: none; display: none;
} }
@ -715,6 +804,11 @@ button#go-to-shipping {
} }
span[data-i18n="clientProfileData.identification"]::before { span[data-i18n="clientProfileData.identification"]::before {
@media (min-width: 2500px) {
font-size: 32px !important;
line-height: 37px;
}
content: "Identificação"; content: "Identificação";
color: $color-black2; color: $color-black2;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -762,8 +856,14 @@ a#edit-shipping-data,
.mini-cart .url { .mini-cart .url {
img { img {
width: 60px;
height: 60px;
object-fit: cover;
width: 116.5px; @media (min-width: 2500px) {
width: 116.5px;
}
} }
} }
@ -772,9 +872,9 @@ a#edit-shipping-data,
// margin-bottom: 50px; // margin-bottom: 50px;
// } // }
span.shipping-date.pull-left { // span.shipping-date.pull-left {
display: none; // display: none;
} // }
strong.price.pull-right { strong.price.pull-right {
@media (min-width: 2500px) { @media (min-width: 2500px) {
@ -821,3 +921,101 @@ strong.price.pull-right {
@media (min-width: 2500px) {} @media (min-width: 2500px) {}
} }
.checkout-container .shipping-data .accordion-group .accordion-inner p input {
min-width: 95.5% !important;
height: 35.01px !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
;
@media (min-width: 2500px) {
height: 45px !important;
font-size: 28px;
line-height: 38px;
}
}
li.hproduct.item.muted {
display: flex;
align-items: center;
justify-content: space-between;
}
.summary-cart-template-holder.cart-fixed-transition {
height: 60px !important;
@media (min-width: 2500px) {
height: 116.5px !important;
}
@media (max-width: 1024px) {
height: 120px !important;
}
}
.box-client-info-pf {
@media (max-width: 767px) {
width: 100%;
}
}
.mini-cart .summary .summary-totalizers {
@media (max-width: 1024px) {
margin-right: 0;
padding: 0;
}
}
.SecurityEnvironmentIcon {
display: block;
@media (max-width: 767px) {
display: none;
}
@media (max-width: 1025px) {
display: none;
}
}
.PaymentCardNumber input,
.PaymentCardHolderName input {
@media (max-width: 767px) {
width: 92% !important;
min-width: none;
}
@media (max-width: 1025px) {
width: 92% !important;
min-width: none;
}
}
p.PaymentCardHolderDocument.input.text.required.mask,
.BillingAddress.BillingAddress-BRA.clearfix,
p.ChangeNumberOfPayments.clearfix {
display: block;
@media (max-width: 767px) {
display: none;
}
}
.vtex-omnishipping-1-x-option:hover,
.vtex-omnishipping-1-x-leanShippingOptionActive {
background: #F2F2F2 !important;
}
.FormFieldLabel {
color: $color-black !important;
}

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

@ -20,7 +20,8 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
height: 150px; height: 100%;
min-height: 120px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -75,7 +76,8 @@
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: $color-gray2;
;
} }
} }
} }
@ -543,32 +545,35 @@
&~button { &~button {
background: $color-blue2; background: $color-blue2;
;
margin-left: 8px;
background: #00c8ff;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: #fff;
height: 36px; height: 36px;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; left: 170px;
top: 39px; top: 38px;
transition: all 0.2s linear; transition: all .2s linear;
width: 100px; width: 100px;
text-transform: uppercase; text-transform: uppercase;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
letter-spacing: 0.05em; letter-spacing: .05em;
cursor: pointer; cursor: pointer;
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 194.16px; width: 100%;
height: 55px; height: 55px;
right: -413px; left: 100%;
font-size: 28px; font-size: 28px;
line-height: 38px; line-height: 38px;
top: 55px; top: 30%;
margin-left: 18.04px;
} }
@media (max-width: 375px) { @media (max-width: 375px) {
@ -667,11 +672,13 @@
} }
&__sla { &__sla {
color: #7d7d7d; color: $color-gray2;
;
} }
&__price { &__price {
color: #7d7d7d; color: $color-gray2;
font-weight: 500; font-weight: 500;
} }
@ -1047,7 +1054,15 @@
.payment-group-list-btn { .payment-group-list-btn {
margin: 0; margin: 0;
width: 100% !important;
@media (max-width: 1025px) {
width: 99.81% !important;
}
a { a {
display: none; display: none;
padding: 13px 9px; padding: 13px 9px;
border: 1px solid $color-gray2 ; border: 1px solid $color-gray2 ;
@ -1055,6 +1070,10 @@
text-align: center; text-align: center;
margin: 12px 0 0 0; margin: 12px 0 0 0;
@media (max-width: 1025px) {
width: 98.187% !important;
}
span { span {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
@ -1092,3 +1111,43 @@
display: block; display: block;
} }
} }
.vtex-shipping-preview-0-x-pc .ship-postalCode {
width: 100% !important;
}
input.success:not([invalid="true"]) {
color: #7D7D7D;
font-weight: 400;
font-size: 14px;
}
fieldset.payment-group {
@media (min-width: 2500px) {
width: 31.516%;
}
@media (max-width: 1025px) {
width: 99.81% !important;
}
}
.payment-group-item {
@media (max-width: 1025px) {
width: 99.81% !important;
}
}
.steps-view {
@media (min-width: 2500px) {
width: 60%;
}
@media (max-width: 1025px) {
width: 96.77% !important;
margin-top: 12px;
}
}

12
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -5,7 +5,19 @@ body .container-main.container-order-form .orderform-template.active {
margin-right: 0; margin-right: 0;
float: right; float: right;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
@media (max-width: 1025px) {
width: 100% !important;
}
}
}
.row-fluid .span6 {
@media (max-width: 1025px) {
width: 100% !important;
} }
} }

63
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -9,7 +9,8 @@ html {
} }
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; // width: 94.9734%;
width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
@ -87,6 +88,13 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@media (max-width: 1024px) {
margin-left: 20px;
}
} }
.dropdown { .dropdown {
@ -131,3 +139,56 @@ body {
} }
} }
} }
body .container-order-form {
@media (max-width: 1024px) {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
// .step.accordion-group.client-profile-data.active {
// @media (max-width: 1025px) {
// width: 93.34%;
// }
// }
// .step.accordion-group.client-profile-data.active {
// @media (max-width: 1025px) {
// width: 93.34%;
// }
// }
.row-fluid div#shipping-data {
@media (max-width: 1025px) {
width: 100%;
margin-left: 0;
}
}
body .container-main.container-order-form .orderform-template.active .mini-cart {
@media (max-width: 1025px) {
width: 100%;
}
}
body .container-main.container-order-form .orderform-template.active .mini-cart {
@media (max-width: 1025px) {
float: none;
}
}
.checkout-container .row-fluid.orderform-template.span12.active {
@media (max-width: 1025px) {
display: flex;
flex-direction: column;
justify-content: center;
}
}

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

@ -2,8 +2,10 @@
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
bottom: 0;
width: 100%; width: 100%;
margin-top: auto;
bottom: 0;
&__wrapper { &__wrapper {

3
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -11,7 +11,8 @@ $color-black2: #000000;
$color-white: #fff; $color-white: #fff;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7D7D7D;
;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;