Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Fixes outline issue from our earlier fix to the button#6025

Merged
darkwing merged 10 commits into
firefox-devtools:masterfrom
BadInternetGuy:close-button-outline
Apr 20, 2018
Merged

Fixes outline issue from our earlier fix to the button#6025
darkwing merged 10 commits into
firefox-devtools:masterfrom
BadInternetGuy:close-button-outline

Conversation

@BadInternetGuy

@BadInternetGuy BadInternetGuy commented Apr 19, 2018

Copy link
Copy Markdown
Contributor

Fixes Issue: #4070

Finally managed to remove the outline from our button.
We simply added a new attribute to the CSS file, namely, adding
outline: none !important;

Before:
clickedbutton

After:
fixedpadding

@BadInternetGuy BadInternetGuy changed the title Finally fixed the outline issue around our button Fixes outline issue from our earlier fix to the button Apr 19, 2018
@darkwing

Copy link
Copy Markdown
Contributor

Hello @BadInternetGuy! This is one of the weirder issues I've seen in a while. What's causing the problem is :moz-focusring (https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring):

--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);

What's weird is why the focusring is stretching the entire height of its neighboring input; if you remove moz-focusring, the outline is only the height of the button, which is what we desire.

I'm going to play around with this and try to figure it out.

@darkwing

Copy link
Copy Markdown
Contributor

OK -- updated to use the :focus pseudo instead of !important

@darkwing

Copy link
Copy Markdown
Contributor

Nice work @BadInternetGuy and team!

@darkwing darkwing merged commit 82361cf into firefox-devtools:master Apr 20, 2018
jasonLaster pushed a commit that referenced this pull request Apr 21, 2018
* made a test change

* Fixed README

* fixed the close button

* fixed the close button

* changed the div to button in the test cases

* Finally fixed the dotted line issue for our button

* Fix linting issues

* Show better outline
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants