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

stilização do screen 2500px

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-18 18:15:15 -03:00
parent 0cd54f2380
commit 0edadf08ab
5 changed files with 476 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
/* eslint-disable prettier/prettier */
import { isSmallerThen768 } from "../helpers/MediasMatch"; import { isSmallerThen768 } from "../helpers/MediasMatch";
import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils"; import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils";
import waitForEl from "../helpers/waitForEl"; import waitForEl from "../helpers/waitForEl";
@ -40,6 +41,7 @@ export default class CheckoutUI {
init() { init() {
this.configThumb(); this.configThumb();
this.removerTitulo();
waitForEl(".product-image img", this.resizeImages.bind(this)); waitForEl(".product-image img", this.resizeImages.bind(this));
$(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this));
} }
@ -68,4 +70,25 @@ export default class CheckoutUI {
); );
}); });
} }
async removerTitulo(){
let orderForm = await window.vtexjs.Checkout.getOrderForm();
let items = orderForm.items.length;
let idCart = document.querySelector("#cart-title");
$(window).on("orderFormUpdated.vtex", (evt, of) => {
if(of.items.length <= 0){
idCart.style.display = "none";
}
else {
idCart.style.display = "block";
}
if( window.location.hash === '#/shipping' || window.location.hash === '#/payment' ){
idCart.style.display = "none";
}
});
if(items === 0){
idCart.style.display = "none";
}
}
} }

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

@ -144,14 +144,27 @@
@media (max-width: 375px) { @media (max-width: 375px) {
margin: 28px 16px 17px 16px; margin: 28px 16px 17px 0px;
border: 1px solid #F0F0F0; border: 1px solid #F0F0F0;
border-radius: 8px; border-radius: 8px;
width: 87% !important;
} }
@media (max-width: 1024px) {
width: 96%;
}
.accordion-heading { .accordion-heading {
.accordion-toggle-active{
i::after{
content: "";
}
}
span { span {
margin-bottom: 8px; margin-bottom: 8px;
@ -164,8 +177,22 @@
color: #292929; color: #292929;
i::before { i::before {
fill: #303030; content: "";
display: none; // fill: #303030;
// display: none;
}
i::after {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") ;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
display: block;
content: "";
float: right;
} }
} }
@ -178,6 +205,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
opacity: 0;
cursor: pointer;
} }
} }
@ -189,19 +218,22 @@
.client-notice { .client-notice {
color: $color-black; color: $color-black;
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: none; display: none;
} }
} }
.vtex-omnishipping-1-x-SummaryItemContent{ .vtex-omnishipping-1-x-SummaryItemContent {
display: block; display: block;
}
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
}
}
.vtex-omnishipping-1-x-SummaryItemInfo{
border: none;
}
p { p {
label { label {
font-family: 'Open Sans'; font-family: 'Open Sans';
@ -353,7 +385,7 @@
color: #303030; color: #303030;
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
@include mq(md, max) { @include mq(md, max) {
@ -484,46 +516,45 @@ border-radius: 8px;
} }
} }
a { // // a {
align-items: center; // // align-items: center;
background: transparent; // // background: transparent;
background-color: white; // // background-color: white;
border-radius: 8px; // // border-radius: 8px;
border: none; // // border: none;
color: white; // // color: white;
display: flex; // // display: flex;
justify-content: center; // // justify-content: center;
padding: 0; // // padding: 0;
margin-top: 10px; // // margin-top: 10px;
&::after { // // &::after {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); // // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: 20px; // // background-size: 20px;
width: 20px; // // width: 20px;
height: 20px; // // height: 20px;
content: ""; // // content: "";
} // // }
// // img {
// // width: 20px;
// // height: 20px;
// // }
// // }
// // }
}
img {
width: 20px;
height: 20px;
}
}
// }
}
} }
.pg-deposito,
.pg-transferencia-bancaria,
.link-payment-discounts-cod {
display: none;
}
.row-fluid{
.row-fluid {
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 99%; width: 99%;
margin-left: 5px; margin-left: 5px;
} }
} }

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

