-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
UI: Fix select arrow #6627
UI: Fix select arrow #6627
Conversation
ui/app/styles/core/forms.scss
Outdated
content: ''; | ||
transform: translateY(-70%) rotate(135deg); | ||
z-index: 5; | ||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWd\ |
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.
You could use the svg-uri
helper here so that the SVG code is still readable - here's an example of it:
content: svg-uri( |
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.
That's amazing. Updated.
a6d6aff
to
2db3653
Compare
transform: translateY(-70%) rotate(135deg); | ||
z-index: 5; | ||
content: svg-uri( | ||
'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>' |
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.
✨
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.
Sorry took so long to review - looks great!
We have fixed this issue before, but somehow it crept back in again. This adds in the Structure icon with a data url rather than rebuilding it with CSS borders. This solution has fewer moving parts to override the default Bulma styles, and should be more resilient.
Before:
After: