forked from M3-Academy/desafio-react-e-typescript
feat(styles): created styles in newsletter,header,about,contact for large,medium devices
This commit is contained in:
parent
d0f5df8fff
commit
b150a0bf61
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,10 @@ main :global {
|
||||
line-height: 14.06px;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
line-height: 28.13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user