GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estilizacao da página de pagamento

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-18 16:54:13 -03:00
parent c2574c7096
commit 28dba6d014
4 changed files with 612 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
checkout/src/arquivos/js/components/Header.js
View File

@ -23,22 +23,26 @@ export default class Header {
} }
setProgressBarHTML() { setProgressBarHTML() {
this.container_progressBar.innerHTML = ` if(window.innerWidth > 1024) {
<div class="content_myCart"> this.container_progressBar.innerHTML = `
<span class="infoCart">Meu Carrinho</span> <div class="content_myCart">
<span class="circuleOne circule"></span> <span class="infoCart">Meu Carrinho</span>
<span class="line"></span> <span class="circuleOne circule"></span>
</div> <span class="line"></span>
<div class="content_personalData"> </div>
<span class="infoCart">Dados Pessoais</span> <div class="content_personalData">
<span class=" circuleTwo circule"></span> <span class="infoCart">Dados Pessoais</span>
<span class="line"></span> <span class=" circuleTwo circule"></span>
</div> <span class="line"></span>
<div class="content_payment"> </div>
<span class="infoCart">Pagamento</span> <div class="content_payment">
<span class=" circuleTree circule"></span> <span class="infoCart">Pagamento</span>
</div> <span class=" circuleTree circule"></span>
` </div>
`
} else {
this.container_progressBar.innerHTML = ""
}
} }
setStateCart() { setStateCart() {

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

@ -1,301 +1,390 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $color-black; color: $color-black;
font-size: 14px; font-size: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
} }
} }
} }
.pre-email { .pre-email {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
text-transform: uppercase; text-transform: uppercase;
color: $color-black; color: $color-black;
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
} }
small { small {
font-family: $font-family-secundary; font-family: $font-family-secundary;
text-transform: uppercase; text-transform: uppercase;
color: $color-black; color: $color-black;
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 1px solid $color-black; border: 1px solid $color-black;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: $color-blue2; background-color: $color-blue2;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; height: 54px;
right: 0; right: 0;
top: 0; top: 0;
color: $color-black; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
} }
span.help.error { span.help.error {
color: red; color: red;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-black; border: 1px solid $color-black;
border-radius: 0; border-radius: 0;
h3 { h3 {
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
ul { ul {
margin: 0; margin: 0;
li { li {
span { span {
color: $color-black; color: $color-black;
} }
i::before { i::before {
color: $color-black; color: $color-black;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
} }
} }
i::before { i::before {
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
} }
} }
} }
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0.5rem;
//border: 1px solid $color-gray4; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; fill: #303030;
} }
} }
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: $color-white;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-blue2;
display: flex; display: flex !important;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} font-size: 1.197rem;
} }
}
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; color: $color-black;
} }
p { p {
label { label {
color: $color-black; color: $color-gray2;
font-weight: 500; font-weight: 400;
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; height: 42px;
box-shadow: none; border: 1px solid $color-gray5;
} box-shadow: none;
}
.help.error { .help.error {
color: red; color: red;
} }
} }
.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 {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.state-inscription-box span { .state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 0.5rem;
background: $color-black; background: $color-blue2;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase;
padding: 0.75rem 0;
color: $color-white;
font-weight: 700;
font-family: $font-family;
width: 100%;
&:hover { &:hover {
background: lighten($color-black, 5); opacity: 0.8;
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-lean { .shp-lean {
//border: 1px solid $color-gray4; //border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
} }
} }
} }
} }
.delivery-address-title { .delivery-address-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; width: 100%;
} }
.address-summary { .address-summary {
background: none; background: none;
border-color: $color-gray4; border-color: $color-gray4;
border-radius: 0; border-radius: 0;
color: #303030; color: #303030;
padding: 12px; padding: 12px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
} }
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
} }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; padding-left: 16px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: #d8c8ac;
//border: 1px solid #d8c8ac; //border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} }
} }
} }
} }
} }
.vtex-omnishipping-1-x-SummaryItemContent {
display: flex;
flex-direction: column;
span {
font-family: $font-family;
font-weight: 400;
color: $color-gray2;
}
}
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none !important;
}
.link-change-shipping.vtex-omnishipping-1-x-summaryChange {
display: none;
}
/* .step.active,
.cart.active,
.totalizers.active {
//border: 1px solid $color-gray3;
} */
.summary-cart-template-holder {
border: none;
}
.accordion-group.shipping-data .accordion-toggle,
#payments-title .accordion-toggle {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 1rem;
color: $color-black;
.icon-home,
.icon-credit-card {
display: none;
}
}
.client-profile-data .accordion-heading .accordion-toggle {
.icon-user,
.icon-home span {
display: none;
}
}
.client-profile-data .accordion-heading .accordion-toggle a {
display: flex !important;
}
.client-notice.notice,
span[data-i18n="clientProfileData.identification"] {
font-size: 0;
color: $color-black;
}
span[data-i18n="clientProfileData.identification"]::after {
content: "Identificação";
font-size: 1rem;
font-family: $font-family-secundary;
font-weight: 400;
color: $color-black;
}
.checkbox.newsletter-label {
display: flex;
justify-content: space-around;
align-items: center;
label {
font-family: $font-family;
font-weight: 400;
font-size: 0.75rem;
color: $color-gray4;
}
}

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

