forked from M3-Academy/desafio-react-e-typescript
refactor(footer): moved order in styles #12
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user