From 9d6de40b2c8d150c2cff722d4b83515eb323ad70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Gabriel?= <=>
Date: Tue, 8 Nov 2022 09:23:47 -0300
Subject: [PATCH] =?UTF-8?q?Feat(iniciando=20js):=20Finalizando=20parte=20h?=
=?UTF-8?q?tml,=20css=20e=20come=C3=A7ando=20js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 32 ++++++++++++++++++
styles/form.css | 77 ++++++++++++++++++++++++++++++++++++++++++++
styles/global.css | 16 +++++++++
styles/style.css | 14 ++++++++
styles/variables.css | 11 +++++++
5 files changed, 150 insertions(+)
create mode 100644 index.html
create mode 100644 styles/form.css
create mode 100644 styles/global.css
create mode 100644 styles/style.css
create mode 100644 styles/variables.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8e0f550
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Shopping List
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles/form.css b/styles/form.css
new file mode 100644
index 0000000..2bfb1ab
--- /dev/null
+++ b/styles/form.css
@@ -0,0 +1,77 @@
+.shopping-form-inputs {
+ display: flex;
+ margin-bottom: 24px;
+ align-items: flex-end;
+}
+.shopping-for-item-wrapper {
+ flex: 1;
+ max-width: 256px;
+}
+.shopping-for-label {
+ display: block;
+ margin-bottom: 4px;
+}
+.shopping-form-item-input, .shopping-for-quantity-input {
+ width: 100%;
+ height: 32px;
+ padding: 0 12px;
+ border: 1px solid var(--gray-300);
+ border-radius: 4px;
+ background-color: var(--white);
+}
+.shopping-form-quantity-wrapper {
+ display: flex;
+ align-items: center;
+ margin-left: 24px;
+}
+.shopping-for-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 linear;
+}
+.shopping-form-quatity-button:hover {
+ background: var(--orange-5500);
+}
+.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-5500);
+ transition: background-color 0.2s linear;
+}
+.shopping-form-submit-button:hover{
+ background: var(--orange-300);
+}
+.shopping-form-submit-button:active{
+ background: var(--orange-500);
+}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..e1b3be1
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ text-decoration: none;
+ box-sizing: border-box;
+}
+body{
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ color: var(--gray-500);
+}
+
+button {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..5b519c4
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,14 @@
+@import "global.css";
+@import "variables.css";
+@import "form.css";
+
+.shopping-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 15px;
+}
+
+.shopping-title {
+ margin: 32px 0;
+ font-size: 32px;
+}
\ No newline at end of file
diff --git a/styles/variables.css b/styles/variables.css
new file mode 100644
index 0000000..983b369
--- /dev/null
+++ b/styles/variables.css
@@ -0,0 +1,11 @@
+:root {
+ --white: #ffffff;
+
+ --gray-100: #e5e5e5;
+ --gray-300: #bdbdbd;
+ --gray-500: #333333;
+
+ --orange-300: #f6ad55;
+ --orange-5500: #ed8936;
+
+}
\ No newline at end of file