xmengnet/yacd
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

chore: minor input and select style tweak

Browse source
This commit is contained in:
Haishan 2020-12-06 16:02:08 +08:00
parent 8a50ef4ef2
commit d2b01d80fb
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Input.module.css
View file

@ -11,11 +11,10 @@
height: 40px; height: 40px;
outline: none; outline: none;
padding: 0 15px; padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%; 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, input::-webkit-outer-spin-button,

14
src/components/shared/Select.module.css
View file

@ -1,19 +1,16 @@
.select { .select {
height: 30px; height: 40px;
line-height: 1.5; line-height: 1.5;
width: 100%; width: 100%;
padding-left: 8px; padding-left: 8px;
appearance: none; appearance: none;
background-color: var(--color-background); background-color: var(--color-input-bg);
color: var(--color-text); color: var(--color-text);
padding-right: 20px; 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-radius: 4px;
border-width: 1px; border: 1px solid var(--color-input-border);
border-style: solid;
border-image: initial;
border-color: var(--select-border-color);
transition: all 100ms ease 0s; 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-position: calc(100% - 8px) center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -25,6 +22,9 @@
color: var(--color-text-highlight); color: var(--color-text-highlight);
background-image: var(--select-bg-hover); background-image: var(--select-bg-hover);
} }
.select:focus {
box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px;
}
.select option { .select option {
background-color: var(--color-background); background-color: var(--color-background);