MateusLopes/m3-academy-template-checkout-Mateus-Lopes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: responsividade mobile e tablets

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-26 22:54:11 -03:00
parent 6bef796de2
commit bdd6671409
10 changed files with 690 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,25 +90,6 @@ export default class Footer {
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
function addTexts() {
const paymentsTitle = document.querySelector(
".accordion-toggle.collapsed.accordion-toggle-active"
);
let paymentsDescription =
'<p class="payments-description">Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados</p>';
paymentsTitle.insertAdjacentHTML("afterend", paymentsDescription);
}
setTimeout(addTexts, 5000);
// if (linkBoxEdit) {
// const linkBoxEdit = document.querySelector(".link-box-edit");
// let newEditIcon =
// '<img src="https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png" class="edit-icon" alt="Icone de edição" />';
// linkBoxEdit.insertAdjacentHTML("afterbegin", newEditIcon);
// }
} }
addCarrossel() { addCarrossel() {

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

@ -5,6 +5,19 @@
.client-pre-email-h label { .client-pre-email-h label {
margin-top: 0px; margin-top: 0px;
font-size: 23px;
@media (max-width: 1024px) {
font-size: 14px;
}
@media (max-width: 375px) {
font-size: 12px;
}
@media (max-width: 2500px) {
font-size: 40px;
}
} }
.client-pre-email { .client-pre-email {
@ -13,6 +26,8 @@
padding-top: 14px; padding-top: 14px;
.link-cart { .link-cart {
text-transform: uppercase;
margin: 0 !important;
a { a {
color: $color-black; color: $color-black;
font-family: $font-family-secondary; font-family: $font-family-secondary;
@ -22,6 +37,15 @@
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
} }
@media (max-width: 1024px) {
margin-right: 16px;
font-size: 10px;
}
@media (max-width: 2500px) {
font-size: 28px;
}
} }
} }
@ -37,7 +61,7 @@
span, span,
small { small {
font-family: $font-family-secondary; font-family: $font-family-secondary;
font-size: 23px; font-size: inherit;
font-weight: 400; font-weight: 400;
color: $color-black; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
@ -60,12 +84,25 @@
font-family: $font-family; font-family: $font-family;
box-sizing: border-box; box-sizing: border-box;
&::placeholder {
color: $color-black;
}
@media (max-width: 1024px) {
width: 100%;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
@media (max-width: 2500px) {
font-size: 24px;
}
} }
button { button {
cursor: pointer;
background: $color-blue2; background: $color-blue2;
color: $color-black; color: $color-black;
height: 52px; height: 52px;
@ -86,6 +123,11 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@media (max-width: 2500px) {
font-size: 28px;
width: 219px;
}
} }
span.help.error { span.help.error {
@ -94,6 +136,14 @@
color: $color-red; color: $color-red;
font-weight: 700; font-weight: 700;
text-transform: capitalize; text-transform: capitalize;
@media (max-width: 2500px) {
font-size: 24px;
}
}
@media (max-width: 1024px) {
width: 96.876%;
} }
} }
@ -110,6 +160,10 @@
font-weight: 700; font-weight: 700;
margin-bottom: 9px; margin-bottom: 9px;
margin-top: 0; margin-top: 0;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
ul { ul {
@ -120,42 +174,81 @@
color: $color-black; color: $color-black;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
}
.icon-lock:before { @media (max-width: 2500px) {
padding-bottom: 19px !important; font-size: 24px;
padding-right: 4px !important; }
} }
i::before { i::before {
color: $color-blue2; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
@media (max-width: 2500px) {
font-size: 2.1rem;
} }
} }
} }
}
.icon-lock:before {
padding-bottom: 19px !important;
padding-right: 4px !important;
@media (max-width: 1024px) {
display: none;
}
}
i::before { i::before {
color: $color-black2; color: $color-black2;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
@media (max-width: 2500px) {
font-size: 11.09rem;
} }
} }
} }
}
.client-last-name,
.client-phone,
.client-first-name,
.client-document {
@media (max-width: 1024px) {
width: 49.218% !important;
}
@media (max-width: 375px) {
width: 47.577% !important;
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@media (max-width: 1024px) {
width: 100%;
margin: 0;
}
.accordion-group { .accordion-group {
width: 89.445%; width: 90.055%;
padding-bottom: 44px; padding-bottom: 44px;
padding-top: 24px; padding-top: 24px;
padding-left: 17px; padding-left: 16px;
padding-right: 17px; padding-right: 16px;
border-radius: 8px; border-radius: 8px;
border: solid 1px $color-gray3; border: solid 1px $color-gray3;
font-family: $font-family; font-family: $font-family;
@media (max-width: 1024px) {
width: auto;
margin: 0 16px;
}
p.client-first-name, p.client-first-name,
p.client-last-name { p.client-last-name {
margin-bottom: 16px; margin-bottom: 16px;
@ -178,23 +271,32 @@
.accordion-heading { .accordion-heading {
span { span {
font-size: 16px;
color: $color-black2; color: $color-black2;
padding: 0; padding: 0;
i::before { i::before {
fill: $color-black2; fill: $color-black2;
} }
@media (max-width: 2500px) {
font-size: 32px;
}
} }
a { a {
align-items: center; background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-color: $color-black2; background-repeat: no-repeat;
border-radius: 8px; background-size: contain;
background-color: $color-white;
height: 20px;
width: 20px;
border-radius: 0;
border: none; border: none;
color: $color-white; padding: 0;
display: flex; right: 1px;
justify-content: center; top: -1px;
padding: 6px 5px 6px 8px; opacity: 1;
} }
} }
@ -213,9 +315,17 @@
} }
label { label {
font-size: 14px; font-size: 12px;
color: $color-gray2; color: $color-gray2;
font-weight: 400; font-weight: 400;
@media (max-width: 2500px) {
font-size: 28px;
}
@media (max-width: 1024px) {
font-size: 14px;
}
} }
select, select,
@ -229,11 +339,68 @@
height: 32px; height: 32px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
width: -webkit-fill-available;
@media (max-width: 2500px) {
margin-top: 11px;
height: 51px;
font-size: 28px;
}
&#client-email {
height: 42px !important;
@media (max-width: 2500px) {
height: 51px !important;
}
}
&#ship-number {
height: 25px !important;
}
&#ship-complement,
&#ship-receiverName {
height: 35px !important;
}
&#client-phone,
&#client-document {
height: 34px !important;
}
@media (max-width: 1024px) {
width: 100% !important;
max-width: -webkit-fill-available;
}
&#client-email {
@media (max-width: 1024px) {
width: 98.745%;
}
}
} }
.help.error { .help.error {
color: red; color: red;
} }
&.client-last-name,
&.client-first-name,
&.client-document,
&.client-phone {
width: 47.48%;
}
&.client-document,
&.client-first-name {
float: left !important;
}
&.client-last-name,
&.client-phone {
float: right !important;
}
} }
.box-client-info-pj { .box-client-info-pj {
@ -250,6 +417,9 @@
} }
button.submit { button.submit {
font-family: $font-family;
cursor: pointer;
letter-spacing: 0.05em;
background-color: $color-blue2; background-color: $color-blue2;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
@ -257,7 +427,7 @@
text-transform: uppercase; text-transform: uppercase;
margin-top: 44px; margin-top: 44px;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
@ -268,6 +438,11 @@
&:active { &:active {
background: darken($color-black2, 5); background: darken($color-black2, 5);
} }
@media (max-width: 2500px) {
height: 61px;
font-size: 28px;
}
} }
/* Shipping configurations */ /* Shipping configurations */
@ -323,6 +498,13 @@
background-position: 8px 9px; background-position: 8px 9px;
} }
#force-shipping-fields {
color: $color-blue2 !important;
font-weight: 400 !important;
text-transform: lowercase !important;
text-decoration: none !important;
}
a { a {
color: $color-black2; color: $color-black2;
font-weight: 500; font-weight: 500;
@ -377,6 +559,11 @@
&.client-profile-data.filled { &.client-profile-data.filled {
padding-bottom: 36px !important; padding-bottom: 36px !important;
@media (max-width: 1024px) {
width: -webkit-fill-available;
margin-bottom: 17px;
}
.accordion-heading { .accordion-heading {
font-family: $font-family-secondary; font-family: $font-family-secondary;
margin-bottom: 25px !important; margin-bottom: 25px !important;
@ -400,6 +587,10 @@
align-items: flex-end; align-items: flex-end;
padding-left: 3px; padding-left: 3px;
@media (max-width: 2500px) {
font-size: 24px;
}
.shp-summary-group-info { .shp-summary-group-info {
padding-left: 0 !important; padding-left: 0 !important;
border: none; border: none;
@ -447,15 +638,34 @@
.payment-data .accordion-group { .payment-data .accordion-group {
width: auto !important; width: auto !important;
.accordion-heading span { .accordion-heading {
margin-bottom: 16px !important;
span {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
@media (max-width: 2500px) {
font-size: 32px;
}
}
} }
.payment-group-list-btn { .payment-group-list-btn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@media (max-width: 1024px) {
width: 100%;
.payment-group-item {
width: 100%;
&-text {
width: 100%;
}
}
}
} }
.payment-group-item { .payment-group-item {
@ -491,6 +701,20 @@
.steps-view { .steps-view {
width: 363px; width: 363px;
margin-top: 12px;
@media (max-width: 1024px) {
width: auto;
}
}
}
.form-step {
display: flex;
flex-direction: column;
p.link-gift-card {
left: 0 !important;
} }
} }
@ -514,8 +738,8 @@
#ship-postalCode { #ship-postalCode {
display: block; display: block;
min-width: 95.255%; width: 100%;
width: 95%; max-width: -webkit-fill-available;
height: 35px; height: 35px;
} }
@ -529,6 +753,10 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: $color-black2 !important; color: $color-black2 !important;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
} }
@ -556,6 +784,10 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: $color-gray2; color: $color-gray2;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
.shp-option-text-time span { .shp-option-text-time span {
@ -576,6 +808,10 @@
font-weight: 700 !important; font-weight: 700 !important;
font-size: 12px; font-size: 12px;
color: $color-gray2 !important; color: $color-gray2 !important;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
.address-summary { .address-summary {
@ -598,12 +834,16 @@
.ship-complement, .ship-complement,
.ship-receiverName { .ship-receiverName {
font-size: 12px !important; font-size: 12px !important;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
.input-mini, .input-mini,
.input-large, .input-large,
.input-xlarge { .input-xlarge {
width: 96% !important; width: auto !important;
} }
.vtex-omnishipping-1-x-address { .vtex-omnishipping-1-x-address {
@ -616,6 +856,14 @@
} }
} }
#opt-in-newsletter {
width: auto !important;
}
.icon-edit {
display: none !important;
}
.box-info { .box-info {
color: $color-gray2; color: $color-gray2;

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

@ -6,6 +6,7 @@
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
@ -18,6 +19,7 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
margin-bottom: 0 !important;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -26,6 +28,12 @@
border-radius: 0; border-radius: 0;
} }
@media (max-width: 1024px) {
padding: 14px 16px;
height: 91px;
max-height: fit-content;
}
.item-link-remove { .item-link-remove {
color: $color-gray6; color: $color-gray6;
} }
@ -47,6 +55,10 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
padding: 0 0 34px 17px !important; padding: 0 0 34px 17px !important;
@media (max-width: 2500px) {
font-size: 32px;
}
} }
.item-unavailable { .item-unavailable {
@ -83,6 +95,7 @@
} }
#go-to-cart-button a { #go-to-cart-button a {
cursor: pointer;
color: $color-black2; color: $color-black2;
text-decoration: underline; text-decoration: underline;
} }
@ -90,8 +103,13 @@
.summary-totalizers { .summary-totalizers {
font-family: $font-family-secondary; font-family: $font-family-secondary;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: 0 !important;
td.info { td.info {
width: 100%; width: 100%;
@media (max-width: 2500px) {
font-size: 28px;
}
} }
} }
@ -117,8 +135,27 @@
} }
.cart-items { .cart-items {
thead {
@media (max-width: 1024px) {
display: none;
}
}
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
@media (max-width: 1024px) {
grid-template-columns: 60px 7fr 1fr;
grid-template-rows: 1fr 34px;
gap: 0px 16px;
grid-template-areas:
"Picture Name x"
"Picture Quantity Value";
display: grid;
padding-top: 0px;
padding-bottom: 0px;
align-items: center;
}
} }
th { th {
@ -152,16 +189,25 @@
max-width: 100%; max-width: 100%;
width: auto; width: auto;
@media (max-width: 1024px) {
width: 60px;
}
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
width: auto; width: auto;
} }
} }
@media (max-width: 1024px) {
order: -1;
grid-area: Picture;
display: flex;
}
} }
.product-name { .product-name {
padding-right: 0; padding-right: 0;
width: 300px !important;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
@ -181,6 +227,20 @@
text-decoration: none; text-decoration: none;
} }
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@media (max-width: 1024px) {
grid-area: Name;
order: 1;
height: fit-content;
display: flex;
padding-left: 0px;
width: fit-content;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} }
@ -202,6 +262,15 @@
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@media (max-width: 1024px) {
display: none;
}
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
th.shipping-date { th.shipping-date {
@ -209,20 +278,30 @@
padding-left: 0; padding-left: 0;
} }
td.product-price { .product-price {
bottom: -12px; bottom: -12px;
flex-direction: column; flex-direction: column;
width: 104px; width: 104px;
padding-right: 49px; padding-right: 49px;
}
.product-price {
text-align: left; text-align: left;
padding-left: 91px; padding-left: 91px;
min-width: none; min-width: none;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@media (max-width: 1024px) {
display: flex;
grid-area: Value;
text-align: end;
order: 3;
padding-right: 0px;
br {
display: none;
}
}
@media (max-width: 490px) { @media (max-width: 490px) {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -234,6 +313,16 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@media (max-width: 2500px) {
font-size: 24px;
}
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@include mq(sm, max) { @include mq(sm, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -264,6 +353,10 @@
padding: 0 !important; padding: 0 !important;
} }
@media (max-width: 1024px) {
margin-top: 0;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
} }
@ -328,6 +421,10 @@
.quantity-price, .quantity-price,
.best-price { .best-price {
.new-product-price-label {
text-transform: lowercase;
}
.icon-question-sign { .icon-question-sign {
display: none; display: none;
} }
@ -361,12 +458,30 @@
td.quantity-price { td.quantity-price {
padding-right: 0px; padding-right: 0px;
width: fit-content; width: fit-content;
@media (max-width: 1024px) {
display: none;
}
} }
.item-remove { .item-remove {
@media (max-width: 1024px) {
width: 100%;
display: flex;
grid-area: x;
order: 4;
justify-content: flex-end;
padding-right: 0px;
a {
padding: 0 5px 0 0 !important;
}
}
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: $color-gray6; color: $color-gray6;
font-size: 15px; font-size: 15px;
@ -392,10 +507,26 @@
} }
.summary { .summary {
&-template-holder {
@media (max-width: 1024px) {
width: 96.9%;
margin: 0 auto;
}
@media (max-width: 375px) {
width: 100%;
}
}
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;
.srp-content {
@media (max-width: 375px) {
margin: 48px 0 0 16px;
}
}
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
@ -405,7 +536,7 @@
.srp-main-title { .srp-main-title {
color: $color-black; color: $color-black;
margin: 33px 0 11px; margin: 48px 0 11px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
@ -414,6 +545,10 @@
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@media (max-width: 2500px) {
font-size: 48px;
}
} }
.srp-description { .srp-description {
@ -425,6 +560,7 @@
} }
button.shp-open-options { button.shp-open-options {
cursor: pointer;
background: $color-gray8; background: $color-gray8;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
@ -446,11 +582,19 @@
background-color: darken($color-gray5, 5); background-color: darken($color-gray5, 5);
} }
} }
@media (max-width: 1024px) {
padding: 0 !important;
}
} }
.srp-data { .srp-data {
width: 280px; width: 280px;
@media (max-width: 1024px) {
width: 343px;
}
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
} }
@ -468,7 +612,7 @@
width: 100%; width: 100%;
height: 42px; height: 42px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -517,6 +661,15 @@
} }
} }
.ship-country {
color: $color-black;
font-size: 12px;
@media (max-width: 2500px) {
font-size: 24px;
}
}
.srp-postal-code { .srp-postal-code {
.ship-postalCode { .ship-postalCode {
label { label {
@ -527,6 +680,11 @@
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
margin-bottom: 2px; margin-bottom: 2px;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
input { input {
@ -538,6 +696,10 @@
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
& ~ button { & ~ button {
@ -567,13 +729,13 @@
} }
small a { small a {
font-family: $font-family; font-family: $font-family-secondary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue; color: $color-black;
margin-top: 7px; text-decoration: underline;
} }
span.help.error { span.help.error {
@ -583,6 +745,10 @@
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px; top: 17px;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
} }
} }
@ -603,6 +769,10 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@media (max-width: 2500px) {
font-size: 32px;
}
} }
.srp-shipping-current-single { .srp-shipping-current-single {
@ -648,12 +818,13 @@
} }
&-totalizers { &-totalizers {
margin-bottom: 5px;
padding: 0; padding: 0;
width: 362px; width: 362px;
.coupon-data { .coupon-data {
font-family: $font-family-secondary; font-family: $font-family-secondary;
margin-top: 33px; margin: 49px 0 8px 0;
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -662,13 +833,22 @@
} }
} }
span { span {
font-family: $font-family; font-family: $font-family-secondary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
text-decoration: none; text-decoration: none;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
@media (max-width: 1024px) {
margin-top: 0;
} }
} }
@ -686,6 +866,10 @@
color: $color-black2; color: $color-black2;
font-size: 12px; font-size: 12px;
text-decoration: underline; text-decoration: underline;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
.coupon-label { .coupon-label {
@ -701,6 +885,15 @@
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
@media (max-width: 1024px) {
margin-top: 0;
}
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -708,6 +901,11 @@
width: fit-content; width: fit-content;
margin-bottom: 32px; margin-bottom: 32px;
@media (max-width: 1024px) {
text-align: left;
width: auto;
}
@include mq(sm, max) { @include mq(sm, max) {
span { span {
display: flex; display: flex;
@ -732,13 +930,23 @@
padding: 0 12px; padding: 0 12px;
font-family: $font-family-secondary; font-family: $font-family-secondary;
@media (max-width: 1024px) {
width: 83.346%;
margin-right: 2px;
}
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
@media (max-width: 2500px) {
font-size: 24px;
}
} }
button { button {
cursor: pointer;
background: $color-blue2; background: $color-blue2;
text-shadow: none !important; text-shadow: none !important;
border: none; border: none;
@ -755,6 +963,10 @@
width: 133.51px; width: 133.51px;
text-transform: uppercase; text-transform: uppercase;
@media (max-width: 1024px) {
margin-left: 0;
}
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
@ -772,7 +984,7 @@
.accordion-group { .accordion-group {
tr { tr {
border-color: #e5e5e5; border-color: $color-gray5;
td { td {
&.empty { &.empty {
@ -812,6 +1024,14 @@
} }
} }
} }
@media (max-width: 1024px) {
float: left !important;
display: block;
margin: 0px;
width: 100%;
padding-top: 48px;
}
} }
} }
@ -823,12 +1043,10 @@
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
float: none; float: none;
margin-bottom: 50px;
} }
@include mq(md, min) { @include mq(md, min) {
margin: 0; margin: 0;
padding-bottom: 50px;
} }
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
@ -841,12 +1059,17 @@
} }
a { a {
font-family: $font-family; font-family: $font-family-secondary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -879,7 +1102,16 @@
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
} }
@media (max-width: 1024px) {
width: auto;
} }
} }
} }
@media (max-width: 1024px) {
width: auto;
padding: 0 16px;
}
}
} }

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

