-
Notifications
You must be signed in to change notification settings - Fork 183
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix #996 - Stop alias name from flickering #1000
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Started a self review for clarification
static/scss/partials/dashboard.scss
Outdated
.relay-email-address-label:placeholder-shown { | ||
color: $color-grey-50; | ||
opacity: 1; | ||
width: 192px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Magic Number 192px
specifically for the placeholder.
static/scss/partials/main.scss
Outdated
opacity: 1; | ||
width: 192px; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved this into dashboard.scss
for clarity
static/scss/partials/main.scss
Outdated
@@ -849,8 +838,7 @@ input:focus::placeholder { | |||
} | |||
|
|||
.relay-email-address-label:hover { | |||
background: $color-grey-20; | |||
width: 192px; | |||
background: $color-grey-10; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Opted for a lighter grey, it looks closer to the input field on Figma (lemme know if you agree!)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this solution may be over-engineered. When testing, I tried adding a specific max-width
to the additional-notes
class. Please let me know your thoughts!
Flickering on hover has stopped, check demo:
Screen.Recording.2021-08-06.at.3.43.27.PM.mov