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 {
border-top: none;
color: $color-gray2;
margin-top: auto;
//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 {
align-items: center;
display: flex;
justify-content: space-between;
border-top: 1px solid $black;
@media screen and (max-width: 490px) {
padding: 7px 0;
}
}
&__address {
color: $color-gray2;
color: $gray-500;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
line-height: 14px;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
@include mq(dt, max) {
display: flex;
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 {
align-items: center;
display: flex;
justify-self: center;
height: 33px;
align-items: center;
list-style: none;
margin: 0 0 0 5px;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
li {
height: 33px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
@include mq(dt, min) {
justify-content: center;
min-width: 404px;
margin: 0;
}
@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;
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;
figure {
margin: 0;
}
}
.vtex-icon {
width: 44.92px;
margin: 0;
}
.m3-icon {
width: 28.66px;
margin: 0;
}
a {
align-items: center;
color: $color-gray2;
color: $gray-500;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
font-weight: 400;
font-size: 9px;
line-height: 12px;
text-decoration: none;
@ -70,5 +182,38 @@
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;
}
}