ViniciusGabrieldoAmaral/practice-time-shopping-list-vinicius
1
0
Fork 0
forked from M3-Academy/practice-time-shopping-list
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(config): Configurando e organizando

Browse Source
This commit is contained in:
Vinícius Gabriel 2022-11-14 10:44:28 -03:00
parent 65ff356743
commit 498cd281b5
18 changed files with 8029 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.editorconfig Normal file
View File

@ -0,0 +1,14 @@
# 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
View File

@ -0,0 +1,2 @@
dist
node_modules

15
gulpfile.js Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "practice-time-shopping-list-vinicius",
"version": "1.0.0",
"description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp sentinel"
},
"repository": {
"type": "git",
"url": "ssh://git@gitea.ecommercetools.com.br:22022/ViniciusGabrieldoAmaral/practice-time-shopping-list-vinicius.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.56.1"
}
}

4
index.html → public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="../dist/main.css">
</head>
<body>
<main class="center">
@ -45,6 +45,6 @@
</main>
<script src="scripts/app.js"></script>
<script src="../src/scripts/app.js"></script>
</body>
</html>

0
scripts/app.js → src/scripts/app.js
View File

8
src/styles/common/global.scss Normal file
View File

@ -0,0 +1,8 @@
body,input,button{
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
button {
cursor: pointer;
}

9
styles/global.css → src/styles/common/reset.scss
View File

@ -5,12 +5,3 @@
text-decoration: none;
box-sizing: border-box;
}
body,input,button{
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: var(--gray-500);
}
button {
cursor: pointer;
}

9
src/styles/main.scss Normal file
View File

@ -0,0 +1,9 @@
@import "utils/variables.scss";
@import "common/reset.scss";
@import "common/global.scss";
@import "partials/container.scss";
@import "partials/form.scss";
@import "partials/itens.scss";

10
src/styles/partials/container.scss Normal file
View File

@ -0,0 +1,10 @@
.shopping-container {
max-width: 500px;
margin: 0 auto;
margin: 0 15px;
.shopping-title {
margin: 32px 0;
font-size: 32px;
}
}

97
src/styles/partials/form.scss Normal file
View File

@ -0,0 +1,97 @@
.shopping-form {
margin-bottom: 32px;
.shopping-form-inputs {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
.shopping-form-item-wrapper {
flex: 1;
max-width: 256px;
.shopping-form-label {
display: block;
margin-bottom: 4px;
}
}
.shopping-form-item-input,
.shopping-form-quantity-input {
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid $gray-300;
border-radius: 4px;
background: $white;
}
.shopping-form-quatity-warapper {
display: flex;
align-items: center;
margin-left: 24px;
.shopping-form-quantity-input {
max-width: 64px;
text-align: center;
margin: 0 4px;
}
.shopping-form-quatity-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 4px;
background: $gray-100;
transition: background-color 0.2s ease-in-out;
&:hover {
background: $orange-500;
}
&:active {
background: $orange-300;
}
}
.shopping-form-quatity-button::before,
.shopping-form-increment-button::after {
content: '';
position: absolute;
width: 16px;
height: 4px;
border-radius: 4px;
background: $white;
}
.shopping-form-increment-button{
&::after {
transform: rotate(90deg);
}
}
}
}
.shopping-form-submit-button {
width: 100%;
max-width: 128px;
height: 32px;
border: 0;
border-radius: 4px;
color: $white;
font-weight: 700;
background: $orange-500;
transition: background-color 0.25s linear;
&:hover {
background-color: $orange-300;
}
&:active {
background-color: $orange-500;
}
}
}

34
src/styles/partials/itens.scss Normal file
View File

@ -0,0 +1,34 @@
.center {
display: flex;
align-items: center;
justify-content: center;
}
.shopping-container {
display: flex;
flex-direction: column;
}
.shopping-result {
max-width: 416px;
.shopping-result-head, .shopping-item{
display: grid;
grid-template-columns: 3fr 1fr;
padding: 8px 16px;
border-radius: 5px;
}
.shopping-result-head {
background: $gray-100;
}
.shopping-items {
list-style: none;
.shopping-item {
&:nth-child(even) { //& Comercial aqui está se refirindo ao elemente pai
background: $gray-100;
}
}
}
}

13
src/styles/utils/variables.scss Normal file
View File

@ -0,0 +1,13 @@
//Colors
$white: #ffffff;
$gray-100: #e5e5e5;
$gray-300: #bdbdbd;
$gray-500: #333333;
$orange-300: #f6ad55;
$orange-500: #ed8936;

94
styles/form.css
View File

@ -1,94 +0,0 @@
.shopping-form {
margin-bottom: 32px;
}
.shopping-form-inputs {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
}
.shopping-form-item-wrapper {
flex: 1;
max-width: 256px;
}
.shopping-form-label {
display: block;
margin-bottom: 4px;
}
.shopping-form-item-input,
.shopping-form-quantity-input {
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: var(--white);
}
.shopping-form-quatity-warapper {
display: flex;
align-items: center;
margin-left: 24px;
}
.shopping-form-quantity-input {
max-width: 64px;
text-align: center;
margin: 0 4px;
}
.shopping-form-quatity-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 4px;
background: var(--gray-100);
transition: background-color 0.2s ease-in-out;
}
.shopping-form-quatity-button:hover {
background: var(--orange-500);
}
.shopping-form-quatity-button:active {
background: var(--orange-300);
}
.shopping-form-quatity-button::before,
.shopping-form-increment-button::after {
content: '';
position: absolute;
width: 16px;
height: 4px;
border-radius: 4px;
background: var(--white);
}
.shopping-form-increment-button::after {
transform: rotate(90deg);
}
.shopping-form-submit-button {
width: 100%;
max-width: 128px;
height: 32px;
border: 0;
border-radius: 4px;
color: var(--white);
font-weight: 700;
background: var(--orange-500);
transition: background-color 0.25s linear;
}
.shopping-form-submit-button:hover {
background-color: var(--orange-300);
}
.shopping-form-submit-button:active {
background-color: var(--orange-500);
}

31
styles/itens.css
View File

@ -1,31 +0,0 @@
.center {
display: flex;
align-items: center;
justify-content: center;
}
.shopping-container {
display: flex;
flex-direction: column;
}
.shopping-result {
max-width: 416px;
}
.shopping-result-head, .shopping-item{
display: grid;
grid-template-columns: 3fr 1fr;
padding: 8px 16px;
border-radius: 5px;
}
.shopping-result-head {
background: var(--gray-100);
}
.shopping-items {
list-style: none;
}
.shopping-item:nth-child(even) {
background: var(--gray-100);
}

10
styles/style.css
View File

@ -1,10 +0,0 @@
@import "global.css";
@import "variables.css";
@import "form.css";
@import "itens.css";
.shopping-container {
max-width: 500px;
margin: 0 auto;
margin: 0 15px;
}

15
styles/variables.css
View File

@ -1,15 +0,0 @@
:root {
--white: #ffffff;
--gray-100: #e5e5e5;
--gray-300: #bdbdbd;
--gray-500: #333333;
--orange-300: #f6ad55;
--orange-500: #ed8936;
}
.shopping-title {
margin: 32px 0;
font-size: 32px;
}