From 8b8c9fcd4835acbf4323769c5e009261a02450e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sat, 17 Dec 2022 15:44:29 -0300 Subject: [PATCH] feat: Adiciona arrows e botoes slick --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 2 +- .../sass/checkout/_checkout-autenticacao.scss | 14 ---- .../sass/checkout/_checkout-carrinho.scss | 18 +++-- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- checkout/src/arquivos/sass/lib/_slick.scss | 76 +++++++++++++++---- .../src/arquivos/sass/utils/_variaveis.scss | 1 - 7 files changed, 77 insertions(+), 38 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index d89fe25..0dbf51a 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000000F0000, 000000F0101, 00000000001, CCD558A313BC) +000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 53007c5..5e34d3a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -72,7 +72,7 @@ export default class Footer { return `${name.name}`; }) .join("")} - `; + `; prateleira.children[1].appendChild(li); }); }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index d53437c..2e7ce42 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -516,20 +516,6 @@ h1#orderform-title { width: 100%; } - /*&::before { - content: ""; - display: flex; - width: 20.26px; - height: 20.89px; - background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") - no-repeat center center; - background-size: contain; - cursor: pointer; - position: absolute; - left: 294px; - top: 8%; - }*/ - .checkbox { padding: 0; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 61c3112..b299a40 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -489,11 +489,11 @@ letter-spacing: 0.05em; &:hover { - background-color: lighten($color-blue3, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-blue3, 5); + background-color: darken($color-blue2, 5); } } } @@ -580,11 +580,11 @@ padding-bottom: 9px; &:hover { - background-color: lighten($color-blue3, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-blue3, 5); + background-color: darken($color-blue2, 5); } } @@ -801,11 +801,11 @@ } &:hover { - background-color: lighten($color-blue3, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-blue3, 5); + background-color: darken($color-blue2, 5); } } @@ -918,7 +918,11 @@ border: 0; &:hover { - background-color: darken($color-blue3, 5); + background-color: darken($color-blue2, 5); + } + + &:active { + background-color: darken($color-blue2, 5); } &:after { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae30bad..b8e5e08 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,7 +16,7 @@ footer .footerCheckout__prateleira, header { @include mq(tablet, min) { width: 79.53125%; - margin: 0 auto; + margin: 0 auto 56px auto; } @include mq(tablet, max) { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 71a5b4b..5446c03 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,13 +1,15 @@ -.footerCheckout__prateleira { - h2 { - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: $color-black-500; - margin-bottom: 20px; +.footerCheckout { + &__prateleira { + h2 { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black-500; + margin-bottom: 20px; + } } } @@ -101,6 +103,47 @@ line-height: 18px; color: $color-black-500; } + + .product-variation { + display: flex; + justify-content: center; + margin-bottom: 20px; + + &__variation { + margin: 0 2.5px; + background: $color-blue2; + border-radius: 8px; + padding: 5px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + } + } + + .product-btn { + width: 100%; + height: 42px; + justify-content: center; + text-align: center; + background: $color-blue2; + border-radius: 8px; + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + } } &.slick-loading img { @@ -130,15 +173,22 @@ .slick-arrow { font-size: 0; position: absolute; + width: 13.64px; + height: 29.47px; + border: none; + z-index: 4; + top: 45%; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") no-repeat center center; - z-index: 4; + background-size: contain; left: 10px; } .slick-next { - z-index: 4; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + background-size: contain; right: 10px; } .slick-arrow.slick-hidden { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 7fbc3e1..de298d1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -27,7 +27,6 @@ $color-gray14: #58595b; $color-blue: #4267b2; $color-blue2: #00c8ff; -$color-blue3: #2f8ea8; $color-red: #ff0000;