Make checkbox switch component background stand out in modals #2443
Conversation
- Disabled checkbox switch now has body (white by default) background within modals - Still turns green when on - Still has control background outside of modals Fixes #2119
less/common/Checkbox.less
Outdated
| .Modal-content & { | ||
| background: @body-bg; | ||
| } | ||
|
|
There was a problem hiding this comment.
For consistency, this should be added to the Modal.less file.It should also be applied to .Modal-body since that's the only part with the @control-bg background.
There was a problem hiding this comment.
Thanks @SychO9, agree on both points. Have made the modifications - please have a look. Note that due to the way LESS appends and prepends parent selectors the added styles in Modal.less have to be a bit more verbose than essentially a one-liner in Checkbox.less.
There was a problem hiding this comment.
Thank you, I think we might be able to use a one liner it we used the off class, can you please test if that's the case ?
less/common/Modal.less
Outdated
| @@ -105,6 +105,14 @@ | |||
| text-align: left; | |||
| } | |||
| } | |||
|
|
|||
| .Checkbox--switch .Checkbox-display { | |||
There was a problem hiding this comment.
I think if we use .off.Checkbox--switch .Checkbox-display here instead we could probably avoid having to declaring the block under it 😃
There was a problem hiding this comment.
Yep, just gave it a go - it works, thanks for the suggestion!
|
I'm not a huge fan of the white on the switch since the actual switching part is white as well. What about |
|
@KyrneDev, here's what it looks like with
|
|
Oh I like that better! Good idea |
|
Updated the PR with the new background - commit message looks weird because background variable names were in backticks and git ate them :). |
|
Since the checkbox switch doesn't currently have a disabled state CSS style, that looks better indeed.
keeps happening to me lol |
|
The last thing I'd like to see before approving: how does this look in dark mode? |
|
@askvortsov1, the dark mode looks like this (see screenshot below). Great with the
|
|
Thank you! |
Fixes #2119
Changes proposed in this pull request:
As discussed in the linked issue, make checkbox switch background white in modals as otherwise the component is barely discernible. Once I looked at the actual styles used, I decided that a better option would be to use the
body-bgvariable instead of hardcoding white.Reviewers should focus on:
UI changes.
Screenshot
Confirmed