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): moved order in styles

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-01-01 20:33:43 -03:00
parent 000825925d
commit 3852a14f85
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,21 +15,26 @@
}
.container-top {
display: flex;
align-items: flex-start;
flex-direction: column;
padding-top: 17px;
padding-bottom: 24px;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 12px;
@media only screen and (min-width: 1025px) {
width: function.fluid(1080px, 1280px);
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: function.fluid(1080px, 1280px);
margin: 0 auto;
flex-direction: row;
gap: 0px;
}
@media only screen and (min-width: 2500px) {
@ -98,23 +103,23 @@
.accordion {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
flex-direction: column;
}
// moved container bottom actions footer for large, medium devices
.container-bottom {
.actions-bottom {
width: 100%;
height: 100%;
padding: 15px 0;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 15px;
width: 100%;
height: 100%;
padding: 15px 0;
@media only screen and (min-width: 1025px) {
flex-direction: row;
justify-content: space-between;
@ -133,6 +138,7 @@
.lists {
width: 100%;
display: flex;
align-items: stretch;
flex-direction: column;
@ -167,11 +173,11 @@
}
@media only screen and (min-width: 1025px) {
width: function.fluid(707px, 1080px);
flex-direction: row;
justify-content: space-between;
width: function.fluid(707px, 1080px);
& > li {
width: function.fluid(155px, 707px);
}
@ -292,7 +298,7 @@
}
}
// control view components order
// control view order components
.container-bottom {
.phrase {
order: 2;