Rhayllon_Daudt/m3-academy-template-checkout-Rhayllon-Daudt
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(Chekout): Cria as paginas de meu carrinho, e pagina de coleta de email

Browse Source
This commit is contained in:
Rhayllon Daudt 2022-12-13 10:37:12 -03:00
parent 2693b6b285
commit cfc869ee61
5 changed files with 174 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,8 +6,10 @@
.link-cart { .link-cart {
a { a {
color: $color-black; color: red;
font-size: 14px; font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
@ -22,30 +24,54 @@
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 20px;
margin-top: 7px;
span { span {
color: #303030; color: #f30606;
font-size: 24px; font-size: 20px;
line-height: 23px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.09em;
} }
small { small {
color: $color-gray4; color: red;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
font-weight: 400;
padding: 0;
letter-spacing: 0.09em;
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; display: flex;
margin: 0 0 47px;
width: 57%;
justify-content: flex-start;
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid red;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 0px 0px 5px;
width: 77%;
height: 52px;
&::placeholder{
color: red;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
@ -67,9 +93,22 @@
position: absolute; position: absolute;
} }
} }
#btn-client-pre-email{
right: 14px;
padding: 4px 26px;
height: 52px;
background-color: red;
border-radius: 0px 8px 8px 0px;
}
span.help.error { span.help.error {
color: red; color: red;
position: absolute;
left: 213px;
top: 50px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
} }
} }
@ -93,7 +132,7 @@
} }
i::before { i::before {
color: $color-black; color: red;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }

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

@ -16,7 +16,7 @@
border: 3px solid $color-gray3; border: 3px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px 16px 5px 16px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -112,9 +112,9 @@
th { th {
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 13px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -124,6 +124,29 @@
display: none; display: none;
} }
} }
&.shipping-date{
font-size: 0;
line-height: 0;
&::after{
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: red;
}
}
&.product-price{
font-size: 0;
line-height: 0;
&::after{
content: "Unidade";
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: red
;
}
}
} }
.product-image { .product-image {
@ -136,9 +159,9 @@
} }
img { img {
height: 60px; height: 70px;
max-width: 100%; max-width: 100%;
width: auto; width: 100%;
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -155,7 +178,7 @@
} }
a { a {
color: $color-blue; color: $color-black;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
@ -214,15 +237,18 @@
} }
} }
} }
td.product-price{
padding: 10px 5px 0 5px;
}
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 0; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 15px auto 0;
max-height: 38px; max-height: 38px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 0;
@ -234,7 +260,7 @@
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3; border: none;
border-radius: 0; border-radius: 0;
border-width: 0 1px; border-width: 0 1px;
display: block; display: block;
@ -253,17 +279,31 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; color: $color-white;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; // padding: 1px 12px;
} }
} }
.item-quantity-change-decrement{
width: 16px;
height: 16px;
margin-left: 11px;
}
.item-quantity-change-increment {
width: 16px;
height: 16px;
margin-right: 11px;
}
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; content: "-";
font-size: 16px; font-size: 14px;
background-color: #00C8FF;
border-radius: 50%;
height: 100%;
width: 100%;
} }
} }
@ -271,6 +311,10 @@
&:before { &:before {
content: "+"; content: "+";
font-size: 14px; font-size: 14px;
background-color: #00C8FF;
border-radius: 50%;
height: 100%;
width: 100%;
} }
} }
@ -367,7 +411,7 @@
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 10px;
} }
button.shp-open-options { button.shp-open-options {
@ -375,13 +419,14 @@
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-gray2; color: $color-gray2;
font-size: 16px; font-size: 14px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 19px; line-height: 19px;
font-weight: 500; font-weight: 500;
outline: none; outline: none;
padding: 12px 40px; padding: 12px 40px;
transition: all 0.2s linear; transition: all 0.2s linear;
margin-top: 0;
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray5, 5);
@ -395,6 +440,7 @@
.srp-data { .srp-data {
width: 280px; width: 280px;
margin-top: 0;
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
@ -404,8 +450,12 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
.ship-country {
display: none;
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -429,7 +479,8 @@
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 20px;
padding-bottom: 0;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
@ -444,12 +495,12 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black;
} }
label { label {
@ -470,7 +521,7 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
margin-bottom: 12px; margin-bottom: 2px;
} }
input { input {
@ -485,7 +536,7 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -495,7 +546,7 @@
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -150px;
top: 36px; top: 26px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 96px;
text-transform: uppercase; text-transform: uppercase;
@ -513,19 +564,29 @@
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 0px;
line-height: 0px;
color: $color-black;
margin-top: 7px;
&::after{
content: "Não sei meu código postal";
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue;
margin-top: 7px; :hover{
text-decoration: underline;
}
}
} }
span.help.error { span.help.error {
color: red; color: red;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
left: 0; left: 63px;
width: 100%; width: 100%;
top: 17px; top: 5px;
} }
} }
} }
@ -598,7 +659,6 @@
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
} }
@ -608,7 +668,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
text-decoration: none; text-decoration: none;
} }
} }
@ -641,7 +701,7 @@
} }
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 20px;
@include mq(sm, max) { @include mq(sm, max) {
span { span {
@ -663,8 +723,10 @@
color: $color-gray4; color: $color-gray4;
font-size: 12px; font-size: 12px;
height: 34px; height: 34px;
padding: 0 12px; padding: 0 0 0 16px;
max-width: 160px; max-width: 204px;
width: 51%;
margin-right: 7.4px;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,9 +735,9 @@
} }
button { button {
background: $color-black; background: blue;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-white;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
@ -683,7 +745,7 @@
margin-left: 6px; margin-left: 6px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 133px;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
@ -743,6 +805,9 @@
} }
} }
} }
.coupon-data{
display: block !important;
}
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
@ -764,7 +829,7 @@
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: 14px;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 0px;
@ -776,13 +841,13 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
@ -797,10 +862,10 @@
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 13px; font-size: 13px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: red;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;

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

