netizenorg / netnet.studio

netnet.studio is a hypermedia higherEd cyberspace for fully realizing the Web’s creative potential.
https://netnet.studio
GNU General Public License v3.0
30 stars 8 forks source link

issue 201: searchbar styles #227

Closed sarahrooney closed 1 year ago

sarahrooney commented 1 year ago

netnet's face was off in searchbar in firefox on mac.

im fixing this by using our face svgs -- had to get a little bit hacky with it as to not bloat the js-markup (didn't want to put them inline) and also be able to change fill color as needed. to do this, i'm using the svgs as a mask in css and then setting the background-color of the face element to var(--netizen-meta).

additionally, i changed netnet's face into a <label> to better inform the neighboring <input> element. the descriptive text inside the label takes a class .screen-reader-only to make it invisible unless using a screen reader.

nbriz commented 1 year ago

perfect, thnx @sarahrooney tested on linux + mac. will merge now && next time chloe pulls from dev we'll take a loot at it on windows