Fix stray pixels on focused inputs such as checkboxes and radios

[alexgleason]

Closes #39

You can see there are stray pixels between "Yes" and "No".

This also happens for the checkbox:

This PR fixes the issue by setting outline: 0 on all inputs. By default, most browsers will add an outline to input:focused elements. By setting outline: 0, we are overriding that behavior to remove the outline.

External links:

• CSS outline on MDN.

[BcRikko]

Thanks 🙇

outline is used in input fields. so I don't want to change to input { outline: 0 } 😢

Are you pointing out that the color of .radio and .checkbox are gray color? 🤔
If so, It's intentionally changing. ↓
https://github.com/BcRikko/NES.css/blob/master/scss/elements/checkboxes.scss#L3-L47
https://github.com/BcRikko/NES.css/blob/master/scss/elements/radios.scss#L3-L21

[BcRikko]

I'm sorry, I misunderstood 🙇🙇🙇
You pointed out below.

[trezy]

Hey @alexgleason, make sure to merge the latest version of the develop branch so that our CI will run the required checks for this PR. 😉

[abdallahalsamman]

I can't reproduce the stray pixels(Browser: Firefox 62, Branch: develop)

[abdallahalsamman]

Reproducible with FF 63

EDIT: Reproducible on FF63 for Ubuntu and not OSX 🤧

[abdallahalsamman]

LGTM

Tested on ubuntu FF 63

[BcRikko]

This change is not good 🙈
because when focusing on input field, the outline disappears. 😢

this PR	expect

[abdallahalsamman]

@BcRikko I'll push a PR to limit the outline: 0 to radios and checkboxes only 🙌

[BcRikko]

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