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

feat: adicionando os svg do quantidade e comecando o css do cupom e frete

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-12-17 15:19:42 -03:00
parent 96267866df
commit 3d19c14131
7 changed files with 81 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/assets/svgs/minor-icon-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6363 0.196075H1.36364C0.610906 0.196075 0 0.806982 0 1.55971V2.46875C0 3.22148 0.610906 3.83238 1.36364 3.83238H18.6363C19.389 3.83238 19.9999 3.22148 19.9999 2.46875V1.55971C19.9999 0.806982 19.389 0.196075 18.6363 0.196075Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

3
checkout/src/arquivos/assets/svgs/plus-icon-M3Academy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6363 8.18182H11.8181V1.36364C11.8181 0.610906 11.2072 0 10.4545 0H9.54545C8.79272 0 8.18182 0.610906 8.18182 1.36364V8.18182H1.36364C0.610906 8.18182 0 8.79272 0 9.54545V10.4545C0 11.2072 0.610906 11.8181 1.36364 11.8181H8.18182V18.6363C8.18182 19.389 8.79272 19.9999 9.54545 19.9999H10.4545C11.2072 19.9999 11.8181 19.389 11.8181 18.6363V11.8181H18.6363C19.389 11.8181 19.9999 11.2072 19.9999 10.4545V9.54545C19.9999 8.79272 19.389 8.18182 18.6363 8.18182Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

0
checkout/src/arquivos/js/config/slick.js Normal file
View File

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

@ -17,7 +17,6 @@
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
height: 228px;
@include mq(md, max) {
margin: 0px 0 25px 0;
@ -127,18 +126,22 @@
}
.product-image {
height: auto;
padding: 0;
width: 60px;
width: 146px;
a {
width: 100%;
display: flex;
}
@include mq(sm, max) {
width: 72px;
}
img {
height: 60px;
height: auto;
max-width: 100%;
width: auto;
width: 100%;
@include mq(sm, max) {
height: 72px;
@ -149,7 +152,8 @@
.product-name {
padding-right: 0;
padding-left: 31px;
width: 360px;
@include mq(lg, max) {
width: 250px;
}
@ -222,14 +226,13 @@
td.quantity {
align-items: center;
border: 1px solid $color-gray3;
border-radius: 0;
border-radius: 8px;
box-sizing: border-box;
display: flex;
justify-content: center;
margin: 6px auto 0;
max-height: 38px;
max-width: 118px;
padding: 0;
margin: 65px auto 0;
padding: 9px 10px;
width: max-content !important;
@media (max-width: 490px) {
@ -237,6 +240,11 @@
}
input {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 28px;
line-height: 33px;
background-color: $color-white;
border: 1px solid $color-gray3;
border-radius: 0;
@ -246,7 +254,7 @@
margin: 0 !important;
padding: 8px 0;
width: 38px;
color: $color-gray2;
color: $color-black;
box-shadow: none;
@include mq(lg, max) {
@ -256,29 +264,27 @@
.icon-plus-sign,
.icon-minus-sign {
&::before {
color: $color-black;
display: block;
font-weight: 500;
padding: 1px 12px;
}
}
.icon-minus-sign {
&:before {
content: "-";
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
content: "+";
font-size: 14px;
}
display: none;
}
.item-quantity-change {
background-position: center;
background-size: calc(20 / 32 * 100%);
background-repeat: no-repeat;
background-color: $color-blue2;
border-radius: 50%;
height: 32px;
width: 32px;
display: flex;
justify-content: center;
align-items: center;
&.item-quantity-change-decrement {
background-image: url("/checkout/src/arquivos/assets/svgs/minor-icon-M3Academy.svg");
}
&.item-quantity-change-increment {
background-image: url("/checkout/src/arquivos/assets/svgs/plus-icon-M3Academy.svg");
}
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
bottom: inherit;
@ -300,12 +306,13 @@
display: none;
}
span {
font-family: $font-family-secundary;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-weight: 700;
font-size: 28px;
line-height: 33px;
color: $color-black;
white-space: nowrap;
}
}
@ -320,8 +327,8 @@
top: 0;
}
.icon::before {
color: $color-gray4;
font-size: 15px;
color: $color-gray7;
font-size: 28px;
@include mq(md, max) {
font-size: 18px;
@ -346,11 +353,12 @@
.summary {
.cart-more-options {
margin: 0;
width: max-content;
max-width: 580px;
width: 100%;
.srp-container {
padding: 0 0 0 10px;
max-width: 580px;
@include mq(md, max) {
padding: 0 16px;
}
@ -371,12 +379,13 @@
}
.srp-description {
max-width: 27rem;
max-width: 580px;
color: $color-gray2;
margin: 0 0 12px;
font-family: $font-family;
font-size: 28px;
line-height: 36px;
width: 100%;
}
button.shp-open-options {
@ -606,7 +615,6 @@
padding: 0;
width: 100%;
max-width: 688px;
height: 320px;
.coupon-data {
#cart-link-coupon-add {
@ -643,12 +651,11 @@
}
.coupon-label label {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 24px;
line-height: 28px;
margin-bottom: 12px;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-gray2;
cursor: none;
}
@ -725,10 +732,11 @@
&.info,
&.monetary {
font-style: normal;
font-family: $font-family-secundary;
font-weight: 400;
font-weight: normal;
font-size: 14px;
line-height: 16px;
font-size: 28px;
line-height: 33px;
color: $color-black;
padding: 12px 0;
}
@ -739,6 +747,13 @@
&.monetary {
text-align: right;
font-family: $font-family-secundary;
font-weight: 400;
font-weight: normal;
font-size: 28px;
line-height: 33px;
color: $color-black;
white-space: nowrap;
}
}
}
@ -746,10 +761,12 @@
tfoot {
td.info,
td.monetary {
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 21px;
font-weight: 700;
font-size: 36px;
line-height: 49px;
color: $color-black;
}
}
@ -762,7 +779,6 @@
flex-direction: column;
width: 100%;
max-width: 688px;
height: 55px;
@include mq(md, max) {
padding: 0 16px;
@ -772,8 +788,8 @@
}
@include mq(md, min) {
margin: 0;
padding-bottom: 50px;
margin: -25px 0 0;
padding-bottom: 45px;
}
.link-choose-more-products-wrapper {

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

@ -14,8 +14,10 @@ footer .footerCheckout__wrapper {
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
padding: 29px 0px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid black;
}
body {

2
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,7 +1,7 @@
/* _header.scss */
.headerCheckout {
.container {
width: auto !important;
width: 79.53125%;
}
&__wrapper {
display: flex;

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

@ -16,6 +16,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #989898;
$color-gray7:#c4c4c4;
$color-blue: #4267b2;
$color-blue2:#00C8FF;