forked from M3-Academy/desafio-react-e-typescript
style(footer): substituindo px por % no .Metodos__de__Pagamento
This commit is contained in:
parent
bada733521
commit
c865c90c5c
@ -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;
|
||||
|
||||
@ -25,7 +25,7 @@ const FooterBottom = () => {
|
||||
<li className={styles["HiperCard"]}><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
|
||||
<li className={styles["Pagseguro"]}><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
|
||||
<li className={styles["Boleto"]}><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
|
||||
<span className={styles["Line"]}></span>
|
||||
<li className={styles["Line"]}><span></span></li>
|
||||
<li className={styles["VtexPci"]}><img src={VtexPci} alt="ícone do vtex pci"/></li>
|
||||
</ul>
|
||||
<ul className={styles["Autores"]}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user