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;
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['margin-bottom'] = '110px';
}
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
@ -96,6 +102,7 @@ export default class Footer {
removeClassh3.classList.remove("displayNone");
removeClassul.classList.remove('displayNone');
$(removeClassul).slick("refresh");
localStorage.setItem('title', 4)
}else if(checkoutTarget === "display: block;"){
title.style.color = 'white';
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.Circle2.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'
|| 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.Circle2.classList.add("activeCircle");
this.Circle3.classList.remove("activeCircle")
console.log('2')
} else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){
this.Circle1.classList.remove("activeCircle")
this.Circle2.classList.remove("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 {
@media only screen and (min-width: 2500px){
height: 623px;
}
.client-pre-email {
border-color: $color-gray4;
border-color: black;
font-family: $font-family;
padding-top: 8px;
padding-top: 14px;
.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 {
color: $color-black;
color: black;
font-family: 'Tenor Sans';
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 {
color: lighen($color-black, 10);
@ -22,81 +49,285 @@
justify-content: center;
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 {
color: #303030;
font-size: 24px;
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;
}
}
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 {
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 {
display: block;
box-shadow: none;
color: $color-black;
color: black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
padding: 0 14.09px;
border: 1px solid black;
border-right: 0px;
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) {
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 {
background-color: $color-black;
border-radius: 5px;
background-color: #00C8FF;
border-radius: 0px 8px 8px 0px;
border: none;
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;
top: 0;
cursor: pointer;
@media (max-width: 490px) {
height: 48px;
@media only screen and (max-width: 375px){
margin: 0;
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 {
font-family: $font-family;
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 {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
border: 1px solid black;
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 {
font-family: $font-family;
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 {
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 {
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 {
color: $color-black;
color: #00C8FF;
font-size: 1rem;
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;
font-size: 6rem;
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){
height: 478px;
width: 100%;
};
@media only screen and (min-width: 2500px){
height: 536.8px;
@ -85,7 +86,6 @@ body {
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 40px 0 30px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 17px 0 16px;
@ -93,8 +93,24 @@ body {
@include mq(md, max) {
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 {
&__content {
&--closed {