[supersedes #58] Add arrow for <select> #94
Conversation
select tag is styled in a new way added preview for select tag
Added two svg files for the arrow. Removed old inline svg and url-encode. Created SASS variables for the svg path.
Default browser arrow was displayed in IE11.
There was a problem hiding this comment.
Great work and neat trick with floatPrecision: 0. I'm glad that you found a way to inline the SVGs. (Thanks for doing that for me!)
Note: I didn't yarn build yet so you can better see the changes. Why don't we just only build prior to publishing a new release?
Yup, I agree. I think you mentioned before that we can get rid of the builds once we switch to npm distributed releases anyways, right?
Yep, exactly :)
Done. Both the recent text-semantics PR and this one added some variables to the end of the respective files, was indeed an easy fix 👍🏻 |
|
@jonaskuske Great work! Thank's |
|
After merging in the changes from master the box isn't rendering properly - lemme take a look at this |
|
Fixed! @kylejrp could you please take a look at this? |
I took the liberty to update #58 so it aligns with our CSS-variable powered codebase:
(and so that @IL4Miy still appears as a contributor in our git history :) )
postcss-inline-svgto inline the SVGs instead of loading them throughurl()select-arrow.svgfor both dark & light versions, as you can specify the desired color while inlining with thesvg-load()function ofpostcss-inline-svgPreview URL: https://deploy-preview-94--watercss.netlify.com/
Note: I didn't
yarn buildyet so you can better see the changes. Why don't we just onlybuildprior to publishing a new release?fix #57
close #58
¹ I reduced the
floatPrecisionto0so all numbers used in the SVG are rounded to an integer. This saves another ~50% – which we really need, as we now ship both the dark and the light arrow in our non-standalone builds. The resulting SVG looks a bit funny when opened in an image viewer at large size, but perfectly fine in the browser, even at maximum zoom level.