diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 1990c3c..b8ac50c 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -64,109 +64,224 @@ footer { } } & .Metodos__de__Pagamento { - display: flex; + display: grid; + grid-template-areas: "A B C D E F G H I"; + grid-template-columns: 9.043% 8.793% 8.793% 9.296% 8.793% 8.54% 9.043% 0px 13.719%; + grid-template-rows: 1fr; align-items: center; - justify-content: space-between; - max-width: 398.61px; + grid-column-gap: 0px; + grid-row-gap: 0px; + width: 36.85%; padding-left: 0; column-gap: 12px; @media (min-width: 2500px) { - max-width: 692px; + width: 30.0772%; + grid-template-columns: 10.117% 10.117% 10.117% 10.117% 10.117% 10.117% 10.117% 0px 15.319%; + } + @media (max-width: 2500px) and (min-width: 1281px) { + width: auto; + } + @media (max-width: 1279px) and (min-width: 1026px) { + width: auto; + transform: unset; } @media (max-width: 1025px) { + grid-template-columns: 9.033% 8.782% 8.782% 9.286% 8.782% 8.53% 9.033% 0px 13.70%; + width: 40.173%; order: 1; } + @media (max-width: 1023px) and (min-width: 377px) { + width: auto; + transform: unset; + } @media (max-width: 376px) { + width: 99.784%; + transform: unset; column-gap: 11px; + grid-template-columns: 8.745% 8.745% 8.745% 8.745% 8.745% 8.745% 8.745% 0px 13.121%; } - & .Line { - width: 1px; - height: 24px; - background: $primary-600; - flex: none; - flex-grow: 0; - @media (max-width: 1025px) { - width: 1px; - height: 20.36px; - } + @media (max-width: 373px){ + grid-template-columns: auto; } + & li { & img { + display: block; width: 100%; height: 100%; } } - & .MasterCard, - .Boleto { + & .MasterCard { + width: 100%; + grid-area: A ; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 1279px) and (min-width: 1026px) { + width: 100%; + transform: unset; + } + @media (max-width: 1025px) { + width: 100%; + } + @media (max-width: 1023px) and (min-width: 400px) { + width: 100%; + transform: unset; + } + + @media (max-width: 376px) { + transform: unset; + width: 100%; + + } & img { - min-width: 36px; height: 20.2px; @media (min-width: 2500px) { - min-width: 70px; height: 39.27px; } @media (max-width: 376px) { - min-width: 30px; height: 17px; } } } - & .Elo { - & img { - min-width: 37px; - height: 20.26px; - @media (min-width: 2500px) { - min-width: 70px; - height: 38.33px; - } - @media (max-width: 376px) { - min-width: 30px; - height: 17px; - } + & .Visa { + width: 100%; + grid-area: B; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + transform: unset; + width: 100%; } - } - & .Visa, - .Diners, - .HiperCard { & img { - min-width: 35px; height: 20.13px; @media (min-width: 2500px) { min-width: 70px; height: 39.27px; } - @media (max-width: 376px) { - min-width: 30px; - height: 17px; + } + } + & .Diners { + width: 100%; + grid-area: C; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } + & img { + height: 20.13px; + @media (min-width: 2500px) { + min-width: 70px; + height: 39.27px; } } } - & .Pagseguro { + & .Elo { + grid-area: D; + width: 100%; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } + & img { + height: 20.26px; + @media (min-width: 2500px) { + min-width: 70px; + height: 38.33px; + } + } + } + & .HiperCard { + width: 100%; + grid-area: E; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } + & img { + height: 20.13px; + @media (min-width: 2500px) { + min-width: 70px; + height: 39.27px; + } + } + } + + & .Pagseguro { + grid-area: F; + width: 100%; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } & img { - min-width: 34px; height: 19.07px; @media (min-width: 2500px) { min-width: 70px; height: 39.27px; } - @media (max-width: 376px) { - min-width: 30px; - height: 17px; + } + } + + & .Boleto { + grid-area: G; + width: 100%; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } + & img { + height: 20.2px; + @media (min-width: 2500px) { + min-width: 70px; + height: 39.27px; } } } + + & .Line { + grid-area: H; + & span { + width: 1px; + height: 24px; + display: block; + background: $primary-600; + flex: none; + flex-grow: 0; + @media (max-width: 1025px) { + width: 1px; + height: 20.36px; + } + } + } + & .VtexPci { + grid-area: I; + width: 100%; + @media (min-width: 2500px) { + width: 100%; + } + @media (max-width: 376px) { + width: 100%; + } & img { - min-width: 54.61px; height: 34px; @media (min-width: 2500px) { min-width: 106px; height: 66px; } - @media (max-width: 376px) { - min-width: 45px; - height: 28px; - } + } } } @@ -462,9 +577,8 @@ footer { right: 16px; top: calc(100% - 259px); z-index: 1; - @media (min-width: 2500px){ + @media (min-width: 2500px) { top: calc(100% - 353.76px); - } @media (max-width: 1025px) { position: fixed; diff --git a/src/components/Footer/FooterBottom.tsx b/src/components/Footer/FooterBottom.tsx index 2318401..a5b33c0 100644 --- a/src/components/Footer/FooterBottom.tsx +++ b/src/components/Footer/FooterBottom.tsx @@ -25,7 +25,7 @@ const FooterBottom = () => {
  • ícone do cartão hipercard
  • ícone do meio de pagamento pagseguro
  • ícone do meio de pagamento boleto
  • - +
  • ícone do vtex pci