Adiciona os arquivos finais do projeto

.editorconfig

@@ -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_lenght = 100

.gitignore

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

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

gulpfile.js

@@ -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;
+

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "practice-time-shopping-list-filipe-quintanilha",
+  "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.56.1"
+  }
+}

public/index.html

@@ -12,7 +12,7 @@
         <title>Shopping List</title>
 
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="styles/main.css">
+        <link rel="stylesheet" href="../dist/main.css" />
 
     </head>
 

src/styles/common/global.scss

@@ -0,0 +1,11 @@
+body,
+input,
+button {
+    font-family: "Roboto", sans-serif;
+    font-size: 16px;
+    color: $gray-500;
+}
+
+button {
+    cursor: pointer;
+}

src/styles/common/reset.scss

@@ -0,0 +1,5 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}

src/styles/main.scss

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

src/styles/partials/container.scss

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

src/styles/partials/form.scss

@@ -0,0 +1,96 @@
+.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-quantity-wrapper {
+            display: flex;
+            align-items: center;
+            margin-left: 24px;
+
+            .shopping-form-quantity-input {
+                max-width: 64px;
+                text-align: center;
+                margin: 0 4px;
+            }
+
+            .shopping-form-quantity-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 linear;
+
+                &:hover {
+                    background: $orange-500;
+                }
+
+                &:active {
+                    background: $orange-300;
+                }
+            }
+
+            .shopping-form-quantity-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.2s linear;
+
+        &:hover {
+            background: $orange-300;
+        }
+
+        &:active {
+            background: $orange-500;
+        }
+    }
+}

src/styles/partials/items.scss

@@ -0,0 +1,24 @@
+.shopping-result {
+    max-width: 416px;
+
+    .shopping-result-head,
+    .shopping-item {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        padding: 8px 16px;
+
+        .shopping-result-head {
+            background: $gray-100;
+        }
+
+        .shopping-items {
+            list-style: none;
+
+            .shopping-item {
+                &:nth-child(even) {
+                    background: $gray-100;
+                }
+            }
+        }
+    }
+}

src/styles/utils/variables.scss

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

styles/form.css

@@ -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-quantity-wrapper{
-    display: flex;
-    align-items: center;
-    margin-left: 24px;
-}
-
-.shopping-form-quantity-input{
-    max-width: 64px;
-    text-align: center;
-    margin: 0 4px;
-}
-
-.shopping-form-quantity-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 linear;
-}
-
-.shopping-form-quantity-button:hover{
-    background: var(--orange-500);
-}
-
-.shopping-form-quantity-button:active{
-    background: var(--orange-300);
-}
-
-.shopping-form-quantity-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.2s linear;
-}
-
-.shopping-form-submit-button:hover{
-    background: var(--orange-300);
-}
-
-.shopping-form-submit-button:active{
-    background: var(--orange-500);
-}

styles/global.css

@@ -1,17 +0,0 @@
-*{
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body,
-input,
-button{
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    color: var(--gray-500);
-}
-
-button{
-    cursor: pointer;
-}

styles/items.css

@@ -1,22 +0,0 @@
-.shopping-result{
-    max-width: 416px;
-}
-
-.shopping-result-head,
-.shopping-item{
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    padding: 8px 16px;
-}
-
-.shopping-result-head{
-    background: var(--gray-100);
-}
-
-.shopping-item{
-    list-style: none;
-}
-
-.shopping-item:nth-child(even){
-    background: var(--gray-100);
-}

styles/main.css

@@ -1,15 +0,0 @@
-@import "global.css";
-@import "variables.css";
-@import "form.css";
-@import "items.css";
-
-.shopping-container{
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-}
-
-.shopping-title{
-    margin: 32px 0;
-    font-size: 32px;
-}

styles/variables.css

@@ -1,10 +0,0 @@
-:root{
-    --white: #ffffff;
-
-    --gray-100: #e5e5e5;
-    --gray-300: #bdbdbd;
-    --gray-500: #333333;
-
-    --orange-300: #f6ad55;
-    --orange-500: #ed8936;
-}