Skip to content
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.

Sign up for GitHub

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
Merged

Issue #24173 Custom checkboxes radios correct color #24401

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e9c6656
correcting color
Oct 16, 2017
77ea66d
matching-branch
Oct 16, 2017
4f814fa
sync-commits erge branch 'v4-dev' into custom-checkboxes-radios-corre…
Oct 20, 2017
809ce6d
Sass correction
Oct 20, 2017
7eb8c54
use vars, fix indentation
mdo Oct 22, 2017
1083e49
really fix indentation, reorder
mdo Oct 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
&.is-#{$state} {
~ .custom-control-indicator {
background-color: rgba($color, .25);
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dc3545;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this ruleset is in a Sass mixin, and we're passing parameters for the color, you'll want to tweak this line just a bit. Rather than hardcode the hex colors, use this:

box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $color;

This way, if you customize the $body-bg variable, it'll get picked up automatically here. And when we use this mixin to generate the valid and invalid styles, that color will be correct, too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After you make that change, we can move this to the focus state.

.was-validated &:#{$state},
&.is-#{$state} {
  ~ .custom-control-indicator {
    background-color: rgba($color, .25);
  }
  &:focus {
    ~ .custom-control-indicator {
      box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $color;
    }
  }
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @mdo I will make these changes send another commit. This is so helpful!

}
~ .custom-control-description {
color: $color;
Expand Down