diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-25 19:17:09 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-25 19:17:09 +0100 |
| commit | e26d821f738525477472e631d170d9ed218c1603 (patch) | |
| tree | 70ec0c29d003d462de6926f1faa09354e3ff6d90 /src/components/Form/Form.module.scss | |
| parent | cb4764f8670f67627c407591c89b8d3637c190a7 (diff) | |
chore: combine input/textarea/select in a single component
Diffstat (limited to 'src/components/Form/Form.module.scss')
| -rw-r--r-- | src/components/Form/Form.module.scss | 70 |
1 files changed, 0 insertions, 70 deletions
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss deleted file mode 100644 index 6ccdb11..0000000 --- a/src/components/Form/Form.module.scss +++ /dev/null @@ -1,70 +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; -} - -.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); -} - -.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)); - } - } -} |
