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

feat: Estiliza carrinho desktop

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-14 20:02:26 -03:00
parent d033d5f86d
commit 1b85338bee
8 changed files with 1032 additions and 728 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,19 @@ import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
this.list = [
{},
{},
{},
{},
{},
];
this.addCarrossel();
} }
async init() { async init() {
@ -35,10 +48,14 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const prateleira = await waitElement("footerCheckout__prateleira");
$(elemento).slick({ $(prateleira).slick({
slidesToShow: 4, dots: true,
slidesToScroll: 1, infinite: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true,
}); });
} }
@ -51,6 +68,7 @@ export default class Footer {
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li>
<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li> <li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`; `;
} }
@ -74,7 +92,6 @@ export default class Footer {
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3"> <img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3">
</div> </div>
</li> </li>
`; `;
} }
} }

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

@ -1,13 +1,21 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: #8d8d8d; border-color: $black-500;
font-family: $font-family;
padding-top: 8px; padding-top: 8px;
label {
font-family: $font-family-secundary;
text-transform: uppercase;
color: $black-500;
}
.link-cart { .link-cart {
a { a {
color: #292929; color: $black-500;
font-family: $font-family-secundary;
font-size: 14px; font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover { &:hover {
color: lighen(#292929, 10); color: lighen(#292929, 10);
@ -25,12 +33,12 @@
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; color: $black-500;
font-size: 24px; font-size: 20px;
} }
small { small {
color: #8d8d8d; color: $black-500;
} }
} }
} }
@ -39,26 +47,35 @@
margin: 0 0 16px; margin: 0 0 16px;
input { input {
height: 50px;
box-shadow: none; box-shadow: none;
color: #292929; color: $black-500;
font-family: $font-family; font-family: $font-family;
font-size: 12px;
line-height: 16px;
padding: 0 16px; padding: 0 16px;
border: 2px solid f0f0f0; border: 1px solid $black-500;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
&::placeholder {
color: $black-500;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: #292929; background-color: $vivid-blue;
border-radius: 5px; border-radius: 0 8px 8px 0;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; color: $black-500;
right: 0; letter-spacing: 0.05em;
height: 50px;
right: -4px;
top: 0; top: 0;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -70,17 +87,23 @@
span.help.error { span.help.error {
color: red; color: red;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: #fff; background-color: #fff;
border: 1px solid #8d8d8d; border: 1px solid $black-500;
border-radius: 0; border-radius: 5px;
margin-top: 47px;
h3 { h3 {
color: #303030; font-family: $font-family;
font-weight: 700;
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
@ -89,11 +112,15 @@
li { li {
span { span {
color: #292929; color: $black-500;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
} }
i::before { i::before {
color: #292929; color: $vivid-blue;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -112,19 +139,25 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8px;
border: 1px solid #8d8d8d; border: 1px solid $gray-300;
font-family: $font-family; font-family: $font-family;
padding: 16px; font-size: 14px;
// font-size: 14px !important;
padding: 24px 17px 38px 17px;
margin-bottom: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; font-family: $font-family-secundary;
margin-bottom: 8px; font-size: 16px;
line-height: 19px;
color: $black-400;
margin-bottom: 25px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; display: none;
} }
} }
@ -143,36 +176,76 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
// #client-phone {
// &::placeholder {
// visibility: hidden;
// &:after {
// visibility: visible;
// content: "(99) 99999-9999";
// }
// }
tr {
td.info {
border-bottom: 1px solid $gray-700;
}
}
/* General configurations */ /* General configurations */
.box-info {
font-size: 14px;
line-height: 19px;
color: $gray-700;
}
.client-notice { .client-notice {
color: #292929; display: none;
} }
p { p {
position: relative;
margin-bottom: 6px;
color: $gray-700;
label { label {
color: #292929; // color: $gray-800;
font-weight: 500; font-size: 14px;
font-weight: 400;
margin-bottom: 1px;
} }
select, select,
input { input {
border-radius: 0; padding: 13px 7px;
border: 1px solid #8d8d8d; border-radius: 5px;
border: 1px solid $gray-50;
color: $black-500;
box-shadow: none; box-shadow: none;
margin-bottom: 16px;
} }
.help.error { .help.error {
color: red; color: red;
font-size: 9px;
margin: 0;
} }
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: #292929; display: none;
font-weight: 500; // color: #292929;
text-decoration: underline; // font-weight: 500;
// text-decoration: underline;
}
.link {
display: none;
} }
} }
@ -181,20 +254,27 @@
} }
button.submit { button.submit {
width: 100%;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: #292929;
margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; font-family: $font-family;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
background: $vivid-blue;
color: $white;
margin-top: 36px;
// transition: all 0.2s linear;
&:hover { // &:hover {
background: lighten(#292929, 5); // background: lighten(#292929, 5);
} // }
&:active { // &:active {
background: darken(#292929, 5); // background: darken(#292929, 5);
} // }
} }
/* Shipping configurations */ /* Shipping configurations */
@ -205,6 +285,10 @@
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-SummaryItemContent {
display: block;
}
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
@ -236,52 +320,78 @@
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: #8d8d8d; border-style: none;
// border-color: #8d8d8d;
} }
.address-summary { .address-summary {
background: none; background: none;
border-color: #8d8d8d; color: $gray-700;
border-radius: 0; border-radius: 0;
color: #303030; font-family: $font-family;
padding: 12px; font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 0px;
@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: #8d8d8d; padding: 0;
color: $gray-700;
} }
.shp-summary-group-price { // .shp-summary-group-price {
padding-right: 16px; // padding-right: 16px;
} // }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; margin-top: 25px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; display: none;
color: #303030; }
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0;
margin: 0;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: $white;
border: 1px solid #d8c8ac; border: 1px solid $black-400;
}
.vtex-omnishipping-1-x-deliveryChannelsOption {
color: $gray-400;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten(#292929, 50); color: $black-400;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
} }
} }
} }

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

