carloswinter/m3-academy-template-checkout-carlos-winter
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(footer): adiciona css em sass ao footer

Browse Source
This commit is contained in:
carloswinter 2022-12-18 22:04:06 -03:00
parent 6b588f998d
commit 35c3dac351
1 changed files with 174 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,47 +1,134 @@
/* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; margin-top: auto;
color: $color-gray2; //border-top: 1px solid #000;
.container {
display: flex;
flex-direction: column;
width: 100%;
padding: 7px 0;
margin: 0;
@include mq(dt, min) {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px 0 15px 0;
}
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
}
&__wrapper { &__wrapper {
align-items: center; border-top: 1px solid $black;
display: flex;
justify-content: space-between; @media screen and (max-width: 490px) {
padding: 7px 0;
}
} }
&__address { &__address {
color: $color-gray2; color: $gray-500;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-weight: 400;
font-weight: normal; line-height: 14px;
font-size: 10px; font-size: 10px;
line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%;
@include mq(md, max) { @include mq(dt, max) {
margin-bottom: 24px; display: flex;
max-width: 100%; width: 100%;
order: 2;
margin-top: 17px;
span {
margin-left: 16px;
}
}
@include mq(dt, min) {
min-width: 269px;
margin-left: 32px;
}
@include mq(tv, min) {
font-size: 20px;
line-height: 27px;
min-width: 537px;
margin-left: 0;
} }
} }
&__stamps { &__stamps {
align-items: center;
display: flex; display: flex;
justify-self: center; height: 33px;
align-items: center;
list-style: none; list-style: none;
margin: 0 0 0 5px;
@include mq(md, max) { li {
align-self: center; height: 33px;
margin-bottom: 12px;
} }
&__divider { @include mq(dt, min) {
background-color: $color-gray4; justify-content: center;
display: inline-block; min-width: 404px;
height: 24px; margin: 0;
margin: 0 8px; }
width: 1px;
@include mq(tv, min) {
min-width: 690.52px;
}
.payments-icons-wrapper {
display: flex;
width: 100%;
list-style: none;
gap: 13.35px;
margin: 0;
@include mq(dt, max) {
gap: 4.35px;
}
figure {
padding: 6px 0 7px;
width: 35.65px;
height: 20px;
margin: 0;
@include mq(tv, min) {
width: 69.63px;
}
@include mq(Gf, max) {
width: 24px;
}
}
}
.footerCheckout__stamps__divider {
border-left: 1px solid $gray;
margin: 0 10px;
height: 33px;
padding: 0 0 9px;
@include mq(dt, min) {
margin-left: 11.35px;
}
}
.footerCheckout__vtexpci {
.vtex-icon {
width: 53px;
margin: 0;
}
@include mq(tv, min) {
.vtex-icon {
width: 103.52px;
height: 64.46px;
}
}
} }
} }
@ -51,18 +138,43 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
li:last-child { @include mq(dt, max) {
display: flex;
width: 100%;
order: 3;
margin-top: 17px;
}
@include mq(dt, min) {
min-width: 217px;
margin-right: 22.5px;
}
li {
margin-left: 16px; margin-left: 16px;
figure {
margin: 0;
}
}
.vtex-icon {
width: 44.92px;
margin: 0;
}
.m3-icon {
width: 28.66px;
margin: 0;
} }
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $gray-500;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
@ -70,5 +182,38 @@
margin-right: 8px; margin-right: 8px;
} }
} }
@include mq(tv, min) {
min-width: 388.98px;
margin-right: 0;
a {
font-size: 18px;
line-height: 25px;
}
li {
margin-left: 10px;
}
.vtex-icon {
width: 87.73px;
}
.m3-icon {
width: 55.98px;
}
}
}
.footerCheckout::after,
::before {
display: none;
content: none;
}
.footerCheckout::before,
::after {
display: none;
content: none;
} }
} }