Rafael_Sampaio_de_Oliveira/m3-academy-template-checkout-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona css checkout dados pessoais 1024px #24

Merged
Rafael_Sampaio_de_Oliveira merged 1 commits from feature/adiciona-css-checkout-dados-pessoais-1024px into development 2022-12-21 11:33:41 +00:00
Conversation 0 Commits 1 Files Changed 6 +175 -24
6 changed files with 175 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,17 +8,17 @@ export default class Footer {
async init() {
this.list = await this.fetchApiData();
await this.selectors();
this.events();
this.cartTitle = await waitElement("#cart-title");
if (window.location.hash === "#/cart") {
await this.cartUpdate();
}
this.emptyButton = await waitElement(".link-choose-products");
this.paymentsMethods = await waitElement(".footerCheckout__payments");
this.certification = await waitElement(".footerCheckout__vtexpci");
this.emptyCartButton();
this.paymentsMethods = await waitElement(".footerCheckout__payments");
this.addPaymentsMethodsIcons();
this.certification = await waitElement(".footerCheckout__vtexpci");
this.addCertificationIcon();
this.events();
this.items = await waitElement(".footerCheckout__prateleira-container");
await this.renderItems();
await this.addCarrossel();
@ -39,7 +39,6 @@ export default class Footer {
events() {
window.addEventListener("hashchange", this.outPrateleira.bind(this));
window.addEventListener("resize", this.onRisize.bind(this));
}
async cartUpdate() {
@ -176,12 +175,6 @@ export default class Footer {
`;
}
async onRisize(e) {
const windowSize = e.target.innerWidth;
console.log(windowSize);
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({
@ -192,6 +185,14 @@ export default class Footer {
"<button><img class='a-left control-c prev slick-prev' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg' /></button>",
nextArrow:
"<button><img class='a-right control-c next slick-next' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg' /></button>",
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
},
},
],
});
}
}

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

@ -80,7 +80,7 @@
width: 54.883%;
@media (max-width: 1024px) {
width: 97% !important;
width: 96.875% !important;
}
input {
@ -128,6 +128,10 @@
width: 12.762%;
}
@media (max-width: 900px) {
font-size: 8px;
}
@media (max-width: 490px) {
height: 48px;
margin: 0;
@ -149,7 +153,7 @@
border: 1px solid $color-black;
border-radius: 5px;
margin-top: 10px;
width: 35.743%;
width: 366px;
@media (min-width: 1025px) and (max-width: 1026px) {
margin-top: 0;
@ -157,7 +161,7 @@
}
@media (max-width: 1024px) {
width: 30.177%;
width: 343px;
}
h3 {
@ -204,6 +208,16 @@
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
width: 90.052%;
@media (max-width: 1024px) {
width: 293.77%;
margin-left: 16px;
}
@media (max-width: 767px) {
width: 141.5%;
}
// .accordion-heading {
// span {
@ -253,7 +267,7 @@
color: $color-gray9;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;

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

@ -74,6 +74,8 @@
display: flex;
align-items: center;
color: $color-black;
display: flex;
justify-content: space-between;
&:not(:first-child) {
margin-top: 8px;
@ -233,11 +235,8 @@
@media (max-width: 1024px) {
position: absolute;
top: 0;
}
@include mq(lg, max) {
width: 250px;
margin-left: 65px;
width: 15%;
}
a {
@ -379,6 +378,11 @@
@media (max-width: 1024px) {
margin: 28px 0 0 16px;
width: 11% !important;
}
@media (max-width: 750px) {
width: 15% !important;
}
@media (max-width: 490px) {
@ -396,9 +400,9 @@
color: $color-gray2;
box-shadow: none;
@include mq(lg, max) {
width: 24px !important;
}
// @include mq(lg, max) {
// width: 24px !important;
// }
}
.icon-plus-sign {
@ -429,7 +433,7 @@
.item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
position: relative;
bottom: inherit;
left: inherit;
height: inherit;

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

@ -7,6 +7,11 @@ body .container-main.container-order-form .orderform-template.active {
border: 1px solid $color-gray5;
border-radius: 8px;
@media (max-width: 1024px) {
width: 98.413%;
margin-left: 16px;
}
.description {
margin: 0 !important;
width: 90px;
@ -21,7 +26,7 @@ body .container-main.container-order-form .orderform-template.active {
.url {
height: 60px;
width: 78.93px;
width: 60px;
margin-right: 7px;
img {
@ -33,6 +38,117 @@ body .container-main.container-order-form .orderform-template.active {
.orderform-template-holder {
width: 66.1132%;
.row-fluid {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
.client-email {
@media (max-width: 767px) {
width: 102%;
}
#client-email {
width: 95.67%;
@media (max-width: 1024px) {
width: 98.54%;
}
@media (max-width: 767px) {
max-width: 100% !important;
height: 42px !important;
}
}
}
.client-first-name {
width: 50%;
margin: 0;
@media (max-width: 1024px) {
}
#client-first-name {
width: 85.87%;
@media (max-width: 1024px) {
width: 95.512%;
}
}
}
.client-last-name {
width: 50%;
label {
margin-left: 10px;
}
@media (max-width: 1024px) {
}
#client-last-name {
width: 85.87%;
margin-left: 8px;
@media (max-width: 1024px) {
width: 95.512%;
margin-left: 7px;
}
}
}
.client-document {
width: 50%;
margin-right: 0;
@media (max-width: 1024px) {
margin: 0;
}
#client-document {
width: 86.585%;
@media (max-width: 1024px) {
width: 95.512%;
margin-bottom: 0;
}
}
}
.client-phone {
width: 50%;
@media (max-width: 1024px) {
margin: 0;
}
label {
margin-left: 10px;
}
#client-phone {
width: 85.87%;
margin-left: 8px;
@media (max-width: 1024px) {
width: 95.512%;
margin-bottom: 0;
}
}
}
#shipping-data {
margin: 0;
}
#payment-data {
margin: 0;
.step {
margin-bottom: 17px;
}
}
}
.client-profile-data {
.accordion-group {
.accordion-heading {
@ -169,4 +285,10 @@ body .container-main.container-order-form .orderform-template.active {
color: $color-gray2;
}
}
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
padding-right: 16px;
}
}

2
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -132,6 +132,7 @@
@media (max-width: 1024px) {
left: 2.5%;
top: 48%;
}
}
.slick-next {
@ -147,6 +148,7 @@
@media (max-width: 1024px) {
left: 96.5%;
top: 48%;
}
}
.slick-arrow.slick-hidden {

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

@ -82,6 +82,10 @@
@media (min-width: 1025px) and (max-width: 1107px) {
font-size: 11.5px;
}
@media (min-width: 600px) and (max-width: 690px) {
font-size: 10.5px;
}
}
&__sku {
@ -113,6 +117,10 @@
@media (min-width: 1025px) and (max-width: 1107px) {
font-size: 9.7px;
}
@media (min-width: 600px) and (max-width: 714px) {
font-size: 8.5px;
}
}
}