DaviKlein/m3-academy-template-checkout-davi-klein
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sass):Adiciona responsividade em todas as telas #9

Merged
DaviKlein merged 1 commits from feature/Responsivo into development 2022-12-19 02:48:09 +00:00
Conversation 0 Commits 1 Files Changed 7 +242 -16
7 changed files with 242 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 338 B

BIN
checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 267 B

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

@ -60,7 +60,7 @@ export default class Footer {
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.payments = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy"); this.iconsFooter = await waitElement(".footerCheckout__developedBy");
this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
this.cartTitle = await waitElement("#cart-title"); this.cartTitle = await waitElement("#cart-title");
} }
@ -259,7 +259,7 @@ export default class Footer {
} }
createDevIcons() { createDevIcons() {
this.devIncons.innerHTML = ` this.iconsFooter.innerHTML = `
<li> <li>
<a href="https://vtex.com/br-pt/"> <a href="https://vtex.com/br-pt/">
<span>Powered By</span> <span>Powered By</span>

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

@ -421,6 +421,9 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin-left: 1.6%; margin-left: 1.6%;
} }
@include mq(l, max) {
margin-bottom: 17px;
}
} }
.shipping-data, .shipping-data,
@ -505,6 +508,15 @@
span[data-i18n="clientProfileData.identification"]::before { span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação"; content: "Identificação";
color: $color-black; color: $color-black;
@media (min-width: 2500px) {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 37px;
color: #292929;
}
} }
.link-box-edit { .link-box-edit {
background: $color-white; background: $color-white;
@ -558,6 +570,15 @@
} }
} }
.form-step { .form-step {
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #7d7d7d;
}
.client-profile-email { .client-profile-email {
margin-bottom: 6px; margin-bottom: 6px;
} }
@ -834,16 +855,35 @@
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
font-family: "Open Sans";
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #292929;
}
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; font-family: "Open Sans";
color: #7d7d7d;
font-style: normal;
font-weight: 700;
font-size: 14px; font-size: 14px;
font-weight: 500; line-height: 19px;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
} }
.shp-lean { .shp-lean {
@ -852,6 +892,64 @@
.vtex-omnishipping-1-x-leanShippingOptionActive { .vtex-omnishipping-1-x-leanShippingOptionActive {
background: #f2f2f2; background: #f2f2f2;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #7d7d7d;
}
.shp-option-text-label {
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #7d7d7d;
}
}
.vtex-omnishipping-1-x-leanShippingIcon {
svg {
width: 18px;
height: 18px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png) !important;
path {
fill: transparent;
}
}
}
}
.vtex-omnishipping-1-x-leanShippingOption {
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #7d7d7d;
}
.shp-option-text-label {
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #7d7d7d;
}
}
.vtex-omnishipping-1-x-leanShippingIcon {
svg {
width: 18px;
height: 18px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png);
path {
fill: transparent;
}
}
}
} }
label { label {
@ -872,9 +970,19 @@
} }
.delivery-address-title { .delivery-address-title {
color: #303030; font-family: "Open Sans";
font-size: 14px; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: #7d7d7d;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -890,29 +998,64 @@
} }
.address-summary { .address-summary {
background: none; font-family: "Open Sans";
border-color: $color-gray4; font-style: normal;
border-radius: 0; font-weight: 400;
color: #303030; font-size: 12px;
line-height: 16px;
color: #7d7d7d;
@media (min-width: 2500px) {
padding: 15px 28px 15px 81px;
paddin-left: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
background-size: 40px;
}
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: #00c8ff;
font-weight: 500;
text-decoration: underline;
} }
} }
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
display: flex;
align-items: center;
letter-spacing: 0.05em;
color: #7d7d7d;
}
} }
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
display: flex;
align-items: center;
letter-spacing: 0.05em;
color: #7d7d7d;
}
} }
.shp-summary-package { .shp-summary-package {

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

@ -75,6 +75,11 @@
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
.shipping-date {
@media (min-width: 2500px) {
display: none;
}
}
.url { .url {
.photo { .photo {

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

@ -109,12 +109,26 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 25px; line-height: 25px;
color: #292929; color: #292929;
float: left; float: left;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 49px;
}
} }
td[data-bind="text: totalLabel"] { td[data-bind="text: totalLabel"] {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: #292929; color: #292929;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 49px;
}
} }
.info, .info,
.monetary { .monetary {
@ -171,6 +185,15 @@ body .container-main.container-order-form .orderform-template.active {
.steps-view { .steps-view {
width: 56.456%; width: 56.456%;
@include mq(c, max) {
margin-left: 0 !important;
}
@include mq(l, max) {
margin: 12px 18px 36.75px 16px;
width: 93%;
}
.payment-method { .payment-method {
} }
} }
@ -178,6 +201,10 @@ body .container-main.container-order-form .orderform-template.active {
.payment-group { .payment-group {
margin: 0; margin: 0;
width: 32.505%; width: 32.505%;
@include mq(l, max) {
width: 100%;
}
.payment-group-list-btn { .payment-group-list-btn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -206,59 +233,107 @@ body .container-main.container-order-form .orderform-template.active {
#payment-group-custom201PaymentGroupPaymentGroup { #payment-group-custom201PaymentGroupPaymentGroup {
display: block; display: block;
@include mq(l, max) {
width: 98%;
}
span { span {
font-size: 0 !important; font-size: 0 !important;
&:after { &::after {
font-family: "Open Sans";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
content: "Boleto Faturado"; content: "Boleto Faturado";
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 24px;
color: #58595b;
}
} }
} }
} }
#payment-group-custom204PaymentGroupPaymentGroup { #payment-group-custom204PaymentGroupPaymentGroup {
display: block; display: block;
@include mq(l, max) {
width: 98%;
}
span { span {
font-size: 0 !important; font-size: 0 !important;
&:after { &:after {
font-family: "Open Sans";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
content: "Cartão de Débito"; content: "Cartão de Débito";
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 24px;
color: #58595b;
}
} }
} }
} }
#payment-group-creditCardPaymentGroup { #payment-group-creditCardPaymentGroup {
display: block; display: block;
@include mq(l, max) {
width: 98%;
}
span { span {
background-image: none !important; background-image: none !important;
font-size: 0 !important; font-size: 0 !important;
text-decoration: none; text-decoration: none;
&:after { &:after {
font-family: "Open Sans";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
content: "Cartão de Crédito"; content: "Cartão de Crédito";
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 24px;
color: #58595b;
}
} }
} }
} }
#payment-group-bankInvoicePaymentGroup { #payment-group-bankInvoicePaymentGroup {
display: block; display: block;
@include mq(l, max) {
width: 98%;
}
span { span {
background-image: none !important; background-image: none !important;
font-size: 0 !important; font-size: 0 !important;
&:after { &:after {
font-family: "Open Sans";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
content: "Boleto à Vista"; content: "Boleto à Vista";
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 24px;
color: #58595b;
}
} }
} }
} }
@ -270,6 +345,9 @@ body .container-main.container-order-form .orderform-template.active {
border-radius: 6px; border-radius: 6px;
span { span {
color: $color-orange; color: $color-orange;
&:after {
color: $color-orange !important;
}
} }
} }
} }