refactor: split form styles and combine components

I think it is better to keep styles close to the
corresponding components. So I splitted the unique
stylesheet.
I also combine select, textarea and input components
into a single one since they share the same logic and
the same styles.

1 files changed, 0 insertions, 82 deletions

diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
deleted file mode 100644
index e805c52..0000000
--- a/src/components/Form/Form.module.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: 100%;
-
-  &--search,
-  &--toggle {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-  }
-
-  &--toggle {
-    position: relative;
-    margin: var(--spacing-sm) 0;
-  }
-
-  &--centered {
-    max-width: 45ch;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.item {
-  margin: var(--spacing-xs) 0;
-  max-width: 45ch;
-}
-
-.label {
-  display: block;
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-}
-
-.field {
-  width: 100%;
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
-
-  &:hover {
-    box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
-      var(--color-shadow);
-    transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
-  }
-
-  &:focus {
-    background: var(--color-bg);
-    border-color: var(--color-primary-darker);
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-    outline: none;
-    transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
-  }
-}
-
-.textarea {
-  min-height: fun.convert-px(200);
-}
-
-.required {
-  color: var(--color-secondary);
-}
-
-.wrapper--search {
-  > input {
-    padding-right: calc(var(--btn-size) + var(--spacing-2xs));
-
-    &:hover ~ button {
-      transform: translate(fun.convert-px(-3), fun.convert-px(-3));
-    }
-
-    &:focus ~ button {
-      transform: translate(fun.convert-px(3), fun.convert-px(3));
-    }
-  }
-}