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() {