Skip to content
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

style(toolbar): adjust alert indicator css #76189

Merged
merged 3 commits into from
Aug 15, 2024
Merged

Conversation

michellewzhang
Copy link
Member

before:
SCR-20240814-jyjf

after:
SCR-20240814-jyfs

@michellewzhang michellewzhang requested a review from a team August 14, 2024 17:55
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Aug 14, 2024
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file was renamed to alertBadge.tsx

right: -6px;
top: -6px;
width: 1rem;
right: 2px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Css learning question: Is right and top used to position it relative to the panel icon? How does position:absolute work here?

Copy link
Member Author

@michellewzhang michellewzhang Aug 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aliu39

Is right and top used to position it relative to the panel icon?

yes!

How does position:absolute work here?

it works so that our top and left are relative to the icon itself, since we want the dot on top of the icon.

image

absolute:

SCR-20240815-izsg

relative w same top & left:
SCR-20240815-izoq

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 🔥 thanks for the diagrams!

@michellewzhang michellewzhang merged commit 1c1d6e2 into master Aug 15, 2024
41 checks passed
@michellewzhang michellewzhang deleted the mz/alert-indicator branch August 15, 2024 16:57
@github-actions github-actions bot locked and limited conversation to collaborators Aug 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants