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

Browse Source
This commit is contained in:
DaviHKlein 2022-12-18 23:45:25 -03:00
parent 6bf66ea9c0
commit 4110fa84d0
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.payments = await waitElement(".footerCheckout__payments");
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.cartTitle = await waitElement("#cart-title");
}
@ -259,7 +259,7 @@ export default class Footer {
}
createDevIcons() {
this.devIncons.innerHTML = `
this.iconsFooter.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>

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

@ -421,6 +421,9 @@
@media (max-width: 1024px) {
margin-left: 1.6%;
}
@include mq(l, max) {
margin-bottom: 17px;
}
}
.shipping-data,
@ -505,6 +508,15 @@
span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação";
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 {
background: $color-white;
@ -558,6 +570,15 @@
}
}
.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 {
margin-bottom: 6px;
}
@ -834,16 +855,35 @@
/* Shipping configurations */
.ship-postalCode small a {
font-family: "Open Sans";
color: #303030;
font-weight: 500;
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 {
p {
color: #303030;
font-family: "Open Sans";
color: #7d7d7d;
font-style: normal;
font-weight: 700;
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 {
@ -852,6 +892,64 @@
.vtex-omnishipping-1-x-leanShippingOptionActive {
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 {
@ -872,9 +970,19 @@
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
font-family: "Open Sans";
font-style: normal;
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 {
@ -890,29 +998,64 @@
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
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) {
background-position: 8px 9px;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
color: #00c8ff;
}
}
.shp-summary-group-price,
.shp-summary-package {
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 {
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 {

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

@ -75,6 +75,11 @@
.price {
color: #7d7d7d;
}
.shipping-date {
@media (min-width: 2500px) {
display: none;
}
}
.url {
.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;
color: #292929;
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"] {
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: #292929;
@media (min-width: 2500px) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 49px;
}
}
.info,
.monetary {
@ -171,6 +185,15 @@ body .container-main.container-order-form .orderform-template.active {
.steps-view {
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 {
}
}
@ -178,6 +201,10 @@ body .container-main.container-order-form .orderform-template.active {
.payment-group {
margin: 0;
width: 32.505%;
@include mq(l, max) {
width: 100%;
}
.payment-group-list-btn {
display: flex;
flex-direction: column;
@ -206,59 +233,107 @@ body .container-main.container-order-form .orderform-template.active {
#payment-group-custom201PaymentGroupPaymentGroup {
display: block;
@include mq(l, max) {
width: 98%;
}
span {
font-size: 0 !important;
&:after {
&::after {
font-family: "Open Sans";
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
content: "Boleto Faturado";
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 24px;
color: #58595b;
}
}
}
}
#payment-group-custom204PaymentGroupPaymentGroup {
display: block;
@include mq(l, max) {
width: 98%;
}
span {
font-size: 0 !important;
&:after {
font-family: "Open Sans";
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
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 {
display: block;
@include mq(l, max) {
width: 98%;
}
span {
background-image: none !important;
font-size: 0 !important;
text-decoration: none;
&:after {
font-family: "Open Sans";
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
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 {
display: block;
@include mq(l, max) {
width: 98%;
}
span {
background-image: none !important;
font-size: 0 !important;
&:after {
font-family: "Open Sans";
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
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;
span {
color: $color-orange;
&:after {
color: $color-orange !important;
}
}
}
}

2
checkout/src/arquivos/sass/utils/_mixin.scss
View File

@ -1,7 +1,7 @@
/**
* @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
*/
@mixin push--auto {
@mixin push--auto {
margin: {
left: auto;
right: auto;