webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: lp and navigation

Browse source 
Added... a lot of stuff
This commit is contained in:
Fiona Lena Urban 2025-05-22 09:59:27 +02:00
parent 55fc3fe4e0
commit f60719fa9e
20 changed files with 332 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/assets/styles/form/textfield.css
View file

@ -1,9 +1,9 @@
.TextField {
--border-color: var(--color-light);
--label-color: var(--color-middle);
--label-position-top: var(--font-size-normal);
--label-font-size: var(--font-size-normal);
--icon-color: var(--color-main-dark);
--label-position-top: var(--font-size-default);
--label-position-left: 2.5rem;
--label-font-size: var(--font-size-default);
--message-color: var(--color-middle);
position: relative;
@ -15,15 +15,11 @@
&:focus-within,
&:has(input:not(:placeholder-shown)) {
--icon-color: var(--color-main-dark);
--label-color: var(--color-main-dark);
--label-position-top: calc(-1 * var(--font-size-normal));
--label-font-size: var(--font-size-s);
}
&.error {
--label-color: var(--color-error);
--icon-color: var(--color-error);
--label-color: var(--color-error) !important;
--border-color: var(--color-error);
--message-color: var(--color-error);
}
@ -38,29 +34,38 @@
& label {
position: absolute;
background: var(--color-lightest);
padding: var(--padding-xxs) 0;
left: var(--padding-s);
display: flex;
align-items: center;
color: var(--label-color);
top: var(--label-position-top);
font-size: var(--font-size-normal);
gap: 2px;
top: -6px;
left: calc(var(--padding-xs) - 2px);
font-size: var(--font-size-s);
transition: var(--transition-default);
& > * {
background: var(--color-lightest);
padding: 0 2px;
}
}
& .icon {
color: var(--icon-color);
position: relative;
color: var(--label-color);
font-size: var(--font-size-default);
top: -1px;
}
& input {
all: unset;
padding: var(--padding-s);
font-size: var(--font-size-normal);
padding: var(--padding-xxs) var(--padding-s) var(--padding-xxs) 0;
font-size: var(--font-size-s);
width: 100%;
flex: 25% 1 0;
color: var(--color-darkest);
}
& span {
& > span {
color: var(--message-color);
font-size: var(--font-size-xs);
}