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