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

feat: carrinho de email estilizado e responsivo

Browse Source
This commit is contained in:
Matheus Mariosa 2022-12-26 19:41:50 -03:00
parent 639cd513fb
commit 5460b231d3
4 changed files with 295 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
checkout/src/arquivos/js/components/Footer.js
View File

@ -79,8 +79,14 @@ export default class Footer {
let target = this.checkoutVazio; let target = this.checkoutVazio;
const title = document.getElementById("cart-title"); const title = document.getElementById("cart-title");
if(localStorage.getItem('title') === '4'){
title.style.color = 'black';
title.style.marginBottom = '16px';
}else{
title.style.color = 'white'; title.style.color = 'white';
title.style['margin-bottom'] = '110px'; title.style['margin-bottom'] = '110px';
}
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
@ -96,6 +102,7 @@ export default class Footer {
removeClassh3.classList.remove("displayNone"); removeClassh3.classList.remove("displayNone");
removeClassul.classList.remove('displayNone'); removeClassul.classList.remove('displayNone');
$(removeClassul).slick("refresh"); $(removeClassul).slick("refresh");
localStorage.setItem('title', 4)
}else if(checkoutTarget === "display: block;"){ }else if(checkoutTarget === "display: block;"){
title.style.color = 'white'; title.style.color = 'white';
title.style.marginBottom = '110px'; title.style.marginBottom = '110px';

3
checkout/src/arquivos/js/components/Header.js
View File

@ -65,7 +65,6 @@ export default class Header {
this.Circle1.classList.add('activeCircle'); this.Circle1.classList.add('activeCircle');
this.Circle2.classList.remove("activeCircle") this.Circle2.classList.remove("activeCircle")
this.Circle3.classList.remove("activeCircle") this.Circle3.classList.remove("activeCircle")
console.log('1')
} }
else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2' else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2'
|| window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2' || window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2'
@ -74,12 +73,10 @@ export default class Header {
this.Circle1.classList.remove("activeCircle") this.Circle1.classList.remove("activeCircle")
this.Circle2.classList.add("activeCircle"); this.Circle2.classList.add("activeCircle");
this.Circle3.classList.remove("activeCircle") this.Circle3.classList.remove("activeCircle")
console.log('2')
} else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){ } else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){
this.Circle1.classList.remove("activeCircle") this.Circle1.classList.remove("activeCircle")
this.Circle2.classList.remove("activeCircle") this.Circle2.classList.remove("activeCircle")
this.Circle3.classList.add("activeCircle"); this.Circle3.classList.add("activeCircle");
console.log('3')
} }
}) })

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

