feat: added labeled input and texbox stying

This commit is contained in:
Maximilian Liebmann 2025-04-19 22:24:41 +02:00 committed by Dominik
parent cc58dfbbbe
commit d9705b8dfb
7 changed files with 131 additions and 95 deletions

View 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);
}