feat: estilizacao da página de pagamento

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

View File

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

View File

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

View File

@ -13,7 +13,7 @@
display: none;
}
.cart {
border: 1px solid $color-gray3;
//border: 1px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
@ -48,7 +48,7 @@
}
.cart {
border: 1px solid $color-gray4;
//border: 1px solid $color-gray4;
ul li {
border-top: none;
@ -58,7 +58,7 @@
&:not(:first-child) {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e5e5e5;
//border-top: 1px solid #e5e5e5;
}
.shipping-date,
@ -677,8 +677,6 @@
}
}
.coupon-fields {
margin-bottom: 32px;
@ -693,7 +691,6 @@
}
}
/* @include mq(sm, max) {
span {
display: flex;
@ -770,7 +767,7 @@
font-size: 14px;
line-height: 16px;
color: $color-black;
padding: 12px 0;
padding: 20px 0;
}
&.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;
}

View File

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