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

refactor(newsletter): clear styles

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-01-02 14:16:17 -03:00
parent 5ccc4c9b2b
commit c0edf709f7
1 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,59 +3,93 @@
.newsletter {
width: 100%;
border-top: 1px solid var(--clr-common-black);
}
.container {
width: 100%;
padding: 16px;
.container {
width: 100%;
padding: 16px;
}
h3 {
text-transform: uppercase;
margin-bottom: 16px;
}
.newsletter h3 {
margin-bottom: 16px;
font-size: var(--txt-normal);
text-transform: uppercase;
letter-spacing: 0.05em;
fieldset :global {
border: none;
@media screen and (min-width: 1025px) {
font-size: var(--txt-large);
}
}
.form-group {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
.container {
fieldset :global {
border: none;
.form-input {
width: 100%;
margin-bottom: 16px;
}
input {
display: block;
width: 100%;
height: 50px;
padding: 0 16px;
border: 1px solid var(--clr-gray-400);
}
}
}
button[type='submit'] {
.form-group {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-common-black);
color: var(--clr-common-white);
text-transform: uppercase;
flex-direction: column;
gap: 8px;
}
}
@media screen and (min-width: 1025px) {
.container {
width: function.fluid(474px, 1280px);
padding: 16px 0;
margin: 0 auto;
width: function.fluid(474px, 1280px);
padding: 16px 0;
margin: 0 auto;
}
}
.container :global {
.form-input {
width: 100%;
margin-bottom: 16px;
}
input {
display: block;
width: 100%;
height: 50px;
padding: 0 16px;
border: 1px solid var(--clr-gray-400);
&::placeholder {
color: var(--clr-gray-400);
font-size: var(--txt-normal);
}
@media screen and (min-width:1280px) {
}
}
}
.form {
button[type='submit'] {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-common-black);
color: var(--clr-common-white);
text-transform: uppercase;
font-size: var(--txt-normal);
font-weight: 700;
letter-spacing: 0.05em;
@media screen and (min-width: 1025px) {
font-size: var(--txt-xs);
height: 59px;
}
}
}
.newsletter {
@media screen and (min-width: 1025px) {
.container {
fieldset :global {
.form-group {
flex-direction: row;