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

feat: gera modificacao de css para organizar o layout das paginas em versao desktop 1280px #6

Merged
emmanuelvitor merged 1 commits from feature/checkoutCart into development 2022-12-22 01:07:53 +00:00
Conversation 0 Commits 1 Files Changed 4 +919 -228
4 changed files with 919 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { data } from "jquery";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
@ -8,8 +9,8 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.onUpdate(); this.onUpdate();
this.createfooterShelf();
this.insertImagesPayments(); this.insertImagesPayments()
this.insertImagesDevelopedBy(); this.insertImagesDevelopedBy();
} }
@ -22,8 +23,12 @@ export default class Footer {
this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy");
this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira"); this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira");
} }
onUpdate() { onUpdate() {
//Função qu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qu 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
@ -54,7 +59,7 @@ export default class Footer {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
shelf.classList.remove("none"); shelf.classList.remove("none");
this.footerShelf(); this.createfooterShelf();
} else { } else {
shelf.classList.add("none"); shelf.classList.add("none");
@ -67,6 +72,34 @@ export default class Footer {
} }
async addCarrossel() {
const elementSlick = document.querySelector(".footerCheckout__prateleira__list");
$(elementSlick).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 491,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
}
insertImagesPayments() { insertImagesPayments() {
this.footerCheckoutPayments.innerHTML = ` this.footerCheckoutPayments.innerHTML = `
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" /> <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
@ -94,6 +127,7 @@ export default class Footer {
</li> </li>
`; `;
} }
async createfooterShelf() { async createfooterShelf() {
this.footerCheckoutShelf.innerHTML = ``; this.footerCheckoutShelf.innerHTML = ``;
this.footerCheckoutShelf.innerHTML += ` this.footerCheckoutShelf.innerHTML += `
@ -132,32 +166,6 @@ export default class Footer {
} }
async addCarrossel() {
const elementToUseInSlick = document.querySelector(".footerCheckout__prateleira__list");
$(elementToUseInSlick).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 491,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
}
} }

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

@ -20,40 +20,74 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-transform: uppercase;
font-family: $font-family-secundary;
color: $color-black;
font-weight: 400;
font-size: 20px;
line-height: 23px;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; color: #303030;
font-size: 24px; font-size: 24px;
text-transform: uppercase;
font-family: $font-family-secundary;
color: $color-black;
} }
small { small {
color: $color-gray4; color: $color-black;
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
margin: 0 0 16px;
width: 100%;
max-width: 54.90625%;
height: 68.09px;
@media (min-width:2500px) {
max-width: none;
}
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px 12px;
border: 2px solid $color-gray3; border: 1px solid $color-black;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
&::placeholder {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: $color-black; background-color: $color-blue2;
color: $color-black;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
@ -76,8 +110,10 @@
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $color-black;
border-radius: 0; border-radius: 0;
width: 35.743%;
border-radius: 8px;
h3 { h3 {
color: #303030; color: #303030;
@ -89,11 +125,22 @@
li { li {
span { span {
font-family: $font-family;
color: $color-black; color: $color-black;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media (min-width:2500px) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
} }
i::before { i::before {
color: $color-black; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -112,178 +159,601 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8px;
border: 1px solid $color-gray4; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
span { // span {
color: #303030; // color: #303030;
margin-bottom: 8px; // margin-bottom: 8px;
padding: 0; // padding: 0;
// background: none;
i::before { & span:nth-child(2n) {
fill: #303030; margin-bottom: 36px;
padding: 0;
visibility: hidden;
position: relative;
&::before {
content: "Identificação";
visibility: visible;
position: absolute;
} }
} }
a { i::before {
align-items: center; fill: #303030;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
} }
} }
.accordion-inner { a {
padding: 0; align-items: center;
background-color: $color-white;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
display: none;
}
}
/* General configurations */ .accordion-inner {
padding: 0;
.client-notice { /* General configurations */
color: $color-black;
}
p { .client-notice {
label { color: $color-black;
color: $color-black; display: none;
font-weight: 500; }
}
select, p {
input { label {
border-radius: 0; color: $color-gray2;
border: 1px solid $color-gray4;
box-shadow: none;
}
.help.error {
color: red;
}
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
font-weight: 500;
text-decoration: underline;
}
}
.state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
button.submit { select,
border: none; input {
border-radius: 5px; height: 42px;
background: $color-black; border-radius: 8px;
margin-top: 8px; border: 1px solid $color-gray7;
outline: none; box-shadow: none;
transition: all 0.2s linear;
&:hover {
background: lighten($color-black, 5);
}
&:active {
background: darken($color-black, 5);
}
} }
/* Shipping configurations */
.ship-postalCode small a { .help.error {
color: #303030; color: red;
}
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
}
.vtex-omnishipping-1-x-deliveryGroup { .state-inscription-box span {
p { font-weight: 500;
color: #303030; }
font-size: 14px;
font-weight: 500;
}
.shp-lean { button.submit {
border: 1px solid $color-gray4; border: none;
border-radius: 0; border-radius: 5px;
background: $color-blue2;
color: $color-white;
font-weight: 700;
font-size: 14px;
line-height: 19px;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
width: 100%;
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
svg path { &:hover {
fill: #d8c8ac; background: lighten($color-black, 5);
}
}
}
} }
.delivery-address-title { &:active {
background: darken($color-black, 5);
}
}
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
background-color: red;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-summary-group-info { .shp-lean {
border-color: $color-gray4; border: 1px solid $color-gray4;
border-radius: 3px;
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-gray7;
border-radius: 0;
color: $color-gray2;
padding: 12px;
border-radius: 8px;
@include mq(md, max) {
background-position: 8px 9px;
} }
.address-summary { a {
background: none; content: "";
border-color: $color-gray4; display: block;
border-radius: 0; text-align: end;
color: #303030;
padding: 12px;
@include mq(md, max) {
background-position: 8px 9px;
}
a { &::after {
color: #303030; content: "alterar";
color: $color-blue2;
font-weight: 500; font-weight: 500;
text-decoration: underline; 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-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
} }
} }
} }
.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-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
}
} }
} }
i.icon-user,
i.icon-home,
i.icon-credit-card {
display: none;
}
.checkout-container .shipping-data .accordion-group .accordion-inner .vtex-omnishipping-1-x-deliveryGroup .shp-lean {
border: 1px solid $color-gray7;
border-radius: 8px;
}
label.vtex-omnishipping-1-x-leanShippingOption {
.shp-option-icon {
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png") no-repeat center center;
width: 18px;
height: 18px;
svg path {
display: none;
}
}
}
label.vtex-omnishipping-1-x-leanShippingOptionActive {
.shp-option-icon {
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png") no-repeat center center;
width: 18px;
height: 18px;
svg path {
display: none;
}
}
}
.ship-country {
display: none;
}
#ship-postalCode {
// width: 100%;
// min-width: 95%;
border-radius: 8px;
border: 1px solid $color-gray6;
height: 40px;
}
.ship-number {
width: 100%;
}
.step.accordion-group.shipping-data {
& .accordion-heading {
& span.accordion-toggle.collapsed {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
cursor: pointer;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
}
}
.payment-data {
& .accordion-group {
& .accordion-heading {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
cursor: pointer;
}
}
}
i.icon-edit {
position: relative;
color: transparent;
&::before {
position: relative;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
width: 16px;
height: 16px;
}
}
p.notification {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray7;
}
input#client-last-name,
.input#client-first-name,
input#client-document,
input#client-phone {
width: 100%;
}
input#client-first-name {
@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: 46%;
}
p.client-last-name.input.pull-left.text.required {
@media (max-width: 1024px) {
max-width: 46.9%;
}
}
input#client-document,
input#client-phone {
width: 92%;
@media (max-width: 1024px) {
width: 96%;
}
}
input#client-phone {
@media (max-width: 1024px) {
width: 100%;
}
}
.client-document.input.pull-left.text.required.mask,
p.client-phone.input.pull-left.text.required.mask {
width: 48%;
@media (max-width: 1024px) {
width: 46%;
}
}
form.form-page.client-pre-email.anim-death.anim-current {
height: 100vh;
@media (max-width: 1024px) {
height: 100%;
}
}
span.quantity.badge {
display: none;
}
.cart-template .cart-items .product-name {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black2;
}
.cart-fixed.affix-top.cart-fixed-transition {
border: 1px solid #e5e5e5;
border-radius: 8px;
}
.cart-template .cart-fixed .cart {
border-left: none;
border-top: none;
border-right: none;
border-bottom: 1px solid $color-gray2;
border-radius: 0;
margin-bottom: 0;
}
.mini-cart h2 {
text-align: left;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px !important;
line-height: 19px;
color: $color-black !important;
margin-left: 10px;
top: 24px;
position: relative;
}
.mini-cart .item {
top: 26px;
}
a#orderform-minicart-to-cart {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
right: 16px;
color: #000000 !important;
bottom: 34px;
position: relative;
cursor: pointer;
}
span.fn.product-name {
overflow-wrap: break-word;
white-space: break-spaces !important;
inline-size: 182px !important;
}
.cart-fixed .cart ul li .price {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #292929;
white-space: nowrap;
}
li.hproduct.item.muted {
display: flex;
align-items: center;
justify-content: space-between;
}
.mini-cart .price {
margin-right: 0;
}
p#go-to-cart-button {
height: 0;
}
tr.Items,
tr.Discounts {
border-bottom: 1px solid $color-gray2 !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
td.info {
left: 17px;
position: relative;
}
.shipping-summary-info {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
p.submit.btn-submit-wrapper {
margin-top: 44px;
}
.step.accordion-group.client-profile-data.active {
width: 88.5%;
height: auto;
}
.cart-template .cart-fixed {
width: 98.2%;
}
td.monetary {
right: 17px;
position: relative;
}
.cart-fixed.cart-fixed-transition.affix-top {
height: auto !important;
}
button#shipping-option-delivery {
background: #ffffff;
border: 1px solid #292929;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 100px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #41115d;
width: 148px !important;
height: 36px !important;
}
button#shipping-option-pickup-in-point {
border-radius: 100px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #c4c4c4;
}
p.input.ship-postalCode.required.text {
display: flex;
flex-direction: column;
// width: 100%;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
}
.accordion-heading .accordion-toggle {
padding: 4px 0 0;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
input#client-email {
width: 96%;
}
.box-client-info {
margin-top: 36px;
}
#opt-in-newsletter {
height: auto;
}
.step.accordion-group.client-profile-data.filled {
height: 100%;
padding: 24px 16px 36px;
}
.box-step {
margin-top: 25px;
}
input#ship-number,
input#ship-complement,
input#ship-receiverName {
width: 95%;
height: 35px;
}

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

