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 tela 4k

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-26 23:58:18 -03:00
parent bdd6671409
commit f13eadad63
9 changed files with 293 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
font-size: 12px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 40px;
}
}
@ -28,6 +28,10 @@
.link-cart {
text-transform: uppercase;
margin: 0 !important;
@media (min-width: 2500px) {
font-size: 28px;
}
a {
color: $color-black;
font-family: $font-family-secondary;
@ -43,8 +47,10 @@
font-size: 10px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
}
@ -96,7 +102,7 @@
width: auto;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -124,8 +130,9 @@
position: absolute;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
width: 219px;
}
}
@ -137,7 +144,7 @@
font-weight: 700;
text-transform: capitalize;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -161,7 +168,7 @@
margin-bottom: 9px;
margin-top: 0;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -175,7 +182,7 @@
font-size: 12px;
font-weight: 700;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -185,7 +192,7 @@
font-size: 1rem;
opacity: 1;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 2.1rem;
}
}
@ -206,7 +213,7 @@
font-size: 6rem;
opacity: 0.5;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 11.09rem;
}
}
@ -279,7 +286,7 @@
fill: $color-black2;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -297,6 +304,11 @@
right: 1px;
top: -1px;
opacity: 1;
@media (min-width: 2500px) {
height: 40.48px;
width: 39.24px;
}
}
}
@ -319,7 +331,7 @@
color: $color-gray2;
font-weight: 400;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
}
@ -341,16 +353,17 @@
font-weight: 400;
width: -webkit-fill-available;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
margin-top: 11px;
height: 51px;
font-size: 28px;
line-height: 32px;
}
&#client-email {
height: 42px !important;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
height: 51px !important;
}
}
@ -362,6 +375,10 @@
&#ship-complement,
&#ship-receiverName {
height: 35px !important;
@media (min-width: 2500px) {
height: 51px !important;
}
}
&#client-phone,
@ -439,7 +456,7 @@
background: darken($color-black2, 5);
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
height: 61px;
font-size: 28px;
}
@ -458,6 +475,11 @@
color: $color-black2;
font-size: 14px;
font-weight: 500;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
.shp-lean {
@ -481,6 +503,11 @@
color: $color-black2;
font-size: 14px;
font-weight: 500;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
.shp-summary-group-info {
@ -543,6 +570,11 @@
color: $color-gray6;
text-transform: uppercase;
font-size: 14px;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
.vtex-omnishipping-1-x-deliveryOptionActive {
@ -550,6 +582,11 @@
text-transform: uppercase;
font-size: 14px;
text-shadow: none !important;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
}
}
}
@ -587,7 +624,7 @@
align-items: flex-end;
padding-left: 3px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
@ -644,7 +681,7 @@
font-size: 16px;
font-weight: 400;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -688,6 +725,12 @@
align-items: center;
justify-content: center;
background-image: none !important;
@media (min-width: 2500px) {
font-size: 28px;
width: 406px;
line-height: 32px;
}
}
&.active {
@ -706,6 +749,10 @@
@media (max-width: 1024px) {
width: auto;
}
@media (min-width: 2500px) {
width: 800px;
}
}
}
@ -716,6 +763,12 @@
p.link-gift-card {
left: 0 !important;
}
@media (min-width: 2500px) {
display: block;
font-size: 24px;
line-height: 32px;
}
}
.shipping-data.active {
@ -734,6 +787,12 @@
font-size: 14px;
height: 45px;
margin-bottom: 12px;
@media (min-width: 2500px) {
height: 61px;
line-height: 32px;
font-size: 28px;
}
}
#ship-postalCode {
@ -741,6 +800,10 @@
width: 100%;
max-width: -webkit-fill-available;
height: 35px;
@media (min-width: 2500px) {
height: 51px !important;
}
}
.vtex-omnishipping-1-x-addressFormPart1 small {
@ -754,7 +817,7 @@
font-weight: 400;
color: $color-black2 !important;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -785,7 +848,7 @@
font-weight: 400;
color: $color-gray2;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -809,7 +872,7 @@
font-size: 12px;
color: $color-gray2 !important;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -835,8 +898,9 @@
.ship-receiverName {
font-size: 12px !important;
@media (max-width: 2500px) {
font-size: 24px;
@media (min-width: 2500px) {
font-size: 24p !important;
line-height: 32.68px;
}
}

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

@ -56,7 +56,7 @@
font-weight: 400;
padding: 0 0 34px 17px !important;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -107,8 +107,8 @@
td.info {
width: 100%;
@media (max-width: 2500px) {
font-size: 28px;
@media (min-width: 2500px) {
font-size: 28px !important;
}
}
}
@ -173,6 +173,11 @@
display: none;
}
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
.product-image {
@ -227,7 +232,7 @@
text-decoration: none;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -267,7 +272,7 @@
display: none;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -314,11 +319,11 @@
line-height: 14px;
text-decoration-line: line-through;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -379,6 +384,11 @@
@include mq(lg, max) {
width: 24px !important;
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
#item-quantity-change-decrement-2621 {
@ -438,6 +448,11 @@
font-size: 14px;
line-height: 16px;
color: $color-black2;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
}
@ -546,7 +561,7 @@
margin-top: 0;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 48px;
}
}
@ -557,6 +572,11 @@
line-height: 18px;
margin: 0 0 12px;
min-width: 19rem !important;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
button.shp-open-options {
@ -581,6 +601,11 @@
&:active {
background-color: darken($color-gray5, 5);
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
@media (max-width: 1024px) {
@ -624,6 +649,11 @@
&:active {
background-color: darken($color-black2, 5);
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
}
@ -640,6 +670,11 @@
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
&__current {
@ -665,7 +700,7 @@
color: $color-black;
font-size: 12px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -681,7 +716,7 @@
color: $color-black;
margin-bottom: 2px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -697,7 +732,7 @@
padding: 12px 8px;
width: 172px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -726,6 +761,11 @@
&:active {
background-color: darken($color-black2, 5);
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
small a {
@ -736,6 +776,11 @@
line-height: 12px;
color: $color-black;
text-decoration: underline;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 27px;
}
}
span.help.error {
@ -746,7 +791,7 @@
width: 100%;
top: 17px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -759,6 +804,11 @@
color: $color-black2;
font-weight: 400;
font-size: 14px;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
#deliver-at-text a {
@ -770,7 +820,7 @@
text-decoration: underline;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -841,7 +891,7 @@
color: $color-black;
text-decoration: none;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -867,7 +917,7 @@
font-size: 12px;
text-decoration: underline;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -890,7 +940,7 @@
margin-top: 0;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -940,7 +990,7 @@
width: 100%;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -963,6 +1013,11 @@
width: 133.51px;
text-transform: uppercase;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
@media (max-width: 1024px) {
margin-left: 0;
}
@ -1000,6 +1055,11 @@
line-height: 16px;
color: $color-black2;
padding: 12px 0;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
&.info {
@ -1066,7 +1126,7 @@
line-height: 14px;
color: $color-black;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -1101,6 +1161,11 @@
vertical-align: middle;
line-height: 19px;
text-shadow: none;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
@media (max-width: 1024px) {

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

@ -24,6 +24,10 @@ body .container-main.container-order-form .orderform-template.active {
.cart {
padding: 0 17px 19px 17px;
@media (min-width: 2500px) {
padding: 0 34px 19px 34px;
}
li.hproduct.item.muted {
display: flex;
align-items: center;
@ -46,7 +50,7 @@ body .container-main.container-order-form .orderform-template.active {
width: 39.252%;
white-space: normal;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -60,8 +64,9 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 16.34px;
margin-right: 0 !important;
@media (max-width: 2500px) {
font-size: 24px;
@media (min-width: 2500px) {
font-size: 24px !important;
line-height: 32.68px;
}
}
@ -72,7 +77,7 @@ body .container-main.container-order-form .orderform-template.active {
margin-top: 0 !important;
font-size: 12px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -88,7 +93,7 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 16px;
color: $color-black;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
}
}
@ -109,8 +114,9 @@ body .container-main.container-order-form .orderform-template.active {
padding-right: 17px;
color: $color-gray2;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
}
@ -118,6 +124,10 @@ body .container-main.container-order-form .orderform-template.active {
tfoot td.monetary,
tfoot td.info {
color: $color-black2 !important;
@media (min-width: 2500px) {
font-size: 32px;
}
}
td.info {
@ -137,6 +147,10 @@ body .container-main.container-order-form .orderform-template.active {
background-color: $color-green2;
border-radius: 8px;
@media (min-width: 2500px) {
height: 61px;
}
.icon-lock {
display: none;
}
@ -147,8 +161,9 @@ body .container-main.container-order-form .orderform-template.active {
letter-spacing: 0.05em;
font-size: 14px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
line-height: 32px;
}
}
}
@ -170,7 +185,7 @@ body .container-main.container-order-form .orderform-template.active {
font-size: inherit !important;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -208,7 +223,7 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 24px;
margin-top: 12px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
}
}
@ -227,7 +242,7 @@ body .container-main.container-order-form .orderform-template.active {
font-size: 16px;
color: $color-black2;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 32px;
}
}
@ -242,7 +257,7 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 19px;
color: $color-gray2;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 28px;
}
}

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

@ -25,7 +25,7 @@
margin-bottom: 22px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 48px;
}
}
@ -63,7 +63,10 @@
height: 46px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
line-height: 32px;
width: 638px;
height: 66px;
font-size: 28px;
}

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

@ -76,7 +76,7 @@ body {
margin-left: 30px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 48px;
}
}

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

@ -123,7 +123,12 @@
@media (max-width: 375px) {
left: -1px;
}
@media (min-width: 2500px) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") no-repeat center center;
}
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center
center;
@ -133,6 +138,11 @@
@media (max-width: 375px) {
right: -1px;
}
@media (min-width: 2500px) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") no-repeat center
center;
}
}
.slick-arrow.slick-hidden {
display: none;

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

@ -38,6 +38,12 @@
}
}
@media (min-width: 2500px) {
width: 95%;
justify-content: space-between;
align-items: center;
}
&:before,
&:after {
display: none;
@ -60,6 +66,11 @@
margin-bottom: 24px;
max-width: 100%;
}
@media (min-width: 2500px) {
font-size: 20px;
line-height: 27px;
}
}
&__stamps {
@ -92,10 +103,18 @@
img {
width: 35.65px;
@media (min-width: 2500px) {
width: 69px;
}
}
.vtexPCI-icon {
width: 53px;
@media (min-width: 2500px) {
width: 103px;
}
}
}
@ -107,10 +126,18 @@
.vtex-icon {
width: 44.92px;
@media (min-width: 2500px) {
width: 87px;
}
}
.m3-icon {
width: 28.66px;
@media (min-width: 2500px) {
width: 55px;
}
}
span {
@ -137,6 +164,11 @@
span {
margin-right: 8px;
}
@media (min-width: 2500px) {
font-size: 18px;
line-height: 24px;
}
}
}
}

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

