anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(_footer.scss): modificando footer para telas 375px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-11 12:21:53 -03:00
parent 9508cf89b9
commit f429892dfd
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,17 +1,27 @@
/* _footer.scss */ /* _footer.scss */
footer {
margin-top: auto;
}
.footerCheckout { .footerCheckout {
border-top: 1px solid #000000; border-top: 1px solid #000000;
color: $color-gray2; color: $color-gray2;
bottom: 0; bottom: 0;
position: absolute;
width: 100%; width: 100%;
&__wrapper { &__wrapper {
padding: 16px 0;
margin-left: 16px;
margin-right: 16px;
& .container { & .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 0;
width: 100%; width: 100%;
@media (max-width: $checkout375px) {
flex-direction: column;
align-items:flex-start
}
&::before, &::before,
&::after { &::after {
content: none; content: none;
@ -26,10 +36,17 @@
text-transform: capitalize; text-transform: capitalize;
color: #292929; color: #292929;
max-width: 40%; max-width: 40%;
@media (max-width: $checkout375px) {
order: 2;
margin-top: 16px;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
@media (max-width: $checkout375px) {
margin-bottom: 0;
}
} }
} }
@ -37,6 +54,9 @@
align-items: center; align-items: center;
display: flex; display: flex;
justify-self: center; justify-self: center;
@media (max-width: $checkout375px) {
order: 1;
}
& ul { & ul {
align-items: center; align-items: center;
display: flex; display: flex;
@ -45,7 +65,6 @@
margin: 0; margin: 0;
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
// margin-bottom: 12px;
} }
& li { & li {
@ -77,7 +96,10 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@media (max-width: $checkout375px) {
order: 3;
margin-top: 16px;
}
li:last-child { li:last-child {
margin-left: 16px; margin-left: 16px;
} }