forked from M3-Academy/desafio-react-e-typescript
feat: Realiza pequenons ajustes de Layout por toda a página
This commit is contained in:
parent
b03c4ccae9
commit
63d4d566d5
@ -31,22 +31,38 @@
|
||||
}
|
||||
|
||||
&__pagamento-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 36.90833333%;
|
||||
display: grid;
|
||||
grid-template-columns: 9.0314% 8.784% 8.784% 9.283% 8.784% 8.53% 9.0314% 1px 13.7%;
|
||||
column-gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
@include mq($lg, max) {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
|
||||
grid-template-columns:
|
||||
minmax(30px, 3.63%) minmax(30px, 3.529%) minmax(30px, 3.529%)
|
||||
minmax(30px, 3.73%) minmax(30px, 3.529%) minmax(30px, 3.428%) minmax(30px, 3.63%) 1px minmax(45px, 5.505%) ;
|
||||
}
|
||||
|
||||
@include mq($sm, max) {
|
||||
grid-template-columns: repeat(7, 8.75%) 1px 13.12%;
|
||||
column-gap: 11px;
|
||||
}
|
||||
|
||||
@include mq($cstm, max) {
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 30.0869565%;
|
||||
grid-template-columns: repeat(7, 10.116%) 1px 15.32%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,6 +81,10 @@
|
||||
min-width: 224.28px;
|
||||
}
|
||||
|
||||
@include mq($sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
gap: 12px;
|
||||
width: 17.5726086%;
|
||||
@ -81,7 +101,6 @@
|
||||
}
|
||||
|
||||
&__pagamento-divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
border-right: 1px solid $primary-600;
|
||||
|
||||
@ -90,82 +109,78 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__pagamento-masterCard,
|
||||
&__pagamento-boleto {
|
||||
width: 9.0314%;
|
||||
// &__pagamento-masterCard,
|
||||
// &__pagamento-boleto {
|
||||
// width: 9.0314%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 3.63%;
|
||||
}
|
||||
}
|
||||
// @include mq($lg, max) {
|
||||
// width: 3.63%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__pagamento-visa,
|
||||
&__pagamento-amex,
|
||||
&__pagamento-hiperCard {
|
||||
width: 8.784%;
|
||||
// &__pagamento-visa,
|
||||
// &__pagamento-amex,
|
||||
// &__pagamento-hiperCard {
|
||||
// width: 8.784%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 3.529%;
|
||||
}
|
||||
}
|
||||
// @include mq($lg, max) {
|
||||
// width: 3.529%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__pagamento-elo {
|
||||
width: 9.283%;
|
||||
// &__pagamento-elo {
|
||||
// width: 9.283%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 3.73%;
|
||||
}
|
||||
}
|
||||
// @include mq($lg, max) {
|
||||
// width: 3.73%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__pagamento-payPal {
|
||||
width: 8.562%;
|
||||
// &__pagamento-payPal {
|
||||
// width: 8.562%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 3.428%;
|
||||
}
|
||||
}
|
||||
// @include mq($lg, max) {
|
||||
// width: 3.428%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__pagamento-vtexPCI {
|
||||
width: 13.7%;
|
||||
// &__pagamento-vtexPCI {
|
||||
// width: 13.7%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 5.505%;
|
||||
}
|
||||
@include mq($sm, max) {
|
||||
width: 13.71%;
|
||||
}
|
||||
// @include mq($lg, max) {
|
||||
// width: 5.505%;
|
||||
// }
|
||||
// @include mq($sm, max) {
|
||||
// width: 13.71%;
|
||||
// }
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 15.35%;
|
||||
}
|
||||
}
|
||||
// @include mq($xl, min) {
|
||||
// width: 15.35%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__pagamento-masterCard,
|
||||
&__pagamento-visa,
|
||||
&__pagamento-amex,
|
||||
&__pagamento-elo,
|
||||
&__pagamento-hiperCard,
|
||||
&__pagamento-payPal,
|
||||
&__pagamento-boleto {
|
||||
@include mq($sm, max) {
|
||||
width: 11.41%;
|
||||
}
|
||||
@include mq($xl, min) {
|
||||
width: 10.116%;
|
||||
}
|
||||
}
|
||||
// &__pagamento-masterCard,
|
||||
// &__pagamento-visa,
|
||||
// &__pagamento-amex,
|
||||
// &__pagamento-elo,
|
||||
// &__pagamento-hiperCard,
|
||||
// &__pagamento-payPal,
|
||||
// &__pagamento-boleto {
|
||||
// @include mq($sm, max) {
|
||||
// width: 11.41%;
|
||||
// }
|
||||
// @include mq($xl, min) {
|
||||
// width: 10.116%;
|
||||
// }
|
||||
// }
|
||||
|
||||
&__vtex {
|
||||
// width: 19.83%;
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 84.22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__m3 {
|
||||
// width: 12.6489%;
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 54.95px;
|
||||
}
|
||||
|
@ -12,6 +12,10 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
gap: 379px;
|
||||
}
|
||||
|
||||
&__menu-link-wrapper {
|
||||
width: 65.462964%;
|
||||
display: flex;
|
||||
|
@ -7,7 +7,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__unselect{
|
||||
&__unselect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -28,11 +28,13 @@
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
|
@ -7,7 +7,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__unselect{
|
||||
&__unselect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -28,6 +28,10 @@
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
|
@ -6,9 +6,7 @@
|
||||
gap: 10px;
|
||||
}
|
||||
&__item {
|
||||
// width: 16.279069%;
|
||||
img {
|
||||
// width: 100%;
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 70px;
|
||||
@ -21,6 +19,10 @@
|
||||
margin-top: 12px;
|
||||
@include fontStyle(400, 14px, 16px, $primary-200);
|
||||
|
||||
@include mq($lg, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
|
@ -26,6 +26,8 @@
|
||||
|
||||
@include mq($lg, max) {
|
||||
@include fontStyleResponsive(14px, 16px);
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@ -48,7 +50,7 @@
|
||||
@include mq($lg, max) {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
|
@ -4,7 +4,11 @@
|
||||
padding: 29px 100px 70px 100px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
padding: 29px 16px;
|
||||
padding: 29px 16px 81px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -55,6 +59,7 @@
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(48px, 56px);
|
||||
padding-top: 80.75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -31,7 +31,7 @@
|
||||
|
||||
&__label {
|
||||
@include fontStyle(400, 14px, 16px, $black-500);
|
||||
margin: 0 0 12px 15px;
|
||||
margin: 0 0 0 15px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
@ -48,6 +48,7 @@
|
||||
@include fontStyle(400, 14px, 16px, $black);
|
||||
@include borderStyle(1px, $black-500, 25px);
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 15px 20px;
|
||||
|
||||
&::placeholder {
|
||||
@ -62,6 +63,9 @@
|
||||
&__span-agree {
|
||||
@include fontStyle(400, 14px, 16px, $primary-900);
|
||||
margin-right: 3px;
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__agree-wrapper {
|
||||
@ -69,6 +73,7 @@
|
||||
}
|
||||
|
||||
&__label-agree {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
@include fontStyle(400, 14px, 16px, $black-500);
|
||||
margin-right: 4.28px;
|
||||
@ -79,6 +84,7 @@
|
||||
}
|
||||
|
||||
&__agree {
|
||||
cursor: pointer;
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
|
||||
@ -103,17 +109,27 @@
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(32px, 38px);
|
||||
height: 71px;
|
||||
padding: 16px 0 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&__error {
|
||||
@include fontStyle(400, 12px, 14px, $primary-900);
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(24px, 28px);
|
||||
}
|
||||
}
|
||||
|
||||
&__sucess {
|
||||
margin-top: 12.56px;
|
||||
@include fontStyle(400, 12px, 14px, $green-500);
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(24px, 28px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormikSchema from "../../../../schema/ContatoSchema";
|
||||
@ -62,12 +62,15 @@ const initialValues = {
|
||||
};
|
||||
|
||||
const Contato = () => {
|
||||
const [isValidate, setIsValidate] = useState(false);
|
||||
return (
|
||||
<div className={styles["contato"]}>
|
||||
<Formik
|
||||
onSubmit={(values: IForm, actions) => {
|
||||
console.log(values);
|
||||
actions.resetForm();
|
||||
if(values.agree === true && values.cpf !== "" && values.dateBirth !== "" && values.telephone !== "" && values.email !== "" && values.name !== "") {
|
||||
setIsValidate(true);
|
||||
}
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormikSchema}
|
||||
@ -209,6 +212,7 @@ const Contato = () => {
|
||||
<button className={styles["contato__button-submit"]} type="submit">
|
||||
CADASTRE-SE
|
||||
</button>
|
||||
{isValidate && <p className={styles["contato__sucess"]}>*Formulário enviado com sucesso!</p>}
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
@ -3,16 +3,12 @@
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-bottom: 70px;
|
||||
|
||||
|
||||
@include mq($lg, max) {
|
||||
display: block;
|
||||
margin-bottom: 81.56px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
.content-list {
|
||||
border-right: 1px solid $black;
|
||||
width: 27.96296296%;
|
||||
@ -26,6 +22,7 @@
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 25.652189%;
|
||||
max-height: 465px;
|
||||
}
|
||||
|
||||
&__navlink {
|
||||
|
@ -11,11 +11,6 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//APAGAR A LINHA DEPOIS
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border: none;
|
||||
|
@ -18,7 +18,10 @@ $gray-300: #B9B7B7;
|
||||
$gray-500: #7d7d7d;
|
||||
$gray-900: #292929;
|
||||
$black-500: #100D0E;
|
||||
|
||||
$green-500: #008000;
|
||||
//media Queries
|
||||
$cstm: 350px;
|
||||
$sm: 375px;
|
||||
$lg: 1024px;
|
||||
$xl: 2500px;
|
||||
|
Loading…
Reference in New Issue
Block a user