@ -28,6 +28,10 @@
display: flex;
gap: 100px;
@media (min-width: 2500px) {
gap: 313px;
}
.container-li {
position: relative;
display: flex;
@ -42,7 +46,7 @@
color: black;
line-height: 14px;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -55,6 +59,11 @@
border: 1px solid black;
border-radius: 50%;
margin: 0;
@media (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
.progress-bar-line-1,
@ -63,16 +72,30 @@
height: 1px;
background: $color-black;
bottom: 6px;
@media (min-width: 2500px) {
bottom: 9px;
}
}
.progress-bar-line-1 {
width: 174px;
left: 47px;
@media (min-width: 2500px) {
width: 459px;
left: 92px;
}
}
.progress-bar-line-2 {
width: 164px;
right: 38px;
@media (min-width: 2500px) {
width: 448px;
right: 69px;
}
}
#progress-bar-circle-1.active,
@ -89,11 +112,10 @@
img {
height: 37.14px;
width: 155.58px;
// @media (max-width: 1024px) {
// max-width: none;
// width: 122.44%;
// height: auto;
// }
@media (min-width: 2500px) {
width: 382px;
height: auto;
}
}
}
@ -112,7 +134,7 @@
line-height: 14px;
color: $color-black2;
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
@ -125,6 +147,11 @@
img {
width: 12px;
height: 15px;
@media (min-width: 2500px) {
width: 29px;
height: 41px;
}
}
}
}

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

@ -20,7 +20,7 @@
font-size: 14px;
}
@media (max-width: 2500px) {
@media (min-width: 2500px) {
font-size: 48px;
}
}
@ -46,6 +46,11 @@
text-align: center;
color: $color-black;
margin: 20px 0 !important;
@media (min-width: 2500px) {
font-size: 26px;
line-height: 35.41px;
}
}
.product-btn {
@ -62,6 +67,12 @@
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 18px;
@media (min-width: 2500px) {
height: 59px;
font-size: 26px;
line-height: 35.41px;
}
}
.product-skus {
@ -95,5 +106,10 @@
font-family: $font-family;
padding: 5px;
height: fit-content;
@media (min-width: 2500px) {
font-size: 26px;
line-height: 35.41px;
}
}
}