@ -6,17 +6,21 @@
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
.item-unit-label { .item-unit-label {
display: none; display: none;
} }
.cart { .cart {
border: 3px solid $color-gray3; border: 3px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
height: 150px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -25,12 +29,15 @@
border-radius: 0; border-radius: 0;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
} }
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
background: $color-white; background: $color-white;
border: none; border: none;
@ -63,7 +70,7 @@
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: $color-gray2;
} }
} }
} }
@ -85,12 +92,13 @@
} }
#payment-data-submit { #payment-data-submit {
background: $color-black; background: $color-blue2;
border: none; border: none;
border-radius: 0; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
@ -119,6 +127,7 @@
line-height: 16px; line-height: 16px;
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
display: none; display: none;
@ -190,9 +199,11 @@
.product-price { .product-price {
min-width: 100px; min-width: 100px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -204,6 +215,7 @@
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(sm, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -218,11 +230,11 @@
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 0; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 12px auto 0;
max-height: 38px; max-height: 38px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 0;
@ -234,7 +246,7 @@
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3; border: none;
border-radius: 0; border-radius: 0;
border-width: 0 1px; border-width: 0 1px;
display: block; display: block;
@ -245,6 +257,8 @@
color: $color-gray2; color: $color-gray2;
box-shadow: none; box-shadow: none;
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} }
@ -252,25 +266,33 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; color: $color-white;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; // padding: 1px 12px;
background-color: $color-blue2;
width: 16px;
height: 16px;
margin: 0 11px;
border-radius: 100%;
} }
} }
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; content: "-";
font-size: 16px; font-size: 14px;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+"; content: "+";
font-size: 14px; font-size: 15px;
} }
} }
@ -290,17 +312,29 @@
} }
} }
.quantity-price, .quantity-price,
.best-price { .best-price {
.icon-question-sign { .icon-question-sign {
display: none; display: none;
} }
span { span {
margin-bottom: 20px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
}
&:nth-child(2n),
:nth-child(2n) {
font-weight: 700;
font-size: 14px;
line-height: 19px;
} }
} }
@ -314,6 +348,7 @@
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: $color-gray4; color: $color-gray4;
font-size: 15px; font-size: 15px;
@ -405,15 +440,16 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
padding: 11px 35px;
outline: none; outline: none;
width: 100%; width: 100%;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -484,21 +520,41 @@
width: 172px; width: 172px;
} }
& ~ button { &~button {
background-color: $color-black; background: $color-blue2;
border-radius: 8px;
border: none; border: none;
border-radius: 5px;
color: $color-white; color: $color-white;
font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -150px;
top: 36px; top: 39px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 100px;
text-transform: uppercase; text-transform: uppercase;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
cursor: pointer;
@media (min-width: 2500px) {
width: 194.16px;
height: 55px;
right: -413px;
font-size: 28px;
line-height: 38px;
top: 55px;
}
@media (max-width: 375px) {
width: 120px;
height: 36px;
right: -213px;
}
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);
@ -510,13 +566,27 @@
} }
small a { small a {
font-family: $font-family; margin-top: 4px;
font-style: normal; font-size: 0;
font-weight: normal; color: $color-black2;
font-size: 10px; cursor: pointer;
line-height: 12px;
color: $color-blue; &::before {
margin-top: 7px; content: "Não sei meu código postal";
font-family: "Tenor Sans";
font-style: normal;
font-style: normal;
font-weight: 400;
line-height: 12px;
text-decoration-line: underline;
font-size: 10px;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
white-space: nowrap;
}
}
} }
span.help.error { span.help.error {
@ -531,6 +601,7 @@
} }
.srp-result { .srp-result {
strong, strong,
.srp-items { .srp-items {
color: #303030; color: #303030;
@ -574,11 +645,11 @@
} }
&__sla { &__sla {
color: #7d7d7d; color: $color-gray2;
} }
&__price { &__price {
color: #7d7d7d; color: $color-gray2;
font-weight: 500; font-weight: 500;
} }
@ -592,24 +663,60 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 346px; width: 353px;
@media (min-width: 2500px) {
width: 688.35px;
}
// aqui
@media (max-width: 1024px) {
width: 97%;
display: flex !important;
justify-content: center;
position: relative;
flex-direction: column;
margin: 0 16px;
}
@media (max-width: 375px) {
width: auto;
}
.coupon-data { .coupon-data {
margin-top: 1px;
@media (max-width: 1024px) {
margin-top: 48.35px;
}
@media (max-width: 375px) {
margin-top: 48.35px;
}
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
} }
span { span {
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black2;
text-decoration: none; text-decoration: none;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -630,24 +737,36 @@
} }
.coupon-label label { .coupon-label label {
margin-bottom: 12px; margin-bottom: 4px;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
font-family: $font-family-secundary;
font-weight: 400;
text-align: initial;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
} }
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 32px;
& span {
display: flex;
}
@include mq(sm, max) { @include mq(sm, max) {
span { span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
i { i {
position: absolute; position: absolute;
right: 91px; right: 91px;
@ -657,14 +776,38 @@
} }
input { input {
border: 2px solid $color-gray3;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray4; color: $color-gray4;
font-size: 12px; font-size: 12px;
height: 34px; height: 12.012px;
padding: 0 12px; width: 169.972px;
max-width: 160px; max-width: none;
padding: 11px 16.18px 11px;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
line-height: 14px;
text-align: left;
background: $color-white;
border: 1px solid $color-gray5;
&::placeholder {
color: $color-gray2;
}
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
height: 26.1px;
width: 364.1px;
padding: 13px 16.18px 14px;
}
@media (max-width: 1024px) {
width: 100%;
}
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,18 +816,31 @@
} }
button { button {
background: $color-black; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white;
font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; margin-left: 15.17px;
margin-left: 6px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 133.51px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: $color-black2;
text-align: center;
@media (min-width: 2500px) {
width: 260.34px;
height: 55px;
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
@ -716,8 +872,17 @@
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
color: $color-black; color: $color-black;
padding: 12px 0; padding: 12px 0;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
} }
&.info { &.info {
@ -731,13 +896,22 @@
} }
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 25px;
color: $color-black; color: #292929;
font-family: $font-family;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 36px;
line-height: 49px;
white-space: nowrap;
}
} }
} }
} }
@ -782,13 +956,31 @@
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
font-size: 0; font-size: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding-top: 0px;
padding-bottom: 0px;
height: 41.67px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
@media (min-width: 2500px) {
height: 54.19px;
}
@media (max-width: 1024px) {
margin: 0 16px;
}
@media (max-width: 375px) {
margin: 0;
}
&:hover { &:hover {
background-color: darken($color-green, 5); background-color: darken($color-green, 5);
@ -796,17 +988,33 @@
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 13px; font-size: 14px;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: "Open Sans";
font-style: normal;
color: $color-black2;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
} }
} }
} }
} }
} }
.loading-inline span {
display: none;
position: absolute;
}
.client-profile-data ul {
display: none;
}

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

@ -12,6 +12,7 @@ footer .footerCheckout__wrapper {
width: 94.9734%; width: 94.9734%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
width: 79.53125%; width: 79.53125%;
@ -47,6 +48,7 @@ body {
padding-left: 0; padding-left: 0;
} }
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; width: 80%;
@ -68,15 +70,18 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2; color: $color-black;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 36px; font-size: 24px;
line-height: 42px; line-height: 33px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@ -123,4 +128,4 @@ body {
transform: rotate(0); transform: rotate(0);
} }
} }
} }