forked from M3-Academy/desafio-react-e-typescript
feat(fixo): Adiciona z-index no menu fixo
This commit is contained in:
parent
6fe04e7981
commit
17d0c37500
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user