diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 0648800..a2b0ade 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -19,13 +19,18 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
+ this.cartTitulo = await waitElement("#cart-title");
+ this.titleSlick = await waitElement(".transactions-container");
+
this.list = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1000,
});
+
this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
+ this.cartTitle = await waitElement("#cart-title");
}
fetchApiData() {
@@ -47,7 +52,6 @@ export default class Footer {
data.map((item) => {
let colors = "";
for (let i = 0; i < item.items.length; i++) {
- console.log(colors);
colors += `${item.items[i].name}
`;
}
const li = document.createElement("li");
@@ -186,10 +190,14 @@ export default class Footer {
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let lista = this.list;
+ let cartTitle = this.cartTitulo;
+ let slickTitle = this.titleSlick;
+
if (target.style.display == "none" && window.location.hash == "#/cart") {
lista.style.display = "block";
this.fetchApiData();
} else {
+ this.cartTitulo.style.display = "none";
lista.style.display = "none";
}
let config = { childList: true, attributes: true };
@@ -200,7 +208,11 @@ export default class Footer {
mutations.forEach(function (mutation) {
if (target.style.display != "none") {
lista.style.display = "none";
- } else lista.style.display = "block";
+ cartTitle.style.display = "none";
+ } else {
+ cartTitle.style.display = "block";
+ lista.style.display = "block";
+ }
});
});
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index ad07941..94337c1 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -20,7 +20,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
-
+
@@ -37,7 +37,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
- if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
+ if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
"active"
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..14b62ba 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -2,4 +2,5 @@
@import "./lib/slick";
@import "./partials/header";
@import "./partials/footer";
+@import "./partials/prateleira";
@import "./checkout/checkout.scss";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 9647f68..4bf797f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,16 +1,23 @@
.checkout-container {
.client-pre-email {
- border-color: $color-gray3;
+ border-color: $black;
font-family: $font-family;
padding-top: 8px;
.link-cart {
a {
- color: $color-black;
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+
+ color: $black;
&:hover {
- color: lighen($color-black, 10);
+ color: $black;
+ text-decoration: none;
}
}
}
@@ -25,12 +32,27 @@
margin-bottom: 16px;
span {
- color: #303030;
- font-size: 24px;
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 23px;
+ text-align: center;
+ text-transform: uppercase;
+
+ color: $black;
}
small {
- color: $color-gray3;
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 23px;
+ text-align: center;
+ text-transform: uppercase;
+
+ color: $black;
}
}
}
@@ -39,13 +61,21 @@
margin: 0 0 16px;
input {
+ width: 80%;
+ height: 50px;
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
- border: 2px solid $color-gray3;
+ border: 1px solid $black;
+ border-radius: 5px 0px 0px 5px;
box-sizing: border-box;
- border-radius: 5px;
+
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
@media (max-width: 490px) {
width: auto;
@@ -53,12 +83,13 @@
}
button {
- background-color: $color-black;
- border-radius: 5px;
+ background: $blue;
+ border-radius: 0px 8px 8px 0px;
border: none;
font-family: $font-family;
- height: 54px;
- right: 0;
+ color: $black;
+ height: 50px;
+ right: 64px;
top: 0;
@media (max-width: 490px) {
@@ -69,19 +100,27 @@
}
span.help.error {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
color: red;
}
}
.emailInfo {
- padding: 16px;
+ padding-bottom: 23px;
background-color: $color-white;
- border: 1px solid $color-gray3;
- border-radius: 0;
+ border: 1px solid $black;
+ border-radius: 5px;
h3 {
- color: #303030;
- margin: 0 0 8px 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
}
ul {
@@ -89,11 +128,17 @@
li {
span {
- color: $color-black;
+ color: $black;
+
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
}
i::before {
- color: $color-black;
+ color: $blue;
font-size: 1rem;
opacity: 1;
}
@@ -104,6 +149,7 @@
color: $color-black;
font-size: 6rem;
opacity: 0.5;
+ padding-right: 5px;
}
}
}
@@ -112,19 +158,50 @@
.payment-data,
.client-profile-data {
.accordion-group {
- border-radius: 0;
- border: 1px solid $color-gray3;
+ position: relative;
+ border-radius: 8px;
+ border: 1px solid $gray-100;
font-family: $font-family;
padding: 16px;
.accordion-heading {
span {
- color: #303030;
- margin-bottom: 8px;
+ margin: 4px 0 26px 0;
padding: 0;
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: $black;
+
i::before {
- fill: #303030;
+ background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
+ background-size: 19.2px 18px;
+ width: 19.2px;
+ height: 18px;
+ right: 5px;
+ cursor: pointer;
+
+ position: absolute;
+
+ fill: transparent;
+ color: transparent;
+ }
+
+ span[data-i18n="clientProfileData.identification"] {
+ color: $white;
+ }
+
+ span[data-i18n="clientProfileData.identification"]::before {
+ content: "Identificação";
+ color: $black;
+ font-family: "Tenor Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
}
}
@@ -147,19 +224,26 @@
.client-notice {
color: $color-black;
+ display: none;
}
p {
label {
- color: $color-black;
font-weight: 500;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray2;
}
select,
input {
- border-radius: 0;
- border: 1px solid $color-gray3;
+ border: 1px solid $color-gray6;
+ border-radius: 3px;
box-shadow: none;
+ padding: 9px;
}
.help.error {
@@ -168,11 +252,13 @@
}
.box-client-info-pj {
+ display: none;
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
font-weight: 500;
text-decoration: underline;
+ display: none;
}
}
@@ -182,12 +268,21 @@
button.submit {
border: none;
- border-radius: 5px;
- background: $color-black;
- margin-top: 8px;
+ border-radius: 8px;
+ background: $blue;
+ margin-top: 56px;
outline: none;
+ width: 100%;
transition: all 0.2s linear;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+
&:hover {
background: lighten($color-black, 5);
}
@@ -259,7 +354,7 @@
.shp-summary-group-price,
.shp-summary-package {
- color: $color-gray3;
+ color: $gray-500;
}
.shp-summary-group-price {
@@ -276,12 +371,46 @@
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
- background-color: #d8c8ac;
- border: 1px solid #d8c8ac;
+ background-color: $white;
+ border: 1px solid $gray-500;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
- text-shadow: 1.3px 1px lighten($color-black, 50);
+ text-shadow: none;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $gray-500;
+
+ text-transform: uppercase;
+ }
+
+ .vtex-omnishipping-1-x-deliveryOptionInactive {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $gray-125;
+
+ text-transform: uppercase;
+ }
+
+ .vtex-omnishipping-1-x-addressFormPart1 {
+ p.ship-country {
+ display: none;
+ }
+
+ input {
+ width: 94%;
+ max-width: 94%;
+ }
+
+ p.ship-postalCode {
+
+ }
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..b8e7ee5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -5,7 +5,16 @@
}
.cart-template {
- font-family: $font-family;
+ font-family: $font-family-secundary;
+
+ .cart-template-holder {
+ margin-bottom: 48px;
+ }
+
+ .empty-cart-message {
+ display: none;
+ }
+
@include mq(md, max) {
padding: 0 0;
}
@@ -13,10 +22,7 @@
display: none;
}
.cart {
- border: 3px solid $color-gray3;
- box-sizing: border-box;
- border-radius: 5px;
- padding: 16px;
+ padding: 0 0 19px 0;
@include mq(md, max) {
margin: 0px 0 25px 0;
@@ -30,13 +36,21 @@
}
.cart-fixed {
font-family: $font-family;
+ border: 1px solid $color-gray5;
width: 100%;
+
h2 {
- background: $color-white;
+ background: $white;
border: none;
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
color: #303030;
- font-size: 14px;
- font-weight: 500;
+
+ padding: 7px 0 34px 0px;
+ text-align: left;
}
.item-unavailable {
@@ -48,7 +62,6 @@
}
.cart {
- border: 1px solid $color-gray4;
ul li {
border-top: none;
@@ -63,6 +76,9 @@
.shipping-date,
.price {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
color: #7d7d7d;
}
}
@@ -70,7 +86,7 @@
.summary-template-holder {
border-top: none;
- background: $color-white;
+ background: $white;
}
#go-to-cart-button a {
@@ -85,24 +101,17 @@
}
#payment-data-submit {
- background: $color-black;
+ background: $black;
border: none;
border-radius: 0;
- color: $color-white;
+ color: $white;
outline: none;
transition: all 0.2s linear;
- &:hover {
- background: lighten($color-black, 5);
- }
-
- &:active {
- background: darken($color-black, 5);
- }
}
}
.lookatme {
- background-color: $color-white;
+ background-color: $white;
}
.cart-items {
@@ -111,10 +120,11 @@
}
th {
- color: $color-black;
+ // text-align: initial;
+ color: $black;
padding: 0 0 16px;
font-style: normal;
- font-weight: bold;
+ font-weight: 400;
font-size: 14px;
line-height: 16px;
@@ -149,24 +159,26 @@
.product-name {
padding-right: 0;
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+
+ color: $black;
@include mq(lg, max) {
width: 250px;
}
a {
- color: $color-blue;
+ color: $black;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
transition: ease-in 0.22s all;
- &:hover {
- color: darken($color-blue, 10);
- text-decoration: none;
- }
-
@media (max-width: 490px) {
margin-left: 23px;
}
@@ -176,10 +188,14 @@
.seller {
display: none !important;
}
+
+ span[data-bind="text: quantityLabel"] {
+ display: none;
+ }
}
td.shipping-date {
- color: $color-gray2;
+ color: $gray-150;
font-size: 12px;
line-height: 14px;
@@ -200,7 +216,7 @@
}
span.list-price {
- color: $color-gray2;
+ color: $gray-150;
font-size: 12px;
line-height: 14px;
text-decoration-line: line-through;
@@ -218,7 +234,7 @@
td.quantity {
align-items: center;
border: 1px solid $color-gray3;
- border-radius: 0;
+ border-radius: 8px;
box-sizing: border-box;
display: flex;
justify-content: center;
@@ -233,8 +249,8 @@
}
input {
- background-color: $color-white;
- border: 1px solid $color-gray3;
+ background-color: $white;
+ border: 1px solid $white;
border-radius: 0;
border-width: 0 1px;
display: block;
@@ -242,7 +258,7 @@
margin: 0 !important;
padding: 8px 0;
width: 38px;
- color: $color-gray2;
+ color: $black;
box-shadow: none;
@include mq(lg, max) {
@@ -253,7 +269,7 @@
.icon-plus-sign,
.icon-minus-sign {
&::before {
- color: $color-black;
+ color: $black;
display: block;
font-weight: 500;
padding: 1px 12px;
@@ -262,14 +278,14 @@
.icon-minus-sign {
&:before {
- content: "-";
+ color: $blue;
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
- content: "+";
+ color: $blue;
font-size: 14px;
}
}
@@ -297,10 +313,10 @@
}
span {
font-style: normal;
- font-weight: normal;
+ font-weight: 700;
font-size: 14px;
line-height: 16px;
- color: $color-black;
+ color: $gray-500;
}
}
@@ -315,7 +331,7 @@
top: 0;
}
.icon::before {
- color: $color-gray4;
+ color: $gray-200;
font-size: 15px;
@include mq(md, max) {
@@ -326,7 +342,7 @@
.item-unavailable-message {
background-color: #d8c8ac;
- color: $color-white;
+ color: $white;
.icon-warning-sign {
color: #bb4f4f;
@@ -351,12 +367,13 @@
}
.srp-main-title {
- margin: 32px 0 12px;
+ margin: 0 0 11px 0;
+ font-family: "Open Sans";
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 24px;
- line-height: 28px;
- color: $color-gray2;
+ line-height: 33px;
+ color: $black;
@include mq(md, max) {
margin-top: 0;
@@ -364,32 +381,26 @@
}
.srp-description {
- color: $color-gray2;
+ color: $gray-150;
+ font-family: "Open Sans";
font-size: 12px;
line-height: 18px;
margin: 0 0 12px;
}
button.shp-open-options {
- background-color: $color-gray5;
+ background-color: $gray-50;
border: none;
border-radius: 5px;
- color: $color-gray2;
+ color: $black;
font-size: 16px;
letter-spacing: 0.05em;
+ font-family: "Open Sans";
line-height: 19px;
font-weight: 500;
outline: none;
padding: 12px 40px;
transition: all 0.2s linear;
-
- &:hover {
- background-color: lighten($color-gray5, 5);
- }
-
- &:active {
- background-color: darken($color-gray5, 5);
- }
}
}
@@ -405,34 +416,28 @@
}
.srp-pickup-my-location__button {
- background-color: $color-black;
+ background-color: $blue;
border: none;
- border-radius: 5px;
- color: $color-white;
+ border-radius: 8px;
+ color: $white;
outline: none;
width: 100%;
+ font-family: 'Open Sans';
font-style: normal;
- font-weight: 500;
+ font-weight: 700;
font-size: 14px;
- line-height: 16px;
- letter-spacing: 0.05em;
+ line-height: 19px;
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
+ padding: 11px 0;
}
}
.srp-toggle {
- margin: 0 0 34px;
+ margin: 0 0 20px;
&__wrapper {
- background-color: $color-white;
+ background-color: $white;
border-radius: 100px;
width: 100%;
font-family: $font-family;
@@ -444,12 +449,12 @@
}
&__current {
- border: 1px solid $color-blue;
+ border: 1px solid $black;
border-radius: 100px;
}
.blue {
- color: $color-blue;
+ color: $black;
}
label {
@@ -469,12 +474,13 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
- color: $color-black;
- margin-bottom: 12px;
+ color: $black;
+ margin-top: 12px;
+ margin-bottom: 2px !important;
}
input {
- border: 1px solid $color-gray3;
+ border: 1px solid $gray-125;
border-radius: 5px;
box-shadow: none;
color: $color-gray3;
@@ -485,38 +491,38 @@
}
& ~ button {
- background-color: $color-black;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-shadow: none;
+
+ background-color: $blue;
border: none;
- border-radius: 5px;
- color: $color-white;
+ border-radius: 8px;
+ color: $white;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
outline: none;
position: absolute;
right: -150px;
- top: 36px;
+ top: 88px;
transition: all 0.2s linear;
- width: 96px;
+ width: 100px;
text-transform: uppercase;
-
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
}
small a {
- font-family: $font-family;
+ font-family: $font-family-secundary;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 10px;
line-height: 12px;
- color: $color-blue;
+ color: $black;
margin-top: 7px;
+ text-decoration-line: underline;
}
span.help.error {
@@ -525,7 +531,7 @@
position: absolute;
left: 0;
width: 100%;
- top: 17px;
+ top: 44px;
}
}
}
@@ -542,14 +548,10 @@
color: #303030;
font-size: 16px;
font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
}
.srp-shipping-current-single {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
border-radius: 0;
color: #303030;
margin: 16px 0 0;
@@ -561,11 +563,11 @@
}
.srp-delivery-select {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
}
.srp-delivery-select-container {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
border-radius: 0;
.srp-shipping-current-many {
@@ -583,7 +585,7 @@
}
&__arrow svg {
- fill: $color-gray4;
+ fill: $gray-200;
}
}
}
@@ -597,18 +599,14 @@
.coupon-data {
#cart-link-coupon-add {
text-decoration: none;
- &:hover {
- text-decoration: underline;
- cursor: pointer;
- }
}
span {
- font-family: $font-family;
+ font-family: $font-family-secundary;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-blue;
+ color: $black;
text-decoration: none;
}
}
@@ -630,19 +628,23 @@
}
.coupon-label label {
- margin-bottom: 12px;
- font-family: $font-family;
+ text-align: left;
+ font-family: "Tenor Sans";
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-gray2;
- cursor: none;
+
+ color: $gray-150;
+
+ cursor: default;
}
.coupon-fields {
margin-bottom: 32px;
+ text-align: left;
+
@include mq(sm, max) {
span {
display: flex;
@@ -660,43 +662,47 @@
border: 2px solid $color-gray3;
border-radius: 5px;
box-shadow: none;
- color: $color-gray4;
+ color: $gray-200;
font-size: 12px;
height: 34px;
padding: 0 12px;
- max-width: 160px;
+ width: 204.32px;
@include mq(sm, max) {
max-width: 100%;
width: 100%;
}
+ &::placeholder {
+ font-family: "Tenor Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+
+ text-align: left;
+
+ color: $gray-125;
+ }
}
button {
- background: $color-black;
+ background: $blue;
border: none;
border-radius: 5px;
- color: $color-white;
+ color: $black;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
margin-left: 6px;
outline: none;
transition: all 0.2s linear;
- width: 94px;
+ width: 102px;
text-transform: uppercase;
+ text-shadow: none;
@include mq(md, max) {
width: 138px;
}
-
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
}
}
}
@@ -716,7 +722,7 @@
font-weight: normal;
font-size: 14px;
line-height: 16px;
- color: $color-black;
+ color: $gray-500;
padding: 12px 0;
}
@@ -733,11 +739,12 @@
tfoot {
td.info,
td.monetary {
+ font-family: $font-family;
font-style: normal;
- font-weight: normal;
+ font-weight: 700;
font-size: 18px;
- line-height: 21px;
- color: $color-black;
+ line-height: 25px;
+ color: $gray-500;
}
}
}
@@ -771,39 +778,36 @@
}
a {
- font-family: $font-family;
+ font-family: $font-family-secundary;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-blue;
+ color: $black;
}
}
.btn-place-order-wrapper {
a {
- background: $color-green;
+ background: $blue;
border: none;
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
-
- &:hover {
- background-color: darken($color-green, 5);
- }
+ cursor: pointer;
&:after {
content: "finalizar compra";
font-family: $font-family;
- font-weight: 500;
- font-size: 13px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
letter-spacing: 0.05em;
- color: $color-white;
+ color: $black;
text-transform: uppercase;
vertical-align: middle;
- line-height: 19px;
text-shadow: none;
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..b9981b1 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,38 +1,62 @@
.empty-cart {
- font-family: $font-family;
- &-content {
- color: $color-black;
- text-align: center;
+ font-family: $font-family;
+ &-content {
+ color: $white;
+ text-align: center;
+ margin-top: 170px;
- @include mq(md, max) {
- padding: 0 16px;
- }
- }
+ @include mq(md, max) {
+ padding: 0 16px;
+ }
+ }
- &-title {
- font-size: 20px;
- }
+ &-title {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-align: center;
+ text-transform: uppercase;
+ margin: 0;
- &-links {
- .link-choose-products {
- background: $color-black;
- border: none;
- border-radius: 5px;
- transition: ease-in 0.22s all;
- outline: none;
- font-family: $font-family;
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 16px;
- text-align: center;
- letter-spacing: 0.05em;
- color: $color-white;
- text-transform: uppercase;
+ color: $black;
+ }
- &:hover {
- background: lighten($color-black, 5);
- }
- }
- }
+ &-links {
+ a {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: transparent;
+ }
+
+ a::after {
+ content: "Continuar comprando";
+ color: $black;
+ position: absolute;
+ left: 0;
+ right: 0;
+ }
+
+ .link-choose-products {
+ width: 327px;
+
+ background: $white;
+ border: 1px solid $black;
+ border-radius: 0px;
+ padding: 15px 0;
+ transition: ease-in 0.22s all;
+ outline: none;
+
+ &:hover {
+ background: $white;
+ }
+ }
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 32a2594..da8a8ce 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -70,14 +70,28 @@ body {
color: $color-black !important;
}
+#cart-title {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+
+ color: $black;
+}
+
#cart-title,
#orderform-title {
- color: $gray-500;
+ color: $black;
font-family: $font-family;
- font-weight: 500;
- font-size: 36px;
- line-height: 42px;
- margin: 40px 0 30px;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ margin: 17px 0 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
@@ -128,88 +142,3 @@ body {
}
}
}
-
-.footerCheckout__prateleira {
- padding-bottom: 56px;
-
- ul {
- margin: 0;
- }
-
- h3 {
- font-family: "Tenor Sans";
- font-style: normal;
- font-weight: 400;
- font-size: 24px;
- line-height: 38px;
- color: $black;
-
- text-align: center;
- }
-
- .imgSlick {
- background: $gray-600;
- }
-
- .nameSlick {
- font-family: "Open Sans";
- font-style: normal;
- font-weight: 400;
- font-size: 13px;
- line-height: 18px;
- color: $black;
-
- text-align: center;
- margin: 20px 0 20px 0;
- }
-
- .skuSlick {
- display: flex;
- align-items: center;
- text-align: center;
- justify-content: center;
- gap: 5px;
-
- p {
- font-family: "Open Sans";
- font-style: normal;
- font-weight: 700;
- font-size: 13px;
- line-height: 18px;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- padding: 5px;
-
- color: $white;
- background: $blue;
- border-radius: 8px;
- }
- }
-
- a:hover {
- text-decoration: none;
- }
-
- .linkSlick {
- display: flex;
- align-items: center;
- text-align: center;
- justify-content: center;
-
- p {
- font-family: "Open Sans";
- font-style: normal;
- font-weight: 700;
- font-size: 13px;
- line-height: 18px;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- padding: 12px 0;
- width: 100%;
-
- color: $white;
- background: $blue;
- border-radius: 8px;
- }
- }
-}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 033b265..8dc0dff 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -92,7 +92,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- font-family: "Tenor Sans", sans-serif;
+ font-family: $font-family-secundary, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 28px;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..d3a7709 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,85 @@
/* _prateleira.scss */
+.footerCheckout__prateleira {
+ padding-bottom: 56px;
+
+ ul {
+ margin: 0;
+ }
+
+ h3 {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: $black;
+
+ text-align: center;
+ }
+
+ .imgSlick {
+ background: $gray-600;
+ }
+
+ .nameSlick {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ color: $black;
+
+ text-align: center;
+ margin: 20px 0 20px 0;
+ }
+
+ .skuSlick {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ gap: 5px;
+
+ p {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 5px;
+
+ color: $white;
+ background: $blue;
+ border-radius: 8px;
+ }
+ }
+
+ a:hover {
+ text-decoration: none;
+ }
+
+ .linkSlick {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+
+ p {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 12px 0;
+ width: 100%;
+
+ color: $white;
+ background: $blue;
+ border-radius: 8px;
+ }
+ }
+}
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 84083c3..43e5934 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -6,7 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$black: #000;
-$white: #fff;
+$white: #FFFFFF;
$color-black: #292929;
@@ -25,6 +25,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
+$color-gray6: #828282;
$blue: #00c8ff;