From ada99b2d9d5c086712e85b42750f51db37e23e2e Mon Sep 17 00:00:00 2001 From: WellingtonWDS Date: Tue, 8 Nov 2022 08:43:52 -0300 Subject: [PATCH] feat(style) Estrutura HTML e estilizacao inicial --- index.html | 46 ++++++++++++++++++++++ styles/form.css | 92 ++++++++++++++++++++++++++++++++++++++++++++ styles/global.css | 17 ++++++++ styles/main.css | 15 ++++++++ styles/variables.css | 9 +++++ 5 files changed, 179 insertions(+) create mode 100644 index.html create mode 100644 styles/form.css create mode 100644 styles/global.css create mode 100644 styles/main.css create mode 100644 styles/variables.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..95b4e9e --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + Shopping List + + + + + + + +
+
+

Shopping List

+ +
+
+ +
+ + +
+ +
+ + + +
+ + +
+ + +
+
+
+ + \ No newline at end of file diff --git a/styles/form.css b/styles/form.css new file mode 100644 index 0000000..4a83458 --- /dev/null +++ b/styles/form.css @@ -0,0 +1,92 @@ +.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; +} + +.shoppping-form-quantity-input { + max-width: 64px; + text-align: center; + margin: 0 4x; +} + +.shopping-form-quantity-button { + display: flex; + align-items: center; + justify-content: center; + position: relative; + 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: 132px; + 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); +} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..9e1b0d2 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,17 @@ +* { + 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; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..543ebc0 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,15 @@ +@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: 32; + +} \ No newline at end of file diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 0000000..c08932a --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,9 @@ +:root { + --white: #ffffff; + --gray-100: #e5e5e5; + --gray-300: #bdbdbd; + --gray-500: #333333; + + --orange-300: #f6ad55; + --orange-500: #ed8936; +} \ No newline at end of file