diff --git a/checkout/src/arquivos/assets/svgs/Rectangle 138.svg b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg
new file mode 100644
index 0000000..8c52abc
--- /dev/null
+++ b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg
@@ -0,0 +1,3 @@
+
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 3ef4bc6..0ac9e16 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -55,7 +55,7 @@ export default class Footer {
let target = this.checkoutVazio;
let target2 = this.prateleira;
let Footer = this.Footer;
- const MeuCarrinho = this.MeuCarrinho
+ const MeuCarrinho = this.MeuCarrinho;
let config = {
childList: false,
attributes: true,
@@ -63,7 +63,8 @@ export default class Footer {
attributeFilter:["style"],
subtree:false,
characterData:true,
- characterDataOldValue:true};
+ characterDataOldValue:true
+ };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
@@ -71,18 +72,17 @@ export default class Footer {
if(mutation.oldValue == "display: none;"){
console.log("entrei no if",mutation.oldValue)
MeuCarrinho.classList.add('hide');
- target2.classList.add('hide')
- Footer.classList.remove('footerCheckout__ComSlick')
+ target2.classList.add('hide');
+ Footer.classList.remove('footerCheckout__ComSlick');
}else{
console.log("entrei no else",mutation.oldValue)
MeuCarrinho.classList.remove('hide');
- target2.classList.remove('hide')
- Footer.classList.add('footerCheckout__ComSlick')
+ target2.classList.remove('hide');
+ Footer.classList.add('footerCheckout__ComSlick');
}
}
});
});
-
observer.observe(target, config);
}
async addCarrossel() {
@@ -100,7 +100,7 @@ export default class Footer {
Você também pode gostar:
-
- Ver Produto
-
- Ver Produto
-
-
- -
+
-
Ver Produto
-
-
+ FINALIZAR COMPRA
+
+ `
+ this.PedidoSumary.innerHTML =`
+ Resumo do Pedido
`
dadosProfile.innerHTML =`
Identificação
@@ -91,6 +165,9 @@ export default class Footer {
this.more.innerHTML =`
Escolher mais produtos
`
+ this.safeP.innerHTML =`
+ Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+ `
table.innerHTML=
`
Frete
@@ -160,4 +237,112 @@ export default class Footer {
CONTINUAR COMPRANDO
`
}
+ async getPoint() {
+ let target = document
+ .getElementsByClassName("summary-cart-template-holder")[0];
+ // let targetsetatrr = target.setAttribute("style","width: 100%;")
+ let targetatrr = target.getAttribute("data-bind")
+
+ console.log(target,
+ "Co-ordinate of the element:",targetatrr);
+ }
+ async onUpdate() {
+ const target = this.Dados_profile_payment_wrapper;
+ const safeP = document.createElement("p");
+ safeP.innerHTML =`
+ Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+ `
+ let config = {
+ childList: false,
+ attributes: true,
+ attributeOldValue:true,
+ subtree:false,
+ characterData:true,
+ characterDataOldValue:true
+ };
+ let observer = new MutationObserver((mutations) => {
+ mutations.forEach(function (mutation) {
+ console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue);
+ if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
+ console.log("o pai está aberto",mutation.oldValue)
+ console.log(mutation)
+ console.log(target)
+ target.children[0].children[0].appendChild(safeP)
+ target
+ .children[0]
+ .children[1]
+ .children[0]
+ .children[1]
+ .children[4]
+ .children[0]
+ .children[1]
+ .children[3]
+ .children[2]
+ .children[0]
+ .innerHTML =`
+ Cartão de Débito
+ `
+ target
+ .children[0]
+ .children[1]
+ .children[0]
+ .children[1]
+ .children[4]
+ .children[0]
+ .children[1]
+ .children[3]
+ .children[9]
+ .children[0]
+ .innerHTML =`
+ Boleto à Vista
+ `
+ target
+ .children[0]
+ .children[1]
+ .children[0]
+ .children[1]
+ .children[4]
+ .children[0]
+ .children[1]
+ .children[3]
+ .children[10]
+ .children[0]
+ .innerHTML =`
+ Boleto Faturado
+ `
+ console.log(target
+ .children[0]
+ .children[1]
+ .children[0]
+ .children[1]
+ .children[4]
+ .children[0]
+ .children[1]
+ .children[3]
+ .children[10]
+ .children[0]
+ )
+ }
+ else{
+ console.log("o pai está fechado",mutation.oldValue);
+ console.log(mutation)
+ console.log(target)
+ console.log(target
+ .children[0]
+ .children[1]
+ .children[0]
+ .children[1]
+ .children[4]
+ .children[0]
+ .children[1]
+ .children[3]
+ .children[10]
+ .children[0]
+ )
+ }
+ });
+ });
+
+ observer.observe(target, config);
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 2461b50..4e53b5d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,4 +1,5 @@
#orderform-title{
+
font-weight: 700 !important;
color: $color-black !important;
}
@@ -7,9 +8,134 @@
color: $color-black;
font-weight: 700 !important;
}
+#client-pre-email{
+ width: 90%;
+}
+
+.box-client-info{
+ .newsletter-label{
+ @include mq(IVK,min){
+ line-height: 40px;
+ }
+ }
+ .newsletter{
+ #opt-in-newsletter{
+ @include mq(IVK,min){
+ width: 34px;
+ height: 34px;
+ }
+
+ }
+ .newsletter-text{
+ @include mq(IVK,min){
+ margin-left: 10px;
+ font-size: 24px;
+ }
+ }
+ }
+ &-pf{
+ width: 100%;
+ .client{
+ &-email{
+ #client-email{
+ @include mq(md,max){
+ width: 100%;
+ }
+ @include mq(IVK,min){
+ font-size: 28px;
+ }
+ max-width: 100%;
+ }
+ }
+ &-first-name,
+ &-last-name,
+ &-document,
+ &-phone{
+ width: 49%;
+ @media screen and (min-width: 0px) and (max-width: 310px){
+ width: 45% !important;
+ }
+ @media screen and (min-width: 0px) and (max-width: 767px){
+ display: inline-flex;
+ width: 48%;
+ white-space: nowrap;
+ flex-direction: column;
+ }
+ @media screen and (min-width: 0px) and (max-width: 99999999px){
+ display: inline-flex;
+ width: 40% !important;
+ float: left !important;
+ margin-left: 10px;
+ white-space: nowrap;
+ flex-direction: column;
+ }
+ }
+ &-first-name{
+ #client-first-name
+ {
+ width: 96% !important;
+ @include mq(IVK,min){
+ width: 98.34% !important;
+ font-size: 28px;
+ }
+ }
+ }
+ &-last-name{
+ #client-last-name{
+ @include mq(IVK,min){
+ width: 98.34% !important;
+ font-size: 28px;
+ }
+ @media screen and (min-width: 0px) and (max-width: 767px){
+ margin-left: 10px;
+ width: 97% !important;
+ }
+ width: 99% !important;
+ }
+ }
+ &-document{
+ #client-document
+ {
+ width: 96% !important;
+ @include mq(IVK,min){
+ width: 98.34% !important;
+ font-size: 28px;
+ }
+ }
+ }
+ &-phone{
+ #client-phone
+ {
+ @include mq(IVK,min){
+ width: 98.34% !important;
+ font-size: 28px;
+ }
+ @media screen and (min-width: 0px) and (max-width: 767px){
+ width: 100% !important;
+ }
+ width: 99% !important;
+ }
+ }
+ }
+ }
+}
.checkout-container {
+ @include mq(IVK, min) {
+ height: 133%;
+ }
+ .icon-lock{
+ @include mq(xll, max) {
+ display: none;
+ }
+ @include mq(IVK, min) {
+ width: 100%;
+ height: 100%;
+ left:85.64%;
+ top: 51px;
+ }
+ }
.client-pre-email {
- border-color: $color-gray4;
+ border-color: $color-black;
font-family: $font-family;
padding-top: 8px;
@@ -31,9 +157,23 @@
justify-content: center;
h3 {
- margin-bottom: 16px;
+ margin-bottom: 16px;
span {
+ @include mq(xll, max) {
+ font-size: 12px;
+ line-height: 14px;
+ }
+ @include mq(IVK, min) {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 40px;
+ line-height: 47px;
+ text-align: center;
+ text-transform: uppercase;
+
+ }
color: $color-black;
font-family: $font-family-secundary;
font-style: normal;
@@ -46,6 +186,19 @@
}
small {
+ @include mq(xll, max) {
+ font-size: 12px;
+ }
+ @include mq(IVK, min) {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 40px;
+ line-height: 47px;
+ text-align: center;
+ text-transform: uppercase;
+
+ }
color: $color-black;
font-family: $font-family-secundary;
font-style: normal;
@@ -98,12 +251,19 @@
}
.emailInfo {
+ @include mq(IVK, min) {
+ width: 36.1%;
+ height: 42%;
+ }
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
h3 {
+ @include mq(IVK, min) {
+ font-size: 24px;
+ }
color: #303030;
margin: 0 0 8px 0;
}
@@ -113,6 +273,9 @@
li {
span {
+ @include mq(IVK, min) {
+ font-size: 24px;
+ }
color: $color-black;
font-weight: 700;
}
@@ -126,6 +289,9 @@
}
i::before {
+ @include mq(IVK, min) {
+ font-size: 11.5rem;
+ }
color: $color-black;
font-size: 6rem;
opacity: 0.5;
@@ -133,21 +299,75 @@
}
}
+ #shipping-data{
+ .accordion-group{
+ .accordion-heading{
+ span{
+ @include mq(IVK, min) {
+ font-size: 32px;
+ margin: 34px;
+ }
+ }
+ }
+ @include mq(IVK, min) {
+ .accordion-inner{
+
+ .box-step{
+ .shp-summary-group{
+ &-content{
+ .shp-summary-group-info{
+ .shp-summary-group-address{
+ .address-summary{
+ span{
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
+ // @include mq(xll, max) {
+ // border: 0 !important;
+ // }
border-radius: 0;
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
+ .client-profile-summary{
+ .name{
+
+ margin-bottom: 6px;
+ }
+ }
.accordion-heading {
+ .accordion-toggle{
+
+ span {
+ color: #303030;
+ margin-bottom: 8px;
+ padding: 0;
+ @include mq(IVK, min) {
+ font-size: 32px;
+ margin: 34px;
+ }
+ }
+ }
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
-
i::before {
fill: #303030;
}
@@ -169,7 +389,31 @@
padding: 0;
/* General configurations */
-
+ .box-step{
+ .link-change-shipping{
+ display: none;
+ }
+ .shp-summary-group{
+ &-content{
+ @include mq(IVK, min) {
+ .shp-summary-package{
+ .shp-summary-package-time{
+ span{
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ align-items: center;
+ letter-spacing: 0.05em;
+ margin-left: 34px;
+ }
+ }
+ }
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ }
+ }
+ }
.client-notice {
color: $color-black;
}
@@ -241,7 +485,7 @@
border: 1px solid $color-gray4;
border-radius: 0;
- label {
+ label{
background-color: $color-white;
box-shadow: none;
color: #303030;
@@ -261,15 +505,41 @@
}
.shp-summary-group-info {
- border-color: $color-gray4;
+ border-color: $color-gray6;
+ @include mq(IVK, min) {
+ border: none;
+ }
}
.address-summary {
+ position: relative;
background: none;
border-color: $color-gray4;
- border-radius: 0;
color: #303030;
- padding: 12px;
+ padding: 26px;
+ .street,
+ .neighborhood{
+ margin-left: 18px;
+ }
+ .postalCode{
+ margin-left: 20px;
+ }
+ &::before{
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 33px;
+ margin-left: 12px;
+ margin-right: 8px;
+ width: 24px;
+ height: 24px;
+ background: no-repeat;
+ background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
+ background-size: 24px;
+ @include mq(xll, min) {
+ display: none;
+ }
+ }
@include mq(md, max) {
background-position: 8px 9px;
@@ -289,6 +559,14 @@
.shp-summary-group-price {
padding-right: 16px;
+ @include mq(IVK, min) {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ align-items: center;
+ letter-spacing: 0.05em;
+ margin-left: 34px;
+ }
}
.shp-summary-package {
@@ -306,8 +584,14 @@
}
.vtex-omnishipping-1-x-deliveryOptionActive {
- text-shadow: 1.3px 1px lighten($color-black, 50);
+ color:#7D7D7D;
+ text-shadow: 0.3px 1px #292929;
+
}
+ .vtex-omnishipping-1-x-deliveryOptionInactive{
+ color:rgba(196, 196, 196, 1) !important;
+
+ }
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index ad53583..99457ad 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,9 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
+#Finalizar{
+ text-decoration: none;
+ color: $color-black;
+}
+
.container {
@include mq(md, max) {
width: 100%;
}
}
+.cart-fixed{
+ .summary-template-holder{
+ border-bottom: 1px solid $color-gray5;
+ border-left: 1px solid $color-gray5;
+ border-right: 1px solid $color-gray5;
+ border-top-left-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+ }
+ a {
+ position: static;
+ }
+ small{
+ position: inherit;
+ }
+}
.totalizers-list{
td{
height: 0;
@@ -36,16 +56,17 @@
}
}
}
-
}
-.cart-template {
+.cart-totalizers{
+ @include mq(xll, max) {
+ width: 100% !important;
+ }
+}
+ .cart-template {
font-family: $font-family;
.summary-template-holder{
div{
border: 0 !important;
- @include mq(xll, max) {
- width: 100%;
- }
}
}
@include mq(md, max) {
@@ -55,34 +76,51 @@
display: none;
}
.cart {
- border: 3px solid $color-gray3;
+ border-top: 1px solid $color-gray5;
+ border-left: 1px solid $color-gray5;
+ border-right: 1px solid $color-gray5;
+ border-bottom-left-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
margin-top: 44px;
- @include mq(md, max) {
- margin: 0px 0 25px 0;
- border-left: none;
- border-right: none;
- border-radius: 0;
- }
+ // @include mq(md, max) {
+ // margin: 0px 0 25px 0;
+ // border-left: none;
+ // border-right: none;
+ // border-radius: 0;
+ // }
@include mq(xll, max) {
margin: 30px 0 25px 0;
}
}
.cart-fixed.affix {
+ top: -40px;
position: relative !important;
}
.cart-fixed {
- font-family: $font-family;
- width: 100%;
+ @include mq(xll, max) {
+ right: 0;
+ .payment-confirmation-wrap{
+ border: none;
+ }
+ }
+ font-family: $font-family;
+ width: 100%;
+ height: 100% !important;
h2 {
background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
+ @include mq(xll, max) {
+ right: 197px;
+ top: -22px;
+ // width: 351%;
+ }
}
.item-unavailable {
@@ -94,7 +132,7 @@
}
.cart {
- border: 1px solid $color-gray4;
+ // border: 1px solid $color-gray4;
ul li {
border-top: none;
@@ -104,9 +142,10 @@
&:not(:first-child) {
margin-top: 8px;
padding-top: 8px;
- border-top: 1px solid #e5e5e5;
}
-
+ .shipping-date{
+ display: none;
+ }
.shipping-date,
.price {
color: #7d7d7d;
@@ -115,11 +154,32 @@
}
.summary-template-holder {
+ @include mq(xll, max) {
+ bottom: 28px;
+ position: relative;
+ z-index: map-get($map:$z-index, $key: level1);
+ width: 94.6%;
+ }
+ @media screen and (min-width: 768px) and (max-width: 1280px) {
+ bottom: 28px;
+ position: relative;
+ z-index: map-get($map:$z-index, $key: level1);
+ width: 94.8%
+ }
border-top: none;
background: $color-white;
+ width: 330px;
+ @include mq(IVK, min) {
+ width: 94.89%;
+ }
}
#go-to-cart-button a {
+ @include mq(xll, max) {
+ left: 0;
+ bottom: 29px;
+ z-index: map-get($map:$z-index, $key: level5);
+ }
color: #303030;
text-decoration: underline;
}
@@ -186,6 +246,10 @@
height: 60px;
max-width: 100%;
width: auto;
+ @include mq(IVK, min) {
+ height: 146px;
+ width: auto;
+ }
@include mq(sm, max) {
height: 72px;
@@ -209,7 +273,6 @@
line-height: 14px;
transition: ease-in 0.22s all;
font-family: $font-family-secundary;
-
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
@@ -279,7 +342,8 @@
width: max-content !important;
@media (max-width: 490px) {
- margin-left: 84px !important;
+ margin-left: 63px !important;
+ width: 66px !important;
}
input {
@@ -797,10 +861,18 @@
&.info {
text-align: left;
+ @include mq(IVK, min) {
+ font-size: 28px;
+ line-height: 38px
+ }
}
&.monetary {
text-align: right;
+ @include mq(IVK, min) {
+ font-size: 28px;
+ line-height: 38px;
+ }
}
}
}
@@ -814,9 +886,39 @@
line-height: 21px;
color: $color-black;
}
+ td.monetary {
+ @include mq(IVK, min) {
+ font-size: 28px;
+ line-height: 38px;
+ text-align: right;
+ }
+ }
+ td.info{
+ @include mq(IVK, min) {
+ font-size: 36px;
+ line-height: 49px
+ }
+ }
+ }
+ }
+ .flex{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-wrap: wrap;
+ p{
+ margin-bottom: 14px;
+ margin-top: 17px;
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400 !important;
+ font-size: 12px;
+ line-height: 14px;
+ color:$color-black
+ }
button{
top: 121px;
- width: 140%;
+ width: 100%;
height: 42px;
background: $color-blue-100;
border-radius: 8px;
@@ -831,23 +933,6 @@
height: 48px;
white-space: nowrap;
}
- }
- .flex{
- display: flex;
- flex-direction: column;
- align-items: center;
- flex-wrap: wrap;
- p{
- margin-bottom: 14px;
- margin-top: 17px;
- font-family: $font-family-secundary;
- font-style: normal;
- font-weight: 400 !important;
- font-size: 12px;
- line-height: 14px;
- color:$color-black
- }
- }
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 951c6df..ab33f45 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,42 +4,191 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
+ @include mq(xll, max) {
+ width: 100%;
+ margin-top: 17px;
+ }
}
.orderform-template-holder {
width: 66.1132%;
}
}
+// @include mq(IVK, min) {
+
+ .box-payment-option{
+ iframe{
+ height: 100%;
+ }
+ }
+ .body-order-form{
+ .totalizers-list{
+ tr{
+ border-bottom: 1px solid black;
+ border-top: 1px solid black;
+ margin-left: 17px;
+ left: 20px;
+ position: relative;
+ text-align-last: start;
+ @include mq(IVK, min) {
+ left: -6px;
+ }
+ .info{
+ width: 100% !important;
+ }
+ }
+ }
+ tfoot{
+ .info{
+ width: 93% !important;
+ }
+ tr{
+ border-top: 1px solid;
+ margin-right: 17px;
+ left: 20px;
+ position: relative;
+ text-align-last: start;
+ text-indent: -17px;
+ @include mq(IVK, min) {
+ position: inherit;
+ }
+ }
+
+ }
+}
+.cart-fixed {
+ top: -42px;
+ @include mq(xll, max) {
+ right: 194px;
+ top: -10px;
+ }
+}
+.cart-items{
+ display: flex;
+ flex-direction: column-reverse;
+ align-items: flex-start;
+ .payment_Sumary{
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ margin: 24px 0px 34px 0;
+ @include mq(IVK, min) {
+ font-size: 32px !important;
+ line-height: 37px;
+ }
+ }
+}
+.hproduct{
+ .fn{
+ width: 115px !important;
+ height: 34px;
+ white-space: break-spaces !important;
+ color: $color-black;
+ font-family: $font-family-secundary;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ @include mq(IVK, min) {
+ font-size: 24px;
+ line-height: 28px;
+ width: 228px !important;
+ height: 64px;
+ }
+ }
+}
+.summary-cart-template-holder{
+ width: 332px;
+ @include mq(xll, max) {
+ width: 95%;
+ height: auto !important;
+ }
+ @include mq(IVK, min) {
+ width: 94.89%;
+ height: auto !important;
+ }
+}
#is-corporate-client{
display: none;
}
+.photo{
+ width: 60px;
+ height: 60px;
+ margin-left: 16px;
+ @include mq(IVK, min) {
+ width: 120px;
+ height: 120px;
+ }
+}
#postalCode-finished-loading{
+ .shipping-method-wrapper{
+ @include mq(IVK, min) {
+ height: 55px;
+ p{
+ margin-left: 0;
+ }
+ #shipping-option-delivery{
+ .shp-method-option-text{
+
+ }
+ }
+ }
+ }
.shipping-method-toggle{
- background: transparent !important;
- border-radius: 16px !important;
- border: 1px solid $color-black !important;
+ border: 1px solid $color-black;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+ border-radius: 100px;
}
div{
background: transparent !important;
- border-radius: 16px !important;
+ border-radius: 32px !important;
+ box-shadow: 0px 0px 3px rgba(196, 196, 196, 1);
}
span{
- color: $color-black;
- text-shadow: none !important;
+ // color:#7D7D7D;
+ // text-shadow: 0.3px 1px #292929 !important;
text-transform: uppercase;
+ font-family: $font-family;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ font-style: normal;
+ box-sizing: border-box;
+ @include mq(IVK, min) {
+ font-size: 28px;
+ line-height: 38px;
+ }
}
}
-#ship-number{
- width: 296px;
- height: 35px;
+.ship-number{
+ width: 100%;
}
+#ship-number,
+#ship-receiverName,
+#ship-postalCode,
#ship-complement{
+ @include mq(xll, max) {
+ width: 100% !important;
+ }
+ @include mq(IVK, min) {
+ width: 96% !important;
+ height: 61px !important;
+ font-size: 28px;
+ }
width: 296px;
height: 35px;
+ max-width: 100%!important;
}
-#ship-receiverName{
- width: 296px;
- height: 35px;
+#ship-number{
+ width: 97% !important;
}
+#ship-postalCode{
+ width: 96% !important;
+ margin-bottom: 10px;
+ width: 172px;
+ height: 36px;
+}
+
.ship-country{
display: none;
}
@@ -47,6 +196,9 @@ body .container-main.container-order-form .orderform-template.active {
.input-small{
width: 142px !important;
height: 42px !important;
+ @include mq(IVK,min){
+ height: 51px !important;
+ }
}
.box-client-info-pf{
.client-notice{
@@ -59,24 +211,50 @@ body .container-main.container-order-form .orderform-template.active {
font-weight: 400;
font-size: 14px;
line-height: 19px;
+ @include mq(IVK,min){
+ font-size: 28px;
+ line-height: 38px;
+ }
}
.help, .error{
color: red !important;
}
.input-xlarge{
+ @include mq(IVK,max){
+ width: 84%;
+ }
+ @include mq(IVK,min){
+ width: 92.24%;
+ height: 51px;
+ }
width: 298px;
height: 42px;
}
}
.accordion-group{
- width: 332px;
border-radius: 4px!important;
border: 1px solid $color-gray3;
border: 1px solid $color-gray6 !important;
.newsletter-text,
p,
label{
- color: #7D7D7D !important;
+ color: #7D7D7D;
+ font-weight: 700;
+ @include mq(IVK, min) {
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 38px;
+
+ }
+ }
+ p{
+ @include mq(IVK, min) {
+ font-weight: 400;
+ font-size: 28px !important;
+ line-height: 38px;
+ margin-left: 34px !important;
+
+ }
}
input,
.cart{
@@ -114,7 +292,11 @@ body .container-main.container-order-form .orderform-template.active {
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px;
fill: transparent !important;
-
+ @include mq(IVK, min) {
+ width: 40px !important;
+ height: 40px !important;
+ background-size: 40px;
+ }
}
}
#go-to-shipping,
@@ -123,11 +305,24 @@ body .container-main.container-order-form .orderform-template.active {
width: 100% !important;
background: $color-blue-100 !important;
text-transform: uppercase !important;
- height: 42px !important;
+ height: 42px;
+ border-radius: 8px;
+ @include mq(IVK,min){
+ height: 61px;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 38px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ }
}
}
#payment-data-submit{
- width: 100% !important;
+ @include mq(xll, max) {
+ width: 95% !important;
+
+ }
+ width: 88% !important;
background: $color-green_2 !important;
text-transform: uppercase !important;
height: 42px !important;
@@ -135,7 +330,18 @@ body .container-main.container-order-form .orderform-template.active {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
#payment-data{
- width: 719px !important;
+ @include mq(xll, max) {
+ width: 100%;
+ .accordion-group{
+ width: 137%;
+ }
+ }
+ .store-country-BRA.active{
+ @include mq(IVK, min) {
+ width: 92.443%;
+ }
+ }
+ right: 0;
#payment-group-custom204PaymentGroupPaymentGroup,
#payment-group-SPEIPaymentGroup,
#payment-group-MercadoPagoPaymentGroup,
@@ -150,19 +356,31 @@ body .container-main.container-order-form .orderform-template.active {
#payment-group-creditDirectSalePaymentGroup{
display: none;
}
+ .store-country-BRA.active{
+ @include mq(IVK, min) {
+ height: 803px;
+ }
+ }
+ .btn-small{
+ background: transparent !important;
+ border: 0 !important;
+ &:hover{
+ border: 0 !important;
+ }
+ }
.form-step{
display: flex;
height: 452px;
+ @include mq(xll, max) {
+ height: 744px;
+ }
}
- .accordion-group{
- width: 680px !important;
- height: 452px !important;
- }
- // h3{
- // display: block !important;
- // }
span,
a{
+ @include mq(IVK, min) {
+ width: 406px;
+ font-size: 28px;
+ }
width: 210px;
height: 50px;
}
@@ -183,12 +401,117 @@ body .container-main.container-order-form .orderform-template.active {
.payment-group-item-text{
background-image: none;
}
+ .payment-group{
+ @include mq(xll, max) {
+ .payment-group-list-btn{
+ width: 100%;
+ a{
+ width: 100%;
+ span{
+ width: 100%;
+ }
+ }
+ }
+ width: 100%;
+ }
+ }
.steps-view{
+ @include mq(xll, max) {
+ right: -8px;
+ top: 40%;
+ width: 97%;
+ }
position: absolute;
right: 0;
- top: -2px;
+ top: 33px;
+ @include mq(IVK, min) {
+ width: 62.5%;
+ height: 594px;
+ }
}
}
.PaymentCardHolderDocument{
display: none !important;
}
+.payment-group-item.active{
+ margin: 0 0 0 5px;
+}
+#client-profile-data{
+ @include mq(xll, max) {
+ width: 152%;
+ .link-cart{
+ margin: 14px 0 100px 0;
+ }
+ .filled{
+ width: 90% !important;
+ height: 164px !important;
+ }
+ }
+ @include mq(IVK, min) {
+ // width: 152%;
+ // .link-cart{
+ // margin: 14px 0 100px 0;
+ // }
+ height: 628px !important;
+ .filled{
+ width: 90.541% !important;
+ height: 234px !important;
+ }
+ }
+ .filled{
+ width: 332px;
+ height: 164px;
+ }
+}
+#shipping-data{
+ #force-shipping-fields{
+ text-decoration: none;
+ color: $color-blue-100;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ }
+ @include mq(xll, max) {
+ width: 100%;
+ .accordion-group{
+ width: 137%;
+ }
+ .filled{
+ width: 92% !important;
+ height: 164px !important;
+ }
+ }
+ @include mq(IVK, min) {
+ p{
+ margin-left: 0 !important;
+ }
+ .address-summary{
+ span,
+ #force-shipping-fields{
+ font-size: 28px;
+ }
+ }
+ }
+}
+#go-to-cart-button{
+ position: relative;
+ white-space: nowrap;
+ #orderform-minicart-to-cart{
+ position: unset;
+ }
+}
+.safep{
+ @include mq(IVK, min) {
+ width: 90%;
+ }
+ width: 622px;
+ height: 48px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400 !important;
+ font-size: 14px;
+ line-height: 24px;
+ letter-spacing: -0.01em;
+}
+
+
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 34526e6..20e4877 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -17,17 +17,40 @@ header {
width: 79.53125%;
margin: 0 auto;
}
-
body {
display: flex;
flex-direction: column;
min-height: 100% !important;
padding-top: 0 !important;
-
+ justify-content: space-between;
+ @media screen and (min-width: 2500px){
+ #app-container{
+ .App{
+ height: 100%;
+ div{
+ .CardForm{
+ div{
+ .PaymentCardNumber{
+ background: pink;
+ .FormFieldLabel {
+ font-size: 28px;
+ }
+ }
+ }
+ p{
+ font-size: 28px;
+ }
+ }
+ .ChangeNumberOfPayments{
+ font-size: 28px;
+ }
+ }
+ }
+ }
+ }
@include mq(md, max) {
padding-left: 0;
}
-
&.body-cart {
font-family: $font-family;
}
@@ -50,6 +73,12 @@ body {
.container-order-form,
.container-cart {
width: 86%;
+ @include mq(IVK, min) {
+ height: 100%;
+ }
+ @include mq(xll, max) {
+ width: 90.5%;
+ }
}
.container-cart{
display: flex;
@@ -77,6 +106,10 @@ body {
}
#cart-title,
#orderform-title {
+ @include mq(xll, max) {
+ font-size: 24px;
+ line-height: 33px ;
+ }
color: $color-gray2;
font-family: $font-family;
font-weight: 500;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index dabaf54..19a3bc2 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,12 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
/* _footer.scss */
+#product-name2616,
+#product-name2621{
+ font-size: 24px;
+ line-height: 28px;
+}
+#shipping-estimate-date{
+ font-size: 24px;
+ line-height: 28px;
+}
+
.footerCheckout {
position: relative;
border-top: 1px solid;
color: $color-gray2;
margin-top: 100px;
&__ComSlick{
- margin-top: 450px !important;
+ margin-top: 32.33%;
+ @media screen and (min-width: 0px) and (max-width: 575px){
+ margin-top: 400px;
+ }
+ @media screen and (min-width: 576px) and (max-width: 768px){
+ margin-top: 500px;
+ }
+ @media screen and (min-width: 769px) and (max-width: 1280px){
+ margin-top: 600px;
+ }
}
&__payments{
&__images{
@@ -146,20 +165,22 @@
}
}
&__prateleira{
- // background: gray;
position: absolute;
display: inline-flex;
width: 100% !important;
- height: 390px;
- // margin-bottom: 54px !important;
- top: -505px;
+ // height: 390px;
+ margin-top: 54px;
+ margin-bottom: 54px !important;
+ bottom: 70px;
align-items: center;
justify-content: center;
flex-direction: column;
.slick{
display: flex;
- width: 100%;
+ width: 123%;
height: 100%;
+ justify-content: center;
+
}
.SLick_title{
font-family: 'Tenor Sans', sans-serif;
@@ -176,7 +197,8 @@
z-index: map-get($map:$z-index, $key: level5);
position: absolute;
@include mq(xll, max) {
- left: 29px;
+ top: 49%;
+ left: 6%;
}
}
.Fakebutton-Next{
@@ -186,7 +208,8 @@
z-index: map-get($map:$z-index, $key: level5);
top: 227px;
@include mq(xll, max) {
- right: 22px;
+ top: 49%;
+ right: 5%;
}
}
.quadrado{
@@ -194,11 +217,15 @@
justify-content: space-between;
align-items: center;
text-align: center;
- width: 242px !important;
- height: 390px;
+ width: 100% !important;
+ // height: 390px;
margin-right: 16px;
background: transparent;
flex-direction: column;
+ @include mq(xll, max) {
+ // width: 43.7% !important;
+ // height: 112.734% !important;
+ }
&__btn{
button{
display: inline-flex;
@@ -211,39 +238,37 @@
text-align: center;
width: 26px;
height: 28px;
- @include mq(xll, max) {
- width: 16px ;
+ @include mq(x, max) {
+ width:17.09%;
height: 18px;
+ margin-bottom: 5px;
border-radius: 4px;
}
}
.cor{
- width: 54px !important;
- height: 28px !important;
+ width: 54px;
+ height: 28px;
@include mq(xll, max) {
width: 46px ;
height: 28px;
}
}
.verde{
- width: 54px !important;
- height: 28px !important;
+ width: 54px;
+ height: 28px;
}
.azul{
- width: 46px !important;
- height: 28px !important;
+ width: 46px;
+ height: 28px;
}
.jaq__azul{
- width: 112px !important;
- height: 28px !important;
+ width: 112px;
+ height: 28px;
white-space: nowrap;
- @include mq(xll, max) {
- width: 164px ;
- height: 42px;
- }
}
}
.Ver__produto{
+ margin-top: 5px;
width: 100%;
height: 42px;
color: $color-white;
@@ -251,36 +276,37 @@
border: 0;
background-color: $color-blue-100;
@include mq(xll, max) {
- width: 106px;
- height: 42px;
+
}
}
.imago{
background: #eeeeee;
- }
-
- @include mq(xll, max) {
- width: 112px !important;
- height: 394px !important;
+ @include mq(xll, max) {
+ width: 100% !important;
+ height: 41.626% !important;;
+ }
}
}
.slick-slide{
position: relative;
- @include mq(xll, max) {
- img{
- width: 164px;
- height: 164px;
- }
- }
}
.slick-list {
- // width: 1016px;
- // left: -49px;
- position: absolute;
+ width: 68.84%;
+ position: initial;
top: 0px;
left: 10.78125%;
- width: 79.375%;
- height: 466px !important;
+ }
+
+ /* the slides */
+ .slick-slide {
+ // min-width: 242px;
+ margin-left: 16px;
+ }
+
+ /* the parent */
+ .slick-list {
+ min-width: 242px;
+ margin: 0 16px;
}
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 9ece7b4..4500fc1 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -2,7 +2,7 @@
/* _header.scss */
.headerCheckout {
// position: relative;
- @include mq(desc,max){
+ @include mq(xll,max){
margin: 0 16px 0 16px;
width: 92% !important;
}
@@ -16,7 +16,7 @@
.container {
margin: 30px 0 30px 0;
width: auto !important;
- @include mq(desc,max){
+ @include mq(xll,max){
margin: 16px 0 16px 0;
}
.progress-bar{
@@ -143,7 +143,7 @@
i {
margin-right: 8px;
}
- @include mq(desc,max){
+ @include mq(xll,max){
height: 16px;
span{
font-weight: 400;
diff --git a/checkout/src/arquivos/sass/partials/_mais-categorias.scss b/checkout/src/arquivos/sass/partials/_mais-categorias.scss
index 660ffaa..0478c4d 100644
--- a/checkout/src/arquivos/sass/partials/_mais-categorias.scss
+++ b/checkout/src/arquivos/sass/partials/_mais-categorias.scss
@@ -1 +1,22 @@
/* _mais-categorias.scss */
+.steps-view{
+
+ #app-container{
+ background: pink !important;
+ .App{
+ div{
+ .CardForm{
+ div{
+ .PaymentCardNumber{
+ .FormFieldLabel {
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 38px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 8a06258..ff6ad73 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -30,9 +30,9 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
+ x: 1024px,
xl: 1200px,
xll:1280px,
- desc: 1280px,
IVK : 2500px
) !default;