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 { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils";
import waitForEl from "../helpers/waitForEl";
@ -40,6 +41,7 @@ export default class CheckoutUI {
init() {
this.configThumb();
this.removerTitulo();
waitForEl(".product-image img", 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) {
margin: 28px 16px 17px 16px;
margin: 28px 16px 17px 0px;
border: 1px solid #F0F0F0;
border-radius: 8px;
width: 87% !important;
}
@media (max-width: 1024px) {
width: 96%;
}
.accordion-heading {
.accordion-toggle-active{
i::after{
content: "";
}
}
span {
margin-bottom: 8px;
@ -164,8 +177,22 @@
color: #292929;
i::before {
fill: #303030;
display: none;
content: "";
// 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;
justify-content: center;
padding: 6px 5px 6px 8px;
opacity: 0;
cursor: pointer;
}
}
@ -189,19 +218,22 @@
.client-notice {
color: $color-black;
@media (max-width: 1024px) {
display: none;
}
}
.vtex-omnishipping-1-x-SummaryItemContent{
display: block;
.vtex-omnishipping-1-x-SummaryItemContent {
display: block;
}
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
}
}
.vtex-omnishipping-1-x-SummaryItemInfo{
border: none;
}
p {
label {
font-family: 'Open Sans';
@ -353,7 +385,7 @@
color: #303030;
padding: 12px;
border-radius: 8px;
border-radius: 8px;
@include mq(md, max) {
@ -484,46 +516,45 @@ border-radius: 8px;
}
}
a {
align-items: center;
background: transparent;
background-color: white;
border-radius: 8px;
border: none;
color: white;
display: flex;
justify-content: center;
padding: 0;
margin-top: 10px;
// // a {
// // align-items: center;
// // background: transparent;
// // background-color: white;
// // border-radius: 8px;
// // border: none;
// // color: white;
// // display: flex;
// // justify-content: center;
// // padding: 0;
// // margin-top: 10px;
&::after {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
// // &::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;
// // }
// // }
// // }
}
img {
width: 20px;
height: 20px;
}
}
// }
}
}
.pg-deposito,
.pg-transferencia-bancaria,
.link-payment-discounts-cod {
display: none;
}
.row-fluid{
.row-fluid {
@media (max-width: 1024px) {
width: 99%;
margin-left: 5px;
}
}

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

@ -24,8 +24,8 @@
@media (max-width: 375px) {
padding: 7px 16px;
.product-name{
margin:0 ;
.product-name {
margin: 0;
}
}
@ -53,6 +53,8 @@
margin-left: 5px;
height: 397px !important;
margin-top: 17px;
border: 1px solid #E5E5E5;
border-radius: 8px;
}
h2 {
@ -175,10 +177,27 @@
.product-item {
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 {
color: $color-black;
padding: 0 0 16px;
@ -188,23 +207,37 @@
line-height: 16px;
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
display: none;
}
}
@media (max-width: 1024px) {
display: none;
display: none;
}
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
}
.product-image {
height: auto;
padding: 0;
width: 60px;
@media (max-width: 1024px) {padding: 5px;}
@media (max-width: 1024px) {
padding: 5px;
}
@include mq(sm, max) {
@ -218,8 +251,8 @@
@media (max-width: 1024px) {
height: 90px;
max-width: 100%;
width: 60px;
max-width: 100%;
width: 60px;
}
@ -340,10 +373,15 @@
@media (max-width: 490px) {
margin-left: 74px !important;
}
@media (max-width: 1024px) {
margin: 0 auto 0 0;
}
@media (min-width: 2500px) {
margin-top: 35px;
}
input {
background-color: $color-white;
border: 1px solid transparent;
@ -392,6 +430,7 @@
}
.item-quantity-change {
// margin: 0 11px;
// background: #00C8FF;
// width: 16px;
@ -432,6 +471,11 @@
@include mq(md, max) {
display: none;
}
@media (min-width: 2500px) {
padding-right: 20px;
}
}
.item-remove {
@ -472,8 +516,8 @@
padding: 0 0 0 10px;
@media (max-width: 1024px) {
padding: 0;
margin: 16px;
padding: 0;
margin: 16px;
}
@ -627,7 +671,7 @@
width: 172px;
}
& ~ button {
&~button {
background-color: $color-finalizar;
border: none;
border-radius: 5px;
@ -679,6 +723,7 @@
}
.srp-result {
strong,
.srp-items {
color: #303030;
@ -747,6 +792,10 @@
}
@media (min-width: 2500px) {
width: 688px;
}
.coupon-data {
#cart-link-coupon-add {
text-decoration: none;
@ -795,8 +844,8 @@
cursor: none;
@media (max-width: 1024px) {
display: flex;
margin-left: 15px;
display: flex;
margin-left: 15px;
}
}
@ -830,7 +879,7 @@
@media (max-width: 1024px) {
width: 100%;
max-width: 853px;
max-width: 853px;
}
@ -903,170 +952,232 @@
padding: 10px;
}
}
&.info {
text-align: left;
@media (max-width: 1024px) {
margin-top: 43px;
@media (min-width: 2500px) {
font-weight: 400 !important;
font-size: 28px !important;
line-height: 33px !important;
}
}
&.monetary {
text-align: right;
&.info {
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 {
td.info,
td.monetary {
// padding: 0 17px 0 0;
font-style: normal;
font-weight: 400;
.cart-links-bottom {
display: flex;
flex-direction: column;
width: 343px;
@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;
letter-spacing: 0.05em;
color: $color-liPonto;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px;
color: $color-black;
font-family: "Open Sans";
// font-style: normal;
// font-weight: 700;
// font-size: 18px;
color: #292929;
text-shadow: none;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
}
}
}
}
}
.cart-links-bottom {
display: flex;
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 {
padding-top: 40px;
}
}
.coupon-fieldset{
padding-top: 40px;
}
.item-remove {
.item-remove{
display: block;
margin: -20px;
}
display: block;
margin: -20px;
}
.coupon-data{
margin-bottom: 20px;
}
.coupon-data {
margin-bottom: 20px;
}
.icon-lock{
&::before{
.icon-lock {
&::before {
display: none;
content: "";
}
}
.ship-number,
.ship-complement,
.ship-receiverName {
width: 100%;
margin-bottom: 15px;
.ship-number,
.ship-complement,
.ship-receiverName {
width: 100%;
margin-bottom: 15px;
}
}
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
}
.description{
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
}
span.pull-left{display: none;}
}
.description {
.cart-items tbody td {
vertical-align: middle;
padding: 0px;
margin: -12px;
}
span.pull-left {
display: none;
}
}
.vtex-omnishipping-1-x-svg{
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
border: 1px solid #C4C4C4;
border-radius: 3px;
}
.cart-items tbody td {
vertical-align: middle;
padding: 0px;
margin: -12px;
}
.vtex-omnishipping-1-x-leanShippingOptionActive{
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
}
.vtex-omnishipping-1-x-svg {
// 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) {
margin: 0 16px;
width: 91%;
margin: 0 18px;
width: 95%;
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 {
@ -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,
.client-last-name{
@media (max-width: 1024px) {

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

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