feat(Autenticacao): Estiliza card

This commit is contained in:
William Simão Cavalcante 2022-12-26 20:49:44 -03:00
parent 8d96fa8764
commit 5d4b9af88b
6 changed files with 609 additions and 147 deletions

View File

@ -7,21 +7,6 @@ export default class Footer {
async init() {
await this.selectors();
this.verificaPag();
// await this.onUpdate();
this.addProdutos();
this.entregaCarrinho();
this.unidadeCarrinho();
this.creatPaymentsIcons();
this.creatVtexIconPci();
this.creatDevIconsM3();
await this.addCarrossel();
await this.verificaOnload();
}
async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement('.footerCheckout__prateleira');
this.tituloPrateleira = await waitElement('#cart-title')
this.payments = await waitElement('.footerCheckout__payments');
this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
@ -29,12 +14,28 @@ export default class Footer {
this.continuarComprando = await waitElement('.empty-cart-links');
this.entrega = await waitElement('.shipping-date');
this.unidade = await waitElement('.product-price');
this.creatPaymentsIcons();
this.addProdutos();
this.verificaPag();
this.creatVtexIconPci();
this.creatDevIconsM3();
this.entregaCarrinho();
await this.verificaOnload();
this.unidadeCarrinho();
await this.addCarrossel();
}
async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement('.footerCheckout__prateleira');
}
async verificaOnload () {
window.addEventListener('load', this.onUpdat())
window.addEventListener('load', () => {
this.onUpdate();
})
};
async onUpdate() {
@ -59,19 +60,19 @@ export default class Footer {
if(window.location.hash == '#/cart') {
this.requestApi();
}
} else {
else {
this.divPrateleira.innerHTML= ``;
}
}
window.addEventListener('hashchange',() => {
if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') {
if(window.location.hash == '#/cart') {
this.requestApi();
}
} else if (window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') {
this.divPrateleira.innerHTML= ``;
}else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") {
} else {
this.divPrateleira.innerHTML= ``;
}
})};

View File

@ -4,7 +4,6 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
this.progressBarHTML();
}
async init() {
@ -43,7 +42,6 @@ export default class Header {
this.progressBar.innerHTML = ``;
}
};
async progressBarActive () {
if (this.progressBar && window.screen.width > 1024) {
const progressBarLi = document.querySelectorAll('#progressBar ul li')

View File

@ -45,14 +45,15 @@
}
.icon-lock {
right: 0;
right: -1;
}
.client-email {
margin: 0 0 16px;
width: 562px;
input {
width: 443px;
max-width: 562px;
width: 100%;
height: 50px;
box-shadow: none;
color: $color-black-500;
@ -60,7 +61,7 @@
padding: 0 16px;
border: 1px solid $color-black-500;
box-sizing: border-box;
border-radius: 5px 0px 0px 5px;
border-radius: 5px 9px 9px 5px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
@ -159,21 +160,26 @@
.payment-data,
.client-profile-data {
.client-profile-data {
max-width: 331px;
height: 459px;
width: 100%;
.checkout-container {
padding: 24px 17px 36px;
}
.collapsed {
.icon-user {
display: none;
span {
font-size: 0;
}
.icon-user {
display: none;
}
#edit-shipping-data {
.icon-edit {
&::after {
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
}
}
}
label {
margin-bottom: 0;
}
@ -181,53 +187,26 @@
border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 24px 16px 0;
padding: 17px 17px 44px 17px;
.accordion-heading {
.icon-credit-card {
display: none;
}
.accordion-toggle-active {
i::after {
content: '';
}
}
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
.icon-home {
display: none;
}
i::before {
content: '';
}
i::after {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png%22');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
display: block;
content: '';
float: right;
}
}
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;
opacity: 0;
}
}
span {
font-size: 17px;
line-height: 14px;
}
.accordion-toggle {
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.accordion-inner {
padding: 0;
@ -244,25 +223,16 @@
.client-notice {
color: $color-black;
color: $color-black;
margin-bottom: 26px;
font-size: 0px !important;
&::before {
content: 'Identificação';
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
}
p {
margin-top: 12px;
margin-bottom: 0;
label {
color: $color-black;
color: $color-black;
font-weight: 500;
margin-bottom: 0;
}
@ -282,12 +252,11 @@
border-radius: 0;
border: 1px solid $color-gray4;
box-shadow: none;
width: 18px;
height: 18px;
}
.help.error {
color: red;
color: red;
margin-left: 0 !important;
}
}
@ -307,31 +276,24 @@
}
#client-email {
width: 297px;
height: 42px;
padding: 0 6px;
padding: 13px 6px;
border-radius: 5px;
border: 1px solid $color-gray9;
}
#client-last-name,
#client-first-name {
padding: 0 6px;
width: 141px;
height: 42px;
padding: 13px 6px;
border: 1px solid $color-gray9;
border-radius: 5px;
}
#client-document {
padding: 0 6px;
width: 142.06px;
height: 44px;
padding: 13px 6px;
border: 1px solid $color-gray9;
border-radius: 5px;
}
#client-phone {
padding: 0 6px;
width: 142.06px;
height: 44px;
padding: 13px 6px;
border: 1px solid $color-gray9;
border-radius: 5px;
@ -366,10 +328,10 @@
display: flex;
align-items: center;
justify-content: center;
margin: 44px 0;
margin-top: 44px;
margin-bottom: 0 !important;
#go-to-shipping {
width: 100%;
height: 42px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
@ -378,7 +340,7 @@
text-transform: uppercase;
background-color: $color-blue-200;
color: $color-white;
margin: 0;
margin: 0 !important;
}
}
@ -387,13 +349,13 @@
display: none;
.link a#is-corporate-client,
.link a#not-corporate-client {
font-weight: 500;
font-weight: 500;
text-decoration: underline;
}
}
.state-inscription-box span {
font-weight: 500;
font-weight: 500;
}
button.submit {
@ -405,72 +367,108 @@
transition: all 0.2s linear;
&:hover {
background: lighten($color-black, 5);
background: lighten($color-black, 5);
}
&:active {
background: darken($color-black, 5);
background: darken($color-black, 5);
}
}
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean {
border: 1px solid $color-gray4;
border: 1px solid $color-gray4;
border-radius: 0;
label {
background-color: $color-white;
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
svg path {
fill: #d8c8ac;
fill: #d8c8ac;
}
}
}
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
margin-bottom: 11px;
}
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
}
.shp-summary-group-info {
border-color: $color-gray4;
border-color: $color-gray4;
}
.vtex-omnishipping-1-x-SummaryItemContent {
align-items: end;
.address-summary {
background: none;
padding: 0;
}
.shp-summary-package {
padding: 0;
}
.shipping-data {
padding: 24px 16px 36px;
}
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
border-color: $color-gray9;
border-radius: 8px;
color: #303030;
padding: 12px;
padding: 15px 11px 15px 43px;
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png');
background-position: 10px 22px;
background-size: 24px 24px;
background-repeat: no-repeat;
@include mq(md, max) {
background-position: 8px 9px;
background-position: 8px 9px;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-blue-200;
}
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
}
.shp-summary-group-price,
@ -489,23 +487,18 @@
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
display: none;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
text-shadow: 1.3px 1px lighten($color-black, 50);
}
}
}
}
.Items {
border-bottom: 1px solid $color-gray4;
}
.info {
border-bottom: 1px solid $color-gray4;
}
}

