diff options
| author | Haishan <[email protected]> | 2020-12-06 16:02:08 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2020-12-06 20:19:51 +0800 |
| commit | d2b01d80fb8dae8e3400bb09038d3afbcbd55495 (patch) | |
| tree | a2aedfbf1b565d962727cd41c71b42073dc2dab5 /src | |
| parent | 8a50ef4ef2f6f6044d36ea2f4fe06e663083972e (diff) | |
chore: minor input and select style tweak
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Input.module.css | 7 | ||||
| -rw-r--r-- | src/components/shared/Select.module.css | 14 |
2 files changed, 10 insertions, 11 deletions
diff --git a/src/components/Input.module.css b/src/components/Input.module.css index a39c064..e63bf79 100644 --- a/src/components/Input.module.css +++ b/src/components/Input.module.css @@ -11,11 +11,10 @@ height: 40px; outline: none; padding: 0 15px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; - &:focus { - border-color: var(--color-focus-blue); - } +} +.input:focus { + box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; } input::-webkit-outer-spin-button, diff --git a/src/components/shared/Select.module.css b/src/components/shared/Select.module.css index 3ea430e..2f21663 100644 --- a/src/components/shared/Select.module.css +++ b/src/components/shared/Select.module.css @@ -1,19 +1,16 @@ .select { - height: 30px; + height: 40px; line-height: 1.5; width: 100%; padding-left: 8px; appearance: none; - background-color: var(--color-background); + background-color: var(--color-input-bg); color: var(--color-text); padding-right: 20px; - background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); border-radius: 4px; - border-width: 1px; - border-style: solid; - border-image: initial; - border-color: var(--select-border-color); + border: 1px solid var(--color-input-border); transition: all 100ms ease 0s; + background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); background-position: calc(100% - 8px) center; background-repeat: no-repeat; } @@ -25,6 +22,9 @@ color: var(--color-text-highlight); background-image: var(--select-bg-hover); } +.select:focus { + box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; +} .select option { background-color: var(--color-background); |