HenriqueSantosSantana/desafio-react-e-typescript-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat(styles): created styles in newsletter,header,about,contact for large,medium devices' (#14) from feature/styles into develop

Browse Source 
Reviewed-on: #14
This commit is contained in:
Henrique Santos Santana 2023-01-03 22:13:01 +00:00
commit d903be8c81
7 changed files with 196 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/Institutional/Contact/fragments/Input.tsx
View File

@ -10,20 +10,21 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
export function Input({ label, name, error, ...props }: InputProps) {
return (
<div className="form-group">
<div className="form-group-header">
<label htmlFor={name}>{label}</label>
<label htmlFor={name}>{label}</label>
<div className="form-group-content">
<ErrorMessage
className="error-message"
component={'span'}
name={name}
/>
<Field
id={name}
name={name}
className={`form-input ${error}`}
{...props}
/>
</div>
<Field
id={name}
name={name}
className={`form-input ${error}`}
{...props}
/>
</div>
)
}

68
src/pages/Institutional/Contact/index.module.scss
View File

@ -17,17 +17,42 @@
margin-bottom: 12px;
}
.form-group-header {
label {
display: flex;
align-items: center;
justify-content: space-between;
display: block;
padding: 0 15px;
margin-bottom: 12px;
label {
display: block;
font-size: var(--txt-normal);
line-height: 16.41px;
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
}
.form-group-content {
position: relative;
width: 100%;
.error-message {
position: absolute;
width: 100%;
padding: 0 16px;
text-align: end;
top: 0;
right: 0;
transform: translateY(-100%);
color: red;
font-size: var(--txt-xs);
line-height: 14.06px;
@media screen and (min-width: 2500px) {
line-height: 28.13px;
}
}
}
@ -40,6 +65,20 @@
border: 1px solid var(--clr-gray-1000);
border-radius: 25px;
font-size: var(--txt-normal);
line-height: 16.41px;
@media screen and (min-width: 2500px) {
height: 63px;
padding: 15px 20px;
line-height: 32.81px;
}
&::-webkit-input-placeholder,
&::placeholder {
color: var(--clr-gray-450);
}
}
.form-check {
@ -53,10 +92,12 @@
label {
text-decoration: underline;
margin: 0;
padding: 0;
span {
display: inline-block;
display: inline-block;
text-decoration: none;
color: var(--clr-common-red);
}
@ -65,8 +106,11 @@
input[type='checkbox'] {
width: 18.64px;
height: 18px;
border-radius: 3px;
border: 1px solid var(--clr-common-black);
&:checked {
border-radius: 3px;
border: 1px solid var(--clr-common-black);
}
}
}
@ -75,6 +119,12 @@
height: 52.44px;
border-radius: 25px;
font-weight: 400;
font-size: var(--txt-medium);
line-height: 18.75px;
letter-spacing: 0.05em;
display: flex;
align-items: center;
justify-content: center;
@ -82,5 +132,9 @@
color: var(--clr-common-white);
text-transform: uppercase;
@media screen and (min-width: 2500px) {
height: 71px;
}
}
}

4
src/routes/index.module.scss
View File

@ -12,6 +12,10 @@ main :global {
line-height: 14.06px;
text-transform: uppercase;
@media screen and (min-width: 2500px) {
line-height: 28.13px;
}
}
}

54
src/template/Footer/index.module.scss
View File

