GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: melhorando a responsividade

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-26 23:41:48 -03:00
parent 6f7ac633a6
commit df9c8abca0
8 changed files with 890 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
checkout/src/arquivos/js/components/Footer.js
View File

@ -75,7 +75,7 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
responsive: [ responsive: [
{ {
breakpoint: 1024, breakpoint: 1025,
settings: { settings: {
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 3, slidesToScroll: 3,
@ -84,7 +84,7 @@ export default class Footer {
} }
}, },
{ {
breakpoint: 375, breakpoint: 376,
settings: { settings: {
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 2 slidesToScroll: 2

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

@ -3,13 +3,20 @@
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
width: 100.2% !important;
@media (max-width: 1024px) {
width: 100% !important;
left: 0;
}
.link-cart { .link-cart {
a { a {
color: $color-black; color: $color-blackTotal;
font-size: 14px; font-size: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
@ -24,14 +31,18 @@
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 20px;
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
text-transform: uppercase; text-transform: uppercase;
color: $color-black; color: $color-blackTotal;
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
@media (max-width: 1024px) {
font-size: 14px;
}
} }
small { small {
@ -40,36 +51,58 @@
color: $color-black; color: $color-black;
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
@media (max-width: 1024px) {
font-size: 14px;
}
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
max-width: 562px;
@media (max-width: 1024px) {
width: 100%;
max-width: unset;
padding: 0 16px;
}
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
font-weight: 400;
font-size: 12px;
padding: 0 16px; padding: 0 16px;
border: 1px solid $color-black; border: 1px solid $color-blackTotal;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 9px 9px 5px;
height: 50px !important;
position: relative;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
&::-webkit-input-placeholder {
color: $color-blackTotal;
font-family: $font-family;
font-weight: 400;
font-size: 12px;
}
} }
button { button {
background-color: $color-blue2; background-color: $color-blue2;
border-radius: 5px; border-radius: 0 0.5rem 0.5rem 0;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; height: 50px;
right: 0; right: 0;
top: 0; top: 0;
color: $color-black; color: $color-blackTotal;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
@ -78,22 +111,36 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@media (max-width: 1024px) {
right: 10px;
}
} }
span.help.error { span.help.error {
color: red; color: red;
position: absolute;
top: 70px;
font-weight: 700;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px 16px 26.56px 17px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-black; border: 1px solid $color-blackTotal;
border-radius: 0; border-radius: 0.5rem;
min-width: 400px;
h3 { h3 {
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 9.56px 0;
font-size: 12px;
font-family: $font-family;
line-height: 16.34px;
color: $color-blackTotal;
font-weight: 700;
} }
ul { ul {
@ -101,11 +148,17 @@
li { li {
span { span {
color: $color-black; color: #303030;
font-size: 12px;
font-family: $font-family;
line-height: 16.34px;
color: $color-blackTotal;
font-weight: 700;
margin-left: 6px;
} }
i::before { i::before {
color: $color-black; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -120,6 +173,12 @@
} }
} }
.shipping-data {
.accordion-toggle-active {
margin-bottom: 25px !important;
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@ -130,8 +189,12 @@
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
position: relative;
span { span {
color: #303030; color: $color-black;
font-family: $font-family-secundary;
font-weight: 400;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
@ -166,14 +229,36 @@
label { label {
color: $color-gray2; color: $color-gray2;
font-weight: 400; font-weight: 400;
font-family: $font-family;
}
label[for="ship-postalCode"] {
font-size: 0;
font-weight: 700 !important;
display: flex;
}
label[for="ship-postalCode"]::after {
content: "CEP:";
font-weight: 700 !important;
color: $color-gray2;
font-family: $font-family;
font-size: 12px;
} }
select, select,
input { input {
border-radius: 5px; border-radius: 5px;
height: 42px; height: 42px;
border: 1px solid $color-gray5; border: 1px solid $color-gray10;
box-shadow: none; box-shadow: none;
&::-webkit-input-placeholder {
color: $color-gray11;
font-family: $font-family;
font-weight: 400;
font-size: 14px;
}
} }
.help.error { .help.error {
@ -198,7 +283,7 @@
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
background: $color-blue2; background: $color-blue2;
margin-top: 8px; margin-top: 44px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase; text-transform: uppercase;
@ -263,15 +348,17 @@
background: none; background: none;
border-color: $color-gray4; border-color: $color-gray4;
border-radius: 0; border-radius: 0;
color: #303030; color: $color-gray2;
padding: 12px; /* padding: 12px; */
padding: 0 0 0 8px;
margin: 0;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: $color-blue2;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -287,7 +374,7 @@
} }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; padding-left: 7px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
@ -300,17 +387,72 @@
//border: 1px solid #d8c8ac; //border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { /* .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} */
} }
} }
} }
}
p.client-email.input.text,
p.client-first-name.input.pull-left.text,
p.client-last-name.input.pull-left.text {
margin-bottom: 16px;
}
p.client-document.input.pull-left.text,
p.client-phone.input.pull-left.text {
margin-bottom: 0;
}
.box-client-info {
position: relative;
@media (max-width: 1024px) {
fieldset.box-client-info-pf {
width: 100%;
}
}
}
.newsletter {
margin: 0;
}
.box-info {
line-height: inherit !important;
}
.srp-unavailable.flex.items-center.tl.pa3.br2.ba.b--yellow,
.shp-alert.vtex-omnishipping-1-x-warning {
border-color: $color-blue2;
span {
border-color: $color-blue2;
}
svg {
g {
fill: $color-blue2;
}
} }
} }
.vtex-omnishipping-1-x-SummaryItemContent { .vtex-omnishipping-1-x-SummaryItemContent {
display: flex; display: flex;
flex-direction: column; justify-content: flex-start;
align-items: flex-end !important;
.vtex-omnishipping-1-x-SummaryItemInfo {
flex: 1;
padding: 0;
}
.vtex-omnishipping-1-x-SummaryItemPrice {
padding: 0;
flex: 1;
}
span { span {
font-family: $font-family; font-family: $font-family;
@ -327,14 +469,9 @@
display: none; display: none;
} }
/* .step.active,
.cart.active,
.totalizers.active {
//border: 1px solid $color-gray3;
} */
.summary-cart-template-holder { .summary-cart-template-holder {
border: none; border: none;
height: unset !important;
} }
.accordion-group.shipping-data .accordion-toggle, .accordion-group.shipping-data .accordion-toggle,
@ -356,6 +493,12 @@
} }
} }
div#client-profile-data {
span.accordion-toggle.collapsed.accordion-toggle-active {
margin-bottom: 2.25rem;
}
}
.client-profile-data .accordion-heading .accordion-toggle a { .client-profile-data .accordion-heading .accordion-toggle a {
display: flex !important; display: flex !important;
} }
@ -364,6 +507,20 @@
span[data-i18n="clientProfileData.identification"] { span[data-i18n="clientProfileData.identification"] {
font-size: 0; font-size: 0;
color: $color-black; color: $color-black;
margin: 0;
}
.checkbox.newsletter-label {
input {
border: 1px solid $color-gray13 !important;
height: unset !important;
}
span {
color: $color-gray12 !important;
font-size: 12px;
margin-top: 5px;
}
} }
span[data-i18n="clientProfileData.identification"]::after { span[data-i18n="clientProfileData.identification"]::after {
@ -376,15 +533,66 @@ span[data-i18n="clientProfileData.identification"]::after {
.checkbox.newsletter-label { .checkbox.newsletter-label {
display: flex; display: flex;
justify-content: space-around; justify-content: flex-start;
align-items: center; align-items: center;
width: 100%;
padding-left: 17px;
label {
font-family: $font-family; font-family: $font-family;
font-weight: 400; font-weight: 400;
font-size: 0.75rem; font-size: 0.75rem;
color: $color-gray4; color: $color-gray4;
input {
margin-right: 8px;
} }
} }
.step.accordion-group.shipping-data.active {
p.input.ship-postalCode.required.text {
margin-bottom: 9px !important;
#ship-postalCode {
border: 1px solid $color-gray6;
border-radius: 0.5rem;
margin-bottom: 10px;
height: 45px;
padding: 0 0.6rem;
width: unset;
}
small {
margin: 0 !important;
}
}
}
/* #ship-number,
#ship-complement,
#ship-receiverName {
padding: 8px;
height: 35px !important;
width: unset !important;
} */
.vtex-omnishipping-1-x-address {
margin-bottom: 0 !important;
}
#edit-profile-data,
#edit-shipping-data,
.link-box-edit.btn.btn-small {
i {
display: none;
}
&::after {
content: "";
background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
position: absolute;
top: 0;
right: 0;
background-size: contain;
width: 20.26px;
height: 20.89px;
}
}

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

File diff suppressed because it is too large Load Diff

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

@ -4,7 +4,12 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
@media (max-width: 1024px) {
padding: 16px;
} }
}
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
} }

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

@ -22,18 +22,31 @@ footer .footerCheckout__wrapper {
width: 100%; width: 100%;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-weight: 400; font-weight: 400;
font-size: 1.4rem; font-size: 1.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $color-black; color: $color-blackTotal;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
line-height: 38px;
@media (max-width: 1024px) {
font-size: 14px;
}
@media (max-width: 375px) {
font-size: 12px;
}
} }
&__container-Slick { &__container-Slick {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
@media (max-width: 375px) {
width: 95%;
}
.slick-slide { .slick-slide {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
@ -54,10 +67,14 @@ footer .footerCheckout__wrapper {
.cardProduct__contentName { .cardProduct__contentName {
margin: 1.25rem 0; margin: 1.25rem 0;
display: flex;
justify-content: center;
align-items: center;
span { span {
font-family: $font-family; font-family: $font-family;
color: $color-black; font-weight: 400;
color: $color-blackTotal;
font-size: 0.813rem; font-size: 0.813rem;
} }
@ -68,6 +85,7 @@ footer .footerCheckout__wrapper {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.313rem; gap: 0.313rem;
flex-wrap: wrap;
span { span {
white-space: nowrap; white-space: nowrap;
@ -89,7 +107,7 @@ footer .footerCheckout__wrapper {
} }
.cardProduct__contentBtn { .cardProduct__contentBtn {
margin-top: 1.125rem; margin-top: 1.25rem;
a { a {
text-decoration: none; text-decoration: none;
@ -156,6 +174,10 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 80%; width: 80%;
@media (max-width: 1024px) {
width: 100%;
}
} }
} }
@ -175,18 +197,22 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
width: 100%; width: 100%;
color: $color-black; color: $color-blackTotal;
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 42px; line-height: 42px;
margin: 40px 0 30px; margin: 17px 0;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @media (max-width: 1024px) {
margin-left: 30px; padding-left: 16px;
} }
/* @include mq(md, max) {
margin-left: 30px;
} */
} }
.dropdown { .dropdown {

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

@ -115,6 +115,9 @@
display: grid; display: grid;
grid-template-columns: fr 1fr 1fr; grid-template-columns: fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
margin: unset !important;
max-width: 342px;
.footerCheckout__address { .footerCheckout__address {
grid-column: 1 / 2; grid-column: 1 / 2;

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

@ -10,17 +10,23 @@
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media (max-width: 300px) {
flex-wrap: wrap;
}
} }
&__logo { &__logo {
img { img {
height: 37.14px; width: 100%;
width: auto; max-width: 155.58px;
min-width: 155.58px
} }
} }
&__safeBuy { &__safeBuy {
display: flex; display: flex;
max-width: 119px;
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
@ -31,10 +37,13 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-gray;
white-space: nowrap;
} }
img { img {
width: 12px; width: 100%;
max-width: 29.47px;
min-width: 12px;
margin-right: 8px; margin-right: 8px;
} }
} }
@ -102,11 +111,25 @@
} }
&__logo { &__logo {
min-width: 140px; max-width: 155.58px;
min-width: 100px;
} }
&__safeBuy { &__safeBuy {
min-width: 140px; max-width: 119px;
min-width: 100px;
}
}
}
@media (min-width: 2500px) {
.headerCheckout {
&__logo {
max-width: 382.07px;
}
&__safeBuy {
max-width: 235.28px;
} }
} }
} }

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

@ -19,6 +19,12 @@ $color-gray6: #c4c4c4;
$color-gray7: #58595B; $color-gray7: #58595B;
$color-gray8: #989898; $color-gray8: #989898;
$color-gray9: #EDEDED; $color-gray9: #EDEDED;
$color-gray10: #E0E0E0;
$color-gray11: #BDBDBD;
$color-gray12: #808080;
$color-gray13: #828282;
$color-gray14: #F2F2F2;
$color-gray15: #dcdde360;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF; $color-blue2: #00C8FF;