LeonardoPereiraRocha/m3-academy-template-checkout-leonardo-pereira-rocha
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:ajusta o posicionamento de alguns itens

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2022-12-18 22:53:05 -03:00
parent 3f081a8946
commit 6e1a17416d
7 changed files with 231 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,11 @@
font-size: 20px;
line-height: 23px;
font-family: $font-family-secundary;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
}
small {
@ -47,6 +52,11 @@
font-size: 20px;
line-height: 23px;
font-family: $font-family-secundary;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
}
}
}
@ -65,7 +75,10 @@
border: 1px solid $color-black2;
box-sizing: border-box;
border-radius: 5px 0 0 5px;
width: 443px;
width: 65.737%;
@media (min-width: 2500px) {
width: 85%;
}
@media (max-width: 1024px) {
width: 84.498% !important;
@ -89,22 +102,26 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
width: 126.76px;
width: 17.326%;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
@media (min-width: 2500px) {
width: 219px;
}
@media (max-width: 1024px) {
margin-right: 16px;
margin-right: 30px;
position: absolute;
}
@media (max-width: 490px) {
height: 52px;
margin-right: 16px;
position: absolute;
top: -5px;
margin-right: 30px;
margin-bottom: 49px;
/* position: absolute; */
top: -8px;
width: 33.8%;
}
}
@ -118,6 +135,9 @@
.emailInfo {
padding: 16px;
@media (max-width: 1024px) {
margin-top: 49px;
}
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
@ -128,6 +148,11 @@
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
}
ul {
@ -139,6 +164,11 @@
font-weight: 700;
font-size: 12px;
line-height: 16px;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
}
i::before {
@ -360,15 +390,27 @@
.vtex-omnishipping-1-x-addressFormPart1 {
p.input.ship-postalCode.required.text {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 20px;
line-height: 23px;
}
display: flex;
flex-direction: column;
label {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
#ship-postalCode {
padding-right: 67.612%;
}
}
.input.ship-country.text {
p.input.ship-country.text {
display: none;
}
}
@ -376,6 +418,11 @@
.input .ship-complement .text {
display: inline-block;
width: 95.331%;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 20px;
line-height: 23px;
}
}
.vtex-omnishipping-1-x-address {
@ -399,8 +446,6 @@
}
}
.vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
@ -417,4 +462,23 @@
}
}
}
p.input.ship-country.text {
display: none;
}
p.input.postalCode.text {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
}
p.input.ship-postalCode.required.text {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 20px;
line-height: 23px;
}
}

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

@ -131,8 +131,9 @@
padding: 0;
width: 60px;
@include mq(sm, max) {
width: 72px;
@media (min-width: 2500px) {
height: 146px;
width: 146px;
}
img {
@ -140,9 +141,10 @@
max-width: 100%;
width: 60px;
@include mq(sm, max) {
height: 72px;
width: auto;
@media (min-width: 2500px) {
height: 146px;
max-width: 100%;
width: 146px;
}
}
}
@ -183,12 +185,22 @@
th.quantity,
th.product,
th.product-price {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
display: none;
}
}
th.quantity-price {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
display: none;
}
@ -198,6 +210,11 @@
color: $color-gray2;
font-size: 12px;
line-height: 14px;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
@media (max-width: 1024px) {
display: none;
@ -205,6 +222,11 @@
}
td.quantity-price {
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
@media (max-width: 1024px) {
display: none;
}
@ -375,9 +397,15 @@
}
.summary {
/* @media (min-width: 2500px) {
display: flex;
}*/
.cart-more-options {
margin: 0;
width: max-content;
/*@media (min-width: 2500px) {
width: max-content;
}*/
.srp-container {
padding: 0 0 0 10px;
@ -387,6 +415,11 @@
}
.srp-main-title {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 48px;
line-height: 65px;
}
margin: 32px 0 12px;
font-style: normal;
font-weight: normal;
@ -400,6 +433,12 @@
}
.srp-description {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 36px;
width: 552px;
}
color: $color-gray2;
font-size: 12px;
line-height: 18px;
@ -453,6 +492,11 @@
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
&:hover {
background-color: lighten($color-black, 5);
@ -477,6 +521,9 @@
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
@media (min-width: 2500px) {
width: 543.67px;
}
}
&__current {
@ -489,7 +536,11 @@
}
label {
width: 50%;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
&:active {
background-color: #f0f0f0;
@ -770,6 +821,12 @@
line-height: 16px;
color: $color-black;
padding: 12px 0;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
width: 153px;
}
}
&.info {
@ -790,6 +847,12 @@
font-size: 18px;
line-height: 25px;
color: $color-black;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 36px;
line-height: 49px;
width: 153px;
}
}
}
}
@ -858,6 +921,11 @@
vertical-align: middle;
text-shadow: none;
color: $color-black2;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
}
}
}

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

