feat(fixo): Adiciona z-index no menu fixo

This commit is contained in:
Amanda de Almeida Fonseca 2023-01-17 22:57:22 -03:00
parent 6fe04e7981
commit 17d0c37500
3 changed files with 35 additions and 18 deletions

View File

@ -25,7 +25,7 @@ const imgs = () => {
<Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
<Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
<Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
<div></div>
<div className={styles["divisor"]}></div>
<Img className={styles["img-grande"]} img={vtex} text="Vtex" />
</section>
);

View File

@ -163,25 +163,23 @@
&__footer-bottom {
width: 100%;
background: $black;
padding: 15px 0;
padding: 15px 16px;
display: flex;
justify-content: center;
}
&__footer-bottom-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 84.4%;
max-width: 84.4%;
}
&__imgs {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
div {
.divisor {
width: 1px;
background: $gray-900;
height: 24px;
@ -223,9 +221,10 @@
&__icon-fixed {
position: fixed;
z-index: 100;
z-index: 30;
gap: 5px;
right: 16px;
bottom: 10px;
bottom: 189px;
display: flex;
flex-direction: column;
}
@ -438,16 +437,11 @@
display: none;
}
&__footer-bottom {
padding: 16px;
justify-content: flex-start;
}
&__footer-bottom-container {
flex-direction: column;
gap: 15px;
align-items: flex-start;
width: 100%;
max-width: 100%;
}
@ -462,17 +456,30 @@
&__footer-autores {
order: 3;
}
&__icon-fixed {
right: 17px;
bottom: 51px;
}
}
@media screen and (max-width: 375px) {
&__imgs {
gap: 11px;
}
.img {
width: 30px;
width: 8.75%;
height: auto;
}
.img-grande {
width: 45px;
width: 13.12%;
height: auto;
}
&__icon-fixed {
bottom: 29px;
}
}
}

View File

@ -1,4 +1,3 @@
import React from "react";
import LinkTop from "./link/Link";
import Whatsapp from "./assets/whatsapp.svg";
import Seta from "./assets/Seta.svg";
@ -6,6 +5,12 @@ import Seta from "./assets/Seta.svg";
import styles from "../../footer/footer.module.scss";
const IconFixed = () => {
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<section className={styles["page-footer__icon-fixed"]}>
<LinkTop
@ -13,7 +18,12 @@ const IconFixed = () => {
className={styles["page-footer__button-whatsapp"]}
img={Whatsapp}
/>
<LinkTop className={styles["page-footer__button-top"]} img={Seta} />
<LinkTop
className={styles["page-footer__button-top"]}
img={Seta}
onClick={scrollToTop}
/>
</section>
);
};