New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #24173 Custom checkboxes radios correct color #24401

Merged
merged 6 commits into from Oct 22, 2017

Conversation

Projects
4 participants
@sabrown84

sabrown84 commented Oct 16, 2017

Hi I took a look at this issue and I made the suggested changes to:

Custom Checkboxes/Radios Do Not Display Correct Color on :focus For Validation

Is this what you meant? Is there something else that needs to be done for this issue?

I welcome and look forward to your feedback.

Fixes #24173

Sharrell Porter added some commits Oct 16, 2017

Sharrell Porter Sharrell Porter
matching-branch
Merge branch 'custom-checkboxes-radios-correct-color' of github.com:sabrown84/bootstrap into custom-checkboxes-radios-correct-color

@Johann-S Johann-S added css v4 labels Oct 17, 2017

@mdo

Hey there @sabrown84, this is super close! There are two fixes we need you to make though before we can merge. The referenced issue is for the outline on focus of those fields, so we need to move this new rule to a different selector. Second is moving from hex values to some Sass variables.

I took a stab at outlining those changes in a couple comments—let me know if you have any questions about it!

Show outdated Hide outdated scss/mixins/_forms.scss

@mdo mdo added this to Inbox in v4 Beta 3 Oct 19, 2017

@mdo mdo moved this from Inbox to Needs review in v4 Beta 3 Oct 19, 2017

Sharrell Porter and others added some commits Oct 20, 2017

@mdo mdo merged commit 1083e49 into twbs:v4-dev Oct 22, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
hound No violations found. Woof!
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 22, 2017

Member

Pulled this down, made a few more commits to address some opacities, and also fixed the file input focus state.

Member

mdo commented Oct 22, 2017

Pulled this down, made a few more commits to address some opacities, and also fixed the file input focus state.

@mdo mdo referenced this pull request Oct 22, 2017

Closed

Beta 3 ship list #24439

@mdo mdo moved this from Needs review to Shipped in v4 Beta 3 Oct 22, 2017

@sabrown84

This comment has been minimized.

Show comment
Hide comment
@sabrown84

sabrown84 Oct 23, 2017

Thank you @mdo. I learned a few things from this one.

sabrown84 commented Oct 23, 2017

Thank you @mdo. I learned a few things from this one.

@tmorehouse

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Oct 25, 2017

Contributor

Note for custom-file inputs, the focus styling will not work in Firefox, due to how Firefox treats what is "focused" in the native file input. Firefox focuses the button inside the file input and not the file input as a whole, so the sibling selector will not work in the Firefox case.

See https://stackoverflow.com/a/20104275 and http://jsfiddle.net/Yh8re/2/ (use Firefox to test) and http://jsfiddle.net/Yh8re/23/

Firefox treats the file button and the filename label as two nested elements. Clicking the filename will cause a focus sibling selector to work, but clicking the browse button will not.
This is especially noticeable for firefox keyboard users.

Contributor

tmorehouse commented Oct 25, 2017

Note for custom-file inputs, the focus styling will not work in Firefox, due to how Firefox treats what is "focused" in the native file input. Firefox focuses the button inside the file input and not the file input as a whole, so the sibling selector will not work in the Firefox case.

See https://stackoverflow.com/a/20104275 and http://jsfiddle.net/Yh8re/2/ (use Firefox to test) and http://jsfiddle.net/Yh8re/23/

Firefox treats the file button and the filename label as two nested elements. Clicking the filename will cause a focus sibling selector to work, but clicking the browse button will not.
This is especially noticeable for firefox keyboard users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment