DaviKlein/m3-academy-template-checkout-davi-klein
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #10

Merged
DaviKlein merged 18 commits from development into main 2022-12-19 02:48:45 +00:00
Conversation 0 Commits 18 Files Changed 17 +463 -40
3 changed files with 463 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 179cddc190 - Show all commits

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

@ -1,47 +1,134 @@
/* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; margin-top: auto;
color: $color-gray2; //border-top: 1px solid #000;
.container {
display: flex;
flex-direction: column;
width: 100%;
padding: 7px 0;
margin: 0;
@include mq(dt, min) {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px 0 15px 0;
}
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
}
&__wrapper { &__wrapper {
align-items: center; border-top: 1px solid $black;
display: flex;
justify-content: space-between; @media screen and (max-width: 490px) {
padding: 7px 0;
}
} }
&__address { &__address {
color: $color-gray2; color: $gray-500;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-weight: 400;
font-weight: normal; line-height: 14px;
font-size: 10px; font-size: 10px;
line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%;
@include mq(md, max) { @include mq(dt, max) {
margin-bottom: 24px; display: flex;
max-width: 100%; width: 100%;
order: 2;
margin-top: 17px;
span {
margin-left: 16px;
}
}
@include mq(dt, min) {
min-width: 269px;
margin-left: 32px;
}
@include mq(tv, min) {
font-size: 20px;
line-height: 27px;
min-width: 537px;
margin-left: 0;
} }
} }
&__stamps { &__stamps {
align-items: center;
display: flex; display: flex;
justify-self: center; height: 33px;
align-items: center;
list-style: none; list-style: none;
margin: 0 0 0 5px;
@include mq(md, max) { li {
align-self: center; height: 33px;
margin-bottom: 12px;
} }
&__divider { @include mq(dt, min) {
background-color: $color-gray4; justify-content: center;
display: inline-block; min-width: 404px;
height: 24px; margin: 0;
margin: 0 8px; }
width: 1px;
@include mq(tv, min) {
min-width: 690.52px;
}
.payments-icons-wrapper {
display: flex;
width: 100%;
list-style: none;
gap: 13.35px;
margin: 0;
@include mq(dt, max) {
gap: 4.35px;
}
figure {
padding: 6px 0 7px;
width: 35.65px;
height: 20px;
margin: 0;
@include mq(tv, min) {
width: 69.63px;
}
@include mq(Gf, max) {
width: 24px;
}
}
}
.footerCheckout__stamps__divider {
border-left: 1px solid $gray;
margin: 0 10px;
height: 33px;
padding: 0 0 9px;
@include mq(dt, min) {
margin-left: 11.35px;
}
}
.footerCheckout__vtexpci {
.vtex-icon {
width: 53px;
margin: 0;
}
@include mq(tv, min) {
.vtex-icon {
width: 103.52px;
height: 64.46px;
}
}
} }
} }
@ -51,18 +138,43 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
li:last-child { @include mq(dt, max) {
display: flex;
width: 100%;
order: 3;
margin-top: 17px;
}
@include mq(dt, min) {
min-width: 217px;
margin-right: 22.5px;
}
li {
margin-left: 16px; margin-left: 16px;
figure {
margin: 0;
}
}
.vtex-icon {
width: 44.92px;
margin: 0;
}
.m3-icon {
width: 28.66px;
margin: 0;
} }
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $gray-500;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
@ -70,5 +182,38 @@
margin-right: 8px; margin-right: 8px;
} }
} }
@include mq(tv, min) {
min-width: 388.98px;
margin-right: 0;
a {
font-size: 18px;
line-height: 25px;
}
li {
margin-left: 10px;
}
.vtex-icon {
width: 87.73px;
}
.m3-icon {
width: 55.98px;
}
}
}
.footerCheckout::after,
::before {
display: none;
content: none;
}
.footerCheckout::before,
::after {
display: none;
content: none;
} }
} }

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

@ -1,36 +1,172 @@
/* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: auto !important;
} }
&__wrapper { &__wrapper {
align-items: center;
display: flex; display: flex;
justify-content: space-between; align-items: center;
justify-content: space-around;
padding: 16px;
border-bottom: 1px solid $black;
@media (min-width: 1025px) {
padding: 33.5px 0;
}
@media (min-width: 2500px) {
padding: 33.5px 0;
}
}
.progress-bar {
display: flex;
flex-direction: column;
right: 31.5%;
top: 33%;
@media (max-width: 1024px) {
display: none;
}
@media (min-width: 2500px) {
right: 41%;
}
.containerLi {
display: flex;
position: relative;
align-items: center;
}
ul {
display: flex;
margin: 0;
gap: 100px;
list-style: none;
}
p {
margin-bottom: 0;
}
&-text {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
&-line-1,
&-line-2 {
position: absolute;
width: 171px;
top: 82%;
left: 55%;
border: 1px solid $black;
z-index: 0;
@media (min-width: 2500px) {
width: 240px;
top: 79%;
left: 55%;
}
}
&-line-2 {
width: 166px;
left: -223%;
@media (min-width: 2500px) {
width: 230px;
left: -143%;
}
}
&-circle-1,
&-circle-2,
&-circle-3 {
display: flex;
height: 10px;
width: 10px;
align-self: center;
background: $white;
border: 1px solid $black;
border-radius: 50%;
margin-left: 40%;
margin-top: 9px;
padding: 0;
@media (min-width: 2500px) {
height: 22px;
width: 22px;
}
}
.active {
background: $black;
}
} }
&__logo { &__logo {
width: 45.35%;
@media (min-width: 1025px) {
width: 17.059%;
}
@media (min-width: 1025px) {
width: 15.28%;
img { img {
height: 52px; width: 100%;
width: auto; }
}
@media (min-width: 2500px) {
width: 19.22%;
} }
} }
&__safeBuy { &__safeBuy {
span { justify-content: flex-end;
align-items: center;
display: flex; display: flex;
align-items: center;
@media (min-width: 1025px) {
width: 15.5%;
}
@media (min-width: 2500px) {
width: 20%;
}
span {
min-width: fit-content;
height: 50%;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-gray; color: $color-gray;
margin-left: 8px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
i { img {
margin-right: 8px; width: 4.5%;
min-width: 12px;
@media (min-width: 2500px) {
width: 6.1%;
}
} }
} }
} }

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

@ -1 +1,143 @@
/* _prateleira.scss */ /* _prateleira.scss */
.footerCheckout__prateleira {
//width: 96.88% !important;
margin: 0 132px;
//width: 100% !important;
@media (max-width: 1024px) {
width: auto !important;
margin: 0 16px;
}
}
.footerTitle {
text-align: center;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $black;
margin-bottom: 20px;
@include mq(tv, min) {
font-size: 48px;
line-height: 76px;
}
}
.slick-test {
width: 100%;
gap: 16px;
margin: 0 !important;
& li {
max-width: 97.98%;
@media (max-width: 375px) {
width: 164px !important;
}
@media (max-width: 1024px) {
width: 97.86% !important;
max-width: 100%;
}
@include mq(tv, min) {
min-width: 485.07px;
}
}
}
.itemList {
@media (max-width: 375px) {
width: 164px;
}
}
.itemSku {
display: flex;
gap: 5px;
justify-content: center;
flex-wrap: wrap;
height: 26px;
& p {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
padding: 5px;
display: flex;
align-items: center;
text-align: center;
height: 18px;
margin: 0;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $white;
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
height: auto;
}
}
@media (max-width: 375px) {
height: 61px;
justify-content: center;
align-items: center;
}
@media (max-width: 1183px) {
height: 61px;
justify-content: center;
align-items: center;
}
@include mq(tv, min) {
min-height: 45px;
}
}
.productName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
margin: 20px 0px;
text-align: center;
height: 18px;
color: $black;
@media (max-width: 375px) {
height: 36px;
}
@include mq(tv, min) {
height: 35px;
font-size: 26px;
line-height: 35px;
}
}
.productImg {
background: #eeeeee;
width: 100%;
}
.productLink {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
padding: 12px 0;
//padding: 12px 71px 12px 72px;
display: flex;
justify-content: center;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 20px 0px 0px;
color: $white;
&:hover {
color: white;
text-decoration: None;
}
@include mq(tv, min) {
font-size: 26px;
line-height: 35px;
}
}