MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(style): input field styles

This commit is contained in:
ArneBo 2024-12-29 13:30:40 +01:00 committed by upsiflu
parent e3529d8753
commit 885bf8bc87
1 changed files with 38 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
front/src/components/ui/input.scss
View File

@ -1,7 +1,7 @@
.funkwhale { .funkwhale {
form label { form label {
display: block; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--form-label-color); color: var(--form-label-color);
font-size: .92857143em; font-size: .92857143em;
@ -9,21 +9,24 @@ form label {
text-transform: none; text-transform: none;
} }
&.input { > input {
background-color: var(--fw-bg-color); background-color: var(--fw-bg-color);
box-shadow: inset 0 0 0 4px var(--fw-border-color); box-shadow: inset 0 0 0 4px var(--fw-border-color);
outline: none;
width: 100%;
padding: 8px 12px;
font-size: 14px;
font-family: $font-main;
line-height: inherit;
border: none;
border-radius: var(--fw-border-radius);
cursor: text;
input { &:focus-visible {
&::placeholder { outline: none !important;
color: var(--fw-placeholder-color);
}
@include dark-theme {
color: var(--fw-gray-300);
}
} }
.prefix, &::placeholder {
.input-right {
color: var(--fw-placeholder-color); color: var(--fw-placeholder-color);
} }
@ -43,6 +46,7 @@ form label {
} }
@include dark-theme { @include dark-theme {
color: var(--fw-gray-300);
--fw-bg-color: var(--fw-gray-850); --fw-bg-color: var(--fw-gray-850);
--fw-border-color: var(--fw-bg-color); --fw-border-color: var(--fw-bg-color);
--fw-placeholder-color: var(--fw-gray-300); --fw-placeholder-color: var(--fw-gray-300);
@ -57,49 +61,36 @@ form label {
} }
} }
position: relative;
display: flex;
align-items: center;
border-radius: var(--fw-border-radius);
overflow: hidden;
cursor: text;
&.has-icon { &.has-icon {
input { input {
padding-left: 36px; padding-left: 36px;
} }
} }
}
input { .prefix,
display: block; .input-right {
width: 100%; display: flex;
padding: 8px 12px; align-items: center;
font-size: 14px; font-size: 14px;
font-family: $font-main; writing-mode: horizontal-tb;
background-color: transparent; color: var(--fw-placeholder-color);
line-height: inherit;
border: none;
}
.prefix, & .button,
.input-right { & .button:hover {
display: flex; background-color: transparent !important;
align-items: center; border: none !important;
font-size: 14px;
writing-mode: horizontal-tb;
}
.prefix {
position: absolute;
top: 0;
left: 4px;
bottom: 0;
width: 32px;
justify-content: center;
}
.input-right {
padding-right: 12px;
} }
} }
.prefix {
width: 32px;
justify-content: center;
position: absolute;
top: 0;
left: 4px;
bottom: 0;
width: 32px;
justify-content: center;
}
} }