View File

@ -12,32 +12,63 @@
.item-unit-label {
display: none;
}
.cart {
border-bottom: 1px solid $color-gray9;
border-radius: 0;
@include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
.cart-template-holder {
.cart {
@include mq(md, max) {
margin: 0px 0 25px 0;
}
border: 1px solid $color-gray3;
border-radius: 5px;
padding: 16px;
.cart-items {
thead {
tr {
th {
padding-bottom: 17px !important;
}
}
}
tbody {
tr {
display: contents;
padding: 0;
td {
padding: 0;
a {
.item-link-remove {
padding: 0;
}
}
}
}
}
}
}
}
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
height: 0 !important;
font-family: $font-family;
width: 100%;
border: 1px solid #E5E5E5;
border-radius: 8px;
max-width: 331px;
width: 100%;
h2 {
padding: 24px 17px;
background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
text-align: initial;
border-top: 1px solid $color-gray9;
border-left: 1px solid $color-gray9;
border-right: 1px solid $color-gray9;
border-radius: 8px 8px 0 0;
}
.item-unavailable {
@ -49,11 +80,52 @@
}
.cart {
padding: 0;
border-left: 1px solid $color-gray9;
border-right: 1px solid $color-gray9;
border-radius: 0;
display: flex;
padding: 0 17px;
.description {
margin-left: 53px;
span {
display: none;
}
strong {
margin-right: 0;
margin-bottom: 23px;
}
}
.badge {
display: none;
}
.product-name {
max-width: 115px;
width: 100%;
white-space: pre-line;
}
ul li {
display: flex;
align-items: center;
margin: 0 !important;
border-top: none;
margin-top: 0;
padding-top: 0;
img {
width: 60px;
}
.product-name {
margin-left: 7px !important;
}
&:not(:first-child) {
margin-top: 8px;
padding-top: 8px;

View File

@ -1,11 +1,407 @@
body .container-main.container-order-form .orderform-template.active {
.mini-cart {
width: 32.3242%;
max-width: 331px;
width: 100%;
margin-left: unset;
margin-right: 0;
float: right;
.summary-template-holder {
padding: 0px !important;
}
tfoot {
border-top: 1px solid $color-gray9;
}
#go-to-cart-button {
border-right: 1px solid $color-gray9;
border-left: 1px solid $color-gray9;
width: 94.3%;
max-width: 329px;
text-align: end;
margin: auto;
padding: 19px 17px 10px 0;
}
.table {
border: 1px solid $color-gray9;
border-radius: 0 0 8px 8px;
display: flex;
flex-direction: column;
tr {
.Items {
display: flex;
align-items: center;
justify-content: space-between;
}
.info {
padding: 25px 142px 25px 17px;
width: 62px;
}
.Discounts {
display: flex;
align-items: center;
}
.monetary {
padding: 25px 17px;
}
}
}
}
.orderform-template-holder {
width: 66.1132%;
.client-profile-data {
.filled {
padding: 24px 17px 36px !important;
}
.box-info {
p {
span {
margin-left: 0;
}
}
}
.accordion-group {
border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 17px 17px 44px 17px;
.accordion-heading {
.accordion-toggle {
&::after {
content: 'Identificação';
font-size: 16px;
}
}
span {
font-size: 0;
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
i::before {
display: none;
fill: $color-black-500;
}
}
a {
align-items: center;
background-color: transparent;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 0;
&::after {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png');
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
img {
width: 20px;
height: 20px;
}
}
}
}
}
.shipping-data {
padding: 24px 16px 36px;
.accordion-group {
.accordion-heading {
span {
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
i::after {
display: none;
fill: $color-black-500;
}
}
a {
align-items: center;
background-color: $color-black-500;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
background: transparent;
box-shadow: none;
.icon-edit {
&::before {
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
}
}
#postalCode-finished-loading {
border-radius: 100px;
div {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
border: 1px solid $color-white1;
}
.shp-method-option-active {
border: 1px solid $color-black;
background-color: $color-white;
border-radius: 100px;
color: $color-black ;
text-shadow: none;
}
}
}
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0;
}
.vtex-omnishipping-1-x-addressFormPart1 {
.ship-country {
display: none;
}
.ship-postalCode {
display: flex;
flex-direction: column;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
input {
max-width: 100%;
width: 97%;
height: 45px;
border: 1px solid $color-gray7;
border-radius: 8px;
}
small {
margin-top: 10px;
margin-left: 0 !important;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
}
}
}
.vtex-omnishipping-1-x-address {
div {
display: flex;
flex-direction: column;
.ship-number, .ship-complement, .ship-receiverName{
width: 100%;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
margin-bottom: 3px;
}
input {
border: 1px solid #E0E0E0;
border-radius: 8px;
width: 95%;
padding: 6px 6px;
&::placeholder {
color: $color-gray2;
}
}
}
}
}
.vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
margin-bottom: 11px;
}
#delivery-packages-options {
border: 1px solid $color-gray9 !important;
border-radius: 8px !important;
.vtex-omnishipping-1-x-leanShippingText {
border-right: 1px solid $color-gray9;
div {
span {
font-family: $font-family !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 16px !important;
color: $color-gray2 !important;
}
}
}
div {
color: $color-gray2;
}
.vtex-omnishipping-1-x-leanShippingOptionActive {
background-color: $color-gray11;
svg {
height: 12px;
width: 12px;
background-color: $color-blue-200;
border-radius: 3px;
}
}
label {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
.shp-option-icon {
border: 1px solid $color-gray7;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
svg {
path {
display: none;
}
}
}
}
}
.box-step {
.btn-go-to-payment {
width: 100%;
border-radius: 8px;
background-color: $color-blue-200;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
&:hover {
background-color: $color-blue-100;
}
}
.box-step-content {
form {
.link-gift-card {
display: none;
}
}
}
}
.btn-submit-wrapper {
#go-to-shipping {
width: 100%;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
background-color: #00c8ff;
color: #fff;
margin: 0 !important;
}
}
}
.payment-data {
.accordion-group {
padding: 24px 17px 29px;
.accordion-heading {
span {
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
transition: all 5s ease-in-out;
}
a {
align-items: center;
background: transparent;
border: none;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
box-shadow: none;
.icon-edit {
&::before {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png');
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
}
}
}
}
}
}

View File

@ -9,6 +9,7 @@ $color-black: #292929;
$color-black-500: #000000;
$color-white: #fff;
$color-white1: #f5f5f5;
$color-gray: #6c6c6c;
$color-gray2: #7d7d7d;
@ -20,6 +21,7 @@ $color-gray7: #c4c4c4;
$color-gray8: #2e2d2d;
$color-gray9: #E0E0E0;
$color-gray10: #808080;
$color-gray11:#F2F2F2;
$color-blue-100: #6fd5f2;
$color-blue-200: #00C8FF;