Thiago.bronisio/m3-academy-template-checkout-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: checkout carrinho finalizado em todas as telas

Browse Source
This commit is contained in:
Thiago Bronisio 2022-12-22 00:23:21 -03:00
parent 2a919c9b07
commit 7ebd62853c
6 changed files with 865 additions and 496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.footerHTML(); this.footerHTML();
this.onUpdate()
// this.onUpdate(); // this.onUpdate();
} }
@ -91,7 +92,7 @@ export default class Footer {
} }
onUpdate() { async onUpdate() {
// Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
@ -99,7 +100,7 @@ export default class Footer {
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); console.log(mutation);
}); });
}); });

2
checkout/src/arquivos/sass/checkout.scss
View File

@ -74,7 +74,7 @@ body {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 16px 0 17px 17px; margin: 16px 0 17px 16px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }

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

@ -1,12 +1,24 @@
.checkout-container { .checkout-container {
box-sizing: border-box; box-sizing: border-box;
height: 545px;
overflow: none;
@include mq(md, max) {
height: 563px;
}
@include mq(xl, min) {
height: 656px;
}
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; left: 0;
.link-cart { .link-cart {
margin-bottom: 100px;
a { a {
margin: 0 16px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -28,10 +40,9 @@
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 21px; margin: 0 16px 21px;
span { span {
margin-bottom: 21px;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
@ -55,6 +66,14 @@
.client-email { .client-email {
margin: 0 0 24.55px; margin: 0 0 24.55px;
@include mq(sm, max) {
width: 86% !important;
}
@include mq(md, max) {
width: 65.74585635359117%;
}
input { input {
box-shadow: none; box-shadow: none;
font-family: $font-family; font-family: $font-family;
@ -69,10 +88,6 @@
line-height: 16px; line-height: 16px;
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black;
@media (max-width: 490px) {
width: auto;
}
} }
button { button {
@ -105,7 +120,7 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
font-family: $font-family; font-family: $font-family;
margin-top: 3px; margin-top: 9px;
} }
} }
@ -114,11 +129,7 @@
background-color: $color-white; background-color: $color-white;
border: 1px solid $black-padrao; border: 1px solid $black-padrao;
border-radius: 5px; border-radius: 5px;
width: 400px; width: 400px !important;
@include mq(md, max) {
width: 100%;
}
h3 { h3 {
color: $black-padrao; color: $black-padrao;
@ -197,376 +208,378 @@
} }
} }
.accordion-inner { .accordion-body {
padding: 0; .accordion-inner {
.shipping-summary-info { padding: 0;
font-weight: 400; .shipping-summary-info {
font-size: 14px;
line-height: 19px;
font-family: $font-family;
color: $color-gray2;
}
.ship-country {
display: none;
}
/* General configurations */
.client-notice {
display: none;
}
#ship-postalCode {
box-sizing: border-box;
display: flex;
max-width: 100% !important;
width: 100%;
height: 45px;
border: solid 1px $color-gray7;
border-radius: 8px;
color: $black-padrao;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
svg path {
fill: #d8c8ac;
}
}
}
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-summary-group-info {
border-color: $color-gray4;
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-addressFormPart1 {
small {
margin: 10px 0 25px 0;
}
a {
font-weight: 400; font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: underline;
color: $color-black;
font-family: $font-family;
}
}
// PARTE DE ENTREGA //
.vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-style: normal;
font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray2;
font-family: $font-family; font-family: $font-family;
margin: 0 0 11px 0;
}
#delivery-packages-options {
border: 1px solid $color-gray9;
border-radius: 8px;
}
.shp-lean-option {
//.vtex-omnishipping-1-x-leanShippingIcon {
// width: 12px;
// height: 12px;
// content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy")
// no-repeat center center;
// flex: none;
// margin-right: 8px;
// .vtex-omnishipping-1-x-svg {
// content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy")
// no-repeat center center;
// }
// }
.shp-option-text {
border-right: 1px solid $color-gray9;
flex: auto;
.shp-option-text-label {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
font-family: $font-family;
}
.shp-option-text-time span {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
font-family: $font-family;
}
}
}
.vtex-omnishipping-1-x-optionPrice {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2; color: $color-gray2;
font-family: $font-family;
}
}
.vtex-omnishipping-1-x-addressForm {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-weight: 700;
margin-bottom: 11px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
font-family: $font-family;
} }
.vtex-omnishipping-1-x-addressSummary { .ship-country {
border: 1px solid $color-gray9; display: none;
border-radius: 8px;
margin-bottom: 0;
.address-summary {
position: relative;
border: 0;
margin-bottom: 0;
.street {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.neighborhood {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.city {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.state-delimiter {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.state {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
#force-shipping-fields {
position: absolute;
right: 13px;
font-weight: 400;
text-decoration: none;
text-transform: lowercase;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-blue-100;
margin-left: 24px;
}
}
} }
.vtex-omnishipping-1-x-address { /* General configurations */
.ship-number {
width: 100%;
margin-bottom: 15px;
label {
margin-bottom: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
.ship-complement { .client-notice {
margin-bottom: 8px; display: none;
label {
margin: 15px 0 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
margin-bottom: 8px;
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
.ship-receiverName {
label {
margin-bottom: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
} }
}
.vtex-omnishipping-1-x-submitPaymentButton { #ship-postalCode {
margin: 0; box-sizing: border-box;
button { display: flex;
max-width: 100% !important;
width: 100%; width: 100%;
background-color: $color-blue-100; height: 45px;
color: $color-white; border: solid 1px $color-gray7;
font-family: $font-family;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 28px;
border-radius: 8px; border-radius: 8px;
color: $black-padrao;
}
&:hover { .vtex-omnishipping-1-x-deliveryGroup {
background-color: $color-blue-hover; p {
color: #303030;
font-size: 14px;
font-weight: 500;
} }
&:active { .shp-lean {
background-color: $color-blue-hover; border: 1px solid $color-gray4;
border: none; border-radius: 0;
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
svg path {
fill: #d8c8ac;
}
}
} }
} }
}
.vtex-omnishipping-1-x-summaryChange { .delivery-address-title {
border-color: #303030; color: #303030;
color: #303030; font-size: 14px;
} font-weight: 500;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle { .shp-summary-group-info {
background-color: $color-white; border-color: $color-gray4;
border: 1px solid $color-black; }
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 100px;
text-transform: uppercase;
}
.vtex-omnishipping-1-x-deliveryOptionActive { .address-summary {
font-weight: 400; background: none;
font-size: 14px; border-color: $color-gray4;
line-height: 19px; border-radius: 0;
text-transform: uppercase; color: #303030;
color: $color-roxo; padding: 12px;
font-family: $font-family;
}
.shp-method-option-text { @include mq(md, max) {
font-weight: 400; background-position: 8px 9px;
font-size: 14px; }
line-height: 19px;
text-transform: uppercase; a {
color: $color-roxo; color: #303030;
font-family: $font-family; font-weight: 500;
text-decoration: underline;
}
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-addressFormPart1 {
small {
margin: 10px 0 25px 0;
}
a {
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: underline;
color: $color-black;
font-family: $font-family;
}
}
// PARTE DE ENTREGA //
.vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
font-family: $font-family;
margin: 0 0 11px 0;
}
#delivery-packages-options {
border: 1px solid $color-gray9;
border-radius: 8px;
}
.shp-lean-option {
//.vtex-omnishipping-1-x-leanShippingIcon {
// width: 12px;
// height: 12px;
// content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy")
// no-repeat center center;
// flex: none;
// margin-right: 8px;
// .vtex-omnishipping-1-x-svg {
// content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy")
// no-repeat center center;
// }
// }
.shp-option-text {
border-right: 1px solid $color-gray9;
flex: auto;
.shp-option-text-label {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
font-family: $font-family;
}
.shp-option-text-time span {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
font-family: $font-family;
}
}
}
.vtex-omnishipping-1-x-optionPrice {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
font-family: $font-family;
}
}
.vtex-omnishipping-1-x-addressForm {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-weight: 700;
margin-bottom: 11px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
font-family: $font-family;
}
.vtex-omnishipping-1-x-addressSummary {
border: 1px solid $color-gray9;
border-radius: 8px;
margin-bottom: 0;
.address-summary {
position: relative;
border: 0;
margin-bottom: 0;
.street {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.neighborhood {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.city {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.state-delimiter {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
.state {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-gray2;
}
#force-shipping-fields {
position: absolute;
right: 13px;
font-weight: 400;
text-decoration: none;
text-transform: lowercase;
font-size: 12px;
line-height: 16px;
font-family: $font-family;
color: $color-blue-100;
margin-left: 24px;
}
}
}
.vtex-omnishipping-1-x-address {
.ship-number {
width: 100%;
margin-bottom: 15px;
label {
margin-bottom: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
.ship-complement {
margin-bottom: 8px;
label {
margin: 15px 0 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
margin-bottom: 8px;
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
.ship-receiverName {
label {
margin-bottom: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-family: $font-family;
color: $color-gray2;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid $color-gray9;
border-radius: 8px;
height: 35px;
}
}
}
}
.vtex-omnishipping-1-x-submitPaymentButton {
margin: 0;
button {
width: 100%;
background-color: $color-blue-100;
color: $color-white;
font-family: $font-family;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 28px;
border-radius: 8px;
&:hover {
background-color: $color-blue-hover;
}
&:active {
background-color: $color-blue-hover;
border: none;
}
}
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: $color-white;
border: 1px solid $color-black;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 100px;
text-transform: uppercase;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: $color-roxo;
font-family: $font-family;
}
.shp-method-option-text {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: $color-roxo;
font-family: $font-family;
}
} }
} }
} }

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

@ -1,14 +1,25 @@
.container {
@include mq(md, max) {
width: 100%;
}
}
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { .summary-totalizers {
padding: 0 0; @include mq(xl, min) {
width: 688.3px !important;
}
}
.empty-cart-links {
align-items: center;
display: flex;
text-align: center;
a {
font-size: 0;
height: 16px;
&::after {
content: "Continuar comprando";
font-size: 14px;
text-transform: uppercase;
}
}
} }
.item-unit-label { .item-unit-label {
@ -22,18 +33,89 @@
margin-bottom: 48px; margin-bottom: 48px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
}
@include mq(sm, max) {
height: 91px; height: 91px;
} }
.cart-items { .cart-items {
td.quantity-price {
@include mq(xl, min) {
width: 200px;
}
@include mq(xl, min) {
span {
font-size: 28px;
line-height: 33px;
}
}
}
thead { thead {
.product {
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
.shipping-date {
font-size: 0;
height: 16px;
&::after {
content: "Frete";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.product-price {
font-size: 0;
height: 16px;
&::after {
content: "Unidade";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.quantity {
font-size: 0;
height: 16px;
&::after {
content: "Quantidade";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.quantity-price {
font-size: 0;
height: 0;
&::after {
content: "Total";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
@include mq(md, max) { @include mq(md, max) {
.item-remove { .item-remove {
display: none; display: none;
@ -99,6 +181,10 @@
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $color-white; background: $color-white;
@include mq(xl, min) {
height: 300px;
}
} }
#go-to-cart-button a { #go-to-cart-button a {
@ -138,6 +224,7 @@
padding: 16px 0; padding: 16px 0;
@include mq(md, max) { @include mq(md, max) {
margin: 0; margin: 0;
height: 91px;
} }
} }
@ -162,7 +249,7 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(md, max) {
width: 72px; width: 72px;
} }
@ -173,8 +260,8 @@
max-width: 60px !important; max-width: 60px !important;
margin: 0 16px 16px 0; margin: 0 16px 16px 0;
@include mq(sm, min) { @include mq(md, max) {
margin-top: 16px; margin: 0 !important;
} }
} }
} }
@ -182,9 +269,15 @@
.product-name { .product-name {
padding: 0; padding: 0;
height: 60px; height: 60px;
display: block;
@include mq(lg, max) { @include mq(md, max) {
width: 36.796%; width: 100% !important;
display: flex;
}
@include mq(xl, min) {
width: 100% !important;
} }
a { a {
@ -194,10 +287,24 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $black-padrao; color: $black-padrao;
font-family: $font-family-secundary;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@include mq(md, max) { @include mq(md, max) {
margin-left: 24px; margin-left: 4px;
position: relative;
top: 20px;
}
@include mq(sm, max) {
margin-left: 16px;
top: 0;
}
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
width: 100%;
} }
&:hover { &:hover {
@ -224,6 +331,11 @@
line-height: 14px; line-height: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-gray8; color: $color-gray8;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
@include mq(md, max) { @include mq(md, max) {
@ -240,33 +352,50 @@
position: relative; position: relative;
top: 5px; top: 5px;
@include mq(md, max) {
min-width: 78px;
}
@include mq(sm, max) { @include mq(sm, max) {
top: -45px !important;
left: 0 !important;
}
@include mq(md, max) {
text-align: right; text-align: right;
position: relative; position: relative;
top: -50px; top: -20px;
left: 40px;
float: right; float: right;
margin-right: 5px; margin-right: 5px;
height: 38px; height: 38px;
padding: 0; padding: 0;
} }
span.list-price { .list-price {
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(sm, max) { @include mq(md, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
.old-product-price-label { .old-product-price-label {
text-transform: lowercase; text-transform: lowercase;
} }
} }
.best-price {
span {
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
} }
td.quantity { td.quantity {
@ -282,12 +411,17 @@
padding: 0; padding: 0;
width: max-content !important; width: max-content !important;
position: relative; position: relative;
top: 5px; top: 13px;
@include mq(md, max) {
margin: 0;
position: relative;
top: -20px;
}
@include mq(sm, max) { @include mq(sm, max) {
margin-left: 84px !important; top: -48px;
position: relative; left: 16px;
top: -58px;
} }
input { input {
@ -306,6 +440,11 @@
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} }
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
.icon-plus-sign, .icon-plus-sign,
@ -315,6 +454,10 @@
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; padding: 1px 12px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -323,6 +466,10 @@
font-size: 20px; font-size: 20px;
color: $color-blue-100; color: $color-blue-100;
padding-left: 0 0 0 11px; padding-left: 0 0 0 11px;
@include mq(xl, min) {
font-size: 28px !important;
line-height: 33px !important;
}
} }
} }
@ -331,6 +478,11 @@
font-size: 20px; font-size: 20px;
color: $color-blue-100; color: $color-blue-100;
padding-right: 0 11px 0 0; padding-right: 0 11px 0 0;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -341,7 +493,7 @@
left: inherit; left: inherit;
height: inherit; height: inherit;
width: inherit; width: inherit;
top: inherit; top: 0;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -384,12 +536,16 @@
display: flex; display: flex;
i { i {
height: 10px;
width: 10px;
@include mq(sm, max) { @include mq(sm, max) {
position: relative; position: relative;
top: 6px; top: 7px !important;
left: 8px !important;
}
@include mq(md, max) {
position: relative;
top: -20px;
left: 20px;
} }
} }
} }
@ -405,6 +561,10 @@
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
} }
@include mq(xl, min) {
font-size: 25px;
}
} }
} }
@ -423,6 +583,9 @@
} }
.summary { .summary {
@include mq(xl, min) {
height: 300px;
}
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;
@ -445,15 +608,34 @@
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@include mq(xl, min) {
font-size: 48px;
line-height: 65px;
}
} }
.srp-description { .srp-content {
margin: 0 0 10.65px; @include mq(xl, min) {
font-weight: 400; font-size: 28px;
font-size: 12px; line-height: 36px;
line-height: 18px; width: 512px;
font-family: $font-family; max-width: 512px;
color: $color-gray2; }
.srp-description {
margin: 0 0 10.65px;
font-weight: 400;
font-size: 12px;
line-height: 18px;
font-family: $font-family;
color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 36px;
max-width: 100%;
}
}
} }
button.shp-open-options { button.shp-open-options {
@ -478,40 +660,67 @@
background-color: darken($color-gray5, 5); background-color: darken($color-gray5, 5);
} }
} }
}
.srp-data { .srp-data {
width: 280px; width: 280px;
@include mq(cstm, max) { @include mq(xl, min) {
width: calc(100vw - 32px); width: 100%;
}
@include mq(md, max) {
margin-bottom: 40px;
}
.srp-pickup-my-location__button {
background-color: $color-blue-100;
border: none;
border-radius: 8px;
color: $color-white;
outline: none;
width: 100%;
height: 42px;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
&:hover {
background-color: ($color-blue-hover);
} }
&:active { @include mq(cstm, max) {
background-color: ($color-blue-hover); width: calc(100vw - 32px);
}
@include mq(md, max) {
margin-bottom: 40px;
}
button {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
.srp-pickup-empty {
&__my-location {
@include mq(xl, min) {
button {
font-size: 28px;
line-height: 38px;
height: 61px;
}
}
}
}
.srp-pickup-my-location__button {
background-color: $color-blue-100;
border: none;
border-radius: 8px;
color: $color-white;
outline: none;
width: 100%;
height: 42px;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
@include mq(xl, min) {
width: 100%;
}
&:hover {
background-color: ($color-blue-hover);
}
&:active {
background-color: ($color-blue-hover);
}
} }
} }
} }
@ -523,12 +732,35 @@
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
height: 36px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
@include mq(xl, min) {
width: 543px;
height: 57px;
display: flex;
justify-content: center;
align-items: center;
}
}
&__delivery {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
&__pickup {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
} }
&__current { &__current {
@ -556,6 +788,9 @@
} }
.ship-postalCode { .ship-postalCode {
@include mq(xl, min) {
width: 543px;
}
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -564,17 +799,29 @@
line-height: 14px; line-height: 14px;
margin-bottom: 2px; margin-bottom: 2px;
color: $color-black; color: $color-black;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
color: $black-padrao;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(xl, min) {
width: 334px;
height: 55px;
font-size: 28px;
}
} }
& ~ button { & ~ button {
@ -596,6 +843,15 @@
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase; text-transform: uppercase;
@include mq(xl, min) {
width: 194px;
height: 55px;
font-size: 28px;
line-height: 38px;
right: 0px;
top: 45px;
}
&:hover { &:hover {
background-color: lighten($color-blue-hover, 5); background-color: lighten($color-blue-hover, 5);
} }
@ -612,6 +868,12 @@
line-height: 12px; line-height: 12px;
color: $black-padrao; color: $black-padrao;
margin-top: 4px; margin-top: 4px;
display: flex;
@include mq(xl, min) {
font-size: 20px;
line-height: 38px;
}
} }
span.help.error { span.help.error {
@ -622,6 +884,12 @@
width: 100%; width: 100%;
top: 81px; top: 81px;
right: 0px; right: 0px;
@include mq(xl, min) {
font-size: 20px;
line-height: 38px;
top: 130px;
}
} }
} }
} }
@ -698,6 +966,14 @@
justify-content: center; justify-content: center;
padding-bottom: 8px; padding-bottom: 8px;
margin: 0; margin: 0;
@include mq(xl, min) {
display: flex;
justify-content: center;
align-items: flex-end;
height: 70px;
}
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -711,6 +987,11 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $black-padrao; color: $black-padrao;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -721,6 +1002,13 @@
.coupon-column { .coupon-column {
width: 362px; width: 362px;
@include mq(md, max) {
width: 100%;
}
@include mq(xl, min) {
width: 100%;
}
.coupon { .coupon {
margin: 0; margin: 0;
} }
@ -740,74 +1028,108 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
display: flex; display: flex;
justify-content: start; justify-content: start;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
.coupon-fields { .coupon-fieldset {
margin-bottom: 54px; @include mq(xl, min) {
text-align: start; height: 87px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: flex-end;
span { &:first-child {
@include mq(sm, max) { display: block;
display: flex; height: 87px;
flex-direction: row;
justify-content: space-between;
i {
position: absolute;
right: 91px;
opacity: 1;
}
}
}
input {
border: 1px solid $color-gray3;
border-radius: 5px;
box-shadow: none;
color: $color-gray7;
font-weight: 400;
font-size: 12px;
line-height: 14px;
height: 34px;
padding: 0 12px;
width: 178px;
margin-right: 5px;
font-family: $font-family-secundary;
@include mq(sm, max) {
max-width: 100%;
width: 100%; width: 100%;
} }
} }
.coupon-fields {
margin-bottom: 20px;
text-align: start;
button { span {
background: $color-blue-100; @include mq(md, max) {
border: none; display: flex;
border-radius: 8px; flex-direction: row;
color: $black-padrao; justify-content: space-between;
font-size: 14px; i {
height: 36px; position: absolute;
letter-spacing: 1px; right: 91px;
outline: none; opacity: 1;
transition: all 0.2s linear; }
width: 133.5px; }
text-transform: uppercase;
font-family: $font-family;
&::placeholder {
padding: 5px;
} }
@include mq(md, max) { input {
width: 138px; border: 1px solid $color-gray3;
border-radius: 5px;
box-shadow: none;
color: $color-black;
font-weight: 400;
font-size: 12px;
line-height: 14px;
height: 34px;
padding: 0 12px;
width: 178px;
margin-right: 5px;
font-family: $font-family-secundary;
@include mq(md, max) {
max-width: 100%;
width: 100%;
}
@include mq(xl, min) {
height: 55px;
width: 398.4px;
font-size: 28px;
line-height: 38px;
}
} }
&:hover { button {
background-color: lighten($color-black, 5); background: $color-blue-100;
} border: none;
border-radius: 8px;
color: $black-padrao;
font-size: 14px;
height: 36px;
letter-spacing: 1px;
outline: none;
transition: all 0.2s linear;
width: 133.5px;
text-transform: uppercase;
font-family: $font-family;
&:active { @include mq(md, max) {
background-color: darken($color-black, 5); width: 138px;
}
@include mq(xl, min) {
height: 55px;
width: 253.3px;
font-size: 28px;
line-height: 38px;
}
&::placeholder {
padding: 5px;
}
&:hover {
background-color: lighten($color-black, 5);
}
&:active {
background-color: darken($color-black, 5);
}
} }
} }
} }
@ -833,6 +1155,13 @@
line-height: 16px; line-height: 16px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
height: 33px;
width: 300px;
}
} }
&.info { &.info {
@ -854,6 +1183,11 @@
line-height: 25px; line-height: 25px;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
@include mq(xl, min) {
font-size: 36px;
line-height: 49px;
}
} }
} }
} }
@ -877,13 +1211,20 @@
padding-bottom: 43.4px; padding-bottom: 43.4px;
} }
@include mq(xl, min) {
width: 684.3px;
position: relative;
left: 740px;
margin-top: 17px;
}
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 15px;
} }
a { a {
@ -893,6 +1234,11 @@
color: $black-padrao; color: $black-padrao;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -921,6 +1267,11 @@
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }

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

@ -2,6 +2,10 @@
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;
@include mq(xl, min) {
position: inherit;
}
.container { .container {
display: flex; display: flex;
margin: 16px 0; margin: 16px 0;
@ -67,7 +71,7 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
order: -1; order: -1;
margin: 0; margin: 0;
width: 100%; width: 90%;
padding-left: 8px; padding-left: 8px;
justify-content: flex-start; justify-content: flex-start;
} }

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

@ -36,7 +36,7 @@ $color-roxo: #41115d;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 491px,
md: 1025px, md: 1025px,
lg: 2500px, lg: 2500px,
xl: 2501px, xl: 2501px,