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; + } +}