@ -1,13 +1,40 @@
.checkout-container { .checkout-container {
@media only screen and (min-width: 2500px){
height: 623px;
}
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: black;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 14px;
.link-cart { .link-cart {
margin: 0 !important;
height: 16px;
line-height: 16px;
@media only screen and (max-width: 1024px){
line-height: 12px;
}
@media only screen and (min-width: 2500px){
height: 33px;
line-height: 33px;
}
a { a {
color: $color-black; color: black;
font-family: 'Tenor Sans';
font-size: 14px; font-size: 14px;
text-transform: uppercase;
font-weight: 400;
@media only screen and (max-width: 1024px){
font-size: 10px;
margin-right: 16px;
}
@media only screen and (min-width: 2500px){
font-size: 28px;
}
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
@ -22,81 +49,285 @@
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 16px; margin: 0 0 21px;
@media only screen and (max-width: 1024px){
margin-bottom: 38px;
}
@media only screen and (max-width: 375px){
margin-bottom: 22px;
}
@media only screen and (min-width: 2500px){
margin-bottom: 23px;
}
label{
@media only screen and (max-width: 1024px){
margin-top: 16.55%;
}
@media only screen and (max-width: 375px){
margin-top: 30.4720115%;
}
@media only screen and (min-width: 2500px){
margin-top: 4.0008371%;
}
span { span {
color: #303030; font-family: 'Tenor Sans';
font-size: 24px; color: black;
font-size: 20px;
line-height: 23px;
font-weight: 400;
text-transform: uppercase;
@media only screen and (max-width: 1024px){
font-size: 14px;
line-height: 16px;
}
@media only screen and (max-width: 375px){
font-size: 12px;
line-height: 14px;
}
@media only screen and (min-width: 2500px){
font-size: 40px;
line-height: 47px;
}
} }
small { small {
color: $color-gray4; padding: 0;
font-family: 'Tenor Sans';
color: black;
font-size: 20px;
line-height: 23px;
font-weight: 400;
text-transform: uppercase;
@media only screen and (max-width: 1024px){
font-size: 14px;
line-height: 16px;
} }
@media only screen and (max-width: 375px){
font-size: 12px;
line-height: 14px;
}
@media only screen and (min-width: 2500px){
font-size: 40px;
line-height: 47px;
}
}
}
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 24.56px;
@media only screen and (max-width: 1024px){
width: 96.875%;
margin: 0 16px 22.56px;
}
@media only screen and (max-width: 375px){
width: 91.4666667%;
margin-bottom: 20.56px;;
}
@media only screen and (min-width: 2500px){
width: 48.549%;
}
input { input {
display: block;
box-shadow: none; box-shadow: none;
color: $color-black; color: black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 14.09px;
border: 2px solid $color-gray3; border: 1px solid black;
border-right: 0px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 0px 0px 5px;
width: 562px;
height: 52px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@media only screen and (max-width: 1024px){
width: 87.2217742%;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
@media only screen and (max-width: 375px){
width: 62.9737609% !important;
}
@media only screen and (min-width: 2500px){
width: 78.8285458%;
}
}
input::placeholder{
font-family: 'Open Sans';
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: black;
@media only screen and (min-width: 2500px){
font-size: 24px;
line-height: 33px;
}
} }
button { button {
background-color: $color-black; background-color: #00C8FF;
border-radius: 5px; border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; text-transform: uppercase;
color: black;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
height: 52px;
padding: 0 14.4px;
right: 0; right: 0;
top: 0; top: 0;
cursor: pointer;
@media (max-width: 490px) { @media only screen and (max-width: 375px){
height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@media only screen and (min-width: 2500px){
width: 22.5547648%;
font-size: 28px;
line-height: 38px;
}
span {
margin: 0 3.3px;
}
} }
span.help.error { span.help.error {
font-family: $font-family;
color: red; color: red;
margin-top: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media only screen and (max-width: 375px){
margin-top: 9px;
}
@media only screen and (min-width: 2500px){
margin-top: 1px;
font-size: 24px;
line-height: 33px;
}
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid black;
border-radius: 0; border-radius: 5px;
@media only screen and (max-width: 1024px){
padding-top: 19px;
width: 30.1757813%;
}
@media only screen and (max-width: 375px){
padding: 16px;
margin: 0 16px;
width: 82.4%;
}
@media only screen and (min-width: 2500px){
width: 38.8185%;
}
h3 { h3 {
font-family: $font-family;
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 9.56px 0;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media only screen and (max-width: 1024px){
margin-bottom: 6.56px;
}
@media only screen and (max-width: 375px){
margin-bottom: 9.56px
}
@media only screen and (min-width: 2500px){
font-size: 24px;
line-height: 33px;
margin-bottom: 14px;
}
} }
ul { ul {
margin: 0; margin: 0 0 10.56px;
@media only screen and (max-width: 1024px){
margin-bottom: 7.56px;
}
@media only screen and (max-width: 375px){
margin-bottom: 10.56px;
}
li { li {
span { span {
color: $color-black; font-family: $font-family;
color: black;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media only screen and (min-width: 2500px){
font-size: 24px;
line-height: 33px;
}
} }
i::before { i::before {
color: $color-black; color: #00C8FF;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
@media only screen and (min-width: 2500px){
font-size: 24px;
width: 33px;
height: 23.53px;
} }
}
}
}
.icon-lock{
right: -1px;
bottom: -30px;
@media only screen and (max-width: 1024px){
display: none;
} }
} }
@ -104,6 +335,12 @@
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
@media only screen and (min-width: 2500px){
font-size: inherit;
width: 114.55px;
height: 156.94px;
}
} }
} }
} }

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

@ -58,6 +58,7 @@ body {
@media only screen and (max-width: 1024px){ @media only screen and (max-width: 1024px){
height: 478px; height: 478px;
width: 100%;
}; };
@media only screen and (min-width: 2500px){ @media only screen and (min-width: 2500px){
height: 536.8px; height: 536.8px;
@ -85,7 +86,6 @@ body {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 40px 0 30px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
margin: 17px 0 16px; margin: 17px 0 16px;
@ -93,8 +93,24 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@media only screen and (max-width: 1024px){
margin: 17px 16px 16px;
} }
}
#orderform-title{
letter-spacing: 0;
@media only screen and (min-width: 2500px){
font-size: 48px;
line-height: 37px;
}
}
.dropdown { .dropdown {
&__content { &__content {
&--closed { &--closed {