@ -156,6 +156,7 @@
a {
font-weight: 400;
font-size: var(--txt-xs);
line-height: 14.06px;
color: var(--clr-gray-800);
transition: color 200ms ease;
@ -163,6 +164,10 @@
&:hover {
color: var(--clr-primary-blue-500);
}
@media screen and (min-width: 2500px) {
line-height: 28.13px;
}
}
li:last-child {
@ -190,7 +195,7 @@
}
@media only screen and (min-width: 2500px) {
width: function.fluid(1531px, 2500px);
width: function.fluid(1531px, 2299.68px);
& > li {
width: function.fluid(315px, 1531px);
@ -210,9 +215,15 @@
h4 {
font-weight: 500;
font-size: var(--txt-normal);
line-height: 16.41px;
text-transform: uppercase;
color: var(--clr-gray-800);
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
}
}
@ -249,6 +260,47 @@
li:last-child {
margin-left: 10.49px;
}
@media screen and (min-width: 1025px) {
width: function.fluid(398.61px, 1080px);
gap: 12px;
@each $index in('1', '2', '3', '4', '5', '6', '7') {
li:nth-child(#{$index}) {
margin: 0px;
}
}
li {
width: function.fluid(36px, 398.61px);
min-height: 20.2px;
img {
width: 100%;
height: 100%;
}
}
li:last-child {
width: function.fluid(54.61px, 398.61px);
min-height: 34px;
margin: 0;
}
}
@media screen and (min-width: 2500px) {
width: function.fluid(692px, 2299.68px);
li {
width: function.fluid(70px, 692px);
min-height: 39.27px;
}
li:last-child {
width: function.fluid(106px, 692px);
min-height: 66px;
}
}
}
.social {

16
src/template/Header/index.module.scss
View File

@ -90,6 +90,11 @@ $containers: (
border-radius: 5px 0 0 5px;
font-size: var(--txt-normal);
line-height: 16.41px;
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
}
}
@ -137,7 +142,9 @@ $containers: (
a {
display: block;
font-weight: 400;
font-size: var(--txt-normal);
line-height: 16.41px;
text-transform: uppercase;
color: var(--clr-common-white);
transition: color 200ms linear;
@ -145,6 +152,10 @@ $containers: (
&:hover {
color: var(--clr-primary-blue-500);
}
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
}
}
@ -250,8 +261,13 @@ $containers: (
font-weight: 500;
font-size: var(--txt-normal);
line-height: 16.41px;
color: var(--clr-gray-400);
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
}
}
}

47
src/template/Newsletter/index.module.scss
View File

@ -12,12 +12,22 @@
.newsletter h3 {
margin-bottom: 16px;
font-weight: 500;
font-size: var(--txt-normal);
line-height: 16.41px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-gray-800);
@media screen and (min-width: 1025px) {
font-size: var(--txt-large);
line-height: 21.09px;
}
@media screen and (min-width: 2500px) {
line-height: 42.19px;
}
}
@ -39,12 +49,24 @@
padding: 16px 0;
margin: 0 auto;
}
@media screen and (min-width: 2500px) {
width: function.fluid(922px, 2500px);
}
}
.container :global {
.form-input {
width: 100%;
margin-bottom: 16px;
@media screen and (min-width: 1025px) {
width: function.fluid(340px, 474px);
}
@media screen and (min-width: 2500px) {
width: function.fluid(668px, 922px);
}
}
input {
@ -53,14 +75,23 @@
height: 50px;
padding: 0 16px;
border: 1px solid var(--clr-gray-400);
font-size: var(--txt-normal);
line-height: 16.41px;
@media screen and (min-width: 2500px) {
line-height: 32.81px;
}
&::placeholder {
color: var(--clr-gray-400);
font-size: var(--txt-normal);
}
@media screen and (min-width:1280px) {
@media screen and (min-width: 1025px) {
height: 42px;
border-radius: 4px;
}
@media screen and (min-width: 2500px) {
height: 59px;
}
}
}
@ -77,11 +108,21 @@
text-transform: uppercase;
font-size: var(--txt-normal);
line-height: 16.41px;
font-weight: 700;
letter-spacing: 0.05em;
@media screen and (min-width: 1025px) {
width: function.fluid(126px, 474px);
font-size: var(--txt-xs);
line-height: 14.06px;
height: 42px;
border-radius: 4px;
}
@media screen and (min-width: 2500px) {
width: function.fluid(246px, 922px);
line-height: 28.13px;
height: 59px;
}
}

9
src/template/Sidebar/index.module.scss
View File

@ -9,6 +9,10 @@
max-height: 285px;
}
@media screen and (min-width: 2500px) {
max-height: 465px;
}
.container {
width: 100%;
height: auto;
@ -24,6 +28,7 @@
font-weight: 400;
font-size: var(--txt-medium);
line-height: 18.75px;
color: var(--clr-gray-600);
@ -32,6 +37,10 @@
color: var(--clr-common-white);
font-weight: 700;
}
@media screen and (min-width: 2500px) {
line-height: 37.5px;
}
}
}
}