anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: adicionando estilo ao formulário

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-16 09:19:49 -03:00
parent acafeceaf4
commit e286dec4b5
4 changed files with 107 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/partials/container.scss
View File

@ -0,0 +1,5 @@
.container {
width: 81.875%;
margin: 40px 0 0 130px;
}

131
src/styles/partials/form.scss
View File

@ -1,54 +1,113 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
h1 {
width: 100%;
font-weight: 700;
font-size: 32px;
}
input, input,
textarea { textarea {
border-radius: 8px; border-radius: 8px;
} }
.form-container {
max-width: 780px;
.form-inputs {
display: flex;
width: 100%;
.input-image-container {
width: 23.81%;
height: 212px;
.input-image-content {
width: 100%;
height: 212px;
border: 2px solid $input-image-border-color;
}
}
.form-input-descricao {
display: flex;
flex-direction: column;
.input-titulo {
width: 79%;
height: 56px;
}
.input-descricao {
width: 417px;
height: 136px;
}
.input-descricao,
.input-titulo {
padding: 10px 16px;
}
}
}
}
textarea::placeholder, textarea::placeholder,
textarea, textarea,
input::placeholder, input::placeholder,
input, input,
.input-image-content { .input-image-container {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
color: $input-text-color;
} }
// width: 328px; form {
// height: 56px; width: 66.157%;
height: 284px;
margin-top: 40px;
.form-container {
.form-inputs {
display: flex;
justify-content: space-between;
width: 100%;
gap: 20px;
.input-image-container {
width: 43.974%;
height: 212px;
border: 2px solid $input-image-border-color;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: rgb(255, 255, 255);
overflow: hidden;
&::after {
content: "Imagem";
text-align: center;
pointer-events: none;
}
.input-image-content {
width: 100%;
height: 212px;
z-index: 1;
opacity: 0;
}
& img {
object-fit: cover;
width: 100%;
height: 100%;
transition: opacity 0.25s ease-in-out;
opacity: 1;
&[src=""] {
opacity: 0;
}
}
}
.form-input-descricao {
display: flex;
flex-direction: column;
width: 53.461%;
height: 284px;
gap: 20px;
.input-titulo {
width: 78%;
height: 56px;
border: 2px solid $input-titulo-border-color;
}
.description-content {
width: 100%;
height: 208px;
.input-descricao {
width: 100%;
height: 136px;
border: 2px solid $input-descrição-border-color;
}
& button {
background: $button-submit-color;
padding: 16px 20px;
border: 1px solid $button-submit-color;
border-radius: 8px;
margin-top: 16px;
font-weight: 700;
font-size: 16px;
color: $text-button-submit-color;
float: right;
}
}
.input-descricao,
.input-titulo {
padding: 10px 16px;
}
}
}
}
}
.input-image-content,
.input-image-container img {
position: absolute;
}

19
src/styles/utils/variables.scss
View File

@ -3,11 +3,9 @@
$background-color: #ffffff; $background-color: #ffffff;
$title-form-color: #000000; $title-form-color: #000000;
$input-image-border-color: #e5e5e5; $input-image-border-color: #e5e5e5;
$input-image-text-color: #858585; $input-text-color: #858585;
$input-titulo-color: #d6d6d6; $input-titulo-border-color: #d6d6d6;
$input-titulo-text-color: #858585; $input-descrição-border-color: #d6d6d6;
$input-descrição-color: #d6d6d6;
$input-descrição-text-color: #858585;
$button-submit-color: #ff5a5f; $button-submit-color: #ff5a5f;
$text-button-submit-color: #ffffff; $text-button-submit-color: #ffffff;
$title-list-color: #000000; $title-list-color: #000000;
@ -15,14 +13,3 @@ $title-item-list-color: #333333;
$description-item-list-color: #858585; $description-item-list-color: #858585;
$slider-ellipse-color: #858585; $slider-ellipse-color: #858585;
$slider-arrow-color: #858585; $slider-arrow-color: #858585;
// Font-size
$title-form-font-size: 32px;
$input-image-font-size: 16px;
$input-titulo-font-size: 16px;
$input-descrição-font-size: 16px;
$button-submit-font-size: 16px;
$title-list-font-size: 32px;
$title-item-list-font-size: 24px;
$description-item-list-font-size: 16px;

6
src/templates/index.html
View File

@ -26,8 +26,10 @@
</div> </div>
<div class="form-input-descricao"> <div class="form-input-descricao">
<input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"> <input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title">
<textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea> <div class="description-content">
<button type="submit" data-test="button-submit">Adicionar</button> <textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
<button type="submit" data-test="button-submit">Adicionar</button>
</div>
</div> </div>
</div> </div>
</div> </div>