diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..fd8a4ce 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,35 +1,75 @@ /* _footer.scss */ .footerCheckout { - border-top: none; color: $color-gray2; &__wrapper { align-items: center; display: flex; + } + + .container { + border-top: 1px solid $color-black; + display: flex; + align-items: center; + padding: 0 16px; + width: 100%; 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 { - color: $color-gray2; font-family: $font-family; - font-style: normal; - font-weight: normal; + color: $color-gray2; + margin: 27px 0 24px 0; + width: 269px; font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { + @include mq(xl, max) { margin-bottom: 24px; 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 { - align-items: center; display: flex; + align-items: center; justify-self: center; list-style: none; + width: 404px; + margin: 16px auto 16px auto; @include mq(md, max) { align-self: center; @@ -37,33 +77,66 @@ } &__divider { - background-color: $color-gray4; display: inline-block; + background-color: $color-gray4; height: 24px; margin: 0 8px; width: 1px; } + + @include mq(2xl, min) { + width: 690px; + } + + @include mq(xl, max) { + width: 342px; + order: -1; + } } &__developedBy { - align-items: center; display: flex; - list-style-type: none; + align-items: center; margin: 0; + margin-bottom: 16px; + list-style-type: none; - li:last-child { - margin-left: 16px; + .vtex-logo, + .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 { - align-items: center; - color: $color-gray2; display: flex; font-family: $font-family; - font-style: normal; - font-weight: normal; + color: $color-gray2; font-size: 10px; line-height: 12px; + align-items: center; text-decoration: none; span {