@ -1,15 +1,22 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
margin-top: 11px;
.mini-cart { .mini-cart {
width: 32.3242%; width: 32.3242%;
height: fit-content; height: fit-content;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
border: solid 1px $color-gray5; border: solid 1px $color-gray5;
border-radius: 8px; border-radius: 8px;
padding: 24px 0 0 0; padding: 24px 0 0 0;
@media (max-width: 1024px) {
position: inherit;
width: auto;
margin: 0 16px;
float: unset;
}
.shipping-date.pull-left { .shipping-date.pull-left {
display: none; display: none;
} }
@ -38,6 +45,11 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 14px; line-height: 14px;
width: 39.252%; width: 39.252%;
white-space: normal; white-space: normal;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
.price { .price {
@ -47,6 +59,10 @@ body .container-main.container-order-form .orderform-template.active {
color: $color-black2; color: $color-black2;
line-height: 16.34px; line-height: 16.34px;
margin-right: 0 !important; margin-right: 0 !important;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
.description { .description {
@ -55,18 +71,26 @@ body .container-main.container-order-form .orderform-template.active {
justify-content: flex-end; justify-content: flex-end;
margin-top: 0 !important; margin-top: 0 !important;
font-size: 12px; font-size: 12px;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
} }
} }
.link-cart { .link-cart {
margin: 0 17px 9px 0; margin: 0 17px 10px 0;
a#orderform-minicart-to-cart { a#orderform-minicart-to-cart {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@media (max-width: 2500px) {
font-size: 24px;
}
} }
} }
@ -84,6 +108,10 @@ body .container-main.container-order-form .orderform-template.active {
width: 100%; width: 100%;
padding-right: 17px; padding-right: 17px;
color: $color-gray2; color: $color-gray2;
@media (max-width: 2500px) {
font-size: 28px;
}
} }
} }
@ -99,6 +127,12 @@ body .container-main.container-order-form .orderform-template.active {
color: $color-gray2; color: $color-gray2;
} }
.link-edit {
text-decoration: none !important;
color: $color-blue2 !important;
text-transform: lowercase;
}
#payment-data-submit { #payment-data-submit {
background-color: $color-green2; background-color: $color-green2;
border-radius: 8px; border-radius: 8px;
@ -112,24 +146,77 @@ body .container-main.container-order-form .orderform-template.active {
font-weight: 700; font-weight: 700;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-size: 14px; font-size: 14px;
@media (max-width: 2500px) {
font-size: 28px;
}
} }
} }
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
@media (max-width: 1024px) {
float: unset;
width: 100%;
}
} }
.accordion-group .accordion-heading { .accordion-group .accordion-heading {
font-size: 16px;
margin-bottom: 36px; margin-bottom: 36px;
span span {
font-size: inherit !important;
}
@media (max-width: 2500px) {
font-size: 32px;
}
} }
.accordion-toggle.collapsed { .accordion-toggle.collapsed {
color: $color-black2; color: $color-black2;
} }
#postalCode-finished-loading {
@media (max-width: 1024px) {
width: 309px;
}
}
.box-client-info-pf {
@media (max-width: 1024px) {
width: 100%;
}
}
.payment-group {
margin: 0 !important;
}
.payment-data {
.accordion-toggle.collapsed.accordion-toggle-active {
&::after {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
display: block;
color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin-top: 12px;
@media (max-width: 2500px) {
font-size: 28px;
}
}
}
}
#shipping-data, #shipping-data,
#payment-data { #payment-data {
margin-left: 16px !important;
.accordion-group { .accordion-group {
margin-bottom: 17px; margin-bottom: 17px;
@ -137,7 +224,12 @@ body .container-main.container-order-form .orderform-template.active {
margin-bottom: 15px; margin-bottom: 15px;
span { span {
font-size: 16px;
color: $color-black2; color: $color-black2;
@media (max-width: 2500px) {
font-size: 32px;
}
} }
} }
} }
@ -149,5 +241,9 @@ body .container-main.container-order-form .orderform-template.active {
font-weight: 400; font-weight: 400;
line-height: 19px; line-height: 19px;
color: $color-gray2; color: $color-gray2;
@media (max-width: 2500px) {
font-size: 28px;
}
} }
} }

13
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -1,7 +1,9 @@
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
margin-bottom: 200px; margin-bottom: 200px;
&-content { &-content {
margin-bottom: 234px !important;
color: $color-black2; color: $color-black2;
text-align: center; text-align: center;
@ -22,6 +24,10 @@
font-size: 18px; font-size: 18px;
margin-bottom: 22px; margin-bottom: 22px;
} }
@media (max-width: 2500px) {
font-size: 48px;
}
} }
&-message { &-message {
@ -53,7 +59,12 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 250px; width: 248px;
height: 46px;
}
@media (max-width: 2500px) {
font-size: 28px;
} }
&:hover { &:hover {

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

@ -47,7 +47,7 @@ body {
.container-cart { .container-cart {
width: 80%; width: 80%;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 96%; width: 100%;
} }
} }
} }
@ -75,6 +75,10 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@media (max-width: 2500px) {
font-size: 48px;
}
} }
#cart-title { #cart-title {
@ -82,12 +86,21 @@ body {
color: $color-black2; color: $color-black2;
font-style: normal; font-style: normal;
line-height: 33px; line-height: 33px;
@media (max-width: 1024px) {
margin-left: 16px;
}
} }
#orderform-title { #orderform-title {
line-height: 32px; line-height: 32px;
color: $color-black; color: $color-black;
margin: 17px 0 17px; margin: 17px 0 17px;
letter-spacing: 0.05em;
@media (max-width: 1024px) {
padding-left: 19px;
}
} }
.dropdown { .dropdown {

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

@ -73,7 +73,7 @@
background-color: $color-gray15; background-color: $color-gray15;
display: block; display: block;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 94.83% !important; width: 100% !important;
} }
@media (max-width: 375px) { @media (max-width: 375px) {
width: auto !important; width: auto !important;
@ -109,18 +109,30 @@
position: absolute; position: absolute;
bottom: 195px; bottom: 195px;
line-height: 30px !important; line-height: 30px !important;
@media (max-width: 375px) {
bottom: 180px;
}
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center
center; center;
z-index: 4; z-index: 4;
left: 10px; left: 10px;
@media (max-width: 375px) {
left: -1px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center
center; center;
z-index: 4; z-index: 4;
right: 10px; right: 10px;
@media (max-width: 375px) {
right: -1px;
}
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;
@ -129,6 +141,7 @@
li { li {
margin: 0.5em; margin: 0.5em;
button { button {
cursor: pointer;
overflow: hidden; overflow: hidden;
text-indent: 999999999px; text-indent: 999999999px;
height: 1em; height: 1em;

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

@ -10,6 +10,10 @@
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
padding: 16px 0; padding: 16px 0;
@media (max-width: 1024px) {
margin-top: 56px;
}
.container { .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -17,7 +21,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
flex-direction: column; flex-direction: column;
align-items: unset; align-items: unset;
margin-left: 8px; margin-left: 16px;
width: 100%; width: 100%;
.footerCheckout__stamps { .footerCheckout__stamps {
@ -82,6 +86,10 @@
display: flex; display: flex;
gap: 13px; gap: 13px;
@media (max-width: 1024px) {
gap: 4px;
}
img { img {
width: 35.65px; width: 35.65px;
} }

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

@ -41,6 +41,11 @@
font-family: "Tenor Sans"; font-family: "Tenor Sans";
color: black; color: black;
line-height: 14px; line-height: 14px;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
.progress-bar-circle { .progress-bar-circle {
@ -106,6 +111,11 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black2; color: $color-black2;
@media (max-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
i { i {

14
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -14,7 +14,15 @@
line-height: 38px; line-height: 38px;
color: $color-black; color: $color-black;
text-align: center; text-align: center;
margin: 43px 0 20px 0; margin: 13px 0 20px 0;
@media (max-width: 375px) {
font-size: 14px;
}
@media (max-width: 2500px) {
font-size: 48px;
}
} }
.slick-initialized { .slick-initialized {
@ -63,6 +71,10 @@
margin-bottom: 20px; margin-bottom: 20px;
gap: 5px; gap: 5px;
@media (max-width: 1024px) {
margin-bottom: 20px;
}
@media (max-width: 375px) { @media (max-width: 375px) {
flex-wrap: wrap; flex-wrap: wrap;
height: 60px; height: 60px;