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 : criando o css da pagina payment

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-12-18 21:45:06 -03:00
parent 7468fecb01
commit cbfb329b83
4 changed files with 121 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,13 +138,15 @@ export default class Footer {
const html = products.map( const html = products.map(
(product) => ` (product) => `
<div class="productCard"> <div class="product-card">
<img src=${product.items[0].images[0].imageUrl} alt=${product.productName}> <img class="product-card__img" src=${product.items[0].images[0].imageUrl} alt=${
<span>${product.productName}</span> product.productName
<div class="skus"> }>
<span class="product-card__description">${product.productName}</span>
<div class="product-card__skus">
${product.items.map((item) => `<button>${item.name}</button>`)} ${product.items.map((item) => `<button>${item.name}</button>`)}
</div> </div>
<a>ver produto</a> <a class="product-card__link" >ver produto</a>
</div> </div>
` `
); );

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

@ -50,6 +50,11 @@
} }
} }
} }
.box-client-info-pf {
#client-email {
font-size: 28px;
}
}
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
@ -207,17 +212,52 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.ship-country {
display: none;
}
/* General configurations */ /* General configurations */
.shipping-summary-info {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
color: $color-gray2;
}
.notification {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
color: $color-gray2;
}
.client-notice { .client-notice {
color: $color-black; color: $color-black;
} }
.input-small { .input-small {
width: 100%; width: 100%;
max-width: 573px;
display: flex;
flex-direction: column;
/* font-size: 28px; */
font-family: $font-family;
/* font-style: normal; */
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: $color-gray2;
}
.form-step {
font-family: $font-family;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: $color-gray2;
} }
p { p {
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -266,6 +306,7 @@
.box-client-info-pj { .box-client-info-pj {
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
display: none;
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@ -303,7 +344,12 @@
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; font-family: $font-family;
font-weight: 400;
font-size: 24px;
line-height: 33px;
text-decoration-line: underline;
color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }

5
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -1,5 +1,7 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
border: 1px solid $color-gray5;
border-radius: 8px;
width: 32.3242%; width: 32.3242%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
@ -8,4 +10,7 @@ body .container-main.container-order-form .orderform-template.active {
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
} }
.cart {
border: 0;
}
} }

52
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -3,6 +3,9 @@
&-content { &-content {
color: $color-black; color: $color-black;
text-align: center; text-align: center;
p {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -10,25 +13,50 @@
} }
&-title { &-title {
font-size: 20px; font-family: $font-family;
font-weight: 700;
font-size: 48px;
line-height: 65px;
text-transform: uppercase;
color: $color-black3;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; width: 100%;
border: none; max-width: 638px;
border-radius: 5px; background: #fff;
transition: ease-in 0.22s all; color: black;
outline: none; border: 1px solid black;
font-family: $font-family; border-radius: 0px;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 28px;
line-height: 16px; line-height: 33px;
text-align: center; text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase; text-transform: uppercase;
padding: 16px;
// background: $color-black;
// border: none;
// border-radius: 5px;
// transition: ease-in 0.22s all;
// outline: none;
// font-family: $font-family;
// font-style: normal;
// font-weight: 500;
// font-size: 14px;
// line-height: 16px;
// text-align: center;
// letter-spacing: 0.05em;
// color: $color-white;
// text-transform: uppercase;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);