feat: added labeled input and texbox stying
This commit is contained in:
parent
cc58dfbbbe
commit
d9705b8dfb
7 changed files with 131 additions and 95 deletions
37
src/components/labeled-input.module.css
Normal file
37
src/components/labeled-input.module.css
Normal file
|
@ -0,0 +1,37 @@
|
|||
.input,
|
||||
.input * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--textbox-75);
|
||||
border-radius: 9999px;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--textbox-50);
|
||||
color: var(--foreground);
|
||||
font-size: 16px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.input input:hover {
|
||||
background-color: var(--textbox-75);
|
||||
border-color: var(--textbox-100);
|
||||
}
|
||||
|
||||
.input input:focus {
|
||||
outline: none;
|
||||
background-color: var(--textbox-100);
|
||||
border-color: var(--primary-100);
|
||||
box-shadow: 0 0 0 2px var(--primary-50);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue