diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-07 16:34:55 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-07 19:04:13 +0100 |
| commit | a385d89dfd6312f2255d1343cea3f63375ce5b39 (patch) | |
| tree | cad32cfd21e188eb1c145d0fda173da7f353b591 /src/components/Form/Form.module.scss | |
| parent | 8efb9219116a6c665d1059d3218c9405c616e404 (diff) | |
chore: improve comment section
I also adjust styles for all forms and primary buttons.
Diffstat (limited to 'src/components/Form/Form.module.scss')
| -rw-r--r-- | src/components/Form/Form.module.scss | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss index bfb009e..fcf8d15 100644 --- a/src/components/Form/Form.module.scss +++ b/src/components/Form/Form.module.scss @@ -17,21 +17,40 @@ .label { display: block; + color: var(--color-primary-darker); font-size: var(--font-size-sm); font-variant: small-caps; font-weight: 600; } .field { - border: fun.convert-px(1) solid var(--color-border); width: 100%; padding: var(--spacing-2xs) var(--spacing-xs); + background: var(--color-bg-tertiary); + border: fun.convert-px(2) solid var(--color-border-light); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light); + 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-light); + transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)}); + } &:focus { - border-color: var(--color-primary); + 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); +} |