Merge pull request 'feature' (#3) from feature into main

Reviewed-on: #3

index.html

@@ -21,7 +21,8 @@
                     </div>
                     <div class="shopping-form-quantity-wrapper">
                         <button class="shopping-form-quantity-button shopping-form-decrement" type="button"></button>
-                        <input name="item-quantity" type="text" value="1" disabled />
+                        <input class="shopping-form-quantity-input" name="item-quantity" type="text" value="1"
+                            disabled />
                         <button class="shopping-form-quantity-button shopping-form-increment" type="button"></button>
                     </div>
                 </div>

style/form.css

@@ -0,0 +1,37 @@
+.shopping-form-inputs {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 24px;
+}
+
+.shopping-form-item-wrapper {
+  flex: 1; /*A div ocupe todo espaço disponível, fazendo que o outro elemento vá para o final*/
+  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;
+}

style/global.css

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

style/main.css

@@ -1 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("global.css");
+@import url("variables.css");
+@import url("form.css");
+
+.shopping-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.shopping-title {
+  margin: 32px 0;
+  font-size: 32px;
+}

style/variables.css

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