diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b535997..ad5a611 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -26,6 +26,7 @@ export default class Footer { this.iconMinus = await waitElement(".icon-minus-sign"); this.iconPlus = await waitElement(".icon-plus-sign"); this.prateleira = await waitElement(".footerCheckout__prateleira"); + this.naoSeiMeuCep = await waitElement(".ship-postalCode"); // this.prateleiraSlick = await waitElement(".prateleira__carousel") } @@ -36,6 +37,8 @@ export default class Footer { this.continueShopping.textContent = "Continuar comprando"; this.frete.textContent = "Frete"; this.unidade.textContent = "Unidade"; + this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal"; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 633130c..91744cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -419,7 +419,7 @@ .item-remove { width: 10px; height: 10px; - + @media (max-width: 490px) { top: 0; } @@ -453,19 +453,25 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; + padding: 0; @include mq(md, max) { padding: 0 16px; } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0 0 11px; + line-height: 33px; + font-family: $font-family; font-size: 24px; - line-height: 28px; - color: $color-gray2; + font-weight: 400; + font-style: normal; + color: $black-500; + + display: flex; + align-items: center; + text-align: center; + @include mq(md, max) { margin-top: 0; @@ -473,24 +479,38 @@ } .srp-description { - color: $color-gray2; - font-size: 12px; + margin: 0 0 11px; + width: 100%; + max-width: 276px; line-height: 18px; - margin: 0 0 12px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $color-gray2; + } button.shp-open-options { - background-color: $color-gray5; + margin: 0; + padding: 12px 41px; + display: flex; + align-items: center; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + border-radius: 8px; line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $gray-100; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + transition: all 0.2s linear; + outline: none; &:hover { background-color: lighten($color-gray5, 5); @@ -514,18 +534,27 @@ } .srp-pickup-my-location__button { - background-color: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - outline: none; width: 100%; + margin-top: 10px; + padding: 12px 35px; + border: none; + border-radius: 8px; + background: #00c8ff; + transition: all 0.2s linear; + outline: none; + + span { + line-height: 18px; + font-family: "Open Sans",sans-serif; + font-size: 13px; + font-weight: 700; + font-style: normal; + color: $color-white; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05em; + } - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; &:hover { background-color: lighten($black-300, 5); @@ -538,9 +567,12 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; + padding: 0; &__wrapper { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + background-color: $color-white; border-radius: 100px; width: 100%; @@ -557,13 +589,21 @@ border-radius: 100px; } - .blue { - color: $color-blue; - } + // .blue { + // // color: $color-blue; + // } label { width: 50%; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $black-500; + &:active { background-color: #f0f0f0; } @@ -571,43 +611,68 @@ } .srp-postal-code { + + &__form { + width: 100%; + + .vtex-shipping-preview-0-x-postalCodeForgotten { + gap: 8px; + } + } + + .ship-country { + display: none; + } + .ship-postalCode { + width: 172px; + label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 2px; line-height: 14px; + font-family: $font-family; + font-size: 12px; + font-weight: normal; + font-style: normal; color: $black-300; - margin-bottom: 12px; } input { + width: 172px; + height: 36px; + padding: 12px 8px; border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; + color: $color-gray3; } & ~ button { - background-color: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 100px; height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + padding: 8px 11px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + color: $color-white; + background: $blue-300; + + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; text-transform: uppercase; + transition: all 0.2s linear; + outline: none; + + // position: absolute; + // right: -150px; + // top: 36px; &:hover { background-color: lighten($black-300, 5); @@ -619,13 +684,14 @@ } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + margin-top: 4px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 400; + font-style: normal; + color: $black-500; + text-decoration-line: underline; } span.help.error { @@ -706,6 +772,16 @@ .coupon-data { #cart-link-coupon-add { text-decoration: none; + + span { + line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + } + &:hover { text-decoration: underline; cursor: pointer; @@ -739,19 +815,24 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 4px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; color: $color-gray2; - cursor: none; + text-align: left; } .coupon-fields { margin-bottom: 32px; + span { + display: flex; + gap: 15px; + }; + @include mq(sm, max) { span { display: flex; @@ -766,14 +847,21 @@ } input { - border: 2px solid $color-gray3; + width: 100%; + max-width: 204px; + height: 36px; + padding: 11px 16px; + border: 1px solid $color-gray5; border-radius: 5px; - box-shadow: none; - color: $color-gray4; + line-height: 14px; + font-family: $font-family-secundary; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + font-weight: 400; + font-style: normal; + color: $color-gray-rename; + background: #FFFFFF; + + box-shadow: none; @include mq(sm, max) { max-width: 100%; @@ -781,19 +869,31 @@ } } + .loading-coupon { + display: none; + } + button { - background: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 133px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $blue-300; + + display: flex; + align-items: center; + justify-content: center; + letter-spacing: 0.05em; + text-transform: uppercase; outline: none; transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; + // margin-left: 6px; @include mq(md, max) { width: 138px; @@ -812,6 +912,15 @@ .accordion-group { tr { + padding: 10px 0; + line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-300; + + text-align: right; border-color: #e5e5e5; td { @@ -826,7 +935,7 @@ font-size: 14px; line-height: 16px; color: $black-300; - padding: 12px 0; + padding: 10px 0; } &.info { @@ -842,10 +951,11 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + line-height: 25px; + font-family: $font-family; font-size: 18px; - line-height: 21px; + font-weight: 700; + font-style: normal; color: $black-300; } } @@ -882,40 +992,49 @@ } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin: 0; line-height: 14px; - color: $color-blue; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + + // text-align: right; } } .btn-place-order-wrapper { a { - background: $color-green; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; + background: $blue-300; transition: ease-in 0.22s all; - padding: 12px 19px; + + text-align: center; + + padding: 12px 0; &:hover { - background-color: darken($color-green, 5); + background-color: darken($blue-300, 5); } &:after { content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + letter-spacing: 0.05em; + text-transform: uppercase; text-shadow: none; + vertical-align: middle; + color: $black-500; + + text-align: center; } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 3c769a0..61e8fac 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -15,10 +15,14 @@ -webkit-tap-highlight-color: transparent; } + .slick-list { // height: 100%; margin: 0 -8px 0 -8px; + // height: 100%; + margin: 0 -8px 0 -8px; + position: relative; overflow: hidden; display: block; @@ -45,6 +49,8 @@ .slick-track { // height: 100%; + // height: 100%; + position: relative; left: 0; top: 0; @@ -69,6 +75,7 @@ .slick-slide { margin: 0 8px; + //código prévio //código prévio float: left; height: 100%; @@ -78,10 +85,12 @@ float: right; } + img { display: block; } + &.slick-loading img { display: none; } @@ -114,15 +123,25 @@ font-size: 0; z-index: 4; transform: translateY(-50%); + top: 50%; + border: 0; + font-size: 0; + z-index: 4; + transform: translateY(-50%); } + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; + no-repeat center center; left: 10px; + } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center center; right: 10px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 153d573..01bd1c6 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -9,6 +9,13 @@ // border-top: none; // color: $color-gray2; + &__prateleira { + // margin-top: 101px; + height: 448px; + // background-color: green; + width: 100%; + } + &__wrapper { margin: 0; width: 100%; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index a82e482..26981d8 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -26,22 +26,21 @@ // background: yellow; button { - @include buttonStyle(); - // border: none; - // border-radius: 8px; - // line-height: 18px; - // font-size: 13px; - // font-family: $font-family; - // font-weight: 700; - // color: $color-white; - // background: $blue-300; - // text-align: center; - // text-transform: uppercase; + border: none; + border-radius: 8px; + line-height: 18px; + font-size: 13px; + font-family: $font-family; + font-weight: 700; + color: $color-white; + background: $blue-300; + text-align: center; + text-transform: uppercase; - // font-style: normal; - // display: flex; - // align-items: center; - // letter-spacing: 0.05em; + font-style: normal; + display: flex; + align-items: center; + letter-spacing: 0.05em; } &--image { @@ -65,6 +64,31 @@ color: $black-500; } + &--options { + margin: 0 auto; + display: flex; + gap: 5px; + list-style: none; + + button { + padding: 5px; + } + display: flex; + flex-direction: column; + gap: 20px; + } + + &--name { + margin: 20px 0 0; + font-family: $font-family; + // font-style: normal; + // font-weight: 400; + line-height: 18px; + font-size: 13px; + text-align: center; + color: $black-500; + } + &--options { margin: 0 auto; display: flex; @@ -84,6 +108,14 @@ } } } + &--link { + button { + width: 100%; + padding: 12px 0; + justify-content: center; + } + } + } } // .slick-track { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 296527a..06f0f95 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -12,13 +12,15 @@ $color-white: #ffffff; $color-gray3: #f0f0f0; $color-gray-rename: #c4c4c4; +$color-gray2: #7d7d7d; +$gray-100: #EDEDED; $gray-300: #989898; $blue-300: #00C8FF; +$color-gray5: #e5e5e5; + $color-gray: #6c6c6c; -$color-gray2: #7d7d7d; $color-gray4: #8d8d8d; -$color-gray5: #e5e5e5; $color-blue: #4267b2;