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 das page de 1024 a 375

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-16 20:14:12 -03:00
parent 28d6827264
commit 86c11efd2e
8 changed files with 662 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { isSmallerThen768 } from "../helpers/MediasMatch";
import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils";
import waitForEl from "../helpers/waitForEl";

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

@ -8,7 +8,7 @@ export default class Footer {
this.addCarrossel();
}
async init() {
await this.selectors();
this.mostraFooter();
@ -89,7 +89,7 @@ export default class Footer {
});
});
}).then(() => { this.addCarrossel();});
this.footerStamps.innerHTML = `

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

@ -1,226 +1,250 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.link-cart {
a {
color: $color-black;
font-size: 14px;
.link-cart {
a {
color: $color-black;
font-size: 14px;
&:hover {
color: lighen($color-black, 10);
}
}
}
&:hover {
color: lighen($color-black, 10);
}
}
}
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
h3 {
margin-bottom: 16px;
h3 {
margin-bottom: 16px;
span {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $color-liPonto;
}
small {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $color-liPonto;
}
}
}
.client-email {
margin: 0 0 16px;
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) {
width: auto;
}
}
button {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
background-color: $color-finalizar;
border-radius: 5px;
border: none;
// font-family: "Open Sans",sans-serif;
height: 54px;
right: 0;
top: 0;
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
span.help.error {
color: red;
}
}
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
h3 {
color: #303030;
margin: 0 0 8px 0;
}
ul {
margin: 0;
li {
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
align-items: center;
color: $color-liPonto;
}
i::before {
color: $color-finalizar;
font-size: 1rem;
opacity: 1;
}
}
}
i::before {
color: $color-black;
font-size: 6rem;
opacity: 0.5;
}
}
}
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
.accordion-heading {
span {
margin-bottom: 8px;
padding: 0;
span {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $color-liPonto;
}
i::before {
fill: #303030;
small {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $color-liPonto;
}
}
}
.client-email {
margin: 0 0 16px;
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) {
width: auto;
}
}
button {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
background-color: $color-finalizar;
border-radius: 5px;
border: none;
// font-family: "Open Sans",sans-serif;
height: 54px;
right: 0;
top: 0;
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
span.help.error {
color: red;
}
}
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
h3 {
color: #303030;
margin: 0 0 8px 0;
}
ul {
margin: 0;
li {
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
align-items: center;
color: $color-liPonto;
}
i::before {
color: $color-finalizar;
font-size: 1rem;
opacity: 1;
}
}
}
i::before {
color: $color-black;
font-size: 6rem;
opacity: 0.5;
}
}
}
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
@media (max-width: 375px) {
margin: 28px 16px 17px 16px;
border: 1px solid #F0F0F0;
border-radius: 8px;
}
.accordion-heading {
span {
margin-bottom: 8px;
padding: 0;
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
i::before {
fill: #303030;
display: none;
}
}
}
}
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;
}
}
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;
}
}
.accordion-inner {
.accordion-inner {
// margin: 0 0 0 17px;
padding: 0;
padding: 0;
/* General configurations */
/* General configurations */
.client-notice {
color: $color-black;
}
.client-notice {
color: $color-black;
}
p {
label {
color: $color-gray2;
font-weight: 500;
}
.vtex-omnishipping-1-x-SummaryItemContent{
display: block;
select,
input {
border-radius: 0;
border: 1px solid $color-gray3;
box-shadow: none;
}
}
.vtex-omnishipping-1-x-SummaryItemInfo{
border: none;
}
p {
label {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
margin-bottom: 3px;
.help.error {
color: red;
}
}
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-gray2;
font-weight: 500;
text-decoration: underline;
}
}
select,
input {
width: 97%;
border-radius: 8px;
border: 1px solid #E0E0E0;
box-shadow: none;
}
.state-inscription-box span {
font-weight: 500;
}
.help.error {
color: red;
}
}
button.submit {
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-gray2;
font-weight: 500;
text-decoration: underline;
}
}
.state-inscription-box span {
font-weight: 500;
}
button.submit {
width: 100%;
border: none;
border-radius: 5px;
background: $color-finalizar;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
border: none;
border-radius: 5px;
background: $color-finalizar;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
@ -230,102 +254,253 @@ color: $color-liPonto;
letter-spacing: 0.05em;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
}
&:hover {
background: lighten($color-black, 5);
}
&:active {
background: darken($color-black, 5);
}
}
&:active {
background: darken($color-black, 5);
}
}
/* Shipping configurations */
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.ship-postalCode small a {
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
color: #292929;
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
// color: #303030;
// font-weight: 500;
// text-decoration: underline;
}
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
.vtex-omnishipping-1-x-deliveryGroup {
p {
svg path {
fill: #d8c8ac;
}
}
}
}
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
margin-bottom: 11px;
// color: #303030;
// font-size: 14px;
// font-weight: 500;
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean {
.shp-summary-group-info {
border-color: $color-gray4;
}
border: 1px solid #E0E0E0;
border-radius: 8px;
// border: 1px solid $color-gray4;
// border-radius: 0;
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
label {
// background-color: $color-white;
// box-shadow: none;
// color: #303030;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@include mq(md, max) {
background-position: 8px 9px;
}
/* Neutras/Cinza */
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
color: #7D7D7D;
padding: 8px 12px;
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
svg path {
fill: #d8c8ac;
}
}
}
}
.shp-summary-group-price {
padding-right: 16px;
}
.delivery-address-title {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
padding: 11px;
// color: #303030;
// font-size: 14px;
// font-weight: 500;
}
.shp-summary-group-info {
border-color: $color-gray4;
}
.address-summary {
background: none;
border-color: $color-gray4;
color: #303030;
padding: 12px;
border-radius: 8px;
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
display: none;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background: #FFFFFF;
// background-color: #d8c8ac;
// border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: $color-gray2;
// text-shadow: 1.3px 1px lighten($color-black, 50);
}
}
}
}
.shp-option-text-label {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
}
}
}
}
}
.street,
.city,
.state-delimiter,
.state {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
.link-edit {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: none;
color: #00C8FF;
text-decoration: none;
}
.vtex-omnishipping-1-x-leanShippingOptionActive {
.vtex-omnishipping-1-x-leanShippingTextLabe {
color: $color-gray2;
}
}
.client-profile-data {
.accordion-group {
.accordion-heading {
.accordion-toggle {
&::after {
content: "Identificação";
font-size: 16px;
}
}
}
span {
color: #303030;
margin-bottom: 25px;
padding: 0;
font-size: 0 !important;
i::before {
display: none;
fill: #303030
}
}
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: "";
}
img {
width: 20px;
height: 20px;
}
}
// }
}
}

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

@ -21,6 +21,15 @@
border-radius: 5px;
padding: 16px;
@media (max-width: 375px) {
padding: 7px 16px;
.product-name{
margin:0 ;
}
}
@include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
@ -36,7 +45,8 @@
.cart-fixed {
font-family: $font-family;
width: 99%;
border: 1px solid;
height: 397px !important;
border: 1px solid #E5E5E5;
h2 {
margin: 24px 0 0 17px;
@ -78,7 +88,7 @@
.shipping-date,
.price {
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
@ -93,19 +103,22 @@
border-top: none;
background: $color-white;
.accordion-inner {
.accordion-inner {
padding: 0;
margin: 0 0 0 41px;
margin: 0 0 0 50px;
}
}
#go-to-cart-button a {
color: #303030;
text-decoration: underline;
margin: 0 17px 0 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: $color-liPonto;
margin: 0 17px 0 0;
}
.summary-totalizers {
@ -115,12 +128,19 @@
}
#payment-data-submit {
background: $color-black;
border: none;
border-radius: 0;
background: #298541;
border-radius: 8px;
color: $color-white;
outline: none;
transition: all 0.2s linear;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
/* identical to box height */
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
@ -140,7 +160,7 @@
.product-item {
padding: 16px 0;
}
.quantity{
.quantity {
display: none;
}
@ -153,18 +173,24 @@
line-height: 16px;
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
display: none;
}
}
@media (max-width: 1024px) {
display: none;
}
}
.product-image {
height: auto;
padding: 0;
width: 60px;
@media (max-width: 1024px) {padding: 5px;}
@include mq(sm, max) {
width: 72px;
@ -175,6 +201,13 @@
max-width: 100%;
width: auto;
@media (max-width: 1024px) {
height: 90px;
max-width: 100%;
width: 60px;
}
@include mq(sm, max) {
height: 72px;
width: auto;
@ -188,7 +221,7 @@
white-space: normal;
margin: 15px 0 0 7px;
padding-right: 0;
font-family: 'Tenor Sans';
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
@ -196,6 +229,15 @@
color: #000000;
@media (max-width: 375px) {
margin: 0;
}
@media (max-width: 1024px) {
display: block;
}
@include mq(lg, max) {
width: 250px;
@ -207,7 +249,7 @@
font-weight: 400;
font-size: 12px;
line-height: 14px;
transition: ease-in .22s all;
transition: ease-in 0.22s all;
&:hover {
color: darken($color-blue, 10);
@ -215,7 +257,7 @@
}
@media (max-width: 490px) {
margin-left: 23px;
margin-left: 16px;
}
}
@ -243,7 +285,7 @@
}
@media (max-width: 490px) {
position: absolute;
// position: absolute;
bottom: 0;
right: 0;
}
@ -277,11 +319,14 @@
max-width: 118px;
padding: 0;
width: max-content !important;
border: 1px solid #F0F0F0;
border: 1px solid #f0f0f0;
border-radius: 8px;
@media (max-width: 490px) {
margin-left: 84px !important;
margin-left: 74px !important;
}
@media (max-width: 1024px) {
margin: 0 auto 0 0;
}
input {
@ -317,7 +362,6 @@
// content: "-";
font-size: 16px;
color: $color-finalizar;
}
}
@ -330,7 +374,6 @@
}
.item-quantity-change {
// margin: 0 11px;
// background: #00C8FF;
// width: 16px;
@ -358,7 +401,7 @@
}
span {
font-family: 'Tenor Sans';
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -410,13 +453,19 @@
.srp-container {
padding: 0 0 0 10px;
@media (max-width: 1024px) {
padding: 0;
margin: 16px;
}
@include mq(md, max) {
padding: 0 16px;
}
.srp-main-title {
margin: 32px 0 12px;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
@ -480,7 +529,7 @@
outline: none;
width: 100%;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
@ -518,14 +567,14 @@
}
.blue {
ont-family: 'Open Sans';
ont-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
align-items: center;
text-transform: uppercase;
color: #000
color: #000;
}
label {
@ -547,7 +596,6 @@
line-height: 16px;
color: $color-liPonto;
}
input {
@ -561,7 +609,7 @@
width: 172px;
}
&~button {
& ~ button {
background-color: $color-finalizar;
border: none;
border-radius: 5px;
@ -575,7 +623,7 @@
top: 36px;
transition: all 0.2s linear;
width: 96px;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
@ -613,7 +661,6 @@
}
.srp-result {
strong,
.srp-items {
color: #303030;
@ -677,6 +724,11 @@
padding: 0;
width: 346px;
@media (max-width: 1024px) {
width: 100%;
}
.coupon-data {
#cart-link-coupon-add {
text-decoration: none;
@ -723,6 +775,12 @@
line-height: 14px;
color: $color-gray2;
cursor: none;
@media (max-width: 1024px) {
display: flex;
margin-left: 15px;
}
}
.coupon-fields {
@ -752,6 +810,12 @@
padding: 0 12px;
max-width: 160px;
@media (max-width: 1024px) {
width: 100%;
max-width: 853px;
}
@include mq(sm, max) {
max-width: 100%;
width: 100%;
@ -772,16 +836,13 @@
// width: 94px;
text-transform: uppercase;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
@include mq(md, max) {
width: 138px;
}
@ -812,11 +873,17 @@
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: $color-black;
padding: 50px 17px 0 0;
@media (max-width: 1024px) {
padding: 0 17px 10px 16px;
}
@media (max-width: 375px) {
padding: 10px;
}
}
&.info {
@ -830,17 +897,15 @@
}
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-family: "Open Sans";
// font-style: normal;
// font-weight: 700;
// font-size: 18px;
@ -856,6 +921,15 @@
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);
@ -864,8 +938,8 @@
}
@include mq(md, min) {
margin: 0;
padding-bottom: 50px;
// margin: 0;
// padding-bottom: 50px;
}
.link-choose-more-products-wrapper {
@ -912,15 +986,39 @@
vertical-align: middle;
line-height: 19px;
text-shadow: none;
}
}
}
}
}
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
.item-remove{
display: block;
margin: -20px;
}
.coupon-data{
margin-bottom: 20px;
}
.icon-lock{
&::before{
display: none;
content: "";
}
}
.ship-number,
.ship-complement,
.ship-receiverName {
width: 100%;
margin-bottom: 15px;
}
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
}

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

@ -4,8 +4,19 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
@media (max-width: 375px) {
margin: 0 16px;
width: 91%;
border-bottom: 0;
}
}
.orderform-template-holder {
width: 66.1132%;
@media (max-width: 375px) {
width: 100%;
}
}
}

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

@ -52,6 +52,31 @@ body {
.container-order-form,
.container-cart {
width: 80%;
@media (max-width: 375px) {
width: 100%;
.full-cart .cart table tbody tr{
padding: 0;
margin: 0;
}
}
@media (max-width: 1024px) {
width: 100%;
margin: 0;
.product,
.product-price,
// .quantity-price,
.shipping-date{
display: none;
}
}
}
}
@ -75,11 +100,22 @@ body {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-transform: uppercase;
color: $color-liPonto;
@media (max-width: 1024px) {
margin-left: 16px;
}
@media (max-width: 375px) {
margin-left: 15px;
}
@include mq(md, max) {
margin-left: 30px;
}

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

@ -191,3 +191,7 @@
}
}
.desativaSlick{
display: none;
}

4
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -217,3 +217,7 @@
}
}
}
.ship-country{
display: none;
}