From 76e4dcff105988e834ed7f68a5fc1e540491fd86 Mon Sep 17 00:00:00 2001 From: wellington carlos Date: Fri, 11 Nov 2022 01:15:55 -0300 Subject: [PATCH] =?UTF-8?q?feat(css)finalizando=20css,=20dividindo=20o=20f?= =?UTF-8?q?ormul=C3=A1rio=20em=20css=20diferente=20=20e=20importando=20par?= =?UTF-8?q?a=20o=20style.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 20 +++++---- style/form.css | 100 +++++++++++++++++++++++++++++++++++++++++++++ style/global.css | 17 ++++++++ style/style.css | 16 ++++++++ style/varibles.css | 10 +++++ 5 files changed, 155 insertions(+), 8 deletions(-) create mode 100644 style/form.css create mode 100644 style/global.css create mode 100644 style/varibles.css diff --git a/index.html b/index.html index 949b7ad..b25e5a5 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + Document @@ -16,19 +16,23 @@
-
-

+
+

shopping list

- +
-
- - - + +
+ + +
diff --git a/style/form.css b/style/form.css new file mode 100644 index 0000000..b133fee --- /dev/null +++ b/style/form.css @@ -0,0 +1,100 @@ +.shopping-form-inputs{ + + display: flex; + align-items: flex-end; + margin-bottom: 24px; + + +} + +.shopping-form-item-wraper{ + 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); +} + +.shopping-form-submit-button:hover{ + background: var(--gray-300); + transition: backgound 0.2s linear; +} + +.shopping-form-submit-button:active{ + background: var(--orange-500); +} + + + + + diff --git a/style/global.css b/style/global.css new file mode 100644 index 0000000..13d920e --- /dev/null +++ b/style/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/style/style.css b/style/style.css index e69de29..98d119d 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,16 @@ +@import "global.css"; +@import "varibles.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/style/varibles.css b/style/varibles.css new file mode 100644 index 0000000..fc816d8 --- /dev/null +++ b/style/varibles.css @@ -0,0 +1,10 @@ +:root{ + --white: #ffffff; + --gray-100: #e5e5e5; + --gray-300: #bdbdbd; + --gray-500: #333333; + + --orange-300: #f6ad55; + --orange-500: #ed8936; + +} \ No newline at end of file