fix(footer): ajusta tamanho dos ícones de pagamento

This commit is contained in:
Andrea Matsunaga 2023-01-12 13:24:39 -03:00
parent ae55f866e5
commit 2a55b77320
5 changed files with 52 additions and 63 deletions

View File

@ -1,5 +1,4 @@
.floating-icons-wrapper {
// background-color: red;
position: fixed;
right: 16px;
bottom: 190px;
@ -9,6 +8,8 @@
align-items: center;
gap: 5px;
padding: 0;
@media screen and (width >= 2500px) {
bottom: 229.24px;
}
@ -17,8 +18,14 @@
bottom: 51px;
}
@media screen and (width <= 480px) {
bottom: 29px;
right: 16px;
}
.whatsapp-button {
border: 0;
padding: 0;
background: transparent;
img {

View File

@ -9,9 +9,9 @@
@media screen and (width <= 1024px) {
display: grid;
grid-template-areas:
"paymentSolutions"
"address"
"authors";
"paymentSolutions"
"address"
"authors";
gap: 15px;
padding: 15px 16px;
}
@ -29,7 +29,7 @@
p {
margin: 0;
}
@media screen and (width >= 2500px) {
font-size: 20px;
line-height: 23px;
@ -52,9 +52,11 @@
grid-area: paymentSolutions;
}
.menu-list {
// background-color: blue;
@media screen and (width <= 480px) {
gap: 11px;
}
.menu-list {
margin: 0;
padding: 0;
list-style: none;
@ -62,6 +64,10 @@
display: flex;
gap: 12px;
@media screen and (width <= 480px) {
gap: 11px;
}
li {
// transition: all 0.2s ease-in-out;
@ -75,6 +81,11 @@
height: 40px;
}
@media screen and (width <= 480px) {
width: 100%; //30px;
height: 17px;
}
// &:hover {
// border-radius: 50%;
// background: #292929;
@ -92,6 +103,10 @@
@media screen and (width >= 2500px) {
height: 48px;
}
@media screen and (width <= 480px) {
height: 20px;
}
}
img {
@ -103,6 +118,11 @@
width: 106px;
height: 66px;
}
@media screen and (width <= 480px) {
width: 100%; //45px;
height: 28px;
}
}
}

View File

@ -13,17 +13,6 @@ import PCI from "../assets/vtex-pci-200.svg";
import VtexIcon from "../assets/vtex-icon.svg";
import M3Icon from "../assets/m3-icon.svg";
// import { ReactComponent as Master } from "../assets/Master.svg";
// import { ReactComponent as Visa } from "../assets/Visa.svg";
// import { ReactComponent as Amex } from "../assets/Diners.svg";
// import { ReactComponent as Elo } from "../assets/Elo.svg";
// import { ReactComponent as Hipercard } from "../assets/Hiper.svg";
// import { ReactComponent as Paypal } from "../assets/Pagseguro.svg";
// import { ReactComponent as Boleto } from "../assets/Boleto.svg";
// import { ReactComponent as PCI } from "../assets/vtex-pci-200.svg";
// import { ReactComponent as VtexIcon } from "../assets/vtex-icon.svg";
// import { ReactComponent as M3Icon } from "../assets/m3-icon.svg";
const PaymentSolutions = [
{
src: Master,
@ -71,13 +60,19 @@ const FooterBottom = () => {
))}
</ul>
<span></span>
<img src={PCI} alt="Ícone de Certificado PCI 200" />
<div>
<img src={PCI} alt="Ícone de Certificado PCI 200" />
</div>
</div>
<div className={styles["authors"]}>
<p>Powered by</p>
<img src={VtexIcon} alt="Logo da VTEX" className={styles["vtex-icon"]} />
<img
src={VtexIcon}
alt="Logo da VTEX"
className={styles["vtex-icon"]}
/>
<p>Developed by</p>
<img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]}/>
<img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
</div>
</div>
);

View File

@ -52,6 +52,12 @@
text-transform:none;
}
}
.open-icon {
@media screen and (width > 1024px) {
display: none;
}
}
}
.list-items {

View File

@ -60,9 +60,7 @@ const SiteMap = () => {
<ul className={styles["menu-list"]}>
<div className={styles["subtitle"]}>
<h4 className={styles["subtitle-text"]}>Institucional</h4>
{window.innerWidth <= 1024 && (
<span className={styles["open-icon"]}>+</span>
)}
<span className={styles["open-icon"]}>+</span>
</div>
<div className={styles["list-items"]}>
{leftInstitucionalLinks.map((item, index) => (
@ -76,9 +74,7 @@ const SiteMap = () => {
<ul className={styles["menu-list"]}>
<div className={styles["subtitle"]}>
<h4 className={styles["subtitle-text"]}> Dúvidas</h4>
{window.innerWidth <= 1024 && (
<span className={styles["open-icon"]}>+</span>
)}
<span className={styles["open-icon"]}>+</span>
</div>
<div className={styles["list-items"]}>
{duvidasLinks.map((item, index) => (
@ -92,9 +88,7 @@ const SiteMap = () => {
<ul className={styles["menu-list"]}>
<div className={styles["subtitle"]}>
<h4 className={styles["subtitle-text"]}>Fale Conosco</h4>
{window.innerWidth <= 1024 && (
<span className={styles["open-icon"]}>+</span>
)}
<span className={styles["open-icon"]}>+</span>
</div>
<div className={styles["list-items"]}>
{rightInstitucionalLinks.map((item, index) => (
@ -110,36 +104,3 @@ const SiteMap = () => {
};
export { SiteMap };
// const AsideMenu = () => {
// return (
// <ul className={styles["menu-list"]}>
// {AsideMenuItems.map((item, index) => (
// <li key={index}>
// <Link to={item.value}>{item.name}</Link>
// </li>
// ))}
// </ul>
// );
// };
// export { AsideMenu };
{
/* <div className={styles["subtitle"]}>
<h4 className={styles["subtitle-text"]}>Institucional</h4>
{window.innerWidth <= 1024 && (
<span className={styles["open-icon"]}>+</span>
)}
</div>
<div className={styles["list-items"]}>
<ul className={styles["menu-list"]}>
{leftInstitucionalLinks.map((item, index) => (
<li key={index}>
<Link to={item.value}>{item.name}</Link>
</li>
))}
</ul>
</div> */
}