Remove Border Around Basemap Gallery Items

BenRomlein — Thu, 21 Mar 2019 16:03:34 GMT

I'm working on customizing the Basemap Gallery widget by editing a Sass theme created by this tool: https://github.com/jcfranco/jsapi-styles. I want to denote the selected item with a border around its thumbnail and a different color border around the thumbnail on hover.

I've achieved this, but I can't get rid of the light blue border/outline that appears around .basemap-gallery__item on focus. Where is this property coming from? I've searched for every border or outline property in the _BasemapGallery mixin and can't track it down. I've also looked through the _Widget, _View, _UI mixins and can't seem to find the place where this border is assigned.

Here's a Fiddle with the compiled CSS theme that shows the expected green outlines on hover and select as well as the unwanted blue outline on focus.

I wasn't sure if there was a good way to post the .scss, but let me know how and I can post any of those files too.

EDIT: Using dev tools/Force element state, it looks like the outline is coming from the user agent stylesheet for li:focus. setting an override in my local stylesheet removes this behavior.

topic Remove Border Around Basemap Gallery Items in ArcGIS JavaScript Maps SDK Questions

Remove Border Around Basemap Gallery Items