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(
(product) => `
<div class="productCard">
<img src=${product.items[0].images[0].imageUrl} alt=${product.productName}>
<span>${product.productName}</span>
<div class="skus">
<div class="product-card">
<img class="product-card__img" src=${product.items[0].images[0].imageUrl} alt=${
product.productName
}>
<span class="product-card__description">${product.productName}</span>
<div class="product-card__skus">
${product.items.map((item) => `<button>${item.name}</button>`)}
</div>
<a>ver produto</a>
<a class="product-card__link" >ver produto</a>
</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 {
margin: 0 0 16px;
@ -207,17 +212,52 @@
.accordion-inner {
padding: 0;
.ship-country {
display: none;
}
/* 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 {
color: $color-black;
}
.input-small {
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 {
label {
font-family: $font-family;
font-style: normal;
@ -266,6 +306,7 @@
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
display: none;
color: $color-black;
font-weight: 500;
text-decoration: underline;
@ -303,7 +344,12 @@
/* Shipping configurations */
.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;
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 {
.mini-cart {
border: 1px solid $color-gray5;
border-radius: 8px;
width: 32.3242%;
margin-left: unset;
margin-right: 0;
@ -8,4 +10,7 @@ body .container-main.container-order-form .orderform-template.active {
.orderform-template-holder {
width: 66.1132%;
}
.cart {
border: 0;
}
}

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

@ -1,38 +1,66 @@
.empty-cart {
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
p {
display: none;
}
@include mq(md, max) {
padding: 0 16px;
}
}
@include mq(md, max) {
padding: 0 16px;
}
}
&-title {
font-size: 20px;
}
&-title {
font-family: $font-family;
font-weight: 700;
font-size: 48px;
line-height: 65px;
text-transform: uppercase;
&-links {
.link-choose-products {
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;
color: $color-black3;
}
&:hover {
background: lighten($color-black, 5);
}
}
}
&-links {
.link-choose-products {
width: 100%;
max-width: 638px;
background: #fff;
color: black;
border: 1px solid black;
border-radius: 0px;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
text-align: center;
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 {
background: lighten($color-black, 5);
}
}
}
}