Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

style(experience): improve input filed style (#6260)

Browse source
This commit is contained in:
Xiao Yijun 2024-07-17 15:44:37 +08:00 committed by GitHub
parent 3aa7e57b3d
commit f73b698381
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/experience/src/components/InputFields/InputField/NotchedBorder/index.module.scss
View file

@ -2,14 +2,14 @@
.container {
position: absolute;
inset: 0;
inset: -0.4px -2px 0;
pointer-events: none;
.border,
.outline {
text-align: left;
position: absolute;
inset: -8px 0 0;
inset: -10px 0 -0.5px;
border: _.border(var(--color-line-border));
border-radius: var(--radius);
pointer-events: none;
@ -18,6 +18,8 @@
legend {
display: inline-block;
visibility: hidden;
// To keep the label in the middle of the empty space
margin-left: 1px;
padding: 0;
// fix to the label font height to keep space for the input container
height: 20px;
@ -36,7 +38,7 @@
.outline {
display: none;
inset: -9px -2px -2px;
inset: -11.5px -2px -2.5px;
border-radius: 10px;
border: 3px outset var(--color-overlay-brand-focused);
}
@ -47,8 +49,8 @@
font: var(--font-body-1);
color: var(--color-type-secondary);
pointer-events: none;
top: 50%;
transform: translateY(-46%);
top: 48%;
transform: translateY(-50%);
transition: 0.2s ease-out;
transition-property: position, font, top;
background-color: transparent;
@ -65,8 +67,8 @@
}
.label {
top: 0;
left: _.unit(3.25);
top: -1px;
left: _.unit(3.5);
font: var(--font-body-3);
color: var(--color-type-secondary);
padding: 0 _.unit(1);

1
packages/experience/src/components/InputFields/InputField/index.module.scss
View file

@ -26,7 +26,6 @@
color: var(--color-type-primary);
outline: none;
border-radius: var(--radius);
margin: -1px 1px 0;
&::placeholder {
color: var(--color-type-secondary);