matheus_mariosa/m3-academy-template-checkout-matheus-mariosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: footer css responsivo

Browse Source
This commit is contained in:
Matheus Mariosa 2022-12-23 04:21:06 -03:00
parent b18c518e93
commit 574dd3915f
3 changed files with 106 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/js/components/Footer.js
View File

@ -160,7 +160,8 @@ export default class Footer {
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
Infinity: false
Infinity: false,
});
}
}

19
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -11,9 +11,13 @@ html {
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
@media only screen and (max-width: 1024px){
margin: auto 8px
}
}
footer .footerCheckout__prateleira,
header {
header .container {
width: 79.53125%;
margin: 0 auto;
}
@ -68,14 +72,15 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
color: #292929;
font-family: 'Open Sans';
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 17px 0 16px;
@include mq(md, max) {
margin-left: 30px;

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

@ -100,7 +100,7 @@
};
&__wrapper {
border-top: 1px solid $color-gray2;
border-top: 1px solid black;
align-items: center;
display: flex;
margin: 0;
@ -114,11 +114,21 @@
margin: 0;
justify-content: space-between;
width: 100%;
@media only screen and (max-width: 1024px){
flex-direction: column;
align-items: normal;
justify-content: normal;
padding: 22px 0;
}
@media only screen and (max-width: 375px){
margin-top: 16px;
}
}
}
&__address {
color: $color-gray2;
color: #292929;
font-family: $font-family;
font-style: normal;
font-weight: normal;
@ -134,6 +144,21 @@
margin-bottom: 24px;
max-width: 100%;
}
@media only screen and (min-width: 2500px){
font-size: 20px;
line-height: 27px;
width: 36.7682673%;
margin-right: 0;
}
@media only screen and (max-width: 1024px){
order: 2;
width: 100%;
margin: 16px 0;
line-height: 14px;
margin-left: 8px;
}
}
&__stamps {
@ -141,13 +166,25 @@
display: flex;
justify-self: center;
list-style: none;
width: 33.2329763% ;
width: 33.2329763%;
margin: 0 15.5471102% 0 0;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
@media only screen and (min-width: 2500px){
margin: 0;
width: 46.876382%;
}
@media only screen and (max-width: 1024px){
order: 1;
}
@media only screen and (max-width: 375px){
width: 100%;
margin-bottom: 0;
align-self: normal;
}
.footerCheckout__payments{
.footerCheckout-payments-ul{
@ -157,17 +194,35 @@
li{
margin-right: 13.35px;
@media only screen and (max-width: 1024px){
margin-right: 5px;
}
}
img{
height: 20px;
@media only screen and (min-width: 2500px){
height: 39.06px;
width: 69.63px;
}
@media only screen and (max-width: 1024px){
min-width: 35px;
}
}
}
}
.footerCheckout__vtexpci{
img{
width: 53px;
min-width: 53px;
height: 33px;
@media only screen and (min-width: 2500px){
width: 103.52px;
height: 64.46px;
}
}
}
@ -187,12 +242,34 @@
margin: 0;
width: 17.8598%;
@media only screen and (min-width: 2500px){
width: 16.3827269%;
}
@media only screen and (max-width: 1024px){
order: 3;
width: 100%;
margin-left: 8px;
}
li:last-child {
margin-left: 10.73px;
@media only screen and (min-width: 2500px){
margin-left: 10.23px
}
@media only screen and (max-width: 1024px){
margin-left: 10.45px;
}
.devolperByM3{
height: 15.65px;
width: 28.66px;
@media only screen and (min-width: 2500px){
height: 30.56px;
width: 55.98px;
}
}
}
@ -212,11 +289,21 @@
font-family: 'Open Sans';
font-size: 9px;
line-height: 12px;
color: black;
color: #292929;
@media only screen and (min-width: 2500px){
font-size: 18px;
line-height: 25px;
}
}
.devolperByVTEX{
height: 16px;
width: 44.92px;
@media only screen and (min-width: 2500px){
height: 31.25px;
width: 87.73px;
}
}
}
}