From f493cceaa131d1f4bea959eb7becf4f347d2e978 Mon Sep 17 00:00:00 2001 From: Patrick Souza Date: Sun, 18 Dec 2022 23:11:41 -0300 Subject: [PATCH] feat: adicionando class nas div do js e montando o css --- checkout/src/arquivos/js/components/Footer.js | 2 + .../sass/checkout/_checkout-autenticacao.scss | 19 +++++-- .../sass/checkout/_checkout-carrinho.scss | 25 +++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 1 + checkout/src/arquivos/sass/lib/_slick.scss | 56 +++++++++++++++++++ .../arquivos/sass/partials/_prateleira.scss | 1 - .../src/arquivos/sass/utils/_variaveis.scss | 3 + .../template-checkout/checkout-footer.html | 2 +- 8 files changed, 98 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9d1b6fb..ffaa8b6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -146,7 +146,9 @@ export default class Footer {
${product.items.map((item) => ``)}
+ ` ); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 2ea899f..984178d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -200,7 +200,7 @@ a { align-items: center; - background-color: #303030; + background-color: $color-blue2; border-radius: 8px; border: none; color: $color-white; @@ -257,7 +257,6 @@ } p { - label { font-family: $font-family; font-style: normal; @@ -301,6 +300,10 @@ &.client-phone { width: calc(50% - 14.5px); } + + #open-shipping { + display: none; + } } .box-client-info-pj { @@ -409,6 +412,7 @@ .shp-summary-group-price, .shp-summary-package { color: $color-gray4; + display: none; } .shp-summary-group-price { @@ -418,6 +422,13 @@ .shp-summary-package { padding-left: 16px; } + .shp-summary-group-address { + font-family: $font-family; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: $color-gray2; + } .vtex-omnishipping-1-x-summaryChange { border-color: #303030; @@ -425,8 +436,8 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-blue2; + border: 1px solid $color-black2; } .vtex-omnishipping-1-x-deliveryOptionActive { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 35bd8fd..acbb1e4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -86,18 +86,27 @@ } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + font-family: "Open Sans"; + font-weight: 700; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + text-transform: uppercase; color: $color-white; + background: $color-green; + width: 100%; + padding: 12px; + border-radius: 8; + color: $color-black3; outline: none; transition: all 0.2s linear; + &:hover { - background: lighten($color-black, 5); + background: lighten($color-green2, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-green3, 5); } } } @@ -152,6 +161,12 @@ } .product-name { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 24px; + line-height: 28px; + + color: $color-black3; padding-right: 0; padding-left: 31px; width: 360px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 58eac25..df7b91a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,6 +3,7 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; + html { height: 100%; min-height: 100%; diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..82971df 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -134,3 +134,59 @@ } } } + +/* _prateleira.scss */ +.product-card { + .product-card__img { + width: 100%; + max-width: 75.7789%; + } + + .product-card__description { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 26px; + line-height: 35px; + text-align: center; + + color: #000000; + margin-bottom: 20px; + } + + .product-card__skus { + button { + cursor: pointer; + background-color: $color-blue2; + padding: 8px; + border: none; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #ffffff; + } + } + .product-card__btn { + margin-top: 10px; + background-color: $color-blue2; + border-radius: 8px; + width: 100%; + max-width: 485px; + padding: 12px; + } + .product-card__link { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + text-transform: uppercase; + + color: #ffffff; + } +} diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..e69de29 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +0,0 @@ -/* _prateleira.scss */ diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 06b2980..0adc012 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -25,6 +25,9 @@ $color-blue3: #00b7ff; $color-blue4: #00b7ffc2; $color-green: #4caf50; +$color-green2: #4caf51; +$color-green3: #4caf61; + $color-red: #ff0000; /* Grid breakpoints */ diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..9f25a62 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -26,7 +26,7 @@ @TODO: vtex icon - +
  • Developed By