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 {
.client-pre-email {
border-color: $color-gray4;
@ -31,6 +38,11 @@ textarea[class*="span"],
color: lighen($color-black, 10);
}
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(pg, max) {
font-size: 10px;
line-height: 12px;
@ -65,6 +77,11 @@ textarea[class*="span"],
line-height: 23px;
text-transform: uppercase;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(cstm, max) {
font-weight: 400;
font-size: 12px;
@ -79,6 +96,11 @@ textarea[class*="span"],
line-height: 23px;
text-transform: uppercase;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(cstm, max) {
font-weight: 400;
font-size: 12px;
@ -112,6 +134,11 @@ textarea[class*="span"],
color: $color-black2 !important;
}
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@media (max-width: 490px) {
width: auto;
}
@ -133,6 +160,12 @@ textarea[class*="span"],
top: 0;
cursor: pointer;
@include mq(xxl, min) {
font-size: 28px;
// line-height: 38px;
padding: 12.56px 17.89px;
}
@media (max-width: 490px) {
// height: 48px;
margin: 0;
@ -145,6 +178,11 @@ textarea[class*="span"],
font-weight: 700;
font-size: 12px;
line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
@ -161,6 +199,11 @@ textarea[class*="span"],
font-size: 12px;
line-height: 16px;
margin: 0 0 8px 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
ul {
@ -173,12 +216,21 @@ textarea[class*="span"],
font-weight: 700;
font-size: 12px;
line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
i::before {
color: $color-blue2;
font-size: 1rem;
opacity: 1;
@include mq(xxl, min) {
font-size: 2.063rem;
}
}
}
}
@ -188,6 +240,10 @@ textarea[class*="span"],
font-size: 6rem;
opacity: 0.5;
@include mq(xxl, min) {
font-size: 7.159rem;
}
@include mq(cstm, max) {
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 {
.accordion-heading {
span {
@ -206,6 +271,11 @@ textarea[class*="span"],
font-weight: 400;
font-size: 16px;
line-height: 19px;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
}
}
}
@ -281,6 +351,21 @@ textarea[class*="span"],
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 {
label {
font-family: $font-family;
@ -288,40 +373,86 @@ textarea[class*="span"],
font-weight: 400;
font-size: 14px;
line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
select,
input {
border: 1px solid $color-gray8;
border-radius: 5px;
box-sizing: border-box;
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 {
@include mq(sm, max) {
width: 70px !important;
}
}
select,
input:not([type="checkbox"]) {
height: 44px;
.input-xlarge {
@media (max-width: 767) {
max-width: none !important;
}
}
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
height: 61px;
}
@include mq(pg, max) {
width: 100%;
margin-right: 14.5px;
}
}
#client-phone,
#client-document {
height: 44px;
}
// #client-phone,
// #client-document {
// }
.help.error {
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;
cursor: pointer;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
&:hover {
background: lighten($color-black, 5);
}
@ -381,6 +517,11 @@ textarea[class*="span"],
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.vtex-omnishipping-1-x-deliveryGroup {
@ -390,6 +531,11 @@ textarea[class*="span"],
font-weight: 700;
font-size: 14px;
line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
.shp-lean {
@ -402,6 +548,11 @@ textarea[class*="span"],
color: #303030;
padding: 8px 12px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
svg path {
// fill: #d8c8ac;
background: #00c8ff;
@ -416,6 +567,11 @@ textarea[class*="span"],
font-size: 12px;
line-height: 16px;
color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.shp-summary-group-info {
@ -423,13 +579,17 @@ textarea[class*="span"],
}
.address-summary {
// background: none;
background: none;
border-color: $color-gray8;
border-radius: 8px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
// padding: 12px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(md, max) {
background-position: 8px 9px;
@ -445,6 +605,11 @@ textarea[class*="span"],
line-height: 16px;
color: $color-blue2;
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;
transition: all 0.2s ease-in-out;
@include mq(xxl, min) {
width: 406.48px;
}
span {
text-align: center;
color: $color-gray10;
@ -482,6 +651,12 @@ textarea[class*="span"],
font-size: 14px;
line-height: 24px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 24px;
white-space: nowrap;
}
&::selection {
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-package {
color: $color-gray4;
@ -499,11 +751,16 @@ textarea[class*="span"],
.shp-summary-group-price {
padding-right: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.shp-summary-package {
padding-left: 16px;
}
// .shp-summary-package {
// padding-left: 16px;
// }
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
@ -529,9 +786,26 @@ textarea[class*="span"],
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 {
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;
box-sizing: border-box;
border-radius: 5px;
margin-bottom: 48px;
padding: 16px;
@include mq(pg, max) {
@ -57,12 +58,18 @@ body .container-cart {
padding: 17px 24px;
h2 {
display: flex;
padding-bottom: 16px;
background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
}
.item-unavailable {
@ -90,6 +97,11 @@ body .container-cart {
.shipping-date,
.price {
color: #7d7d7d;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
}
@ -102,6 +114,11 @@ body .container-cart {
#go-to-cart-button a {
color: #303030;
text-decoration: underline;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
.summary-totalizers {
@ -124,6 +141,11 @@ body .container-cart {
&:active {
background: darken($color-black, 5);
}
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
}
@ -231,6 +253,11 @@ body .container-cart {
.product-name {
padding-right: 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(pg, max) {
padding: 0 0 10px !important;
}
@ -376,6 +403,11 @@ body .container-cart {
width: 38px;
color: $color-gray2;
box-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
}
.icon-plus-sign,
@ -387,7 +419,7 @@ body .container-cart {
padding: 1px 12px;
@include mq(xxl, min) {
width: 32px;
font-size: 32px;
}
}
}
@ -437,6 +469,7 @@ body .container-cart {
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
white-space: nowrap;
}
}
@ -501,6 +534,10 @@ body .container-cart {
.srp-container {
padding: 0 0 0 10px;
@include mq(xxl, min) {
max-width: 552px;
}
@include mq(pg, max) {
padding: 0 16px;
}
@ -535,6 +572,7 @@ body .container-cart {
@include mq(xxl, min) {
font-size: 28px;
line-height: 36px;
max-width: 552px;
}
}
@ -551,6 +589,12 @@ body .container-cart {
padding: 12px 40px;
transition: all 0.2s linear;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
max-width: 552px;
}
&:hover {
background-color: lighten($color-gray5, 5);
}
@ -591,8 +635,8 @@ body .container-cart {
text-transform: uppercase;
@include mq(xxl, min) {
font-size: 28px !important;
line-height: 36px !important;
font-size: 28px;
line-height: 36px;
}
&:hover {
@ -632,6 +676,11 @@ body .container-cart {
label {
width: 50%;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
&:active {
background-color: #f0f0f0;
}
@ -799,6 +848,10 @@ body .container-cart {
padding: 0;
width: 346px;
@include mq(xxl, min) {
width: 34.4175%;
}
@include mq(pg, max) {
width: 100% !important;
padding: 0;
@ -820,6 +873,11 @@ body .container-cart {
line-height: 14px;
color: $color-black2;
text-decoration: none;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
@ -931,6 +989,12 @@ body .container-cart {
line-height: 16px;
color: $color-black;
padding: 12px 0;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
white-space: nowrap;
}
}
&.info {
@ -951,6 +1015,12 @@ body .container-cart {
font-size: 18px;
line-height: 21px;
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;
width: 343px;
@include mq(xxl, min) {
width: 688.35px;
}
@include mq(pg, max) {
padding: 0 16px;
width: calc(100% - 32px);
@ -990,6 +1064,11 @@ body .container-cart {
font-size: 12px;
line-height: 14px;
color: $color-black2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
@ -1018,6 +1097,11 @@ body .container-cart {
vertical-align: middle;
line-height: 19px;
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-transform: uppercase;
color: $color-black2;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
}
}
@ -45,6 +50,11 @@
letter-spacing: 0.05em;
text-transform: uppercase;
transition: ease-in 0.22s all;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
}
&:hover {

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

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

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

@ -120,7 +120,7 @@
bottom: 50%;
left: -949px;
z-index: 5;
width: 100%;
width: inherit;
}
}
.slick-next {
@ -136,7 +136,7 @@
no-repeat center;
z-index: 5;
right: -910px;
width: 100%;
width: inherit;
}
}
.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-gray9: #808080;
$color-gray10: #58595b;
$color-gray11: #828282;
$color-blue: #4267b2;
$color-blue2: #00c8ff;