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

Add completion marker to daily challenge profile counter #11780

Merged
merged 10 commits into from
Jan 16, 2025
Prev Previous commit
Next Next commit
Fix mixin order
  • Loading branch information
bdach committed Jan 16, 2025
commit dfb9918451a9cb12fdb231bd67f21e99d248c60f
2 changes: 1 addition & 1 deletion resources/css/bem/daily-challenge.less
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
border-color: @osu-colour-lime-1;

&::before {
.center-content();
.fas();
.center-content();
background-color: @osu-colour-lime-1;
border-radius: 50%;
Copy link
Collaborator

Choose a reason for hiding this comment

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

while at it, this doesn't actually do anything, does this? The fa icon is already rounded and all

Copy link
Contributor Author

@bdach bdach Jan 16, 2025

Choose a reason for hiding this comment

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

The fontawesome icon is rounded but it has a hollow interior where the tick is. So without some hackage the border will peek out of the hollow interior, thus the background-color + border-radius specs are supposed to cover up anything that's in the background (particularly the border).

Copy link
Collaborator

@nanaya nanaya Jan 16, 2025

Choose a reason for hiding this comment

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

oh. So that also explained the weirdly subtle black outline... 🤔

I suppose an alternative would be to use normal check mark (b6 colored) coupled with circle background (lime-1 colored), centered using .center-content()

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah that's a fair shout. Adjusted further in bf0333a.

I also took the opportunity to resize the tick itself because for whatever reason when using the pre-baked fontawesome check-circle the check was much larger than it actually was in the figma. It should be there-or-thereabouts matching now.

color: @osu-colour-b6;
Expand Down