File diff suppressed because it is too large Load Diff

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

@ -4,6 +4,11 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
.quantity {
background-color: $vivid-blue;
color: $white;
}
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;

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

@ -3,6 +3,7 @@
&-content { &-content {
color: #292929; color: #292929;
text-align: center; text-align: center;
align-items: center;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -10,14 +11,12 @@
} }
&-title { &-title {
display: none; align-items: center;
&::before{ font-family: $font-family;
font-family: $font-family; font-weight: 700;
font-weight: 700; font-size: 24px;
font-size: 24px; line-height: 33px;
line-height: 33px; text-transform: uppercase;
text-transform: uppercase;
}
} }
&-message { &-message {
@ -26,21 +25,29 @@
&-links { &-links {
.link-choose-products { .link-choose-products {
background-color: $white; &:before {
border-style: border-box; content: "";
border: 1px solid $black-500; }
border-radius: 0;
transition: ease-in 0.22s all; &:after {
outline: none; content: "Continuar comprando";
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16.38px;
text-align: center; text-align: center;
letter-spacing: 0.05em; text-transform: uppercase;
color: $black-500; background-color: $white;
text-transform: uppercase; border-style: border-box;
border: 1px solid $black-500;
border-radius: 0;
transition: ease-in 0.22s all;
outline: none;
letter-spacing: 0.05em;
padding: 15px 65px 17px 64px;
color: $black-500;
}
&:hover { &:hover {
background: lighten(#292929, 5); background: lighten(#292929, 5);

13
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -71,8 +71,17 @@ body {
} }
.btn-success { .btn-success {
background: #292929; border: none;
text-shadow: none; border-radius: 8px;
color: $white;
outline: none;
font-family: "Open Sans",sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 16px;
letter-spacing: .05em;
text-transform: uppercase;
&:hover { &:hover {
background: lighten(#292929, 15%); background: lighten(#292929, 15%);

27
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -20,7 +20,7 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@ -38,15 +38,19 @@
justify-self: center; justify-self: center;
list-style: none; list-style: none;
li .vtex-pci { // li .vtex-pci {
&::before { // &::before {
display: block; // display: block;
content: ""; // content: "";
height: 24px; // height: 24px;
width: 1px; // width: 1px;
color: $gray-400; // color: $gray-400;
} // }
}
// width: 81.62%
// img {
// }
// }
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -54,7 +58,8 @@
} }
&__divider { &__divider {
background-color: #8d8d8d; content: "";
background-color: $gray-400;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;

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

@ -8,6 +8,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
$white: #ffffff; $white: #ffffff;
$gray-50: #e0e0e0;
$gray-100: #ededed; $gray-100: #ededed;
$gray-200: #e5e5e5; $gray-200: #e5e5e5;
$gray-300: #f0f0f0; $gray-300: #f0f0f0;
@ -15,11 +16,19 @@ $gray-400: #c4c4c4;
$gray-500: #989898; $gray-500: #989898;
$gray-600: #858585; $gray-600: #858585;
$gray-700: #7d7d7d; $gray-700: #7d7d7d;
$gray-800: #808080;
$gray-900: #828282;
$black-400: #292929; $black-400: #292929;
$black-500: #000000; $black-500: #000000;
$vivid-blue: #00C8FF; $vivid-blue: #00C8FF;
$vivid-blue-lighten: #57dbff;
$vivid-blue-darker: #00b0e0;
$green: #298541;
$green-lighten: #2fa34e;
$green-darker: #185428;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (