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

fix: corrige fonts em telas acima de 2500px #10

Merged
emmanuelvitor merged 1 commits from feature/ajusteDeFontsEmResponsividade into development 2022-12-25 04:29:25 +00:00
Conversation 0 Commits 1 Files Changed 2 +328 -30
2 changed files with 328 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,11 +38,26 @@
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
} }
small { small {
color: $color-black; color: $color-black;
font-size: 24px; font-size: 24px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
} }
} }
@ -72,6 +87,14 @@
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
@media (min-width: 2500px) {
height: 50px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
&::placeholder { &::placeholder {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -81,6 +104,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 16px 12px; padding: 0 16px 12px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -98,6 +128,14 @@
right: 0; right: 0;
top: 0; top: 0;
@media (min-width: 2500px) {
height: 50px;
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
margin: 0; margin: 0;
@ -216,6 +254,12 @@ label.vtex-omnishipping-1-x-leanShippingOption {
width: 18px; width: 18px;
height: 18px; height: 18px;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
svg path { svg path {
display: none; display: none;
} }
@ -228,6 +272,12 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
width: 18px; width: 18px;
height: 18px; height: 18px;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
svg path { svg path {
display: none; display: none;
} }
@ -258,14 +308,14 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
p.notification { // p.notification {
font-family: $font-family; // font-family: $font-family;
font-style: normal; // font-style: normal;
font-weight: 400; // font-weight: 400;
font-size: 14px; // font-size: 14px;
line-height: 19px; // line-height: 19px;
color: $color-gray7; // color: $color-gray7;
} // }
input#client-last-name, input#client-last-name,
.input#client-first-name, .input#client-first-name,
@ -313,6 +363,10 @@ input#client-phone {
} }
input#client-phone { input#client-phone {
@media (min-width: 2500px) {
width: 95%;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100%; width: 100%;
} }
@ -355,7 +409,8 @@ span.quantity.badge {
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 100%; width: 100%;
max-width: 60%; // max-width: 60%;
max-width: 50%;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
margin-left: 13.5px margin-left: 13.5px
@ -467,6 +522,7 @@ td.info {
position: relative; position: relative;
} }
p.notification,
.shipping-summary-info { .shipping-summary-info {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -474,6 +530,13 @@ td.info {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray2; color: $color-gray2;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
} }
p.submit.btn-submit-wrapper { p.submit.btn-submit-wrapper {
@ -555,6 +618,12 @@ button#shipping-option-delivery {
color: #41115d; color: #41115d;
width: 148px !important; width: 148px !important;
height: 36px !important; height: 36px !important;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
height: auto !important;
}
} }
button#shipping-option-pickup-in-point { button#shipping-option-pickup-in-point {
@ -566,6 +635,11 @@ button#shipping-option-pickup-in-point {
line-height: 19px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
color: #c4c4c4; color: #c4c4c4;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
} }
@ -582,6 +656,11 @@ p.input.ship-postalCode.required.text {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
} }
} }
@ -623,6 +702,12 @@ input#client-email {
#opt-in-newsletter { #opt-in-newsletter {
height: auto; height: auto;
@media (min-width: 2500px) {
width: 34.95px;
height: 34.95px;
margin-top: -5px;
}
} }
.step.accordion-group.client-profile-data.filled { .step.accordion-group.client-profile-data.filled {
@ -681,6 +766,10 @@ p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required { p.client-last-name.input.pull-left.text.required {
width: 46%; width: 46%;
@media (min-width: 2500px) {
width: 47%;
}
@media (max-width: 1025px) { @media (max-width: 1025px) {
width: 49.167%; width: 49.167%;
} }
@ -851,6 +940,7 @@ a#edit-shipping-data,
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin-left: 14px;
} }
} }
@ -861,21 +951,13 @@ a#edit-shipping-data,
object-fit: cover; object-fit: cover;
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 116.5px; width: 116.5px;
height: 116.5px;
} }
} }
} }
// ul.cart-items.unstyled.clearfix {
// margin-bottom: 50px;
// }
// span.shipping-date.pull-left {
// display: none;
// }
strong.price.pull-right { strong.price.pull-right {
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 24px; font-size: 24px;
@ -1011,19 +1093,80 @@ li.hproduct.item.muted {
} }
} }
// p.PaymentCardHolderDocument.input.text.required.mask,
// p.BillingAddress.BillingAddress-BRA.clearfix,
// p.ChangeNumberOfPayments.clearfix {
// @media (max-width: 767px) {
// display: none;
// }
// }
.vtex-omnishipping-1-x-option:hover, .vtex-omnishipping-1-x-option:hover,
.vtex-omnishipping-1-x-leanShippingOptionActive { .vtex-omnishipping-1-x-leanShippingOptionActive {
background: #F2F2F2 !important; background: #F2F2F2 !important;
} }
span.newsletter-text {
@media (min-width: 2500px) {
margin-left: 8.05px;
}
}
.input-small+span.error {
@media (min-width: 2500px) {
font-size: 26px;
line-height: 33px;
}
}
.vtex-omnishipping-1-x-addressFormPart1 small {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
}
button#find-pickups-manualy-button-denied {
width: 100%;
background-color: $color-blue2;
font-weight: 700;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
}
.vtex-omnishipping-1-x-subtitle {
@media (min-width: 2500px) {
font-size: 24px !important;
line-height: 38px;
}
}
.vtex-omnishipping-1-x-geolocationTitle {
@media (min-width: 2500px) {
font-size: 32px !important;
line-height: 38px;
}
}
.vtex-omnishipping-1-x-shippingSectionTitle {
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
}
.vtex-omnishipping-1-x-leanShippingOption,
.vtex-omnishipping-1-x-leanShippingTextLabel,
.FormFieldLabel {
@media (min-width: 2500px) {
font-size: 24px !important;
line-height: 33px !important;
}
}
.FormFieldLabel { .FormFieldLabel {
color: $color-black !important; color: $color-black !important;
} }
span.shipping-date.pull-left {
display: none;
}

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

