Gabriel_Ferraz_Nogueira/m3-academy-template-checkout-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: layout 2500px e mobile #2

Merged
Gabriel_Ferraz_Nogueira merged 1 commits from Develop into main 2022-12-26 22:04:46 +00:00
Conversation 0 Commits 1 Files Changed 7 +395 -55
7 changed files with 395 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,9 @@
.checkout-container { .checkout-container {
padding-bottom: 90px; padding-bottom: 90px;
@include mq(dt, max) {
padding-bottom: 0;
}
.client-pre-email { .client-pre-email {
border-color: $black; border-color: $black;
font-family: $font-family; font-family: $font-family;

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

@ -7,7 +7,7 @@
.cart-template { .cart-template {
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(md, max) { @include mq(dt, max) {
padding: 0 0; padding: 0 0;
} }
@ -24,19 +24,21 @@
border-radius: 5px; border-radius: 5px;
padding: 30px 17px 0px 17px; padding: 30px 17px 0px 17px;
.clearfix::before { @include mq(dt, max) {
display: none;
}
@include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border: 1px solid $gray-100 !important;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
padding: 0 16px;
} }
@include mq(dt, max) { // @media (max-width: 490px) {
padding: 16px 0 16px 16px; // border: 1px solid $gray-100 !important;
// }
.clearfix::before {
display: none;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
@ -102,8 +104,18 @@
border-top: none; border-top: none;
background: $white; background: $white;
@include mq(dt, max) {
display: flex;
flex-direction: column;
}
.row-fluid summary { .row-fluid summary {
margin-top: 48px; margin-top: 48px;
@include mq(dt, max) {
display: flex;
flex-direction: column;
}
} }
.row-fluid summary ::after, .row-fluid summary ::after,
::before { ::before {
@ -171,12 +183,39 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@include mq(dt, max) {
display: block;
margin-top: 0;
padding: 0;
position: relative;
}
.fn product-name { .fn product-name {
line-break: auto; line-break: auto;
width: 117px; width: 117px;
white-space: normal; white-space: normal;
} }
thead {
@include mq(dt, max) {
display: none;
}
}
tbody {
@include mq(dt, max) {
display: block;
.product-item {
display: block;
margin: 10px 0;
padding: 0;
position: relative;
// border: 1px solid $gray-100;
}
}
}
th { th {
color: $black; color: $black;
padding: 0 0 16px; padding: 0 0 16px;
@ -185,7 +224,12 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@include mq(md, max) { @include mq(tv, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(dt, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
display: none; display: none;
@ -198,8 +242,15 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(tv, min) {
width: 72px; width: 146px;
}
@include mq(dt, max) {
// width: 72px;
position: absolute;
display: inline-block;
left: 0;
} }
img { img {
@ -207,6 +258,10 @@
max-width: 100%; max-width: 100%;
width: auto; width: auto;
@include mq(tv, min) {
height: 146px;
}
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
width: auto; width: auto;
@ -224,6 +279,20 @@
white-space: normal !important; white-space: normal !important;
color: $black; color: $black;
@include mq(tv, min) {
width: 359px;
}
@include mq(dt, max) {
display: block;
width: auto;
margin-left: 60px;
padding: 0 0 10px !important;
text-align: left;
line-height: 140%;
width: auto;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
@ -240,8 +309,16 @@
text-decoration: none; text-decoration: none;
} }
@media (max-width: 490px) { @include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(dt, max) {
display: block;
padding-right: 20px;
margin-left: 23px; margin-left: 23px;
overflow: hidden;
} }
} }
@ -252,24 +329,27 @@
} }
td.shipping-date { td.shipping-date {
color: $black; color: $gray-150;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(md, max) { @include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(dt, max) {
display: none; display: none;
} }
} }
.product-price { .product-price {
min-width: 100px; min-width: 100px;
@include mq(md, max) { @include mq(dt, max) {
min-width: 78px; text-align: right;
} float: right;
@media (max-width: 490px) { margin-right: 5px;
position: absolute; padding: 0;
bottom: 0;
right: 0;
} }
span.list-price { span.list-price {
@ -277,6 +357,17 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(dt, max) {
text-align: right;
float: right;
}
@include mq(sm, max) { @include mq(sm, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -290,7 +381,7 @@
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $gray-100;
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -301,8 +392,10 @@
padding: 0; padding: 0;
width: max-content !important; width: max-content !important;
@media (max-width: 490px) { @media (max-width: 1024px) {
margin-left: 84px !important; margin-left: 71px !important;
width: 81px;
padding: 0px;
} }
input { input {
@ -318,6 +411,11 @@
color: $black; color: $black;
box-shadow: none; box-shadow: none;
@include mq(tv, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} }
@ -337,13 +435,21 @@
&:before { &:before {
color: $blue; color: $blue;
font-size: 16px; font-size: 16px;
@include mq(tv, min) {
font-size: 24px;
}
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
color: $blue; color: $blue;
font-size: 14px; font-size: 16px;
@include mq(tv, min) {
font-size: 24px;
}
} }
} }
@ -357,7 +463,7 @@
top: inherit; top: inherit;
} }
@media (max-width: 490px) { @media (max-width: 1024px) {
padding: 0; padding: 0;
} }
} }
@ -368,31 +474,46 @@
.icon-question-sign { .icon-question-sign {
display: none; display: none;
} }
@include mq(tv, min) {
min-width: 154px;
}
span { span {
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gray-500; color: $gray-500;
@include mq(tv, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
.quantity-price { .quantity-price {
@include mq(md, max) { @include mq(dt, max) {
display: none; display: none;
} }
} }
.item-remove { .item-remove {
@media (max-width: 490px) { @include mq(dt, max) {
top: 0; position: absolute;
display: inline-block;
padding: 4px 0;
top: 2px;
right: 0;
width: 24px;
text-align: center;
} }
.icon::before { .icon::before {
color: $gray-200; color: $gray-125;
font-size: 15px; font-size: 12px;
@include mq(md, max) { @include mq(tv, min) {
font-size: 18px; font-size: 26px;
} }
} }
} }
@ -419,8 +540,9 @@
.srp-container { .srp-container {
padding: 0 0 0 16px; padding: 0 0 0 16px;
@include mq(md, max) { @include mq(dt, max) {
padding: 0 16px; padding: 0 16px;
margin-bottom: 48px;
} }
.srp-main-title { .srp-main-title {
@ -432,6 +554,11 @@
line-height: 33px; line-height: 33px;
color: $black; color: $black;
@include mq(tv, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@ -443,6 +570,13 @@
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
@include mq(tv, min) {
width: 552px;
max-width: none;
font-size: 28px;
line-height: 36px;
}
} }
button.shp-open-options { button.shp-open-options {
@ -458,6 +592,11 @@
outline: none; outline: none;
padding: 12px 40px; padding: 12px 40px;
transition: all 0.2s linear; transition: all 0.2s linear;
@include mq(tv, min) {
font-size: 28px;
line-height: 38px;
}
} }
.ship-country { .ship-country {
@ -509,6 +648,11 @@
text-transform: uppercase; text-transform: uppercase;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
color: $gray-125; color: $gray-125;
@include mq(tv, min) {
font-size: 28px;
line-height: 38px;
}
} }
&__current { &__current {
@ -545,6 +689,15 @@
line-height: 14px; line-height: 14px;
color: $black; color: $black;
margin-bottom: 12px; margin-bottom: 12px;
@include mq(tv, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(dt, max) {
margin-bottom: 2px;
}
} }
input { input {
@ -556,6 +709,21 @@
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(tv, min) {
width: 333.96px;
font-size: 28px;
line-height: 38px;
height: 55px;
}
@include mq(dt, max) {
width: 215px;
}
@include mq(Gf, max) {
width: 122px;
}
} }
& ~ button { & ~ button {
@ -573,6 +741,25 @@
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 96px;
text-transform: uppercase; text-transform: uppercase;
@include mq(tv, min) {
width: 194.16px;
height: 55px;
font-size: 28px;
line-height: 38px;
top: 56px;
right: -415px;
}
@include mq(dt, max) {
width: 120px;
top: 26px;
right: -213px;
}
@include mq(Gf, max) {
right: -117px;
}
} }
small a { small a {
@ -585,6 +772,15 @@
color: $black; color: $black;
margin-top: 7px; margin-top: 7px;
cursor: pointer; cursor: pointer;
@include mq(tv, min) {
font-size: 20px;
line-height: 23px;
}
@include mq(dt, max) {
text-decoration: underline;
}
} }
small:hover { small:hover {
@ -668,6 +864,10 @@
padding: 0; padding: 0;
width: 346px; width: 346px;
@include mq(tv, min) {
width: 688.35px;
}
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
@ -683,10 +883,15 @@
line-height: 14px; line-height: 14px;
color: $black; color: $black;
text-decoration: none; text-decoration: none;
@include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@include mq(md, max) { @include mq(dt, max) {
padding: 0 16px; padding: 0 16px;
width: 100%; width: 100%;
} }
@ -718,11 +923,11 @@
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 32px;
@include mq(sm, max) { @include mq(dt, max) {
span { span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; gap: 5px;
i { i {
position: absolute; position: absolute;
right: 91px; right: 91px;
@ -731,8 +936,14 @@
} }
} }
@include mq(sm, max) {
span {
gap: 8px;
}
}
input { input {
border: 2px solid $color-gray3; border: 2px solid $gray-100;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
font-family: $font-family-secundary !important; font-family: $font-family-secundary !important;
@ -745,10 +956,20 @@
padding: 0 16px; padding: 0 16px;
width: 51%; width: 51%;
@include mq(sm, max) { @include mq(dt, max) {
padding: 0 12.5px;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
// @include mq(sm, max) {
// max-width: 100%;
// width: 100%;
// }
@include mq(Gf, max) {
width: 43%;
}
} }
button { button {
@ -773,6 +994,12 @@
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
min-width: fit-content;
}
@include mq(dt, max) {
width: 138px;
margin-left: 0;
} }
} }
} }
@ -790,11 +1017,20 @@
&.info, &.info,
&.monetary { &.monetary {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gray-600; color: $gray-600;
padding: 25px 0; padding: 25px 0;
@include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(dt, max) {
padding: 10px 0;
}
} }
&.info { &.info {
@ -827,11 +1063,8 @@
flex-direction: column; flex-direction: column;
width: 343px; width: 343px;
@include mq(md, max) { @include mq(tv, min) {
padding: 0 16px; width: 688.35px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
} }
@include mq(md, min) { @include mq(md, min) {
@ -839,6 +1072,12 @@
padding-bottom: 50px; padding-bottom: 50px;
} }
@include mq(dt, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
}
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
@ -855,6 +1094,11 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $black; color: $black;
@include mq(tv, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -880,6 +1124,11 @@
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
text-shadow: none; text-shadow: none;
@include mq(tv, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }

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

@ -22,6 +22,10 @@ footer .footerCheckout__prateleira {
@include mq(dt, min) { @include mq(dt, min) {
width: 79.376%; width: 79.376%;
} }
@include mq(mm, max) {
width: 91.2%;
}
} }
header { header {
@ -98,6 +102,11 @@ body {
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(tv, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }

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

@ -54,7 +54,7 @@
font-size: 20px; font-size: 20px;
line-height: 27px; line-height: 27px;
min-width: 537px; min-width: 537px;
margin-left: 0; margin-left: 63px;
} }
} }
@ -180,7 +180,7 @@
@include mq(tv, min) { @include mq(tv, min) {
min-width: 388.98px; min-width: 388.98px;
margin-right: 0; margin-right: 62px;
a { a {
font-size: 18px; font-size: 18px;

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

@ -1,20 +1,19 @@
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: auto !important;
@media (min-width: 1025px) {
padding: 0 10%;
border-bottom: 1px solid $black;
}
} }
&__wrapper { &__wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-between;
padding: 16px; padding: 16px;
border-bottom: 1px solid $black;
@media (min-width: 1025px) { @media (min-width: 1025px) {
padding: 33.5px 0; padding: 16px 0;
}
@media (min-width: 2500px) {
padding: 33.5px 0;
} }
} }
.progress-bar { .progress-bar {

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

@ -6,6 +6,16 @@
line-height: 38px; line-height: 38px;
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
@include mq(tv, min) {
font-size: 48px;
line-height: 76px;
}
@include mq(mm, max) {
font-size: 14px;
line-height: 28px;
}
} }
footer .footerCheckout__prateleira { footer .footerCheckout__prateleira {
@ -26,6 +36,11 @@ footer .footerCheckout__prateleira {
margin: 0 7.5px; margin: 0 7.5px;
} }
@include mq(mm, max) {
width: 95.91% !important;
margin: 0 7px;
}
.img-container { .img-container {
margin: 0; margin: 0;
background: #ededed; background: #ededed;
@ -40,6 +55,17 @@ footer .footerCheckout__prateleira {
line-height: 18px; line-height: 18px;
color: $black; color: $black;
margin: 20px 0 !important; margin: 20px 0 !important;
justify-content: center;
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
}
@include mq(mm, max) {
text-align: center;
flex-wrap: wrap;
}
} }
.itemSku { .itemSku {
@ -47,12 +73,33 @@ footer .footerCheckout__prateleira {
gap: 5px; gap: 5px;
list-style: none; list-style: none;
margin-bottom: 20px; margin-bottom: 20px;
justify-content: center;
text-align: center;
align-items: center;
p { p {
border-radius: 8px; border-radius: 8px;
background: $blue; background: $blue;
color: $white; color: $white;
padding: 5px; padding: 5px;
min-width: 18px;
height: 18px;
@include mq(tv, min) {
min-width: 32px;
height: 35px;
}
}
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
}
@include mq(mm, max) {
flex-wrap: wrap;
margin: 16px 0 36px;
height: 76px;
} }
} }
@ -64,6 +111,11 @@ footer .footerCheckout__prateleira {
text-align: center; text-align: center;
color: $white; color: $white;
cursor: pointer; cursor: pointer;
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
}
} }
} }
} }
@ -77,9 +129,22 @@ footer .footerCheckout__prateleira {
border: none; border: none;
height: 30px; height: 30px;
@include mq(tv, min) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center;
width: 28px;
height: 58px;
left: 0px;
}
@include mq(dt, min) { @include mq(dt, min) {
left: 10px; left: 10px;
} }
@include mq(mm, max) {
top: 47%;
left: 7px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
@ -93,5 +158,19 @@ footer .footerCheckout__prateleira {
@include mq(dt, min) { @include mq(dt, min) {
right: 20px; right: 20px;
} }
@include mq(tv, min) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center;
width: 28px;
height: 58px;
right: 29px;
}
@include mq(mm, max) {
top: 47%;
right: 0;
}
} }
} }

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

@ -26,7 +26,6 @@ $blue: #00c8ff;
$orange: #f15a31; $orange: #f15a31;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray3: #f0f0f0;
$color-blue: #4267b2; $color-blue: #4267b2;
@ -36,6 +35,7 @@ $color-green: #298541;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
Gf: 328px, Gf: 328px,
mm: 376px,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,