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

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-26 19:03:58 -03:00
parent 1335c184ba
commit bc5d8891bd
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 {
padding-bottom: 90px;
@include mq(dt, max) {
padding-bottom: 0;
}
.client-pre-email {
border-color: $black;
font-family: $font-family;

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

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

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

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

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

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

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

@ -6,6 +6,16 @@
line-height: 38px;
text-align: center;
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 {
@ -26,6 +36,11 @@ footer .footerCheckout__prateleira {
margin: 0 7.5px;
}
@include mq(mm, max) {
width: 95.91% !important;
margin: 0 7px;
}
.img-container {
margin: 0;
background: #ededed;
@ -40,6 +55,17 @@ footer .footerCheckout__prateleira {
line-height: 18px;
color: $black;
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 {
@ -47,12 +73,33 @@ footer .footerCheckout__prateleira {
gap: 5px;
list-style: none;
margin-bottom: 20px;
justify-content: center;
text-align: center;
align-items: center;
p {
border-radius: 8px;
background: $blue;
color: $white;
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;
color: $white;
cursor: pointer;
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
}
}
}
}
@ -77,9 +129,22 @@ footer .footerCheckout__prateleira {
border: none;
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) {
left: 10px;
}
@include mq(mm, max) {
top: 47%;
left: 7px;
}
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
@ -93,5 +158,19 @@ footer .footerCheckout__prateleira {
@include mq(dt, min) {
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;
$color-gray: #6c6c6c;
$color-gray3: #f0f0f0;
$color-blue: #4267b2;
@ -36,6 +35,7 @@ $color-green: #298541;
$grid-breakpoints: (
xs: 0,
Gf: 328px,
mm: 376px,
cstm: 400,
sm: 576px,
md: 768px,