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

develop #6

Merged
Rhayllon_Daudt merged 13 commits from develop into main 2022-12-19 02:54:38 +00:00
Conversation 0 Commits 13 Files Changed 14 +174 -63
5 changed files with 174 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cfc869ee61 - Show all commits

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

@ -6,8 +6,10 @@
.link-cart {
a {
color: $color-black;
color: red;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover {
color: lighen($color-black, 10);
@ -22,30 +24,54 @@
justify-content: center;
h3 {
margin-bottom: 16px;
margin-bottom: 20px;
margin-top: 7px;
span {
color: #303030;
font-size: 24px;
color: #f30606;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.09em;
}
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 {
margin: 0 0 16px;
display: flex;
margin: 0 0 47px;
width: 57%;
justify-content: flex-start;
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
border: 1px solid red;
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) {
width: auto;
@ -67,9 +93,22 @@
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 {
color: red;
position: absolute;
left: 213px;
top: 50px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
}
}
@ -93,7 +132,7 @@
}
i::before {
color: $color-black;
color: red;
font-size: 1rem;
opacity: 1;
}

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

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

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

@ -86,13 +86,12 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
color: red;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 17px 0;
text-transform: uppercase;
@include mq(md, max) {
@ -100,7 +99,15 @@ body {
}
}
#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;
display: flex;
list-style-type: none;
margin: 0;
width: 33%;
margin: 0 0 0 158px;
width: 21%;
justify-content: flex-end;
.Link1{
justify-content: end;
&__footer-imgs-logoVtex{
width: 20%;
width: 35%;
}
}
.footer-imgs-logoM3{
width: 17%;
width: 27.5%;
}
li:last-child {

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

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