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 {
constructor() {
this.init();
this.list = [
{},
{},
{},
{},
{},
];
this.addCarrossel();
}
async init() {
@ -35,10 +48,14 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
const prateleira = await waitElement("footerCheckout__prateleira");
$(prateleira).slick({
dots: true,
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/payPalM3Academy.png" alt="PayPal"></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>
`;
}
@ -74,7 +92,6 @@ export default class Footer {
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3">
</div>
</li>
`;
}
}

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

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

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

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

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

@ -71,8 +71,17 @@ body {
}
.btn-success {
background: #292929;
text-shadow: none;
border: 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 {
background: lighten(#292929, 15%);

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

@ -20,7 +20,7 @@
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
@ -38,15 +38,19 @@
justify-self: center;
list-style: none;
li .vtex-pci {
&::before {
display: block;
content: "";
height: 24px;
width: 1px;
color: $gray-400;
}
}
// li .vtex-pci {
// &::before {
// display: block;
// content: "";
// height: 24px;
// width: 1px;
// color: $gray-400;
// }
// width: 81.62%
// img {
// }
// }
@include mq(md, max) {
align-self: center;
@ -54,7 +58,8 @@
}
&__divider {
background-color: #8d8d8d;
content: "";
background-color: $gray-400;
display: inline-block;
height: 24px;
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;
$gray-50: #e0e0e0;
$gray-100: #ededed;
$gray-200: #e5e5e5;
$gray-300: #f0f0f0;
@ -15,11 +16,19 @@ $gray-400: #c4c4c4;
$gray-500: #989898;
$gray-600: #858585;
$gray-700: #7d7d7d;
$gray-800: #808080;
$gray-900: #828282;
$black-400: #292929;
$black-500: #000000;
$vivid-blue: #00C8FF;
$vivid-blue-lighten: #57dbff;
$vivid-blue-darker: #00b0e0;
$green: #298541;
$green-lighten: #2fa34e;
$green-darker: #185428;
/* Grid breakpoints */
$grid-breakpoints: (