YahToth/m3-academy-template-checkout-gabriel-gomes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

featAdiciona estilização do footer

Browse Source
This commit is contained in:
Gabriel Gomes Fernandes 2022-12-19 05:54:08 -03:00
parent 967f4f3a5a
commit d77c4fab79
1 changed files with 89 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,75 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none;
color: $color-gray2; color: $color-gray2;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
}
.container {
border-top: 1px solid $color-black;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
justify-content: space-between; justify-content: space-between;
@media (min-width: 1200px) {
width: 100%;
}
@include mq(md, max) {
margin: 0 0 0 9px;
display: grid;
}
}
.color-img {
background-color: rgb(238, 238, 238);
} }
&__address { &__address {
color: $color-gray2;
font-family: $font-family; font-family: $font-family;
font-style: normal; color: $color-gray2;
font-weight: normal; margin: 27px 0 24px 0;
width: 269px;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%;
@include mq(md, max) { @include mq(xl, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@include mq(2xl, min) {
font-family: $font-family;
color: $color-black;
width: 537px;
font-size: 20px;
line-height: 27px;
text-transform: capitalize;
}
@include mq(xl, max) {
margin: 0px 0 16px 7px;
font-family: $font-family;
color: $color-black;
font-size: 10px;
line-height: 14px;
width: 269px;
text-transform: capitalize;
}
} }
&__stamps { &__stamps {
align-items: center;
display: flex; display: flex;
align-items: center;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
width: 404px;
margin: 16px auto 16px auto;
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -37,33 +77,66 @@
} }
&__divider { &__divider {
background-color: $color-gray4;
display: inline-block; display: inline-block;
background-color: $color-gray4;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;
width: 1px; width: 1px;
} }
@include mq(2xl, min) {
width: 690px;
}
@include mq(xl, max) {
width: 342px;
order: -1;
}
} }
&__developedBy { &__developedBy {
align-items: center;
display: flex; display: flex;
list-style-type: none; align-items: center;
margin: 0; margin: 0;
margin-bottom: 16px;
list-style-type: none;
li:last-child { .vtex-logo,
margin-left: 16px; .m3-logo {
height: 16px;
margin-right: 8px;
}
.by-m3 {
display: flex;
}
.by-vtex {
display: flex;
}
.list {
@include mq(2xl, min) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
width: 388px;
}
@include mq(xl, max) {
margin: 0 0 16px 7px;
}
} }
a { a {
align-items: center;
color: $color-gray2;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; color: $color-gray2;
font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
align-items: center;
text-decoration: none; text-decoration: none;
span { span {