@ -147,6 +147,14 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@media (min-width: 2500px) {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
@ -161,6 +169,8 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(sm, max) {
width: 72px; width: 72px;
} }
@ -168,7 +178,13 @@
img { img {
height: 60px; height: 60px;
max-width: 100%; max-width: 100%;
width: auto; width: 100%;
@media (min-width: 2500px) {
object-fit: cover;
min-width: 146px;
height: 100%;
}
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -185,13 +201,22 @@
} }
a { a {
color: $color-blue; color: $color-black2;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
margin-left: 31px;
}
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-blue, 10);
text-decoration: none; text-decoration: none;
@ -213,6 +238,11 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -237,6 +267,12 @@
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@media (min-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;
@ -261,6 +297,12 @@
padding: 0; padding: 0;
width: max-content !important; width: max-content !important;
@media (min-width: 2500px) {
margin: 75px auto 0;
width: 135px;
height: 50px
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
} }
@ -278,7 +320,12 @@
color: $color-gray2; color: $color-gray2;
box-shadow: none; box-shadow: none;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
@ -301,6 +348,10 @@
margin: 0 11px; margin: 0 11px;
border-radius: 100%; border-radius: 100%;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
} }
} }
@ -308,6 +359,11 @@
&:before { &:before {
content: "-"; content: "-";
font-size: 14px; font-size: 14px;
@media (min-width: 2500px) {
font-size: 24px;
}
} }
} }
@ -315,6 +371,11 @@
&:before { &:before {
content: "+"; content: "+";
font-size: 15px; font-size: 15px;
@media (min-width: 2500px) {
font-size: 28px;
}
} }
} }
@ -349,7 +410,14 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
font-family: $font-family-secundary;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
} }
&:nth-child(2n), &:nth-child(2n),
@ -357,6 +425,13 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@media (min-width: 2500px) {
font-weight: 7000;
font-size: 28px;
line-height: 33px;
width: 7%;
}
} }
} }
@ -403,6 +478,10 @@
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
@media (min-width: 2500px) {
max-width: none;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
@ -413,7 +492,12 @@
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $color-gray2; color: $color-black2;
@media (min-width: 2500px) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
@ -425,6 +509,14 @@
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
@media (min-width: 2500px) {
width: 100%;
font-weight: 400;
font-size: 28px;
line-height: 36px;
max-width: 562px;
}
} }
button.shp-open-options { button.shp-open-options {
@ -440,6 +532,12 @@
padding: 12px 40px; padding: 12px 40px;
transition: all 0.2s linear; transition: all 0.2s linear;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray5, 5);
} }
@ -975,12 +1073,17 @@
} }
a { a {
font-family: $font-family; font-family: $font-family-secundary;
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-black2 ; color: $color-black2 ;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -1026,7 +1129,7 @@
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
font-family: "Open Sans"; font-family: $font-family;
font-style: normal; font-style: normal;
color: $color-black2; color: $color-black2;
@ -1139,3 +1242,55 @@ fieldset.payment-group,
width: 99.81% !important; width: 99.81% !important;
} }
} }
.best-price span {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
&::before {
content: "por ";
}
}
}
.new-product-price-label {
color: red !important;
display: none;
}
i.icon.icon-remove.item-remove-ico {
&::before {
font-size: 20px !important;
color: $color-gray6 !important;
}
}
.clearfix.pull-right.cart-links.cart-links-bottom.hide {
@media (min-width: 2500px) {
width: 34%;
}
}
.step .text label,
.step .select label {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
}
.step .text input {
@media (min-width: 2500px) {
height: 61px;
font-size: 28px;
}
}