From 91a012d98785584db338d8d69d00ec2b261aec93 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Tue, 20 Dec 2022 16:24:46 -0300 Subject: [PATCH] feat: estilizacao do header progress bar --- checkout/src/arquivos/sass/checkout.scss | 3 +- .../src/arquivos/sass/partials/_header.scss | 218 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 8 +- 3 files changed, 221 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..dbe82c1 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 "./checkout/checkout.scss"; +@import "./partials/prateleira"; +@import "./checkout/checkout.scss"; \ No newline at end of file diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..0c8d54b 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,22 +1,231 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid; + .container { - width: auto !important; + width: 79.53125%; + + @media (min-width: 2500px) { + padding: 29px 0; + } + + @media (max-width: 1024px) { + width: 96.875%; + padding: 16px 0; + } + + @media (max-width: 375px) { + width: 100%; + } } + &__wrapper { align-items: center; display: flex; justify-content: space-between; + + @media (max-width: 375px) { + margin: 16px; + } } &__logo { img { height: 52px; width: auto; + display: block; + + @media (min-width: 2500px) { + width: 382.07px; + height: 91.2px; + } + + @media (max-width: 375px) { + height: 33px; + } + } + } + + .progress-bar { + width: 439px; + height: 35px; + margin: 30px 0; + + @media (min-width: 2500px) { + width: 1078.68px; + height: 67px; + margin-right: 132px; + } + + @media (max-width: 1024px) { + display: none; + } + + ul { + display: flex; + justify-content: space-between; + + li { + list-style: none; + display: flex; + width: 100%; + + &.central { + display: flex; + + .containerLi { + div { + width: 90px; + align-items: center; + + @media (min-width: 2500px) { + width: 179px; + } + } + } + + } + + .containerLi { + width: 100%; + display: flex; + + @media (min-width:2500px) { + width: 444px; + } + + div { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + + .progress-bar-text { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + .meu-carrinho { + @media (min-width: 2500px) { + + width: 155.3px; + } + } + + .pagamento { + margin-left: 25px; + + @media (min-width: 2500px) { + + width: 127.86px; + } + } + + .progress-bar-circle-1, + .progress-bar-circle-2, + .progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 100%; + + @media (min-width: 2500px) { + width: 24px; + height: 24px; + } + + &.active { + background-color: black; + } + + } + + .progress-bar-circle-1 { + margin-left: 25px; + + @media (min-width: 2500px) { + margin-left: 50px; + + } + } + + .progress-bar-circle-3 { + margin-left: 50px; + + @media (min-width: 2500px) { + margin-left: 100px; + + + } + + } + + .progress-bar-line-1 { + background-color: #000; + height: 1px; + position: absolute; + left: 28%; + width: 100%; + bottom: 5px; + + @media (min-width: 2500px) { + left: 17.2%; + width: 100%; + bottom: 10px; + } + } + + .progress-bar-line-2 { + background-color: #000; + height: 1px; + position: absolute; + right: 63%; + width: 100%; + bottom: 5px; + + @media (min-width: 2500px) { + right: 77%; + width: 100%; + bottom: 10px; + } + } + + } + } + } } } &__safeBuy { + display: flex; + + img { + margin-right: 8px; + width: 12px; + height: 15px; + + @media (min-width: 2500px) { + width: 29.47px; + height: 41.46px; + } + + @media (max-width: 375px) { + width: 12px; + height: 13.11px; + } + } + span { align-items: center; display: flex; @@ -27,10 +236,15 @@ font-size: 12px; line-height: 14px; color: $color-gray; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } i { margin-right: 8px; } } -} +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..37ed550 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,7 +2,7 @@ @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 */ $color-black: #292929; @@ -26,13 +26,11 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px -) !default; + xl: 1200px) !default; $z-index: ( level1: 5, level2: 10, level3: 15, level4: 20, - level5: 25 -) !default; + level5: 25) !default; \ No newline at end of file