diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index c8162e9..063678e 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -2,11 +2,12 @@ import CheckoutUI from "./components/CheckoutUI"; import { Container } from "m3-utils"; import "slick-carousel"; import Header from "./components/Header"; +import Body from "./components/Body"; import Footer from "./components/Footer"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer], + components: [CheckoutUI, Header, Body, Footer], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/Body.js b/checkout/src/arquivos/js/components/Body.js new file mode 100644 index 0000000..4378375 --- /dev/null +++ b/checkout/src/arquivos/js/components/Body.js @@ -0,0 +1,16 @@ +export default class Body { + constructor() { + this.init(); + } + + async init() { + await this.selectors(); + } + async selectors() { + this.titleCart = await waitElement(".empty-cart-title"); + } + + trocaTitle() { + this.titleCart.innerHTML = ``; + } +} diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..9ca7fc6 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -1,5 +1,6 @@ @import "./utils/all"; @import "./lib/slick"; @import "./partials/header"; +@import "./partials/body"; @import "./partials/footer"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/partials/_body.scss b/checkout/src/arquivos/sass/partials/_body.scss new file mode 100644 index 0000000..70e1b3f --- /dev/null +++ b/checkout/src/arquivos/sass/partials/_body.scss @@ -0,0 +1,11 @@ +/*#checkoutMainContainer { + width: 100%; + transform: translateY(-50%); + height: 1px; + border-bottom: 1px solid #000000; +}*/ +.container-cart { + #cart-title { + display: none !important; + } +} diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index fe04cdd..2e4d3be 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -14,6 +14,8 @@ .container { display: flex; flex-direction: row; + align-items: center; + justify-content: center; } &__address { color: $color-gray2; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 4ccb577..baa4a83 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,14 @@ /* _header.scss */ .headerCheckout { .container { + &::after { + margin-top: 30px; + width: 100%; + transform: translateY(-50%); + height: 1px; + border-bottom: 1px solid #000000; + } + width: auto !important; #progressBar { width: 446px; @@ -60,25 +68,26 @@ } li .progress-bar-line-1 { position: absolute; - left: 25%; + left: 57%; transform: translateY(-50%); - bottom: 5px; - width: 100%; + bottom: 4px; + width: 212%; height: 1px; border-top: 1px solid #000; } li .progress-bar-line-2 { position: absolute; - right: 21%; + right: 59%; transform: translateY(-50%); bottom: 5px; - width: 100%; + width: 242%; height: 1px; border-top: 1px solid #000; } } } &__wrapper { + margin-top: 30px; align-items: center; display: flex; justify-content: space-between; @@ -92,9 +101,11 @@ } &__safeBuy { + display: flex; span { align-items: center; display: flex; + flex-direction: row; text-transform: uppercase; font-family: $font-family; font-style: normal; @@ -104,7 +115,8 @@ color: $color-gray; } - i { + img { + width: 10%; margin-right: 8px; } }