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,
responsive: [
{
breakpoint: 1024,
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
@ -84,7 +84,7 @@ export default class Footer {
}
},
{
breakpoint: 375,
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 2

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

@ -3,13 +3,20 @@
border-top: 1px solid $color-black;
font-family: $font-family;
padding-top: 8px;
width: 100.2% !important;
@media (max-width: 1024px) {
width: 100% !important;
left: 0;
}
.link-cart {
a {
color: $color-black;
color: $color-blackTotal;
font-size: 14px;
font-family: $font-family-secundary;
text-transform: uppercase;
text-decoration: none;
&:hover {
color: lighen($color-black, 10);
@ -24,14 +31,18 @@
justify-content: center;
h3 {
margin-bottom: 16px;
margin-bottom: 20px;
span {
font-family: $font-family-secundary;
text-transform: uppercase;
color: $color-black;
color: $color-blackTotal;
font-weight: 400;
font-size: 1.25rem;
@media (max-width: 1024px) {
font-size: 14px;
}
}
small {
@ -40,36 +51,58 @@
color: $color-black;
font-weight: 400;
font-size: 1.25rem;
@media (max-width: 1024px) {
font-size: 14px;
}
}
}
}
.client-email {
margin: 0 0 16px;
max-width: 562px;
@media (max-width: 1024px) {
width: 100%;
max-width: unset;
padding: 0 16px;
}
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
font-weight: 400;
font-size: 12px;
padding: 0 16px;
border: 1px solid $color-black;
border: 1px solid $color-blackTotal;
box-sizing: border-box;
border-radius: 5px;
border-radius: 5px 9px 9px 5px;
height: 50px !important;
position: relative;
@media (max-width: 490px) {
width: auto;
}
&::-webkit-input-placeholder {
color: $color-blackTotal;
font-family: $font-family;
font-weight: 400;
font-size: 12px;
}
}
button {
background-color: $color-blue2;
border-radius: 5px;
border-radius: 0 0.5rem 0.5rem 0;
border: none;
font-family: $font-family;
height: 54px;
height: 50px;
right: 0;
top: 0;
color: $color-black;
color: $color-blackTotal;
text-transform: uppercase;
font-weight: 700;
@ -78,22 +111,36 @@
margin: 0;
position: absolute;
}
@media (max-width: 1024px) {
right: 10px;
}
}
span.help.error {
color: red;
position: absolute;
top: 70px;
font-weight: 700;
}
}
.emailInfo {
padding: 16px;
padding: 16px 16px 26.56px 17px;
background-color: $color-white;
border: 1px solid $color-black;
border-radius: 0;
border: 1px solid $color-blackTotal;
border-radius: 0.5rem;
min-width: 400px;
h3 {
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 {
@ -101,11 +148,17 @@
li {
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 {
color: $color-black;
color: $color-blue2;
font-size: 1rem;
opacity: 1;
}
@ -120,6 +173,12 @@
}
}
.shipping-data {
.accordion-toggle-active {
margin-bottom: 25px !important;
}
}
.shipping-data,
.payment-data,
.client-profile-data {
@ -130,8 +189,12 @@
padding: 16px;
.accordion-heading {
position: relative;
span {
color: #303030;
color: $color-black;
font-family: $font-family-secundary;
font-weight: 400;
margin-bottom: 8px;
padding: 0;
@ -166,14 +229,36 @@
label {
color: $color-gray2;
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,
input {
border-radius: 5px;
height: 42px;
border: 1px solid $color-gray5;
border: 1px solid $color-gray10;
box-shadow: none;
&::-webkit-input-placeholder {
color: $color-gray11;
font-family: $font-family;
font-weight: 400;
font-size: 14px;
}
}
.help.error {
@ -198,7 +283,7 @@
border: none;
border-radius: 0.5rem;
background: $color-blue2;
margin-top: 8px;
margin-top: 44px;
outline: none;
transition: all 0.2s linear;
text-transform: uppercase;
@ -263,15 +348,17 @@
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
color: $color-gray2;
/* padding: 12px; */
padding: 0 0 0 8px;
margin: 0;
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: #303030;
color: $color-blue2;
font-weight: 500;
text-decoration: underline;
}
@ -287,7 +374,7 @@
}
.shp-summary-package {
padding-left: 16px;
padding-left: 7px;
}
.vtex-omnishipping-1-x-summaryChange {
@ -300,17 +387,72 @@
//border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
/* .vtex-omnishipping-1-x-deliveryOptionActive {
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 {
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 {
font-family: $font-family;
@ -327,14 +469,9 @@
display: none;
}
/* .step.active,
.cart.active,
.totalizers.active {
//border: 1px solid $color-gray3;
} */
.summary-cart-template-holder {
border: none;
height: unset !important;
}
.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 {
display: flex !important;
}
@ -364,6 +507,20 @@
span[data-i18n="clientProfileData.identification"] {
font-size: 0;
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 {
@ -376,15 +533,66 @@ span[data-i18n="clientProfileData.identification"]::after {
.checkbox.newsletter-label {
display: flex;
justify-content: space-around;
justify-content: flex-start;
align-items: center;
width: 100%;
padding-left: 17px;
label {
font-family: $font-family;
font-weight: 400;
font-size: 0.75rem;
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-right: 0;
float: right;
@media (max-width: 1024px) {
padding: 16px;
}
}
.orderform-template-holder {
width: 66.1132%;
}

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

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

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

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

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

@ -10,17 +10,23 @@
align-items: center;
display: flex;
justify-content: space-between;
@media (max-width: 300px) {
flex-wrap: wrap;
}
}
&__logo {
img {
height: 37.14px;
width: auto;
width: 100%;
max-width: 155.58px;
min-width: 155.58px
}
}
&__safeBuy {
display: flex;
max-width: 119px;
span {
align-items: center;
display: flex;
@ -31,10 +37,13 @@
font-size: 12px;
line-height: 14px;
color: $color-gray;
white-space: nowrap;
}
img {
width: 12px;
width: 100%;
max-width: 29.47px;
min-width: 12px;
margin-right: 8px;
}
}
@ -102,11 +111,25 @@
}
&__logo {
min-width: 140px;
max-width: 155.58px;
min-width: 100px;
}
&__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-gray8: #989898;
$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-blue2: #00C8FF;