From 1368115fee6808220298f68d5718f51a9467dd5b Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:03:09 -0300 Subject: [PATCH 1/9] feat(sass):Adiciona sass da autenticacao da compra --- .../sass/checkout/_checkout-autenticacao.scss | 1154 +++++++++++++---- package-lock.json | 2 + 2 files changed, 919 insertions(+), 237 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..d7b3130 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,969 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + @media (max-width: 1024px) { + .orderform-template { + display: flex; + flex-direction: column; + } - .link-cart { - a { - color: $color-black; - font-size: 14px; + .row-fluid { + display: flex; + flex-direction: column; - &:hover { - color: lighen($color-black, 10); - } - } - } + #shipping-data, + #payment-data { + margin: 0; + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .orderform-template-holder { + width: 93.556%; + } + } - h3 { - margin-bottom: 16px; + .client-pre-email { + border-color: $color-black; + padding-top: 12px; - span { - color: #303030; - font-size: 24px; - } + .client-pre-email-h label { + margin-top: 65px; + width: 100%; - small { - color: $color-gray4; - } - } - } + @media (max-width: 375px) { + margin-top: 90px; + width: 100%; + } - .client-email { - margin: 0 0 16px; + @media (min-width: 376px) and (max-width: 1024px) { + width: 100%; + } + } - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + .client-pre-email-h { + margin: 0; + display: flex; + justify-content: center; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 375px) { + margin-bottom: 22px; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + .link-cart { + margin: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + a { + color: $color-black; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; - span.help.error { - color: red; - } - } + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 1024px) { + margin-right: 16px; + font-size: 10px; + line-height: 12px; + } + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - ul { - margin: 0; + h3 { + margin-bottom: 21px; - li { - span { - color: $color-black; - } + @media (max-width: 1024px) { + margin-bottom: 28px; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + span { + color: $color-black; + 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; - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + @media (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + @media (max-width: 375px) { + width: 100%; + font-size: 12px; + } + } - i::before { - fill: #303030; - } - } + small { + color: $color-black; + 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; + padding: 0; - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + @media (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } - .accordion-inner { - padding: 0; + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } - /* General configurations */ + @media (max-width: 375px) { + width: 100%; + font-size: 12px; + } + } + } + } - .client-notice { - color: $color-black; - } + .client-email { + margin: 0 0 16px -120px; + .btn-success { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + } - p { - label { - color: $color-black; - font-weight: 500; - } + @media (max-width: 1024px) { + width: 100%; + margin: 0 0 16px -12%; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + @media (min-width: 2500px) { + width: 1166px; + margin-left: -200px; + } - .help.error { - color: red; - } - } + @media (max-width: 491px) { + margin: 0 0 16px -90px; + width: 76%; + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + @media (max-width: 375px) { + width: 57.6%; + margin: 0 0 0 -128px; + height: 95px; + } - .state-inscription-box span { - font-weight: 500; - } + @media (max-width: 280px) { + width: 55.4%; + margin-left: -108px; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + input { + box-shadow: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 0 14px; + border: 1px solid $color-black; + box-sizing: border-box; + border-radius: 5px 0px 0px 5px; + width: 65.738%; - &:hover { - background: lighten($color-black, 5); - } + @media (min-width: 2500px) { + width: 765.37px; + height: 52px; + font-size: 24px; + line-height: 33px; + } - &:active { - background: darken($color-black, 5); - } - } + @media (max-width: 1024px) { + width: 84.4%; + max-width: 866px; + height: 50px; + } + } - /* Shipping configurations */ + input::placeholder { + color: $color-black; + } - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + button { + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + width: 18.81%; + height: 54px; + right: -4px; + top: 0; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-black; + cursor: pointer; - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + @media (min-width: 2500px) { + width: 219px; + height: 54px; + top: -1px; + font-size: 28px; + line-height: 38px; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 1024px) { + right: -4.5%; + height: 50px; + top: 0px; + width: 126.76px; + } - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + @media (max-width: 491px) { + right: -57.6%; + top: -55px; + height: 50px; + width: 126.76px; + } - svg path { - fill: #d8c8ac; - } - } - } - } + @media (max-width: 375px) { + right: -79.34%; + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + span.help.error { + color: $color-red; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + margin: 5px 49% 10px; + width: 118px; - .shp-summary-group-info { - border-color: $color-gray4; - } + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + width: 236px; + margin: 5px 572px 10px; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + @media (max-width: 1024px) { + margin: 7px 502px 10px; + } - @include mq(md, max) { - background-position: 8px 9px; - } + @media (max-width: 375px) { + margin: -46px 50.4% 22px; + } + } + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black; + border-radius: 5px; + width: 366px; + height: auto; - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + @media (min-width: 2500px) { + width: 742.67px; + height: 204.58px; + } - .shp-summary-group-price { - padding-right: 16px; - } + @media (max-width: 1024px) { + width: 309px; + } - .shp-summary-package { - padding-left: 16px; - } + @media (max-width: 375px) { + width: 82.4%; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + h3 { + color: $color-black; + margin: 0 0 8px 0; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + margin-bottom: 15px; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + @media (max-width: 1024px) { + margin-top: 4px; + } + } + + ul { + margin: 0; + + li:nth-child(1) { + max-width: 150px; + } + + li:nth-child(2) { + max-width: 279px; + } + + li:nth-child(3) { + max-width: 231px; + } + + li:nth-child(4) { + max-width: 302px; + } + + @media (min-width: 2500px) { + li:nth-child(1) { + max-width: 100%; + } + + li:nth-child(2) { + max-width: 100%; + } + + li:nth-child(3) { + max-width: 100%; + } + + li:nth-child(4) { + max-width: 100%; + } + } + + li { + span { + color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + + @media (min-width: 2500px) { + font-size: 2rem; + } + } + } + } + + .icon-lock { + position: absolute; + bottom: -29px; + right: 0px; + + @media (max-width: 1024px) { + display: none; + } + } + + i::before { + color: $color-black; + font-size: 5.736rem; + opacity: 0.5; + + @media (min-width: 2500px) { + font-size: 11.083rem; + } + } + } + } + + .client-profile-data { + .pull-left { + @media (max-width: 490px) { + float: left !important; + } + } + } + + #payment-data > div { + @media (max-width: 1024px) { + margin-left: 1.6%; + } + } + + .shipping-data, + .payment-data, + .client-profile-data { + @media (max-width: 1024px) { + width: 100%; + margin-left: 1.6%; + } + + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 24px 17px 36px; + + .accordion-heading { + .accordion-toggle { + margin: 0 0 25px; + i { + display: none; + } + } + } + + @media (max-width: 1024px) { + width: 93.556%; + } + + @media (min-width: 2500px) { + padding: 20px 20px 20px 36px; + } + #postalCode-finished-loading { + @media (max-width: 375px) { + width: 343px; + } + @media (max-width: 1024px) { + width: 309px; + } + } + + .accordion-heading { + .accordion-toggle { + .icon-credit-card, + .icon-home { + content: url(https://agenciamagma.vteximg.com.br/arquivos/LapisM3Academy.png); + width: 20px; + float: right; + cursor: pointer; + @media (min-width: 2500px) { + color: transparent; + } + } + } + .accordion-toggle-active { + i { + display: none; + } + } + + span { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black2; + margin-top: 6px; + margin-bottom: 36px; + padding: 0; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 37px; + margin-bottom: 14px; + } + + span[data-i18n="clientProfileData.identification"] { + color: $color-white; + } + + span[data-i18n="clientProfileData.identification"]::before { + content: "Identificação"; + color: $color-black; + } + .link-box-edit { + background: $color-white; + border: none; + + .icon-edit { + display: block; + content: url(https://agenciamagma.vteximg.com.br/arquivos/LapisM3Academy.png); + width: 20px; + float: right; + cursor: pointer; + @media (min-width: 2500px) { + width: 37.19px; + } + } + } + } + } + + .accordion-inner { + padding: 0; + + .box-step { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-address { + display: flex; + flex-direction: column; + div { + display: flex; + flex-direction: column; + p { + margin-right: 14px; + } + } + } + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + .ship-postalCode { + flex-direction: column; + display: flex; + .input-small { + max-width: 95.98%; + } + small { + margin: 0; + } + } + } + .form-step { + .client-profile-email { + margin-bottom: 6px; + } + .client-profile-summary { + br { + display: none; + } + display: flex; + flex-direction: column; + gap: 6px; + } + } + .shp-summary-group { + padding: 0; + } + } + /* General configurations */ + + .box-step { + .box-step-content { + .form-step { + margin-top: 76px; + } + } + } + + .client-notice { + display: none; + } + + .client-email > input { + @media (max-width: 1024px) { + width: 98.54%; + max-width: 100%; + } + + @media (min-width: 2500px) { + font-size: 26px; + } + + width: 96%; + } + + .client-email > label { + font-size: 0px; + } + + .client-email > label::after { + content: "Email"; + font-size: 14px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + margin-top: 24px; + } + } + + p.client-first-name, + p.client-last-name, + p.client-document, + p.client-phone { + width: 43%; + + @media (min-width: 2500px) { + width: 44.6%; + } + } + + p.client-first-name, + p.client-document { + margin-right: 10%; + + @media (min-width: 2500px) { + margin-right: 7%; + } + } + + @media (max-width: 1024px) { + p.client-first-name, + p.client-document { + margin-right: 3%; + } + + p.client-first-name, + p.client-last-name, + p.client-document, + p.client-phone { + width: 47.7%; + } + } + + p.client-document, + p.client-phone { + input { + @media (max-width: 490px) { + width: 95% !important; + } + } + } + + p.newsletter span { + text-transform: none; + } + + p { + label { + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: capitalize; + height: 20px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + margin-bottom: 20px; + } + } + + select, + input { + border-radius: 5px; + border: 1px solid $color-gray6; + box-shadow: none; + height: 32px; + margin-bottom: 8px; + width: 100%; + + @media (min-width: 2500px) { + height: 23px; + padding: 24px 0 12px 9px; + font-size: 26px; + } + } + + input::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + } + + .help.error { + color: $color-red; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + + @media (min-width: 2500px) { + font-size: 18px; + width: 100%; + } + } + } + + .box-client-info-pf { + @media (max-width: 1024px) { + width: 100%; + } + } + + .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; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + .newsletter { + margin: -4px 0 32px; + + @media (min-width: 2500px) { + margin: -14px 0 50px; + } + } + + #opt-in-newsletter { + position: relative; + top: -3px; + width: 18px; + height: 18px; + border: 1px solid $color-gray8; + border-radius: 3px; + + @media (min-width: 2500px) { + width: 35px; + height: 35px; + top: -1px; + } + } + + .newsletter-text { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray7; + margin-left: 6px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + + .submit .btn-submit-wrapper { + text-align: center; + } + + button.submit { + border: none; + border-radius: 8px; + background: $color-blue2; + margin: 8px 0 21px; + outline: none; + width: 100%; + color: $color-white; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + padding: 0; + height: 42px; + letter-spacing: 0.05em; + text-transform: uppercase; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + height: 61px; + } + } + + .shipping-summary-info, + .notification { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + } + + /* Shipping configurations */ + + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } + + .shp-lean { + border: 1px solid #e0e0e0; + border-radius: 8px; + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: #f2f2f2; + } + + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; + + &:active { + background: #f2f2f2; + } + + svg path { + fill: #d8c8ac; + } + } + } + } + + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } + + .shp-summary-group-info { + border-color: $color-gray4; + border: none; + .shp-summary-group-address { + .address-summary { + .postalCode { + display: none; + } + } + } + } + + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } + + .shp-summary-group-price { + padding-right: 16px; + } + + .shp-summary-package { + padding-left: 0px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + display: none; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white; + border: 1px solid #292929; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: #000; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + text-shadow: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + text-transform: uppercase; + } + } + .vtex-omnishipping-1-x-deliveryOptionInactive { + color: #c4c4c4; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + text-transform: uppercase; + } + } + } + } + } } diff --git a/package-lock.json b/package-lock.json index 3be68c7..4024f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "jquery": "^3.6.0", "m3-utils": "^0.1.0", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4" }, "devDependencies": { @@ -19345,6 +19346,7 @@ "m3-utils": "^0.1.0", "prettier": "^2.3.2", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4", "webpack": "^5.51.1", "webpack-merge": "^5.8.0" -- 2.34.1 From aaec739abb3978d4f1c2eaba038264b54b214ed8 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:07:13 -0300 Subject: [PATCH 2/9] feat(sass):Adiciona sass do carrinho --- .../sass/checkout/_checkout-carrinho.scss | 843 +++++++++++++++--- 1 file changed, 718 insertions(+), 125 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..01efed1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -5,6 +5,11 @@ } .cart-template { + @include mq(l, max) { + display: flex; + flex-direction: column; + } + font-family: $font-family; @include mq(md, max) { padding: 0 0; @@ -13,10 +18,15 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin-bottom: 48px; + + @include mq(l, max) { + padding: 0; + } @include mq(md, max) { margin: 0px 0 25px 0; @@ -65,6 +75,15 @@ .price { color: #7d7d7d; } + + .url { + .photo { + object-fit: cover; + transform: rotateY(180deg); + height: 60px; + width: 60px; + } + } } } @@ -74,8 +93,22 @@ } #go-to-cart-button a { - color: #303030; - text-decoration: underline; + color: $color-black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + text-decoration-line: underline; + @media (max-width: 1024px) { + float: right; + } + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } .summary-totalizers { @@ -85,18 +118,27 @@ } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + background: #298541; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + span { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + i { + display: none; + } &:hover { - background: lighten($color-black, 5); + background: lighten(#298541, 5); } &:active { - background: darken($color-black, 5); + background: darken(#298541, 5); } } } @@ -108,16 +150,44 @@ .cart-items { .product-item { padding: 16px 0; + + @include mq(c, max) { + padding: 16px 0 0 16px; + margin: 16px 16px 15px 16px; + } + + @include mq(l, max) { + display: flex; + padding: 16px 0 15px 16px; + } + + @include mq(m, max) { + position: relative; + padding: 0 0 0 16px; + margin: 16px 16px 15px 16px; + } } th { - color: $color-black; - padding: 0 0 16px; + text-align: start; + font-family: $font-family-secundary; + color: $color-black2; + padding: 0 0 17px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + @include mq(l, max) { + display: none; + } + + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -130,45 +200,84 @@ height: auto; padding: 0; width: 60px; - - @include mq(sm, max) { - width: 72px; + @include mq(xxl, min) { + width: 7.427%; + height: 146px; } img { height: 60px; max-width: 100%; - width: auto; - - @include mq(sm, max) { - height: 72px; - width: auto; + width: 100%; + object-fit: cover; + transform: rotateY(180deg); + @include mq(xxl, min) { + width: 100%; + height: 146px; } } } .product-name { + width: 32.425%; padding-right: 0; + padding-left: 0; + + @include mq(l, max) { + position: absolute; + left: 92px; + padding: 0; + } + + @include mq(xxl, min) { + width: 32.147%; + } @include mq(lg, max) { width: 250px; } + @include mq(m, max) { + margin: 0 !important; + left: 78px !important; + } + a { - color: $color-blue; + color: $color-black; font-style: normal; font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + padding-left: 16px; + + @include mq(l, max) { + position: absolute; + padding: 0; + width: 200px; + } + @include mq(xxl, min) { + padding-left: 31px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } &:hover { - color: darken($color-blue, 10); + color: darken($color-black, 10); text-decoration: none; } @media (max-width: 490px) { - margin-left: 23px; + position: absolute; + padding: 0; + margin: 0; + width: 200px; + } + + @include mq(f, max) { + font-size: 8px; } } @@ -179,17 +288,61 @@ } td.shipping-date { - color: $color-gray2; + text-align: start; + color: $color-gray12; font-size: 12px; line-height: 14px; + width: 14.85%; + padding-left: 0; + font-weight: 400; + font-family: $font-family-secundary; + + @include mq(l, max) { + display: none; + } + + @include mq(xxl, min) { + width: 14.5982%; + } + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } @include mq(md, max) { display: none; } } + td.product-price { + top: 10px; + + @include mq(l, max) { + position: absolute; + right: 0; + top: 32px; + } + @include mq(m, max) { + top: 22px; + } + } + .product-price { - min-width: 100px; + text-align: start; + width: 14.95%; + padding-left: 0; + + @include mq(l, max) { + text-align: right; + width: fit-content; + padding-right: 16px; + } + + @include mq(xxl, min) { + width: 14.904%; + } + @include mq(md, max) { min-width: 78px; } @@ -200,77 +353,127 @@ } span.list-price { - color: $color-gray2; + color: $color-gray12; + font-weight: 400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } @include mq(sm, max) { font-size: 12px; line-height: 14px; } + @include mq(f, max) { + font-size: 12px; + } + .old-product-price-label { text-transform: lowercase; + font-family: $font-family-secundary; + } + + .muted { + color: $color-gray12; + font-family: $font-family-secundary; } } } + .table td { + padding: 5px 5px 5px 0; + } + td.quantity { align-items: center; - border: 1px solid $color-gray3; border-radius: 0; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; - max-height: 38px; - max-width: 118px; + margin: 18px 0 0; + max-height: 34px; + max-width: 99px; + min-height: 34px; + min-width: 99px; padding: 0; width: max-content !important; + border: 1px solid $color-gray3; + border-radius: 8px; - @media (max-width: 490px) { - margin-left: 84px !important; + @include mq(f, max) { + max-width: 70px; + min-width: 70px; + } + + @include mq(l, max) { + margin-left: 16px; + margin-top: 26px; + } + + @include mq(xxl, min) { + margin: 53px 0 0; + max-width: 135px; + max-height: 50px; } input { background-color: $color-white; border: 1px solid $color-gray3; border-radius: 0; - border-width: 0 1px; + border-width: 0 0; display: block; max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; + padding: 0; + width: 45px; color: $color-gray2; box-shadow: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + width: 54px; + } @include mq(lg, max) { - width: 24px !important; + width: 45px !important; + } + @include mq(f, max) { + width: 20px !important; } } .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-black2; display: block; font-weight: 500; - padding: 1px 12px; } } .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + font-size: 14px; + color: $color-blue2; + padding: 9px 0px 9px 11px; + @include mq(xxl, min) { + font-size: 29px; + } } } .icon-plus-sign { &:before { - content: "+"; font-size: 14px; + color: $color-blue2; + padding: 9px 11px 9px 0px; + @include mq(xxl, min) { + font-size: 29px; + } } } @@ -290,6 +493,46 @@ } } + .quantity-price { + text-align: start; + width: 10%; + padding-left: 0; + @include mq(xxl, min) { + width: 9.258%; + } + + @include mq(l, max) { + display: none; + } + + .total-selling-price { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-black2; + font-family: $font-family; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + } + } + + .item-remove { + @include mq(l, max) { + position: absolute; + top: 8px; + right: 0; + } + .item-link-remove { + vertical-align: super; + @include mq(xxl, min) { + vertical-align: middle; + } + } + } + .quantity-price, .best-price { .icon-question-sign { @@ -298,9 +541,22 @@ span { font-style: normal; font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; + color: $color-black2; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + .new-product-price { + font-family: $font-family-secundary; + } + .new-product-price-label { + text-transform: lowercase; + font-family: $font-family-secundary; } } @@ -312,12 +568,16 @@ .item-remove { @media (max-width: 490px) { - top: 0; + top: -7px !important; } .icon::before { - color: $color-gray4; + color: $color-gray10; font-size: 15px; + @include mq(xxl, min) { + font-size: 26px; + } + @include mq(md, max) { font-size: 18px; } @@ -339,24 +599,42 @@ } .summary { + @include mq(l, max) { + display: flex !important; + flex-direction: column; + max-width: 992px; + width: auto; + margin: 0 16px; + } .cart-more-options { margin: 0; - width: max-content; + max-width: 55.68%; + + @include mq(l, max) { + margin-bottom: 48px; + } + + .srp-content { + @include mq(xxl, min) { + width: 700px; + } + } .srp-container { - padding: 0 0 0 10px; - - @include mq(md, max) { - padding: 0 16px; - } + padding: 0; .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px; font-style: normal; - font-weight: normal; + color: $color-black; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-top: 0; @@ -365,24 +643,56 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-weight: 400; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + max-width: 78.86%; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 36px; + } + + @include mq(l, max) { + max-width: 276px; + width: 276px; + } + + @include mq(f, max) { + width: 248px; + font-size: 12px; + } } button.shp-open-options { - background-color: $color-gray5; + width: 100%; + background-color: $color-gray11; border: none; border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + font-weight: 400; + font-size: 14px; line-height: 19px; - font-weight: 500; + letter-spacing: 0.05em; + color: $color-black; outline: none; padding: 12px 40px; transition: all 0.2s linear; + @include mq(l, max) { + width: 157px; + height: 44px; + } + + @include mq(xxl, min) { + width: 230px; + font-weight: 400; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + height: 44px; + padding: 0; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -393,43 +703,85 @@ } } + .srp-pickup-empty__my-location { + width: 178.35%; + + @include mq(l, max) { + width: 343px; + margin: 0; + } + @include mq(xxl, min) { + width: 173.14%; + } + } + .srp-data { - width: 280px; + width: 44.86%; + margin-top: 10.65px; + + .shp-open-options { + margin: 0; + } @include mq(cstm, max) { width: calc(100vw - 32px); } - @include mq(md, max) { - margin-bottom: 40px; - } - .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + margin-top: 7px; + padding: 13px 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); + @include mq(xxl, min) { + height: 60.98px; } - &:active { - background-color: darken($color-black, 5); + @include mq(l, max) { + height: 42px; + width: 343px; + } + + @include mq(f, max) { + width: 248px; + float: left; + } + + span { + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-white; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } .srp-toggle { - margin: 0 0 34px; + margin: 0; + padding-bottom: 13px; + width: 178.35%; + + @include mq(l, max) { + width: 343px; + } + @include mq(xxl, min) { + width: 173.14%; + } &__wrapper { background-color: $color-white; @@ -441,40 +793,69 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + + @include mq(l, max) { + width: 343px; + } + + @include mq(f, max) { + width: 248px; + } } &__current { - border: 1px solid $color-blue; - border-radius: 100px; + border: 1px solid $color-black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-blue; + color: $color-black; } label { width: 50%; + font-weight: 400; + font-size: 14px; + line-height: 19px; + background-color: $color-white; + border-radius: 100px; + + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + } &:active { - background-color: #f0f0f0; } } } .srp-postal-code { + .srp-postal-code__form { + .ship-country { + display: none; + } + } + .ship-postalCode { label { font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; - line-height: 14px; + line-height: 16px; color: $color-black; - margin-bottom: 12px; + margin-bottom: 2px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray10; border-radius: 5px; box-shadow: none; color: $color-gray3; @@ -482,46 +863,90 @@ height: 36px; padding: 12px 8px; width: 172px; + @include mq(xxl, min) { + width: 333.96px; + height: 55px; + margin-bottom: 5px; + } + @include mq(l, max) { + width: 215px; + } + @include mq(f, max) { + width: 160px; + } } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; - font-size: 12px; + font-weight: 700; + font-size: 14px; + line-height: 19px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; outline: none; position: absolute; right: -150px; - top: 36px; + top: 28px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; + @include mq(xxl, min) { + width: 194.16px; + height: 55px; + right: -285px; + top: 45px; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + @include mq(l, max) { + width: 120px; + right: -213px; + } + @include mq(f, max) { + font-size: 11px; + width: 80px; + right: -118px; + } + &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0; + + &:after { + text-decoration-line: underline; + font-family: $font-family-secundary; + font-style: normal; + margin-top: 7px; + font-size: 10px; + font-weight: 400; + line-height: 12px; + color: $color-black; + content: "Não sei meu código postal"; + @include mq(xxl, min) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + } + } } span.help.error { + display: none !important; color: red; - font-size: 12px; + font-size: 10px; position: absolute; left: 0; width: 100%; @@ -591,9 +1016,22 @@ } &-totalizers { + margin: 0; padding: 0; width: 346px; + @include mq(c, max) { + padding: 0 !important; + } + + @include mq(l, max) { + width: 100%; + margin: 0; + } + @include mq(xxl, min) { + width: 688.35px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -603,13 +1041,19 @@ } } 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; text-decoration: none; + color: $color-black; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } } @@ -621,6 +1065,79 @@ .coupon-column { .coupon { margin: 0; + + .coupon-form { + .coupon-fieldset { + & div { + text-align: initial; + + .coupon-value { + min-width: 50.96%; + border: 1px solid $color-gray5; + border-radius: 5px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + font-family: $font-family-secundary; + color: $color-gray10; + @include mq(xxl, min) { + min-width: 54.105%; + height: 55px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + @include mq(l, max) { + max-width: 83.367%; + min-width: 83.367%; + width: 83.367%; + margin-right: 5px; + } + + @media screen and (max-width: 1019px) { + min-width: 70%; + width: 70%; + } + + @include mq(c, max) { + width: 100%; + min-width: fit-content; + } + } + + button { + margin-left: 2.036%; + min-width: 38.59%; + font-weight: 400; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + font-family: $font-family; + color: $color-black; + background-color: $color-blue2; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + height: 55px; + margin-left: 3.843%; + min-width: 37.822%; + } + @include mq(l, max) { + width: 133.51px; + min-width: 133.51px; + float: right; + margin: 0; + } + @include mq(f, max) { + min-width: 40px; + font-size: 10px; + } + } + } + } + } } .link-coupon-add { @@ -631,13 +1148,18 @@ .coupon-label label { margin-bottom: 12px; - 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-gray2; cursor: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } .coupon-fields { @@ -673,7 +1195,7 @@ } button { - background: $color-black; + background: $color-black2; border: none; border-radius: 5px; color: $color-white; @@ -691,11 +1213,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-black2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-black2, 5); } } } @@ -713,11 +1235,17 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; + color: $color-black2; padding: 12px 0; + font-family: $font-family-secundary; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } &.info { @@ -726,6 +1254,9 @@ &.monetary { text-align: right; + @include mq(xxl, min) { + min-width: 240px; + } } } } @@ -734,10 +1265,20 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 25px; + font-family: $font-family; + color: $color-black2; + + @include mq(l, max) { + width: 120px; + } + @include mq(xxl, min) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } } } @@ -749,40 +1290,45 @@ flex-direction: column; width: 343px; - @include mq(md, max) { - padding: 0 16px; + @include mq(l, max) { + max-width: 992px; width: calc(100% - 32px); - float: none; - margin-bottom: 50px; + margin: 0 16px; } - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; + @include mq(xxl, min) { + width: 688.34px; } .link-choose-more-products-wrapper { display: block; text-align: center; margin-bottom: 16px; + margin-right: 10px; @include mq(md, max) { margin-bottom: 0px; } 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: $color-black; + margin: 0; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; border-radius: 5px; display: block; @@ -791,22 +1337,69 @@ padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: $color-blue2; } &: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: $color-black; text-transform: uppercase; vertical-align: middle; - line-height: 19px; text-shadow: none; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + } } } } } } + +.cart-items { + thead { + tr { + .shipping-date { + font-size: 0; + &:after { + font-size: 14px; + content: "Frete"; + vertical-align: middle; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + + .product-price { + font-size: 0; + &:after { + font-size: 14px; + content: "Unidade"; + vertical-align: middle; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + } + } +} +@include mq(xxl, min) { + .vtex-shipping-preview-0-x-postalCodeForgotten { + p { + width: 260px !important; + } + } +} -- 2.34.1 From 0f45cb0a3322536e0db44b74b4c7469634f8905f Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:12:29 -0300 Subject: [PATCH 3/9] feat(sassPagamento):Adiciona sass do carrinho --- .../sass/checkout/_checkout-pagamento.scss | 272 ++++++++++++++++++ 1 file changed, 272 insertions(+) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..a7007ed 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,11 +1,283 @@ body .container-main.container-order-form .orderform-template.active { + // .mini-cart { + // width: 32.3242%; + // margin-left: unset; + // margin-right: 0; + // float: right; + // } + // .orderform-template-holder { + // width: 66.1132%; + // } + .shipping-data { + .shipping-container { + .shipping-method-toggle-delivery { + background: $color-white; + } + .shp-method-option-text { + text-shadow: none; + } + } + } .mini-cart { + border-radius: 8px; width: 32.3242%; margin-left: unset; margin-right: 0; float: right; + border: 1px solid #e5e5e5; + .cart-items { + li { + .product-name { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + white-space: unset; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + .price { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } + } + } + .cart-fixed { + height: auto !important; + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + h2 { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; + text-align: left; + padding: 24px 0px 35px 17px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 32px; + line-height: 37px; + } + } + #go-to-cart-button { + margin-right: 17px; + } + .summary-cart-template-holder { + .summary-totalizers { + margin: 0; + } + .cart { + border: none; + padding: 0px 17px; + margin: 0 0 19px; + } + } + .accordion-group { + table { + margin: 0px 17px; + width: calc(100% - 34px); + tr { + border-top: 1px solid #e0e0e0; + } + td { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #7d7d7d; + } + td[data-i18n="global.total"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: #292929; + float: left; + } + td[data-bind="text: totalLabel"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: #292929; + } + .info, + .monetary { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + @include mq(xxl, min) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + } + } + } + } + } + + @media (max-width: 1024px) { + width: 97.2%; + margin-left: 6px; + } } .orderform-template-holder { width: 66.1132%; + @media (max-width: 1024px) { + width: 100% !important; + } } } + +.box-step { + .box-step-content { + .form-step { + .link-gift-card { + left: 0; + top: -66px; + margin: 0; + a { + pointer-events: none; + font-size: 0 !important; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #7d7d7d; + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + } + } + } + + .steps-view { + width: 56.456%; + .payment-method { + } + } + + .payment-group { + margin: 0; + width: 32.505%; + .payment-group-list-btn { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; + a { + display: none; + border: 1px solid rgb(0, 0, 0, 0.3); + border-radius: 6px; + background: #f0f0f0; + align-items: center; + text-align: center; + padding: 0 8px; + width: 91.39%; + margin: 0; + span { + width: 100%; + padding: 11px 0; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #58595b; + } + } + + #payment-group-custom201PaymentGroupPaymentGroup { + display: block; + span { + font-size: 0 !important; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Boleto Faturado"; + } + } + } + + #payment-group-custom204PaymentGroupPaymentGroup { + display: block; + span { + font-size: 0 !important; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Cartão de Débito"; + } + } + } + + #payment-group-creditCardPaymentGroup { + display: block; + span { + background-image: none !important; + font-size: 0 !important; + text-decoration: none; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Cartão de Crédito"; + } + } + } + + #payment-group-bankInvoicePaymentGroup { + display: block; + span { + background-image: none !important; + font-size: 0 !important; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Boleto à Vista"; + } + } + } + + .payment-group-item.active { + background: rgba(220, 221, 227, 0.3); + mix-blend-mode: normal; + border: 1px solid $color-orange; + border-radius: 6px; + span { + color: $color-orange; + } + } + } + } + } + } +} + +.PaymentCardHolderDocument { + display: block !important; +} -- 2.34.1 From 33d703177e25459d719a8e35aab9e02f8ad1b28d Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:15:47 -0300 Subject: [PATCH 4/9] feat(sassCheckout):Finaliza o sass do checkout --- .../sass/checkout/_checkout-vazio.scss | 131 +++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 48 +++++-- 2 files changed, 135 insertions(+), 44 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..42a2bc0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,105 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; + &-content { + margin-top: 170px; + color: $color-black; + text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + @include mq(md, max) { + padding: 0 16px; + } + .empty-cart-message { + display: none; + } + } - &-title { - font-size: 20px; - } + &-title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black-000; + margin-bottom: 32px; + @include mq(dt, max) { + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + margin-bottom: 22px; + } + @include mq(tv, min) { + font-weight: 700; + font-size: 48px; + line-height: 65px; + } + } + &-btn { + padding: 250px !important; + } - &-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; + &-links { + .link-choose-products { + background: $white; + transition: ease-in 0.22s all; + outline: none; + font-family: $font-family-secundary; + font-style: normal; + color: $black; + text-align: center; + letter-spacing: 0.05em; + color: $black; + font-size: 0px; + text-transform: uppercase; + border: 1px solid #000000; + border-radius: 0%; + padding: 16px 64px 16px 65px; + height: 16px; + margin: 0; + &::after { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + content: "Continuar comprando"; + } - &:hover { - background: lighten($color-black, 5); - } - } - } + &:hover { + background: $white; + } + @media screen and (max-width: 354px) { + height: 32px !important; + } + @include mq(dt, max) { + height: 16px; + padding: 16px 26px; + + &::after { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + } + } + @include mq(tv, min) { + height: 33.52px; + padding: 16px 121px; + &::after { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..31cb12e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,11 +9,11 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; + // width: 94.9734%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, -header { +footer .footerCheckout__prateleira { width: 79.53125%; margin: 0 auto; } @@ -49,37 +49,61 @@ body { } .container-order-form, .container-cart { + //margin-top: 170px; width: 80%; + + @include mq(l, max) { + max-width: 1024px; + width: 100%; + } } } .btn-success { - background: $color-black; + background: $color-black2; + padding: 15px 64px 17px 65px; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($color-black2, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $color-black2 !important; +} + +#orderform-title { + margin-bottom: 28px !important; } #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + height: 33px; + line-height: 33px; + margin: 17px 0 16px; + font-weight: 700; + font-size: 24px; + letter-spacing: 0.05em; text-transform: uppercase; + @include mq(xxl, min) { + height: 65px; + font-weight: 700; + font-size: 48px; + line-height: 65px; + letter-spacing: 0.05em; + } + @include mq(md, max) { margin-left: 30px; } + + @include mq(l, max) { + margin-left: 16px; + } } .dropdown { -- 2.34.1 From 75cd2cd0d47131f1bbe66c3d360b40084a5aed2d Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:17:24 -0300 Subject: [PATCH 5/9] feat(sassSlick):Adiciona o sass do slick --- checkout/src/arquivos/sass/lib/_slick.scss | 26 +++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..1cacbf0 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -18,7 +18,7 @@ position: relative; overflow: hidden; display: block; - margin: 0; + margin: 0 -16px; padding: 0; &:focus { @@ -65,6 +65,7 @@ float: left; height: 100%; min-height: 1px; + margin: 0 8px 56px 8px; outline: none; [dir="rtl"] & { float: right; @@ -95,6 +96,9 @@ height: auto; border: 1px solid transparent; } + @media (max-width: 1024px) { + margin: 0px 7.5px 56px 7.5px; + } } .slick-arrow { font-size: 0; @@ -104,11 +108,31 @@ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; + top: 167px; + border: none; left: 10px; + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center center; + top: 313px; + width: 26px; + height: 58px; + } } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + top: 167px; z-index: 4; + border: none; right: 10px; + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + top: 313px; + width: 26px; + height: 58px; + } } .slick-arrow.slick-hidden { display: none; -- 2.34.1 From 179cddc1902a1e624e76ca950278ebe98aac143c Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:20:53 -0300 Subject: [PATCH 6/9] feat(sassPartials):Adiciona todo o sass do partials --- .../src/arquivos/sass/partials/_footer.scss | 203 +++++++++++++++--- .../src/arquivos/sass/partials/_header.scss | 158 +++++++++++++- .../arquivos/sass/partials/_prateleira.scss | 142 ++++++++++++ 3 files changed, 463 insertions(+), 40 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2ebcd2d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,47 +1,134 @@ -/* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + margin-top: auto; + //border-top: 1px solid #000; + .container { + display: flex; + flex-direction: column; + width: 100%; + padding: 7px 0; + margin: 0; + + @include mq(dt, min) { + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 15px 0 15px 0; + } + + @include mq(tv, min) { + padding: 26px 0 26px 0; + } + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + border-top: 1px solid $black; + + @media screen and (max-width: 490px) { + padding: 7px 0; + } } &__address { - color: $color-gray2; + color: $gray-500; font-family: $font-family; - font-style: normal; - font-weight: normal; + font-weight: 400; + line-height: 14px; font-size: 10px; - line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(dt, max) { + display: flex; + width: 100%; + order: 2; + margin-top: 17px; + + span { + margin-left: 16px; + } + } + + @include mq(dt, min) { + min-width: 269px; + margin-left: 32px; + } + + @include mq(tv, min) { + font-size: 20px; + line-height: 27px; + min-width: 537px; + margin-left: 0; } } &__stamps { - align-items: center; display: flex; - justify-self: center; + height: 33px; + align-items: center; list-style: none; + margin: 0 0 0 5px; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + li { + height: 33px; } - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + @include mq(dt, min) { + justify-content: center; + min-width: 404px; + margin: 0; + } + + @include mq(tv, min) { + min-width: 690.52px; + } + + .payments-icons-wrapper { + display: flex; + width: 100%; + list-style: none; + gap: 13.35px; + margin: 0; + + @include mq(dt, max) { + gap: 4.35px; + } + figure { + padding: 6px 0 7px; + width: 35.65px; + height: 20px; + margin: 0; + @include mq(tv, min) { + width: 69.63px; + } + + @include mq(Gf, max) { + width: 24px; + } + } + } + + .footerCheckout__stamps__divider { + border-left: 1px solid $gray; + margin: 0 10px; + height: 33px; + padding: 0 0 9px; + + @include mq(dt, min) { + margin-left: 11.35px; + } + } + + .footerCheckout__vtexpci { + .vtex-icon { + width: 53px; + margin: 0; + } + + @include mq(tv, min) { + .vtex-icon { + width: 103.52px; + height: 64.46px; + } + } } } @@ -51,18 +138,43 @@ list-style-type: none; margin: 0; - li:last-child { + @include mq(dt, max) { + display: flex; + width: 100%; + order: 3; + margin-top: 17px; + } + + @include mq(dt, min) { + min-width: 217px; + margin-right: 22.5px; + } + + li { margin-left: 16px; + + figure { + margin: 0; + } + } + + .vtex-icon { + width: 44.92px; + margin: 0; + } + .m3-icon { + width: 28.66px; + margin: 0; } a { align-items: center; - color: $color-gray2; + color: $gray-500; display: flex; font-family: $font-family; font-style: normal; - font-weight: normal; - font-size: 10px; + font-weight: 400; + font-size: 9px; line-height: 12px; text-decoration: none; @@ -70,5 +182,38 @@ margin-right: 8px; } } + + @include mq(tv, min) { + min-width: 388.98px; + margin-right: 0; + + a { + font-size: 18px; + line-height: 25px; + } + + li { + margin-left: 10px; + } + + .vtex-icon { + width: 87.73px; + } + .m3-icon { + width: 55.98px; + } + } + } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..29f8467 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,172 @@ -/* _header.scss */ .headerCheckout { .container { width: auto !important; } &__wrapper { - align-items: center; display: flex; - justify-content: space-between; + align-items: center; + justify-content: space-around; + padding: 16px; + border-bottom: 1px solid $black; + + @media (min-width: 1025px) { + padding: 33.5px 0; + } + + @media (min-width: 2500px) { + padding: 33.5px 0; + } + } + .progress-bar { + display: flex; + flex-direction: column; + right: 31.5%; + top: 33%; + @media (max-width: 1024px) { + display: none; + } + @media (min-width: 2500px) { + right: 41%; + } + + .containerLi { + display: flex; + position: relative; + align-items: center; + } + ul { + display: flex; + margin: 0; + gap: 100px; + list-style: none; + } + + p { + margin-bottom: 0; + } + + &-text { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &-line-1, + &-line-2 { + position: absolute; + width: 171px; + top: 82%; + left: 55%; + border: 1px solid $black; + z-index: 0; + + @media (min-width: 2500px) { + width: 240px; + top: 79%; + left: 55%; + } + } + + &-line-2 { + width: 166px; + left: -223%; + + @media (min-width: 2500px) { + width: 230px; + left: -143%; + } + } + + &-circle-1, + &-circle-2, + &-circle-3 { + display: flex; + height: 10px; + width: 10px; + align-self: center; + background: $white; + border: 1px solid $black; + border-radius: 50%; + margin-left: 40%; + margin-top: 9px; + padding: 0; + + @media (min-width: 2500px) { + height: 22px; + width: 22px; + } + } + + .active { + background: $black; + } } &__logo { - img { - height: 52px; - width: auto; + width: 45.35%; + + @media (min-width: 1025px) { + width: 17.059%; + } + + @media (min-width: 1025px) { + width: 15.28%; + + img { + width: 100%; + } + } + @media (min-width: 2500px) { + width: 19.22%; } } &__safeBuy { + justify-content: flex-end; + display: flex; + align-items: center; + + @media (min-width: 1025px) { + width: 15.5%; + } + + @media (min-width: 2500px) { + width: 20%; + } + span { - align-items: center; - display: flex; + min-width: fit-content; + height: 50%; text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; + line-height: 16px; color: $color-gray; + margin-left: 8px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } - i { - margin-right: 8px; + img { + width: 4.5%; + min-width: 12px; + + @media (min-width: 2500px) { + width: 6.1%; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..e048f93 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,143 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + //width: 96.88% !important; + margin: 0 132px; + //width: 100% !important; + @media (max-width: 1024px) { + width: auto !important; + margin: 0 16px; + } +} +.footerTitle { + text-align: center; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $black; + margin-bottom: 20px; + + @include mq(tv, min) { + font-size: 48px; + line-height: 76px; + } +} +.slick-test { + width: 100%; + gap: 16px; + margin: 0 !important; + & li { + max-width: 97.98%; + @media (max-width: 375px) { + width: 164px !important; + } + @media (max-width: 1024px) { + width: 97.86% !important; + max-width: 100%; + } + @include mq(tv, min) { + min-width: 485.07px; + } + } +} +.itemList { + @media (max-width: 375px) { + width: 164px; + } +} +.itemSku { + display: flex; + gap: 5px; + justify-content: center; + flex-wrap: wrap; + height: 26px; + & p { + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 5px; + display: flex; + align-items: center; + text-align: center; + height: 18px; + margin: 0; + + letter-spacing: 0.05em; + text-transform: uppercase; + + color: $white; + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + height: auto; + } + } + @media (max-width: 375px) { + height: 61px; + justify-content: center; + align-items: center; + } + @media (max-width: 1183px) { + height: 61px; + justify-content: center; + align-items: center; + } + @include mq(tv, min) { + min-height: 45px; + } +} +.productName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + margin: 20px 0px; + text-align: center; + height: 18px; + + color: $black; + @media (max-width: 375px) { + height: 36px; + } + @include mq(tv, min) { + height: 35px; + font-size: 26px; + line-height: 35px; + } +} +.productImg { + background: #eeeeee; + width: 100%; +} +.productLink { + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 12px 0; + //padding: 12px 71px 12px 72px; + display: flex; + justify-content: center; + letter-spacing: 0.05em; + text-transform: uppercase; + margin: 20px 0px 0px; + + color: $white; + &:hover { + color: white; + text-decoration: None; + } + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + } +} -- 2.34.1 From fcd2486df9d227d2c8d5fdc413b5f80d9f08520c Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:24:24 -0300 Subject: [PATCH 7/9] feat(sassUtilis):Adiciona toas as variaves e o sass do utils --- checkout/src/arquivos/sass/utils/_mixin.scss | 2 +- .../src/arquivos/sass/utils/_variaveis.scss | 54 ++++++++++++++----- 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 8d969d6..13beee6 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -1,7 +1,7 @@ /** * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) */ -@mixin push--auto { + @mixin push--auto { margin: { left: auto; right: auto; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..dfeb62a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,37 +2,67 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ +$black: #000; +$color-black-000: #000000; $color-black: #292929; +$color-black2: #292929; $color-white: #fff; +$color-white2: #ededed; +$white: #fff; + +$gray: #c4c4c4; +$gray-200: #8d8d8d; +$gray-500: #292929; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #c4c4c4; +$color-gray7: #989898; +$color-gray8: #828282; +$color-gray9: #bdbdbd; +$color-gray10: #c4c4c4; +$color-gray11: #ededed; +$color-gray12: #989898; + +$color-orange: #f15a31; $color-blue: #4267b2; +$color-blue2: #00c8ff; + +$color-red: #ff0000; $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + Gf: 328px, + cstm: 400, + f: 375px, + c: 376px, + m: 491px, + sm: 576px, + md: 768px, + lg: 992px, + tb: 1024px, + dt: 1025px, + l: 1025px, + xl: 1200px, + tv: 2500px, + xxl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1 From 6bf66ea9c0051aa1486f666a505c6a40ab478022 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:29:01 -0300 Subject: [PATCH 8/9] feat(jsComponents):Adiciona metodos necessario nos scripts do components --- .../src/arquivos/js/components/CheckoutUI.js | 14 +- checkout/src/arquivos/js/components/Footer.js | 266 +++++++++++++++++- checkout/src/arquivos/js/components/Header.js | 164 ++++++++++- checkout/src/arquivos/sass/checkout.scss | 1 + 4 files changed, 419 insertions(+), 26 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..3675c2e 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -31,10 +31,7 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); - - event.target.nextElementSibling.classList.toggle( - "dropdown__content--closed" - ); + event.target.nextElementSibling.classList.toggle("dropdown__content--closed"); } init() { @@ -56,14 +53,7 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr( - "src", - alterarTamanhoImagemSrcVtex( - $el.attr("src"), - this.width, - this.height - ) - ); + $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..3c3f115 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,276 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.events(); + this.onUpdate(); + this.createPaymentsIcons(); + this.createVtexpciIcon(); + this.createDevIcons(); + // await this.addCarrossel(); + } + + events() { + window.addEventListener("hashchange", () => { + this.onUpdate(); + if (window.location.hash != "#/cart") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + + this.cartTitle.style.display = "none"; + } + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + this.cartTitle.style.display = "block"; + } + console.log("HASHCHANGE FOOTER"); + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.list.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.list.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } async selectors() { //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.list = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); + // this.slick = await waitElement(".slick-test"); + // this.footerTitle = await waitElement(".footerTitle", { + // timeout: 5000, + // interval: 1000, + // }); + this.allList = await waitElement(".footerCheckout"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); + this.cartTitle = await waitElement("#cart-title"); } onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // 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.cartTitle; + console.log("title:", cartTitle); + if (target.style.display == "none" && window.location.hash == "#/cart") { + lista.style.display = "flex"; + cartTitle.style.display = "block"; + if (!this.list.classList.contains("fetch")) { + console.log("PRIMEIRO NAO TEM FETCH"); + this.fetchApiData(); + } + } else { + lista.style.display = "none"; + cartTitle.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); + if (window.location.hash == "#/cart") { + console.log("listairai", this.list.classList); + if (!lista.classList.contains("fetch")) { + console.log("SEGUNDO NAO TEM FETCH"); + this.fetchApiData(); + } + mutations.forEach(function (mutation) { + if (target.style.display != "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + cartTitle.style.display = "none"; + lista.style.display = "none"; + } else { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + lista.style.display = "flex"; + cartTitle.style.display = "block"; + } + console.log(mutation.type); + }); + } }); observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + console.log("start slick"); + const elemento = await waitElement(".slick-test"); + if ($(elemento).hasClass("slick-initialized")) { + $(elemento).slick("unslick"); + } + if (window.innerWidth > 1024) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } + + console.log("end slick"); + } + + fetchApiData() { + console.log("COMEÇO FETCH"); + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + console.log(data); + const ul = document.createElement("ul"); + + ul.classList.add("slick-test"); + this.list.appendChild(ul); + const footerCheckout = document.querySelector(".footerCheckout"); + const footerTitle = document.createElement("p"); + footerTitle.classList.add("footerTitle"); + footerTitle.innerText = "Você também pode gostar:"; + footerCheckout.insertBefore(footerTitle, this.list); + 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"); + li.setAttribute("name", item.itemId); + li.classList.add("itemList"); + li.innerHTML = ` +

${item.productName}

+
+ ${colors} +
+ VER PRODUTO`; + console.log(item.productName, colors); + console.log("adiciona li"); + ul.appendChild(li); + this.list.classList.add("fetch"); + console.log(this.list); + ul.style.width = "100%"; + }); + }) + .then(() => { + this.addCarrossel(); + }); + console.log("FIM FETCH"); + } + + createPaymentsIcons() { + this.payments.innerHTML = ` +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+ `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..bfa1e44 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,174 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.events(); + this.createProgressBar(); + await this.progressBarProgress(); } async selectors() { - this.item = await waitElement("#my-element", { + this.item = await waitElement("#progressBar", { //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); + } + events() { + addEventListener("resize", () => { + this.createProgressBar(); + this.progressBarProgress(); + }); + } + createProgressBar() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` +
      +
    • +
      +
      +

      Meu Carrinho

      +

      +

      +
      +
      +
      • +
    • +
      +
      +

      Dados Pessoais

      +

      +
      +
      +
      • +
    • +
      +
      +

      Pagamento

      +

      +

      +
      +
      +
      • +
    + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + async progressBarProgress() { + this.circle1 = await waitElement(".progress-bar-circle-1"); + this.circle2 = await waitElement(".progress-bar-circle-2"); + this.circle3 = await waitElement(".progress-bar-circle-3"); + if (this.progressBar && window.innerWidth > 1024) { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + progressBarList.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + console.log("email shipping"); + console.log(this.circle1); + if (this.circle2) { + this.circle2.classList.add("active"); + console.log("teste dados"); + } + console.log(this.circle2); + console.log(this.circle3); + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + this.circle2.classList.add("active"); + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + }); + }); + } } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..deb107c 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.scss"; @import "./checkout/checkout.scss"; -- 2.34.1 From 4110fa84d0668f1d3b4d73eec2c7b8284adf1cd2 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 23:45:25 -0300 Subject: [PATCH 9/9] feat(sass):Adiciona responsividade em todas as telas --- .../icon-radios-input-Active-M3Academy.png | Bin 338 -> 0 bytes .../imgs/icon-radios-input-M3Academy.png | Bin 267 -> 0 bytes checkout/src/arquivos/js/components/Footer.js | 4 +- .../sass/checkout/_checkout-autenticacao.scss | 167 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 5 + .../sass/checkout/_checkout-pagamento.scss | 80 ++++++++- checkout/src/arquivos/sass/utils/_mixin.scss | 2 +- 7 files changed, 242 insertions(+), 16 deletions(-) delete mode 100644 checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png delete mode 100644 checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png diff --git a/checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png b/checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png deleted file mode 100644 index 0eed197d5139a9a4beff988f9305d906838c3cfe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 338 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?3oVGw3ym^DWND9BhG z#U+v5$dwFZ0GTs%7H0E@un51_EA1?N}T$2CE zMxS%0_KE8IM*?Q-H#k-?tNirwX#(=xm5uLiF(g`VQ080|Ubw^KtTMBEa_V*$$!+YK ziXVRbS#L7!fzH0yJdRDe$4(`Q@7q_OJ4fZr)*lo9EvUHg<96<$JO6A~8H6=mHpuuZ zbKsSCIdta1oSe4r>mdKI;Vst09)dOr~m)} diff --git a/checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png b/checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png deleted file mode 100644 index a640064fc2dd326ea72ece82c52c55369c9b8638..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 267 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?3oVGw3ym^DWND9BhG zeshSt|2w5vPOz|{Yf2E)U7ICS z%uCMcw#*6gT71pwio>xP#rMA(CrUfNmw4Pdfmh1uhC)jPqa$k_kF@L`P4*Ip->ppc zawcuk4ZVF Powered By diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index d7b3130..abd64f1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -421,6 +421,9 @@ @media (max-width: 1024px) { margin-left: 1.6%; } + @include mq(l, max) { + margin-bottom: 17px; + } } .shipping-data, @@ -505,6 +508,15 @@ span[data-i18n="clientProfileData.identification"]::before { content: "Identificação"; color: $color-black; + @media (min-width: 2500px) { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 37px; + + color: #292929; + } } .link-box-edit { background: $color-white; @@ -558,6 +570,15 @@ } } .form-step { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + + color: #7d7d7d; + } .client-profile-email { margin-bottom: 6px; } @@ -834,16 +855,35 @@ /* Shipping configurations */ .ship-postalCode small a { + font-family: "Open Sans"; color: #303030; font-weight: 500; text-decoration: underline; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #292929; + } } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + font-family: "Open Sans"; + color: #7d7d7d; + font-style: normal; + font-weight: 700; font-size: 14px; - font-weight: 500; + line-height: 19px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } .shp-lean { @@ -852,6 +892,64 @@ .vtex-omnishipping-1-x-leanShippingOptionActive { background: #f2f2f2; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png) !important; + path { + fill: transparent; + } + } + } + } + .vtex-omnishipping-1-x-leanShippingOption { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png); + path { + fill: transparent; + } + } + } } label { @@ -872,9 +970,19 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + + color: #7d7d7d; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } .shp-summary-group-info { @@ -890,29 +998,64 @@ } .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #7d7d7d; + + @media (min-width: 2500px) { + padding: 15px 28px 15px 81px; + paddin-left: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + background-size: 40px; + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: #00c8ff; } } .shp-summary-group-price, .shp-summary-package { color: $color-gray4; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } } .shp-summary-group-price { padding-right: 16px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } } .shp-summary-package { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 01efed1..2ae5d48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -75,6 +75,11 @@ .price { color: #7d7d7d; } + .shipping-date { + @media (min-width: 2500px) { + display: none; + } + } .url { .photo { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index a7007ed..23981ab 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -109,12 +109,26 @@ body .container-main.container-order-form .orderform-template.active { line-height: 25px; color: #292929; float: left; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } td[data-bind="text: totalLabel"] { font-weight: 700; font-size: 18px; line-height: 25px; color: #292929; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } .info, .monetary { @@ -171,6 +185,15 @@ body .container-main.container-order-form .orderform-template.active { .steps-view { width: 56.456%; + + @include mq(c, max) { + margin-left: 0 !important; + } + + @include mq(l, max) { + margin: 12px 18px 36.75px 16px; + width: 93%; + } .payment-method { } } @@ -178,6 +201,10 @@ body .container-main.container-order-form .orderform-template.active { .payment-group { margin: 0; width: 32.505%; + + @include mq(l, max) { + width: 100%; + } .payment-group-list-btn { display: flex; flex-direction: column; @@ -206,59 +233,107 @@ body .container-main.container-order-form .orderform-template.active { #payment-group-custom201PaymentGroupPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { font-size: 0 !important; - &:after { + &::after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Boleto Faturado"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-custom204PaymentGroupPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { font-size: 0 !important; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Cartão de Débito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-creditCardPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { background-image: none !important; font-size: 0 !important; text-decoration: none; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Cartão de Crédito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-bankInvoicePaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { background-image: none !important; font-size: 0 !important; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Boleto à Vista"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } @@ -270,6 +345,9 @@ body .container-main.container-order-form .orderform-template.active { border-radius: 6px; span { color: $color-orange; + &:after { + color: $color-orange !important; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 13beee6..8d969d6 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -1,7 +1,7 @@ /** * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) */ - @mixin push--auto { +@mixin push--auto { margin: { left: auto; right: auto; -- 2.34.1