ManuelaLuanaSchumackerTavares/m3-academy-template-checkout-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(checkout): Corrige problemas no layout para telas 4k

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2022-12-26 15:27:59 -03:00
parent 4303fb3688
commit f91a9c2fca
6 changed files with 389 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,13 @@ textarea[class*="span"],
} }
} }
//para a lista do #/email
.row-fluid .orderform-template {
@include mq(xxl, min) {
margin-bottom: 90px;
}
}
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
@ -31,6 +38,11 @@ textarea[class*="span"],
color: lighen($color-black, 10); color: lighen($color-black, 10);
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(pg, max) { @include mq(pg, max) {
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
@ -65,6 +77,11 @@ textarea[class*="span"],
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(cstm, max) { @include mq(cstm, max) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -79,6 +96,11 @@ textarea[class*="span"],
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(cstm, max) { @include mq(cstm, max) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -112,6 +134,11 @@ textarea[class*="span"],
color: $color-black2 !important; color: $color-black2 !important;
} }
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
@ -133,6 +160,12 @@ textarea[class*="span"],
top: 0; top: 0;
cursor: pointer; cursor: pointer;
@include mq(xxl, min) {
font-size: 28px;
// line-height: 38px;
padding: 12.56px 17.89px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
// height: 48px; // height: 48px;
margin: 0; margin: 0;
@ -145,6 +178,11 @@ textarea[class*="span"],
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
@ -161,6 +199,11 @@ textarea[class*="span"],
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
@ -173,12 +216,21 @@ textarea[class*="span"],
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
i::before { i::before {
color: $color-blue2; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
@include mq(xxl, min) {
font-size: 2.063rem;
}
} }
} }
} }
@ -188,6 +240,10 @@ textarea[class*="span"],
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
@include mq(xxl, min) {
font-size: 7.159rem;
}
@include mq(cstm, max) { @include mq(cstm, max) {
font-size: 0; font-size: 0;
} }
@ -195,6 +251,15 @@ textarea[class*="span"],
} }
} }
.accordion-heading {
span {
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
}
}
.client-profile-data { .client-profile-data {
.accordion-heading { .accordion-heading {
span { span {
@ -206,6 +271,11 @@ textarea[class*="span"],
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
} }
} }
@ -281,6 +351,21 @@ textarea[class*="span"],
font-size: 0; font-size: 0;
} }
.shp-summary-package-time {
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.client-profile-summary,
.client-profile-email span {
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
p { p {
label { label {
font-family: $font-family; font-family: $font-family;
@ -288,40 +373,86 @@ textarea[class*="span"],
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
select, select,
input { input {
border: 1px solid $color-gray8; border: 1px solid $color-gray8;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box;
box-shadow: none; box-shadow: none;
} }
#client-email {
width: 100%;
}
#client-first-name,
#client-last-name,
#client-document,
#client-phone {
// height: 44px;
@include mq(xxl, min) {
width: 273.77px;
}
}
#opt-in-newsletter {
border-radius: 3px;
border: 1px solid $color-gray11;
@include mq(xxl, min) {
width: 34.95px;
height: 34.95px;
margin-right: 8.05px;
}
}
#ship-number { #ship-number {
@include mq(sm, max) { @include mq(sm, max) {
width: 70px !important; width: 70px !important;
} }
} }
select,
input:not([type="checkbox"]) { input:not([type="checkbox"]) {
height: 44px;
.input-xlarge { .input-xlarge {
@media (max-width: 767) { @media (max-width: 767) {
max-width: none !important; max-width: none !important;
} }
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
height: 61px;
}
@include mq(pg, max) { @include mq(pg, max) {
width: 100%; width: 100%;
margin-right: 14.5px; margin-right: 14.5px;
} }
} }
#client-phone, // #client-phone,
#client-document { // #client-document {
height: 44px;
} // }
.help.error { .help.error {
color: red; color: red;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
white-space: nowrap;
}
} }
} }
@ -354,6 +485,11 @@ textarea[class*="span"],
transition: all 0.2s linear; transition: all 0.2s linear;
cursor: pointer; cursor: pointer;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
@ -381,6 +517,11 @@ textarea[class*="span"],
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration-line: underline; text-decoration-line: underline;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
@ -390,6 +531,11 @@ textarea[class*="span"],
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
.shp-lean { .shp-lean {
@ -402,6 +548,11 @@ textarea[class*="span"],
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
svg path { svg path {
// fill: #d8c8ac; // fill: #d8c8ac;
background: #00c8ff; background: #00c8ff;
@ -416,6 +567,11 @@ textarea[class*="span"],
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -423,13 +579,17 @@ textarea[class*="span"],
} }
.address-summary { .address-summary {
// background: none; background: none;
border-color: $color-gray8; border-color: $color-gray8;
border-radius: 8px; border-radius: 8px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
// padding: 12px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
@ -445,6 +605,11 @@ textarea[class*="span"],
line-height: 16px; line-height: 16px;
color: $color-blue2; color: $color-blue2;
text-decoration: none; text-decoration: none;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }
@ -473,6 +638,10 @@ textarea[class*="span"],
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@include mq(xxl, min) {
width: 406.48px;
}
span { span {
text-align: center; text-align: center;
color: $color-gray10; color: $color-gray10;
@ -482,6 +651,12 @@ textarea[class*="span"],
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 24px;
white-space: nowrap;
}
&::selection { &::selection {
color: $color-red2 !important; color: $color-red2 !important;
} }
@ -492,6 +667,83 @@ textarea[class*="span"],
} }
} }
.steps-view {
@include mq(xxl, min) {
width: 800.25px;
}
h3 {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
}
.payment-description {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
.installments {
p {
span {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
}
}
.payment-pix-step-number {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
.payment-pix-step-text {
@include mq(xxl, min) {
font-size: 24px;
line-height: 38px;
}
}
.sight {
span {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
}
.span12 {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
p {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
}
.span4 {
p {
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
}
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
@ -499,11 +751,16 @@ textarea[class*="span"],
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
.shp-summary-package { // .shp-summary-package {
padding-left: 16px; // padding-left: 16px;
} // }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
@ -529,9 +786,26 @@ textarea[class*="span"],
border: 1px solid $color-black; border: 1px solid $color-black;
} }
.vtex-omnishipping-1-x-leanShippingTextLabel {
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.vtex-omnishipping-1-x-deliveryOptionInactive {
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
color: $color-black; color: $color-black;
// text-shadow: 1.3px 1px lighten($color-black, 50); @include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }

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

@ -35,6 +35,7 @@ body .container-cart {
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
margin-bottom: 48px;
padding: 16px; padding: 16px;
@include mq(pg, max) { @include mq(pg, max) {
@ -57,12 +58,18 @@ body .container-cart {
padding: 17px 24px; padding: 17px 24px;
h2 { h2 {
display: flex;
padding-bottom: 16px; padding-bottom: 16px;
background: $color-white; background: $color-white;
border: none; border: none;
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
.item-unavailable { .item-unavailable {
@ -90,6 +97,11 @@ body .container-cart {
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }
@ -102,6 +114,11 @@ body .container-cart {
#go-to-cart-button a { #go-to-cart-button a {
color: #303030; color: #303030;
text-decoration: underline; text-decoration: underline;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
.summary-totalizers { .summary-totalizers {
@ -124,6 +141,11 @@ body .container-cart {
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
@ -231,6 +253,11 @@ body .container-cart {
.product-name { .product-name {
padding-right: 0; padding-right: 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(pg, max) { @include mq(pg, max) {
padding: 0 0 10px !important; padding: 0 0 10px !important;
} }
@ -376,6 +403,11 @@ body .container-cart {
width: 38px; width: 38px;
color: $color-gray2; color: $color-gray2;
box-shadow: none; box-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
.icon-plus-sign, .icon-plus-sign,
@ -387,7 +419,7 @@ body .container-cart {
padding: 1px 12px; padding: 1px 12px;
@include mq(xxl, min) { @include mq(xxl, min) {
width: 32px; font-size: 32px;
} }
} }
} }
@ -437,6 +469,7 @@ body .container-cart {
@include mq(xxl, min) { @include mq(xxl, min) {
font-size: 28px; font-size: 28px;
line-height: 33px; line-height: 33px;
white-space: nowrap;
} }
} }
@ -501,6 +534,10 @@ body .container-cart {
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
@include mq(xxl, min) {
max-width: 552px;
}
@include mq(pg, max) { @include mq(pg, max) {
padding: 0 16px; padding: 0 16px;
} }
@ -535,6 +572,7 @@ body .container-cart {
@include mq(xxl, min) { @include mq(xxl, min) {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
max-width: 552px;
} }
} }
@ -551,6 +589,12 @@ body .container-cart {
padding: 12px 40px; padding: 12px 40px;
transition: all 0.2s linear; transition: all 0.2s linear;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
max-width: 552px;
}
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray5, 5);
} }
@ -591,8 +635,8 @@ body .container-cart {
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) { @include mq(xxl, min) {
font-size: 28px !important; font-size: 28px;
line-height: 36px !important; line-height: 36px;
} }
&:hover { &:hover {
@ -632,6 +676,11 @@ body .container-cart {
label { label {
width: 50%; width: 50%;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
&:active { &:active {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
@ -799,6 +848,10 @@ body .container-cart {
padding: 0; padding: 0;
width: 346px; width: 346px;
@include mq(xxl, min) {
width: 34.4175%;
}
@include mq(pg, max) { @include mq(pg, max) {
width: 100% !important; width: 100% !important;
padding: 0; padding: 0;
@ -820,6 +873,11 @@ body .container-cart {
line-height: 14px; line-height: 14px;
color: $color-black2; color: $color-black2;
text-decoration: none; text-decoration: none;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -931,6 +989,12 @@ body .container-cart {
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
padding: 12px 0; padding: 12px 0;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
white-space: nowrap;
}
} }
&.info { &.info {
@ -951,6 +1015,12 @@ body .container-cart {
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-weight: 700;
font-size: 36px;
line-height: 49px;
}
} }
} }
} }
@ -962,6 +1032,10 @@ body .container-cart {
flex-direction: column; flex-direction: column;
width: 343px; width: 343px;
@include mq(xxl, min) {
width: 688.35px;
}
@include mq(pg, max) { @include mq(pg, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -990,6 +1064,11 @@ body .container-cart {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black2; color: $color-black2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -1018,6 +1097,11 @@ body .container-cart {
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }

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

@ -19,6 +19,11 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: $color-black2; color: $color-black2;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
} }
} }
@ -45,6 +50,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
&:hover { &:hover {

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

@ -85,6 +85,11 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
} }
.dropdown { .dropdown {

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

@ -120,7 +120,7 @@
bottom: 50%; bottom: 50%;
left: -949px; left: -949px;
z-index: 5; z-index: 5;
width: 100%; width: inherit;
} }
} }
.slick-next { .slick-next {
@ -136,7 +136,7 @@
no-repeat center; no-repeat center;
z-index: 5; z-index: 5;
right: -910px; right: -910px;
width: 100%; width: inherit;
} }
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -23,6 +23,7 @@ $color-gray7: #c4c4c4;
$color-gray8: #e0e0e0; $color-gray8: #e0e0e0;
$color-gray9: #808080; $color-gray9: #808080;
$color-gray10: #58595b; $color-gray10: #58595b;
$color-gray11: #828282;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00c8ff; $color-blue2: #00c8ff;