From ed041f5fa846ad24b0a5e89a9527ec347426e7bc Mon Sep 17 00:00:00 2001 From: guiprj Date: Wed, 18 Jan 2023 23:21:28 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=C3=A7=C3=A3o=20footer=20mobile?= =?UTF-8?q?=20e=20alguns=20ajustes=20no=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ContainerBreadCrumbs/style.module.css | 12 ++ .../Footer/AccordionLinks/style.module.css | 3 +- .../ContainerFooterInfo/style.module.css | 116 ++++++++++++++---- .../ContainerNewsLetter/style.module.css | 43 +++++-- src/components/HeaderMobile/index.tsx | 2 +- src/components/HeaderMobile/style.module.css | 36 ++++-- src/global.css | 12 +- src/pages/Contato/style.module.css | 24 ++++ src/pages/Entrega/style.module.css | 1 + src/pages/FormaPagamento/style.module.css | 1 + .../SegurancaPrivacidade/style.module.css | 1 + src/pages/Sobre/style.module.css | 1 + src/pages/TrocaDevolucao/style.module.css | 1 + 13 files changed, 200 insertions(+), 53 deletions(-) diff --git a/src/components/ContainerBreadCrumbs/style.module.css b/src/components/ContainerBreadCrumbs/style.module.css index 1de435d..56be4fc 100644 --- a/src/components/ContainerBreadCrumbs/style.module.css +++ b/src/components/ContainerBreadCrumbs/style.module.css @@ -50,4 +50,16 @@ width: 100%; padding: 1.875rem 1rem; } + + .contentBreadCrumb li { + font-size: 0.75rem !important; + } + + .contentBreadCrumb li img{ + max-width: 16px; + } + + .contentBreadCrumb li img[alt="seta para a direita"]{ + max-width: 8px; + } } \ No newline at end of file diff --git a/src/components/Footer/AccordionLinks/style.module.css b/src/components/Footer/AccordionLinks/style.module.css index a2f9a6f..dda0b3f 100644 --- a/src/components/Footer/AccordionLinks/style.module.css +++ b/src/components/Footer/AccordionLinks/style.module.css @@ -1,7 +1,7 @@ @media only screen and (max-width: 1024px) { .containerAccordion { width: 100%; - padding: 0.75rem 0; + padding: 0.75rem 0 0; } .titleAccordionContent { @@ -50,7 +50,6 @@ .listIcons { display: flex; gap: 0.659rem; - margin-bottom: 0.75rem; } .listIcons svg { diff --git a/src/components/Footer/ContainerFooterInfo/style.module.css b/src/components/Footer/ContainerFooterInfo/style.module.css index 1e22eac..1e874ca 100644 --- a/src/components/Footer/ContainerFooterInfo/style.module.css +++ b/src/components/Footer/ContainerFooterInfo/style.module.css @@ -11,22 +11,20 @@ } .containerInfoWrapper { - width: 90%; - display: flex; - justify-content: space-between; - align-items: center; + width: 92.04%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: "info iconPay logVtexAnM3"; } .contentInfoFooter { - flex: 1; - display: flex; - justify-content: flex-start; - align-items: center; + grid-area: info; } .contentInfoFooter span, -.contentVtexIcon span, -.contentM3Icon span { +.contentVtexIcon span, +.contentM3Icon span { font-size: 1.25rem; line-height: 23.44px; } @@ -35,16 +33,11 @@ max-width: 467px; } - .contentIconsPay { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - gap: 0.75rem; + grid-area: iconPay; } -.contentVtexIcon span, +.contentVtexIcon span, .contentM3Icon span { white-space: nowrap; } @@ -54,13 +47,10 @@ } .iconsVtexAndM3 { - flex: 1; - display: flex; - justify-content: flex-end; - align-items: center; + grid-area: logVtexAnM3; } -.contentVtexIcon, +.contentVtexIcon, .contentM3Icon { display: flex; justify-content: center; @@ -74,4 +64,86 @@ .iconsVtexAndM3 img { width: 40.78%; +} + +@media only screen and (max-width: 1024px) { + .containerFooterInfo { + display: flex; + justify-content: center; + align-items: flex-start; + margin-top: 1.5rem; + padding: 0.938rem 0; + } + + .containerInfoWrapper { + width: 100%; + max-width: 360px; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto; + grid-template-areas: + "iconPay" + "info" + "logVtexAnM3"; + padding: 0 1rem; + } + + .contentIconsPay { + padding: 0.938rem 0; + display: flex; + justify-content: space-between; + align-items: center; + } + + .contentIconsPay img { + width: 100%; + max-width: 29.53px; + } + + .contentIconsPay img:last-child { + max-width: 45px; + } + + .contentIconsPay span { + width: 1px; + height: 20.36px; + border-right: 1px solid var(--white); + } + + .contentInfoFooter span{ + font-size: 0px; + } + + .contentInfoFooter::before { + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ."; + font-size: 10px; + font-weight: 400; + font-family: "Roboto"; + color: var(--white); + } + + .iconsVtexAndM3 { + padding: 0.938rem 0; + display: flex; + } + + .contentVtexIcon, + .contentM3Icon { + justify-content: flex-start; + align-items: center; + gap: 0.796rem; + } + + .contentVtexIcon span, + .contentM3Icon span { + font-size: 10px; + } + + .contentVtexIcon img { + max-width: 44.92px; + } + + .contentM3Icon img { + max-width: 28.66px; + } } \ No newline at end of file diff --git a/src/components/Footer/ContainerNewsLetter/style.module.css b/src/components/Footer/ContainerNewsLetter/style.module.css index 1fda5a7..e2eacd6 100644 --- a/src/components/Footer/ContainerNewsLetter/style.module.css +++ b/src/components/Footer/ContainerNewsLetter/style.module.css @@ -13,19 +13,19 @@ padding: 1rem 0; } -.contentNewsLetter h3{ +.contentNewsLetter h3 { font-weight: 500; font-size: 2.25rem; color: var(--gray-1100); margin-bottom: 0.5rem; } -.contentNewsLetter form{ +.contentNewsLetter form { width: 100%; display: flex; } -.contentNewsLetter form input{ +.contentNewsLetter form input { width: 73%; height: 59px; border: 1px solid var(--gray-100); @@ -35,7 +35,7 @@ padding: 0.813rem 1rem; } -.contentNewsLetter form button{ +.contentNewsLetter form button { width: 27%; background-color: var(--black); color: var(--white); @@ -49,19 +49,42 @@ width: 100%; padding: 1rem; } - - .contentNewsLetter form{ + + .contentNewsLetter form { width: 100%; display: flex; flex-direction: column; + position: relative; } - .contentNewsLetter form input{ - width: 100%; + .contentNewsLetter form span { + position: absolute; + top: -21px; + right: 16px; + color: var(--red); + + font-size: 0.875rem; } - - .contentNewsLetter form button{ + + .contentNewsLetter form input { + width: 100%; + height: 50px; + font-size: 0.875rem; + font-family: "Roboto"; + font-weight: 400; + color: var(--gray-300); + } + + .contentNewsLetter form input::placeholder { + font-size: 0.875rem; + font-family: "Roboto"; + font-weight: 400; + color: var(--gray-300); + } + + .contentNewsLetter form button { width: 100%; margin-top: 1rem; + font-size: 0.875rem; } } \ No newline at end of file diff --git a/src/components/HeaderMobile/index.tsx b/src/components/HeaderMobile/index.tsx index 10537e1..46bd65c 100644 --- a/src/components/HeaderMobile/index.tsx +++ b/src/components/HeaderMobile/index.tsx @@ -41,7 +41,7 @@ export function HeaderMobile() {
- +
diff --git a/src/components/HeaderMobile/style.module.css b/src/components/HeaderMobile/style.module.css index 862367c..e563f94 100644 --- a/src/components/HeaderMobile/style.module.css +++ b/src/components/HeaderMobile/style.module.css @@ -20,7 +20,7 @@ "search search search"; background-color: var(--black); - padding: 1.563rem 1rem; + padding: 0.75rem 1rem; } .contentBtnBars { @@ -30,6 +30,10 @@ align-items: center; } + .contentBtnBars svg{ + max-width: 28px; + } + .contentLogo { grid-area: logo; display: flex; @@ -37,6 +41,10 @@ align-items: center; } + .contentLogo img{ + max-width: 136px; + } + .contentMiniCart { grid-area: miniCart; display: flex; @@ -45,14 +53,13 @@ } .miniCart { - max-width: 54.68px; background-color: transparent; cursor: pointer; border: none; } - - .miniCart img { - width: 100%; + + .miniCart svg{ + max-width: 28px; } .contentSearch { @@ -60,12 +67,11 @@ display: flex; justify-content: center; align-items: center; - margin-top: 1.563rem; } .contentSearch span { width: 100%; - height: 57px; + height: 36px; position: relative; } @@ -74,14 +80,20 @@ height: 100%; border-radius: 0.313rem; outline: none; - font-size: 28px; + font-size: 0.875rem; color: var(--gray-300); - padding: 0.75rem 1rem; + padding: 0.625rem 1rem; border: 1px solid var(--gray-50); } + .contentSearch span input::placeholder { + font-size: 0.875rem; + color: var(--gray-300); + font-family: "Roboto"; + font-weight: 400; + } + .contentSearch span button { - width: 35.15px; height: 100%; position: absolute; top: 0px; @@ -91,8 +103,8 @@ outline: none; } - .contentSearch span button img { - width: 100%; + .contentSearch span button svg{ + width: 18px; } .containerInfoBars { diff --git a/src/global.css b/src/global.css index bab1515..7f8ffb2 100644 --- a/src/global.css +++ b/src/global.css @@ -52,15 +52,15 @@ body { font-size: 0.75rem !important; } - body li { - font-size: 1rem !important; - } - - body h2 { + body h1, h2 { font-size: 1.5rem !important; } - body h4 { + body li { + font-size: 0.875rem !important; + } + + body h3, h4 { font-size: 0.875rem !important; } } diff --git a/src/pages/Contato/style.module.css b/src/pages/Contato/style.module.css index bea3a1a..8aed624 100644 --- a/src/pages/Contato/style.module.css +++ b/src/pages/Contato/style.module.css @@ -127,10 +127,34 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{ text-align: center; margin-top: 1.875rem; } + + .contentInput label{ + font-size: 0.875rem; + padding: 0 1rem; + } + + .contentInput input{ + font-size: 0.875rem; + height: 46px; + } + + .contentInput input::placeholder{ + font-size: 0.875rem; + } + + .contentInput span{ + font-size: 0.75rem; + top: 15px; + } + + .contentCheckbox span { + font-size: 0.75rem; + } } \ No newline at end of file diff --git a/src/pages/Entrega/style.module.css b/src/pages/Entrega/style.module.css index 1e2b462..52bcf8d 100644 --- a/src/pages/Entrega/style.module.css +++ b/src/pages/Entrega/style.module.css @@ -20,6 +20,7 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{ diff --git a/src/pages/FormaPagamento/style.module.css b/src/pages/FormaPagamento/style.module.css index 1e2b462..52bcf8d 100644 --- a/src/pages/FormaPagamento/style.module.css +++ b/src/pages/FormaPagamento/style.module.css @@ -20,6 +20,7 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{ diff --git a/src/pages/SegurancaPrivacidade/style.module.css b/src/pages/SegurancaPrivacidade/style.module.css index 1e2b462..52bcf8d 100644 --- a/src/pages/SegurancaPrivacidade/style.module.css +++ b/src/pages/SegurancaPrivacidade/style.module.css @@ -20,6 +20,7 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{ diff --git a/src/pages/Sobre/style.module.css b/src/pages/Sobre/style.module.css index d6aedcb..b503fa9 100644 --- a/src/pages/Sobre/style.module.css +++ b/src/pages/Sobre/style.module.css @@ -21,6 +21,7 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{ diff --git a/src/pages/TrocaDevolucao/style.module.css b/src/pages/TrocaDevolucao/style.module.css index 1e2b462..52bcf8d 100644 --- a/src/pages/TrocaDevolucao/style.module.css +++ b/src/pages/TrocaDevolucao/style.module.css @@ -20,6 +20,7 @@ @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; + margin: 0; } .contentInfoList h2{