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;
font-family: $font-family-secundary;
color: $color-black;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
}
small {
color: $color-black;
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;
font-size: 16px;
@media (min-width: 2500px) {
height: 50px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
&::placeholder {
font-family: $font-family;
font-style: normal;
@ -81,6 +104,13 @@
display: flex;
align-items: center;
padding: 0 16px 12px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
@media (max-width: 490px) {
@ -98,6 +128,14 @@
right: 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) {
height: 48px;
margin: 0;
@ -216,6 +254,12 @@ label.vtex-omnishipping-1-x-leanShippingOption {
width: 18px;
height: 18px;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
svg path {
display: none;
}
@ -228,6 +272,12 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
width: 18px;
height: 18px;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
svg path {
display: none;
}
@ -258,14 +308,14 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
p.notification {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray7;
}
// p.notification {
// font-family: $font-family;
// font-style: normal;
// font-weight: 400;
// font-size: 14px;
// line-height: 19px;
// color: $color-gray7;
// }
input#client-last-name,
.input#client-first-name,
@ -313,6 +363,10 @@ input#client-phone {
}
input#client-phone {
@media (min-width: 2500px) {
width: 95%;
}
@media (max-width: 1024px) {
width: 100%;
}
@ -355,7 +409,8 @@ span.quantity.badge {
@media (min-width: 2500px) {
width: 100%;
max-width: 60%;
// max-width: 60%;
max-width: 50%;
font-size: 24px;
line-height: 28px;
margin-left: 13.5px
@ -467,6 +522,7 @@ td.info {
position: relative;
}
p.notification,
.shipping-summary-info {
font-family: $font-family;
font-style: normal;
@ -474,6 +530,13 @@ td.info {
font-size: 14px;
line-height: 19px;
color: $color-gray2;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
}
p.submit.btn-submit-wrapper {
@ -555,6 +618,12 @@ button#shipping-option-delivery {
color: #41115d;
width: 148px !important;
height: 36px !important;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
height: auto !important;
}
}
button#shipping-option-pickup-in-point {
@ -566,6 +635,11 @@ button#shipping-option-pickup-in-point {
line-height: 19px;
text-transform: uppercase;
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;
line-height: 16px;
color: $color-gray2;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
}
}
@ -623,6 +702,12 @@ input#client-email {
#opt-in-newsletter {
height: auto;
@media (min-width: 2500px) {
width: 34.95px;
height: 34.95px;
margin-top: -5px;
}
}
.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 {
width: 46%;
@media (min-width: 2500px) {
width: 47%;
}
@media (max-width: 1025px) {
width: 49.167%;
}
@ -851,6 +940,7 @@ a#edit-shipping-data,
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
margin-left: 14px;
}
}
@ -861,21 +951,13 @@ a#edit-shipping-data,
object-fit: cover;
@media (min-width: 2500px) {
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 {
@media (min-width: 2500px) {
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-leanShippingOptionActive {
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 {
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;
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) {
&.quantity-price,
@ -161,6 +169,8 @@
padding: 0;
width: 60px;
@include mq(sm, max) {
width: 72px;
}
@ -168,7 +178,13 @@
img {
height: 60px;
max-width: 100%;
width: auto;
width: 100%;
@media (min-width: 2500px) {
object-fit: cover;
min-width: 146px;
height: 100%;
}
@include mq(sm, max) {
height: 72px;
@ -185,13 +201,22 @@
}
a {
color: $color-blue;
color: $color-black2;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
transition: ease-in 0.22s all;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
margin-left: 31px;
}
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
@ -213,6 +238,11 @@
font-size: 12px;
line-height: 14px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@include mq(md, max) {
display: none;
}
@ -237,6 +267,12 @@
line-height: 14px;
text-decoration-line: line-through;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@include mq(sm, max) {
font-size: 12px;
line-height: 14px;
@ -261,6 +297,12 @@
padding: 0;
width: max-content !important;
@media (min-width: 2500px) {
margin: 75px auto 0;
width: 135px;
height: 50px
}
@media (max-width: 490px) {
margin-left: 84px !important;
}
@ -278,7 +320,12 @@
color: $color-gray2;
box-shadow: none;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@include mq(lg, max) {
width: 24px !important;
@ -301,6 +348,10 @@
margin: 0 11px;
border-radius: 100%;
@media (min-width: 2500px) {
width: 32px;
height: 32px;
}
}
}
@ -308,6 +359,11 @@
&:before {
content: "-";
font-size: 14px;
@media (min-width: 2500px) {
font-size: 24px;
}
}
}
@ -315,6 +371,11 @@
&:before {
content: "+";
font-size: 15px;
@media (min-width: 2500px) {
font-size: 28px;
}
}
}
@ -349,7 +410,14 @@
font-size: 14px;
line-height: 16px;
color: $color-black;
font-family: $font-family-secundary;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
&:nth-child(2n),
@ -357,6 +425,13 @@
font-weight: 700;
font-size: 14px;
line-height: 19px;
@media (min-width: 2500px) {
font-weight: 7000;
font-size: 28px;
line-height: 33px;
width: 7%;
}
}
}
@ -403,6 +478,10 @@
.srp-container {
padding: 0 0 0 10px;
@media (min-width: 2500px) {
max-width: none;
}
@include mq(md, max) {
padding: 0 16px;
}
@ -413,7 +492,12 @@
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: $color-gray2;
color: $color-black2;
@media (min-width: 2500px) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) {
margin-top: 0;
@ -425,6 +509,14 @@
font-size: 12px;
line-height: 18px;
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 {
@ -440,6 +532,12 @@
padding: 12px 40px;
transition: all 0.2s linear;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
&:hover {
background-color: lighten($color-gray5, 5);
}
@ -975,12 +1073,17 @@
}
a {
font-family: $font-family;
font-family: $font-family-secundary;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-black2 ;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
}
@ -1026,7 +1129,7 @@
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: "Open Sans";
font-family: $font-family;
font-style: normal;
color: $color-black2;
@ -1138,4 +1241,56 @@ fieldset.payment-group,
@media (max-width: 1025px) {
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;
}
}