@ -13,7 +13,7 @@
display: none; display: none;
} }
.cart { .cart {
border: 1px solid $color-gray3; //border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
@ -48,7 +48,7 @@
} }
.cart { .cart {
border: 1px solid $color-gray4; //border: 1px solid $color-gray4;
ul li { ul li {
border-top: none; border-top: none;
@ -58,7 +58,7 @@
&:not(:first-child) { &:not(:first-child) {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid #e5e5e5; //border-top: 1px solid #e5e5e5;
} }
.shipping-date, .shipping-date,
@ -677,8 +677,6 @@
} }
} }
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 32px;
@ -693,7 +691,6 @@
} }
} }
/* @include mq(sm, max) { /* @include mq(sm, max) {
span { span {
display: flex; display: flex;
@ -770,7 +767,7 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
padding: 12px 0; padding: 20px 0;
} }
&.info { &.info {
@ -865,3 +862,260 @@
} }
} }
} }
.checkout-container {
overflow: initial !important;
}
.cart-fixed.affix-top.cart-fixed-transition {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
height: auto !important;
border: 1px solid $color-gray5;
border-radius: 0.5rem;
}
#go-to-cart-button {
font-family: $font-family;
font-weight: 400;
color: $color-black;
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid $color-gray5;
padding: 0.625rem 1rem;
}
.cart-template.mini-cart.span4 .accordion-inner tr {
border-bottom: 1px solid $color-gray5;
}
.cart-template.mini-cart.span4 .accordion-inner tr td::before {
content: "oi";
color: $color-white;
}
.cart-template.mini-cart.span4 .accordion-inner tr td::after {
content: "oi";
color: $color-white;
}
li.hproduct.item.muted {
display: flex;
justify-content: center;
align-items: center;
a {
flex: 1;
}
span.fn.product-name {
display: flex;
flex: 2;
width: 100%;
white-space: initial;
color: black;
}
span.quantity.badge {
display: none;
}
.description {
flex: 2;
}
}
/* .step.accordion-group.shipping-data .accordion-heading span::after {
content: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
font-size: 1.197rem;
display: flex;
} */
.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-delivery {
background: white !important;
border: 1px solid $color-black;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
color: $color-black !important;
text-transform: uppercase;
font-family: $font-family;
font-weight: 400;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
border: 1px solid $color-black !important;
}
#is-corporate-client {
display: none !important;
}
.payment-edit-link {
display: block !important;
}
h2[data-i18n="totalizers.summary"] {
display: flex;
justify-content: flex-start;
align-items: center;
padding-top: 1.5rem;
}
p.input.ship-postalCode.required.text {
display: flex;
flex-direction: column;
width: 100%;
}
p.input.ship-postalCode.required.text small {
text-decoration: none;
margin: initial;
margin-top: 10px;
}
p.input.ship-postalCode.required.text input {
max-width: initial;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid $color-gray6;
border-radius: 0.5rem;
height: 45px;
}
p.input.ship-postalCode.required.text input::placeholder {
padding: 10px;
}
.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-pickup.vtex-omnishipping-1-x-deliveryChannelsTogglePickup {
background: white !important;
}
.vtex-omnishipping-1-x-deliveryOptionInactive {
color: $color-gray6 !important;
}
p.input.ship-country.text {
display: none !important;
}
p.vtex-omnishipping-1-x-shippingSectionTitle,
p.vtex-omnishipping-1-x-shippingSectionTitle.delivery-address-title {
font-family: $font-family;
font-weight: 700 !important;
color: $color-gray2 !important;
margin-bottom: 0.688rem;
}
.vtex-omnishipping-1-x-addressSummary.vtex-omnishipping-1-x-addressSummaryActive {
border: 1px solid $color-gray6;
border-radius: 0.5rem;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
&::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png)
}
}
.address-summary.address-summary-BRA {
border: none !important;
}
.vtex-omnishipping-1-x-address div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.vtex-omnishipping-1-x-address div label {
font-family: $font-family;
font-weight: 700 !important;
}
.vtex-omnishipping-1-x-address div input {
all: unset;
width: 100%;
}
p.input.ship-number.required.text {
margin-right: 0 !important;
}
button#payment-data-submit {
background-color: $color-green2 !important;
color: $color-white !important;
font-weight: 700;
font-family: $font-family;
text-transform: uppercase;
border-radius: 0.5rem !important;
}
a#payment-group-custom204PaymentGroupPaymentGroup,
a#payment-group-custom205PaymentGroupPaymentGroup,
a#payment-group-creditControlPaymentGroup,
a#payment-group-creditDirectSalePaymentGroup,
a#payment-group-promissoryPaymentGroup,
a#payment-group-custom203PaymentGroupPaymentGroup,
a#payment-group-PSEPaymentGroup,
a#payment-group-Bancolombia\ TransferPaymentGroup,
a#payment-group-customPrivate_502PaymentGroup,
a#payment-group-custom201PaymentGroupPaymentGroup,
a#payment-group-MercadoPagoPaymentGroup,
a#payment-group-SPEIPaymentGroup, a#show-gift-card-group {
display: none !important;
}
div#payments-title {
margin-bottom: 1rem;
}
div#payments-title::after {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
font-weight: 400;
font-family: $font-family;
color: $color-gray2;
}
.payment-group {
margin-top: 0 !important;
}
.payment-group-item {
background-color: $color-gray3 !important;
border-color: $color-black;
border-radius: 0.375rem;
margin: 0 !important;
margin-bottom: 0.75rem !important;
border: 1px solid $color-black !important;
span {
display: flex;
justify-content: center;
align-items: center;
padding: 0.813rem 0;
color: $color-gray7;
background-image: unset !important;
}
}
.payment-group-item.active {
border-color: $color-orange !important;
span {
color: $color-orange;
}
}
.steps-view iframe {
height: 500px !important;
}

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

@ -15,12 +15,18 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4; $color-gray6: #c4c4c4;
$color-gray7: #58595B;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF; $color-blue2: #00C8FF;
$color-green: #4caf50; $color-green: #4caf50;
$color-green2: #298541;
$color-orange: #F15A31;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (