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

feature/page-checkout #2

Merged
Vitor_soares merged 6 commits from feature/page-checkout into main 2022-12-19 08:26:55 +00:00
Conversation 0 Commits 6 Files Changed 9 +313 -67
5 changed files with 313 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d08b6b6f9a - Show all commits

2
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -78,4 +78,4 @@ export default class CheckoutUI {
cartId.style.display = "none";
}
}
}
}

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

@ -70,6 +70,10 @@
@media (max-width: 490px) {
width: auto;
}
&::placeholder {
color: $color-black-500;
}
}
button {
@ -153,7 +157,7 @@
.accordion-toggle {
span {
font-size: 0 !important;
&::after {
font-family: $font-family-secundary;
color: $color-black-100;
@ -175,8 +179,7 @@
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
max-width: 297px;
width: 100%;
width: 90.06%;
.accordion-heading {
@ -230,6 +233,16 @@
.accordion-inner {
padding: 0;
.box-step {
.shipping-summary-info {
font-family: $font-family;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
}
/* General configurations */
.client-notice {
@ -281,6 +294,10 @@
}
p {
font-size: 14px;
line-height: 19px;
font-family: $font-family;
color: $color-gray2;
margin: 0;
padding: 0;
@ -338,9 +355,46 @@
padding: 0 12px;
}
p {
[type="checkbox"] {
display: none;
&:checked + .newsletter-text::after {
content: "";
width: 12px;
display: block;
position: absolute;
top: 3px;
border-radius: 3px;
left: 3px;
height: 12px;
background-color: $color-blue-100;
}
}
}
label {
&.checkbox {
position: relative;
padding-left: 26px;
.newsletter-text {
&::before {
position: absolute;
content: "";
border: 1px solid #828282;
border-radius: 3px;
width: 16px;
height: 16px;
top: 0;
left: 0;
}
}
}
}
.input-xlarge {
max-width: 271px;
width: 100%;
width: 91.24%;
height: 40px;
margin-bottom: 16px;
}
@ -357,13 +411,14 @@
margin-right: 15px;
}
[type="checkbox"] {
width: 18px;
height: 18px;
border: 1px solid $color-gray11;
padding-right: 8px;
margin-top: 0px;
}
// [type="checkbox"] {
// width: 18px;
// height: 18px;
// border: 1px solid $color-gray11;
// padding-right: 8px;
// margin-top: 0px;
// }
.help.error {
display: none !important;
font-family: $font-family;
@ -383,7 +438,6 @@
color: $color-gray9;
font-size: 12px;
line-height: 16px;
padding-left: 8px;
}
}
@ -457,7 +511,6 @@
color: $color-gray2;
font-size: 12px;
line-height: 16px;
background-color: $color-white-500;
box-shadow: none;
padding: 14px 12px;
@ -478,42 +531,59 @@
padding-bottom: 10px;
}
.vtex-omnishipping-1-x-SummaryItemContent {
align-items: flex-end;
}
.shp-summary-package {
padding-left: 0 !important;
}
.shp-summary-group-info {
border-color: $color-gray4;
border-right: none;
}
.address-summary {
background: none;
border: 1px solid $color-gray10;
border-radius: 8px;
padding: 12px;
.shipping-summary-placeholder {
.link-change-shipping {
display: none;
}
}
&::before {
content: "";
display: block;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 8px 9.4px 0 0;
.vtex-omnishipping-1-x-addressSummaryActive {
.address-summary {
background: none;
border: 1px solid $color-gray10;
border-radius: 8px;
padding: 12px;
&::before {
content: "";
display: block;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 8px 9.4px 0 0;
}
@include mq(md, max) {
background-position: 8px 9px;
}
a {
font-family: $font-family;
color: $color-blue-100;
font-size: 12px;
line-height: 16px;
font-weight: 400;
text-transform: lowercase;
text-decoration: none;
}
}
@include mq(md, max) {
background-position: 8px 9px;
}
a {
font-family: $font-family;
color: $color-blue-100;
font-size: 12px;
line-height: 16px;
font-weight: 400;
text-transform: lowercase;
text-decoration: none;
}
}
}
.shp-summary-group-price,
.shp-summary-package {
@ -541,7 +611,36 @@
letter-spacing: 0.05px;
}
.shp-lean {
.shp-lean-option {
&::before {
position: relative;
content: "";
border: 1px solid #828282;
border-radius: 3px;
width: 16px;
height: 16px;
top: 0;
left: 0;
}
}
// .shp-lean-option-active {
// &::after {
// content: "";
// width: 12px;
// display: block;
// position: absolute;
// left: 36.6%;
// border-radius: 3px;
// height: 12px;
// background-color: $color-blue-100;
// }
// }
.vtex-omnishipping-1-x-svg {
display: none;
opacity: 0;
&::before {
@ -550,6 +649,7 @@
height: 16px;
}
}
}
.vtex-omnishipping-1-x-addressSummary {
span {
@ -599,6 +699,12 @@
.vtex-omnishipping-1-x-warning {
border-color: $color-gray10;
.onda-v1 {
font-family: $font-family;
color: $color-black-500;
font-size: 12px;
line-height: 16px;
}
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
@ -630,8 +736,8 @@
.ship-number {
.input-mini {
max-width: 270px;
width: 100%;
max-width: unset;
width: 90.91%;
height: 33px;
margin-bottom: 15px;
}
@ -639,8 +745,8 @@
.ship-complement {
.input-large {
max-width: 270px;
width: 100%;
max-width: unset;
width: 90.91%;
height: 33px;
padding: 0 12px;
margin-bottom: 15px;
@ -649,8 +755,8 @@
.ship-receiverName {
.input-xlarge {
max-width: 270px;
width: 100%;
max-width: unset;
width: 90.91%;
height: 33px;
margin-bottom: 15px;
}

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

@ -26,12 +26,16 @@
border-radius: 0;
}
}
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
font-family: $font-family;
width: 100%;
height: 397px !important;
h2 {
background: $color-white-500;
border: none;
@ -64,7 +68,7 @@
.shipping-date,
.price {
color: #7d7d7d;
display: none;
}
}
}
@ -80,7 +84,7 @@
font-size: 12px;
line-height: 16px;
text-decoration: underline;
padding-right: 17px;
// padding-right: 17px;
}
.summary-totalizers {
@ -125,15 +129,13 @@
text-align: unset;
vertical-align: unset;
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
display: none;
}
&.product {
width: 40.64%;
}
&.shipping-date {
font-size: 0;
width: 15.05%;
&::after {
content: "Frete";
@ -147,6 +149,7 @@
&.product-price {
font-size: 0;
width: 15.15%;
&::after {
content: "Unidade";
@ -159,7 +162,14 @@
}
&.quantity {
width: 181px;
width: 18.53%;
}
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
display: none;
}
}
}
@ -186,8 +196,13 @@
}
.product-name {
padding-left: 16px;
width: 321px;
font-family: $font-family-secundary;
color: $color-black-500;
font-size: 12px;
line-height: 14px;
white-space: unset;
// padding-left: 16px;
// width: 321px;
@include mq(lg, max) {
width: 250px;
@ -198,6 +213,7 @@
font-size: 12px;
line-height: 14px;
text-decoration: none;
padding-left: 16px;
&:hover {
text-decoration: none;
@ -814,14 +830,29 @@
}
tfoot {
td.info,
td.monetary {
font-family: $font-family;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: $color-black-100;
td.info {
font-family: $font-family;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: $color-black-100;
padding: 0;
margin-top: 12px;
margin-bottom: 0;
}
td.monetary {
font-family: $font-family;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: $color-black-100;
}
}
}

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

@ -4,15 +4,26 @@ body .container-main.container-order-form .orderform-template.active {
border-radius: 8px;
// padding: 25px 17px;
height: 397px;
max-width: 331px;
width: 100%;
width: 32.37%;
margin-left: unset;
margin-right: 0;
float: right;
.payment-confirmation-wrap {
#payment-data-submit {
font-family: $font-family;
color: $color-white-500;
font-size: 14px;
line-height: 19px;
font-weight: 700;
background: $color-green2;
border-radius: 8px;
}
}
}
.span4 {
padding: 24px 17px;
padding: 24px 17px 22px;
}
h2 {
@ -46,10 +57,11 @@ body .container-main.container-order-form .orderform-template.active {
.price {
font-family: $font-family;
color: $color-black-100;
font-weight: 400;
font-size: 12px;
line-height: 16px;
margin: 0;
padding-right: 17px;
// padding-right: 17px;
}
}
}
@ -60,4 +72,97 @@ body .container-main.container-order-form .orderform-template.active {
.orderform-template-holder {
width: 66.1132%;
}
.payment-data {
.active {
width: unset;
padding: 14.5px;
}
}
.link-gift-card {
#show-gift-card-group {
display: none;
}
}
.payment-body {
.accordion-inner {
.box-step {
display: flex;
.form-step {
display: flex;
.payment-group {
margin: 0;
.payment-group-list-btn {
width: unset;
}
.pg-deposito,
.pg-transferencia-bancaria,
.pg-money,
.pg-promisory---monica,
.pg-desconto-em-folha,
#payment-group-creditControlPaymentGroup,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-promissoryPaymentGroup,
#payment-group-PSEPaymentGroup,
#payment-group-SPEIPaymentGroup,
[data-name="Bancolombia Transfer"] {
display: none;
}
.payment-group-list-btn {
span {
background-image: none !important;
font-family: $font-family;
color: $color-black-200;
font-size: 14px;
line-height: 24px;
text-align: center;
padding: 13px;
}
a {
background: $color-gray3;
border: 1px solid $color-black-500;
border-radius: 6px;
margin-bottom: 12px;
padding: 0;
width: 209px;
text-decoration: none;
margin-left: 0;
}
.active {
border: 1px solid $color-red-100;
background: rgba(220, 221, 227, 0.3);
margin-left: 0px;
span {
color: $color-red-100;
}
}
}
}
.steps-view {
// width: 363px;
width: 100%;
margin-left: 40px;
}
}
}
}
}
}
.PaymentCardHolderDocument {
display: none;
}
.SecurityEnvironmentIcon {
margin-bottom: 5px;
}

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

@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */
$color-black-100: #292929;
$color-black-200: #58595b;
$color-black-500: #000000;
$color-white-500: #fff;
@ -24,10 +25,13 @@ $color-gray10: #e0e0e0;
$color-gray11: #828282;
$color-gray12: #292929;
$color-red-100: #F15A31;
$color-blue: #4267b2;
$color-blue-100: #00c8ff;
$color-green: #4caf50;
$color-green2: #298541;
/* Grid breakpoints */
$grid-breakpoints: (