@ -24,8 +24,8 @@
@media (max-width: 375px) { @media (max-width: 375px) {
padding: 7px 16px; padding: 7px 16px;
.product-name{ .product-name {
margin:0 ; margin: 0;
} }
} }
@ -53,6 +53,8 @@
margin-left: 5px; margin-left: 5px;
height: 397px !important; height: 397px !important;
margin-top: 17px; margin-top: 17px;
border: 1px solid #E5E5E5;
border-radius: 8px;
} }
h2 { h2 {
@ -175,10 +177,27 @@
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
} }
.quantity {
span,
.product-name,
.total-selling-price,
.old-product-price,
.new-product-price,
.new-product-price-label,
.best-price,
.quantity-price span,
.product-name a {
@media (min-width: 2500px) {
font-weight: 400 !important;
font-size: 24px !important;
line-height: 28px !important;
}
} }
.quantity {}
th { th {
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 16px;
@ -188,23 +207,37 @@
line-height: 16px; line-height: 16px;
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
display: none; display: none;
} }
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: none; display: none;
} }
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
} }
.product-image { .product-image {
height: auto; height: auto;
padding: 0; padding: 0;
width: 60px; width: 60px;
@media (max-width: 1024px) {padding: 5px;}
@media (max-width: 1024px) {
padding: 5px;
}
@include mq(sm, max) { @include mq(sm, max) {
@ -218,8 +251,8 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
height: 90px; height: 90px;
max-width: 100%; max-width: 100%;
width: 60px; width: 60px;
} }
@ -340,10 +373,15 @@
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 74px !important; margin-left: 74px !important;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin: 0 auto 0 0; margin: 0 auto 0 0;
} }
@media (min-width: 2500px) {
margin-top: 35px;
}
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid transparent; border: 1px solid transparent;
@ -392,6 +430,7 @@
} }
.item-quantity-change { .item-quantity-change {
// margin: 0 11px; // margin: 0 11px;
// background: #00C8FF; // background: #00C8FF;
// width: 16px; // width: 16px;
@ -432,6 +471,11 @@
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@media (min-width: 2500px) {
padding-right: 20px;
}
} }
.item-remove { .item-remove {
@ -472,8 +516,8 @@
padding: 0 0 0 10px; padding: 0 0 0 10px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
padding: 0; padding: 0;
margin: 16px; margin: 16px;
} }
@ -627,7 +671,7 @@
width: 172px; width: 172px;
} }
& ~ button { &~button {
background-color: $color-finalizar; background-color: $color-finalizar;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -679,6 +723,7 @@
} }
.srp-result { .srp-result {
strong, strong,
.srp-items { .srp-items {
color: #303030; color: #303030;
@ -747,6 +792,10 @@
} }
@media (min-width: 2500px) {
width: 688px;
}
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
@ -795,8 +844,8 @@
cursor: none; cursor: none;
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: flex; display: flex;
margin-left: 15px; margin-left: 15px;
} }
} }
@ -830,7 +879,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100%; width: 100%;
max-width: 853px; max-width: 853px;
} }
@ -903,170 +952,232 @@
padding: 10px; padding: 10px;
} }
}
&.info { @media (min-width: 2500px) {
text-align: left;
@media (max-width: 1024px) {
margin-top: 43px;
font-weight: 400 !important;
font-size: 28px !important;
line-height: 33px !important;
} }
} }
&.monetary { &.info {
text-align: right; text-align: left;
@media (max-width: 1024px) {
margin-top: 43px;
}
}
&.monetary {
text-align: right;
@media (min-width: 2500px) {
width: 153px;
}
}
}
}
tfoot {
td.info,
td.monetary {
// padding: 0 17px 0 0;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black;
font-family: "Open Sans";
// font-style: normal;
// font-weight: 700;
// font-size: 18px;
color: #292929;
} }
} }
} }
}
}
tfoot { .cart-links-bottom {
td.info, display: flex;
td.monetary { flex-direction: column;
// padding: 0 17px 0 0; width: 343px;
font-style: normal;
font-weight: 400;
@media only screen and (max-width: 1024px) {
width: 97%;
padding-bottom: 0;
margin: 0 15px;
}
@media only screen and (min-width: 2500px) {
width: 688px;
}
@include mq(md, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
}
@include mq(md, min) {
// margin: 0;
// padding-bottom: 50px;
}
.link-choose-more-products-wrapper {
display: block;
text-align: center;
margin-bottom: 16px;
@include mq(md, max) {
margin-bottom: 0px;
}
a {
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-blue;
}
}
.btn-place-order-wrapper {
a {
background: $color-finalizar;
border: none;
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
&:hover {
background-color: darken($color-green, 5);
}
&:after {
content: "finalizar compra";
font-family: $font-family;
font-weight: 700;
font-size: 14px; font-size: 14px;
letter-spacing: 0.05em;
color: $color-liPonto;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px; line-height: 19px;
color: $color-black; text-shadow: none;
font-family: "Open Sans";
// font-style: normal; @media (min-width: 2500px) {
// font-weight: 700;
// font-size: 18px; font-weight: 700;
color: #292929; font-size: 28px;
line-height: 38px;
}
} }
} }
} }
} }
} }
.cart-links-bottom { .coupon-fieldset {
display: flex; padding-top: 40px;
flex-direction: column;
width: 343px;
@media only screen and (max-width: 1024px) {
width: 97%;
padding-bottom: 0;
margin: 0 15px;
}
@include mq(md, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
}
@include mq(md, min) {
// margin: 0;
// padding-bottom: 50px;
}
.link-choose-more-products-wrapper {
display: block;
text-align: center;
margin-bottom: 16px;
@include mq(md, max) {
margin-bottom: 0px;
}
a {
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-blue;
}
}
.btn-place-order-wrapper {
a {
background: $color-finalizar;
border: none;
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
&:hover {
background-color: darken($color-green, 5);
}
&:after {
content: "finalizar compra";
font-family: $font-family;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
color: $color-liPonto;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px;
text-shadow: none;
}
}
}
} }
}
.coupon-fieldset{ .item-remove {
padding-top: 40px;
}
.item-remove{ display: block;
margin: -20px;
}
display: block; .coupon-data {
margin: -20px; margin-bottom: 20px;
} }
.coupon-data{
margin-bottom: 20px;
}
.icon-lock{ .icon-lock {
&::before{ &::before {
display: none; display: none;
content: ""; content: "";
} }
} }
.ship-number, .ship-number,
.ship-complement, .ship-complement,
.ship-receiverName { .ship-receiverName {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
} }
.vtex-shipping-preview-0-x-pc .ship-country { .vtex-shipping-preview-0-x-pc .ship-country {
display: none; display: none;
} }
.description{
span.pull-left{display: none;} .description {
}
.cart-items tbody td { span.pull-left {
vertical-align: middle; display: none;
padding: 0px; }
margin: -12px; }
}
.vtex-omnishipping-1-x-svg{ .cart-items tbody td {
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); vertical-align: middle;
border: 1px solid #C4C4C4; padding: 0px;
border-radius: 3px; margin: -12px;
} }
.vtex-omnishipping-1-x-leanShippingOptionActive{ .vtex-omnishipping-1-x-svg {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
} border: 1px solid #C4C4C4;
border-radius: 3px;
}
.vtex-omnishipping-1-x-leanShippingOptionActive {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
}
p.client-document {
margin-right: 4px;
}
.ship-postalCode {
display: contents;
}
.input-small {
@media (max-width: 1024px) {
width: 97% !important;
max-width: unset;
}
}
.vtex-omnishipping-1-x-addressFormPart1 input {
@media (max-width: 1024px) {
width: 97% !important;
max-width: unset !important;
}
}
.srp-main-title {
@media (min-width: 2500px) {
font-size: 48px !important;
line-height: 65px !important;
}
}

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

