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

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

@ -58,9 +58,9 @@
@media (min-width:2500px) {
max-width: none;
}
// @media (min-width:2500px) {
// max-width: none;
// }
input {
box-shadow: none;
@ -142,12 +142,26 @@
h3 {
color: #303030;
margin: 0 0 8px 0;
@media (min-width:2500px) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
}
ul {
display: block;
@media (min-width: 2500px) {
display: block;
}
margin: 0;
li {
span {
font-family: $font-family;
color: $color-black;
@ -225,12 +239,16 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
}
#ship-postalCode {
// width: 100%;
// min-width: 95%;
width: 100%;
min-width: 95%;
border-radius: 8px;
border: 1px solid $color-gray6;
height: 40px;
@media (min-width: 2500px) {
height: 55px;
}
}
.ship-number {
@ -254,26 +272,32 @@ input#client-last-name,
input#client-document,
input#client-phone {
width: 100%;
height: 32px;
@media (max-width: 767px) {
width: 98.8%;
}
}
input#client-first-name {
width: 96%;
height: 32px;
@media (max-width: 1024px) {
width: 96%;
}
}
p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required {
max-width: 48%;
}
// p.client-first-name.input.pull-left.text.required,
// p.client-last-name.input.pull-left.text.required {
// max-width: 48%;
// }
p.client-last-name.input.pull-left.text.required {
margin-left: 5px;
@media (max-width: 1024px) {
max-width: 46.9%;
max-width: 47.9%;
}
}
@ -282,6 +306,7 @@ input#client-phone {
width: 92%;
@media (max-width: 1024px) {
width: 96%;
}
@ -296,9 +321,14 @@ input#client-phone {
.client-document.input.pull-left.text.required.mask,
p.client-phone.input.pull-left.text.required.mask {
width: 48%;
height: 42px;
@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 {
width: 88.5%;
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 {
@ -537,7 +606,15 @@ p.input.ship-postalCode.required.text {
input#client-email {
width: 96%;
height: 42px;
@media (max-width:1024px) {
width: 98.536%;
}
@media (max-width: 767px) {
min-width: 100%;
}
}
.box-client-info {
@ -552,6 +629,12 @@ input#client-email {
height: 100%;
padding: 0;
@media (max-width: 1024px) {
width: 96.29% !important;
margin: 0 16px 17px;
}
.accordion-toggle {
@ -597,6 +680,10 @@ input#ship-receiverName {
p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required {
width: 46%;
@media (max-width: 1025px) {
width: 49.167%;
}
}
.client-notice,
@ -614,6 +701,8 @@ p.client-last-name.input.pull-left.text.required {
i::before {
display: none;
}
@ -715,6 +804,11 @@ button#go-to-shipping {
}
span[data-i18n="clientProfileData.identification"]::before {
@media (min-width: 2500px) {
font-size: 32px !important;
line-height: 37px;
}
content: "Identificação";
color: $color-black2;
font-family: $font-family-secundary;
@ -762,8 +856,14 @@ a#edit-shipping-data,
.mini-cart .url {
img {
width: 60px;
height: 60px;
object-fit: cover;
@media (min-width: 2500px) {
width: 116.5px;
}
}
}
@ -772,9 +872,9 @@ a#edit-shipping-data,
// margin-bottom: 50px;
// }
span.shipping-date.pull-left {
display: none;
}
// span.shipping-date.pull-left {
// display: none;
// }
strong.price.pull-right {
@media (min-width: 2500px) {
@ -821,3 +921,101 @@ strong.price.pull-right {
@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;
border-radius: 5px;
padding: 16px;
height: 150px;
height: 100%;
min-height: 120px;
@include mq(md, max) {
margin: 0px 0 25px 0;
@ -75,7 +76,8 @@
.shipping-date,
.price {
color: #7d7d7d;
color: $color-gray2;
;
}
}
}
@ -543,32 +545,35 @@
&~button {
background: $color-blue2;
;
margin-left: 8px;
background: #00c8ff;
border-radius: 8px;
border: none;
color: $color-white;
color: #fff;
height: 36px;
outline: none;
position: absolute;
right: -150px;
top: 39px;
transition: all 0.2s linear;
left: 170px;
top: 38px;
transition: all .2s linear;
width: 100px;
text-transform: uppercase;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
letter-spacing: .05em;
cursor: pointer;
@media (min-width: 2500px) {
width: 194.16px;
width: 100%;
height: 55px;
right: -413px;
left: 100%;
font-size: 28px;
line-height: 38px;
top: 55px;
top: 30%;
margin-left: 18.04px;
}
@media (max-width: 375px) {
@ -667,11 +672,13 @@
}
&__sla {
color: #7d7d7d;
color: $color-gray2;
;
}
&__price {
color: #7d7d7d;
color: $color-gray2;
font-weight: 500;
}
@ -1047,7 +1054,15 @@
.payment-group-list-btn {
margin: 0;
width: 100% !important;
@media (max-width: 1025px) {
width: 99.81% !important;
}
a {
display: none;
padding: 13px 9px;
border: 1px solid $color-gray2 ;
@ -1055,6 +1070,10 @@
text-align: center;
margin: 12px 0 0 0;
@media (max-width: 1025px) {
width: 98.187% !important;
}
span {
margin: 0 !important;
padding: 0 !important;
@ -1092,3 +1111,43 @@
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;
float: right;
}
.orderform-template-holder {
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 {
width: 94.9734%;
// width: 94.9734%;
width: 100%;
margin: auto auto 0 auto;
}
@ -87,6 +88,13 @@ body {
@include mq(md, max) {
margin-left: 30px;
}
@media (max-width: 1024px) {
margin-left: 20px;
}
}
.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 {
border-top: none;
color: $color-gray2;
bottom: 0;
width: 100%;
margin-top: auto;
bottom: 0;
&__wrapper {

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

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