3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 04:36:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improve design of input fields

Browse source
This commit is contained in:
alonso.torres 2023-11-30 15:58:12 +01:00
parent fa711cdd75
commit c601cca288
10 changed files with 106 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/app/main/ui/components/forms.scss
View file

@ -51,12 +51,31 @@
caret-color: var(--input-foreground-color-active);
}
}
&:global(.invalid) {
&.valid {
input {
border: $s-1 solid var(--input-border-color-success);
@extend .disabled-input;
&:hover,
&:focus {
border: $s-1 solid var(--input-border-color-success);
}
}
}
&.invalid {
input {
border: $s-1 solid var(--input-border-color-error);
@extend .disabled-input;
&:hover,
&:focus {
border: $s-1 solid var(--input-border-color-error);
}
}
}
&.valid .help-icon,
&.invalid .help-icon {
right: $s-40;
}
}
.input-and-icon {
@ -69,7 +88,7 @@
.help-icon {
cursor: pointer;
position: absolute;
right: $s-12;
right: $s-16;
top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
@ -78,6 +97,43 @@
height: $s-16;
}
}
.invalid-icon {
width: $s-16;
height: $s-16;
background: var(--input-border-color-error);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $s-16;
top: calc(50% - $s-8);
svg {
width: $s-12;
height: $s-12;
stroke: var(--input-background-color);
}
}
.valid-icon {
width: $s-16;
height: $s-16;
background: var(--input-border-color-success);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $s-16;
top: calc(50% - $s-8);
svg {
width: $s-12;
height: $s-12;
fill: var(--input-border-color-success);
stroke: var(--input-background-color);
}
}
.error {
color: var(--input-border-color-error);
width: 100%;