HenriqueSantosSantana/desafio-react-e-typescript-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(footer): refactoring styles code for large, small devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-29 19:46:10 -03:00
parent bf7613db9e
commit 4cf87eff5d
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/settings/styles/utils/helpers/_mixin.scss
View File

@ -2,3 +2,4 @@
width: #{$size};
height: #{$size};
}

45
src/template/Footer/index.module.scss
View File

@ -6,6 +6,7 @@
.container-top,
.container-bottom {
width: 100%;
padding: 0 16px;
@media screen and (min-width: 1025px) {
@ -17,10 +18,11 @@
display: flex;
align-items: flex-start;
flex-direction: column;
padding-top: 17px;
padding-bottom: 24px;
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
display: flex;
flex-direction: row;
align-items: flex-start;
@ -30,13 +32,12 @@
margin: 0 auto;
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}
.container-bottom {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
@ -85,13 +86,14 @@
.actions-bottom {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 15px;
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
flex-direction: row;
justify-content: space-between;
align-items: center;
@ -102,7 +104,7 @@
margin: 0 auto;
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}
@ -137,7 +139,7 @@
}
}
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
flex-direction: row;
justify-content: space-between;
@ -154,7 +156,7 @@
}
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(1531px, 2500px);
& > li {
@ -164,7 +166,7 @@
}
.list-header {
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
margin-bottom: 12px;
i {
@ -186,8 +188,12 @@
align-items: center;
.divider {
border-left: 1px solid var(--clr-gray-400);
height: 20.36px;
border-left: 1px solid var(--clr-gray-400);
@media only screen and (min-width: 1025px) {
height: 24px;
}
}
@each $index,
@ -216,7 +222,7 @@
& > a {
display: none;
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
display: block;
font-size: var(--txt-normal);
@ -228,11 +234,11 @@
}
}
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
width: function.fluid(215px, 1080px);
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(390px, 2299.68px);
}
}
@ -251,7 +257,7 @@
width: 100%;
height: 100%;
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: 75px;
height: 75px;
}
@ -259,6 +265,7 @@
}
}
// control view components order
.container-bottom {
.phrase {
order: 2;
@ -272,15 +279,9 @@
order: 3;
}
@media screen and (min-width: 1025px) {
.phrase {
order: initial;
}
.payments {
order: initial;
}
@media only screen and (min-width: 1025px) {
.phrase,
.payments,
.credits {
order: initial;
}