@ -82,12 +82,12 @@ body .container-main.container-order-form .orderform-template.active {
margin-right: 25px;
@media (max-width: 1024px) {
width: 45.603% !important;
margin-left: 16px;
margin-right: 16px;
}
@media (min-width: 2500px) {
width: 42.573%;
margin-left: 30px;
margin-right: 60px;
}
#client-first-name {
width: 100% !important;
@ -101,11 +101,12 @@ body .container-main.container-order-form .orderform-template.active {
width: 42.933%;
@media (max-width: 1024px) {
width: 45.603%;
margin-left: 14.5px;
margin-right: 14.5px;
}
@media (min-width: 2500px) {
width: 42.573%;
margin-right: 60px;
}
#client-last-name {
width: 100%;

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

@ -60,6 +60,13 @@ body {
.btn-success {
background: $color-black;
text-shadow: none;
span {
@media (min-width: 2500px) {
font-weight: 700;
font-size: 28px;
line-height: 38px;
}
}
&:hover {
background: lighten($color-black, 15%);

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

@ -107,6 +107,11 @@
no-repeat center center;
z-index: 4;
left: 10px;
@media (min-width: 2500px) {
width: 26px;
height: 56px;
top: 251px;
}
}
.slick-next {
border: none;
@ -115,6 +120,11 @@
no-repeat center center;
z-index: 4;
right: 10px;
@media (min-width: 2500px) {
width: 26px;
height: 56px;
top: 251px;
}
}
.slick-arrow.slick-hidden {
display: none;

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

@ -14,9 +14,16 @@
color: $color-black2;
font-family: font-family-secundary;
text-align: center;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 48px;
line-height: 76px;
}
}
.product-name {
overflow: auto;
height: 18px;
font-family: $font-family;
font-style: normal;
margin-bottom: 20px;
@ -25,7 +32,15 @@
line-height: 18px;
text-align: center;
color: $color-black2;
display: flex;
margin-top: 20px;
@media (min-width: 2500px) {
width: 485.07px;
height: 34.99px;
font-weight: 400;
font-size: 26px;
line-height: 35px;
}
}
figure {
@ -41,12 +56,16 @@
list-style-type: none;
justify-content: center;
gap: 5px;
display: flex;
width: 92%;
flex-wrap: wrap;
text-transform: uppercase;
display: flex;
margin: 0;
margin-bottom: 20px;
}
.size-cards {
display: flex;
margin-bottom: 20px;
background-color: $color-blue2;
border-radius: 8px;
@ -55,6 +74,15 @@
font-weight: 700;
font-size: 13px;
line-height: 18px;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 26px;
line-height: 35px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
}
/* identical to box height */
display: flex;
@ -74,6 +102,15 @@
width: 97%;
color: white;
display: flex;
@media (min-width: 2500px) {
font-weight: 700;
font-size: 26px;
line-height: 35px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
}
}
}
@ -173,17 +210,32 @@
display: flex;
list-style-type: none;
margin: 0;
span {
@media (min-width: 2500px) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
.logo-m3 {
margin: 0;
width: 28.66px;
height: 15.65px;
@media (min-width: 2500px) {
width: 55.98px;
height: 30.55px;
}
}
.logo-vtex {
margin: 0;
width: 44.92px;
height: 16px;
@media (min-width: 2500px) {
width: 87.73px;
height: 31.24px;
}
}
li:last-child {

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

@ -155,11 +155,20 @@
line-height: 16px;
text-transform: uppercase;
color: $color-gray;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
img {
width: 12px;
height: auto;
@media (min-width: 2500px) {
width: 29.47px;
height: 41.46px;
}
}
i {