feat(TouristAttractions): Automatiza sass
This commit is contained in:
parent
19f35863d9
commit
ff228b5d3a
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# EditorConfig is awesome: https://EditorConfig.org
|
||||||
|
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 4
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
max_line_length = 100
|
||||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
15
gulpfile.js
Normal file
15
gulpfile.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const { src, dest, watch } = require('gulp');
|
||||||
|
const sass = require('gulp-sass')(require('sass'));
|
||||||
|
|
||||||
|
function styles() {
|
||||||
|
return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function sentinel () {
|
||||||
|
watch('src/styles/*.scss', {ignoreInitial: false}, styles);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
exports.sentinel = sentinel;
|
||||||
7804
package-lock.json
generated
Normal file
7804
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "challenge-tourist-attractions-williamsimao",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Projeto m3Academmy",
|
||||||
|
"main": "js.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"dev": "gulp sentinel"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.ecommercetools.com.br/WilliamSimao/challenge-tourist-attractions-WilliamSimao.git"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"gulp": "^4.0.2",
|
||||||
|
"gulp-sass": "^5.1.0",
|
||||||
|
"sass": "^1.56.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="../dist/main.css">
|
||||||
|
|
||||||
<title>Tourist Attractions</title>
|
<title>Tourist Attractions</title>
|
||||||
</head>
|
</head>
|
||||||
@ -19,8 +19,6 @@
|
|||||||
|
|
||||||
<div class="wrapper-input__img">
|
<div class="wrapper-input__img">
|
||||||
<label class="label-input" for="input__img">
|
<label class="label-input" for="input__img">
|
||||||
<!-- <span class="span__img">
|
|
||||||
</span> -->
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input id="input__img" type="file" data-test="input-image">
|
<input id="input__img" type="file" data-test="input-image">
|
||||||
@ -57,7 +55,7 @@
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="js.js"></script>
|
<script src="../src/scripts/js.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
5
src/styles/common/reset.scss
Normal file
5
src/styles/common/reset.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
7
src/styles/main.scss
Normal file
7
src/styles/main.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
@import "utils/variables.scss";
|
||||||
|
@import "utils/fonts.scss";
|
||||||
|
|
||||||
|
@import "common/reset.scss";
|
||||||
|
|
||||||
|
@import "partials/form.scss";
|
||||||
|
|
||||||
146
src/styles/partials/form.scss
Normal file
146
src/styles/partials/form.scss
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@import "utils/fonts.scss";
|
||||||
|
|
||||||
|
.container-h1-input {
|
||||||
|
|
||||||
|
padding: 40px 130px;
|
||||||
|
|
||||||
|
.page-titulo__tourist {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-input {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin: 40px 0 60px;
|
||||||
|
|
||||||
|
.wrapper-input__img label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: $grey-500;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
|
||||||
|
width: 343px;
|
||||||
|
height: 212px;
|
||||||
|
|
||||||
|
margin-right: 20px;
|
||||||
|
border: 2px solid $grey-200;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-input__img input {
|
||||||
|
display: none;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-input__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.input-text__titulo {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 328px;
|
||||||
|
height: 56px;
|
||||||
|
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
border: 2px solid $grey-100;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
color: $grey-500;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-text__descricao {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 417px;
|
||||||
|
height: 136px;
|
||||||
|
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 40px 0px 72px 20px;
|
||||||
|
|
||||||
|
color: $grey-500;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
|
||||||
|
border: 2px solid $grey-100;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-button-submit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
|
||||||
|
.button-submit__input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 121px;
|
||||||
|
height: 56px;
|
||||||
|
|
||||||
|
background: $red-500;
|
||||||
|
|
||||||
|
color: $white-500;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
border: 1px solid $red-500;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $red-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-result {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-titulo__img__spot {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
2
src/styles/utils/fonts.scss
Normal file
2
src/styles/utils/fonts.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
|
||||||
13
src/styles/utils/variables.scss
Normal file
13
src/styles/utils/variables.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
//colors
|
||||||
|
|
||||||
|
$white-500: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$grey-100: #d6d6d6;
|
||||||
|
$grey-200: #e5e5e5;
|
||||||
|
$grey-500: #858585;
|
||||||
|
|
||||||
|
|
||||||
|
$red-500: #ff5a5f;
|
||||||
|
$red-700: #e93137;
|
||||||
146
style.css
146
style.css
@ -1,146 +0,0 @@
|
|||||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-h1-input {
|
|
||||||
padding: 40px 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-titulo__tourist {
|
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 120%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-input {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
margin: 40px 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-input__img label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
color: #858585;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: 0.15px;
|
|
||||||
|
|
||||||
width: 343px;
|
|
||||||
height: 212px;
|
|
||||||
|
|
||||||
margin-right: 20px;
|
|
||||||
border: 2px solid #e5e5e5;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-input__img input {
|
|
||||||
display: none;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-result {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-input__text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-text__titulo {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 328px;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 16px 0 16px 16px;
|
|
||||||
border: 2px solid #d6d6d6;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
color: #858585;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: 0.15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-text__descricao {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 417px;
|
|
||||||
height: 136px;
|
|
||||||
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 40px 0px 72px 20px;
|
|
||||||
|
|
||||||
color: #858585;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: 0.15px;
|
|
||||||
|
|
||||||
border: 2px solid #d6d6d6;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-button-submit {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-submit__input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 121px;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
background: #ff5a5f;
|
|
||||||
|
|
||||||
color: #ffffff;
|
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
border: 1px solid #ff5a5f;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-submit__input:hover {
|
|
||||||
background: #e93137;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-titulo__img__spot {
|
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 120%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user