cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona arrows e botoes slick

Browse Source
This commit is contained in:
Cainã Milech 2022-12-17 15:44:29 -03:00
parent 104fa1a69c
commit 8b8c9fcd48
7 changed files with 77 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bash.exe.stackdump
View File

@ -2,7 +2,7 @@ Stack trace:
Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (000000F0000, 000000F0101, 00000000001, CCD558A313BC)
000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

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

@ -72,7 +72,7 @@ export default class Footer {
return `<a name="product-variation__variation" class="product-variation__variation">${name.name}</a>`;
})
.join("")}</div>
<button class="show-product">Ver produto</button>`;
<button class="product-btn">Ver produto</button>`;
prateleira.children[1].appendChild(li);
});
});

14
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -516,20 +516,6 @@ h1#orderform-title {
width: 100%;
}
/*&::before {
content: "";
display: flex;
width: 20.26px;
height: 20.89px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png")
no-repeat center center;
background-size: contain;
cursor: pointer;
position: absolute;
left: 294px;
top: 8%;
}*/
.checkbox {
padding: 0;
}

18
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -489,11 +489,11 @@
letter-spacing: 0.05em;
&:hover {
background-color: lighten($color-blue3, 5);
background-color: lighten($color-blue2, 5);
}
&:active {
background-color: darken($color-blue3, 5);
background-color: darken($color-blue2, 5);
}
}
}
@ -580,11 +580,11 @@
padding-bottom: 9px;
&:hover {
background-color: lighten($color-blue3, 5);
background-color: lighten($color-blue2, 5);
}
&:active {
background-color: darken($color-blue3, 5);
background-color: darken($color-blue2, 5);
}
}
@ -801,11 +801,11 @@
}
&:hover {
background-color: lighten($color-blue3, 5);
background-color: lighten($color-blue2, 5);
}
&:active {
background-color: darken($color-blue3, 5);
background-color: darken($color-blue2, 5);
}
}
@ -918,7 +918,11 @@
border: 0;
&:hover {
background-color: darken($color-blue3, 5);
background-color: darken($color-blue2, 5);
}
&:active {
background-color: darken($color-blue2, 5);
}
&:after {

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

@ -16,7 +16,7 @@ footer .footerCheckout__prateleira,
header {
@include mq(tablet, min) {
width: 79.53125%;
margin: 0 auto;
margin: 0 auto 56px auto;
}
@include mq(tablet, max) {

58
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,4 +1,5 @@
.footerCheckout__prateleira {
.footerCheckout {
&__prateleira {
h2 {
font-family: $font-family-secundary;
font-style: normal;
@ -9,6 +10,7 @@
color: $color-black-500;
margin-bottom: 20px;
}
}
}
/* Slider */
@ -101,6 +103,47 @@
line-height: 18px;
color: $color-black-500;
}
.product-variation {
display: flex;
justify-content: center;
margin-bottom: 20px;
&__variation {
margin: 0 2.5px;
background: $color-blue2;
border-radius: 8px;
padding: 5px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
}
.product-btn {
width: 100%;
height: 42px;
justify-content: center;
text-align: center;
background: $color-blue2;
border-radius: 8px;
border: none;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
}
&.slick-loading img {
@ -130,15 +173,22 @@
.slick-arrow {
font-size: 0;
position: absolute;
width: 13.64px;
height: 29.47px;
border: none;
z-index: 4;
top: 45%;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center;
z-index: 4;
background-size: contain;
left: 10px;
}
.slick-next {
z-index: 4;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center;
background-size: contain;
right: 10px;
}
.slick-arrow.slick-hidden {

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -27,7 +27,6 @@ $color-gray14: #58595b;
$color-blue: #4267b2;
$color-blue2: #00c8ff;
$color-blue3: #2f8ea8;
$color-red: #ff0000;