@ -10,8 +10,8 @@ body .container-main.container-order-form .orderform-template.active {
} }
@media (max-width: 375px) { @media (max-width: 375px) {
margin: 0 16px; margin: 0 18px;
width: 91%; width: 95%;
border-bottom: 0; border-bottom: 0;
} }
@ -29,6 +29,87 @@ body .container-main.container-order-form .orderform-template.active {
} }
} }
.link-gift-card{
#show-gift-card-group
{ display: none;}
}
.payment-body{
.accordion-inner{
.box-step{
display: flex;
.form-step{
display: flex;
@media (max-width: 1024px) {
display: block;
}
.payment-group{
.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;
}
span{
background-image: none !important;
font-family: $font-family;
color: $color-liPonto;
font-size: 14px;
line-height: 24px;
text-align: center;
padding: 13px;
}
a{
background: $color-gray3;
border: 1px solid $color-liPonto;
border-radius: 6px;
margin-bottom: 12px;
padding: 0;
width: 209px;
text-decoration: none;
@media (max-width: 1024px) {
width: 958px;
}
@media (max-width: 375px) {
width: 309px !important;
margin: 7px;
}
}
.active{
border: 1px solid #F15A31;
background: rgba(220, 221, 227, 0.3);
margin-left: 5px;
span{
color:#F15A31 ;
}
}
}
}
}
}
}
} }
.row-fluid { .row-fluid {
@ -40,6 +121,45 @@ body .container-main.container-order-form .orderform-template.active {
} }
.steps-view{
width: 397px !important;
margin-left: 115px;
margin-top: 34px;
@media (max-width: 1024px) {
width: 934px !important;
margin: 7px;
}
@media (max-width: 375px) {
width: 286px !important;
margin-left: 6px !important;
}
}
.box-step-content{
@media (max-width: 1024px) {
margin-left: -10px;
}
}
.shipping-data
{
width: 330px;
}
.container-order-form{
width: 88%;}
.PaymentCardHolderDocument{
display: none;
}
p.client-first-name, p.client-first-name,
.client-last-name{ .client-last-name{
@media (max-width: 1024px) { @media (max-width: 1024px) {

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

@ -51,7 +51,7 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; width: 88%;
@media (max-width: 375px) { @media (max-width: 375px) {
width: 100%; width: 100%;
@ -108,7 +108,7 @@ body {
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin-left: 16px; margin-left: 16px;
} }