@ -86,13 +86,12 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2; color: red;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 36px; font-size: 24px;
line-height: 42px; line-height: 33px;
margin: 40px 0 30px; margin: 17px 0;
letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
@ -100,7 +99,15 @@ body {
} }
} }
#cart-title{ #cart-title{
display: none !important; display: block !important;
font-weight: 700;
font-size: 24px;
line-height: 33px;
width: max-content;
color: #292929;
margin: 16px 0;
letter-spacing: 0.05em;
} }

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

@ -69,19 +69,19 @@
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0 0 0 158px;
width: 33%; width: 21%;
justify-content: flex-end; justify-content: flex-end;
.Link1{ .Link1{
justify-content: end; justify-content: end;
&__footer-imgs-logoVtex{ &__footer-imgs-logoVtex{
width: 20%; width: 35%;
} }
} }
.footer-imgs-logoM3{ .footer-imgs-logoM3{
width: 17%; width: 27.5%;
} }
li:last-child { li:last-child {

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

@ -67,19 +67,19 @@
.p-borda-1{ .p-borda-1{
border-top: 1.5px solid black; border-top: 1.5px solid black;
position: absolute; position: absolute;
left: 25.6%; left: 25%;
bottom: 5px; bottom: 5px;
margin: 0; margin: 0;
width: 95.9%; width: 97%;
transform: translateY(-7px); transform: translateY(-7px);
} }
.p-borda-2{ .p-borda-2{
border-top: 1.5px solid black; border-top: 1.5px solid black;
position: absolute; position: absolute;
right: 22%; right: 21.5%;
bottom: 5px; bottom: 5px;
margin: 0; margin: 0;
width: 99.3%; width: 100.8%;
transform: translateY(-7px); transform: translateY(-7px);
} }
} }