checkbox and switch css fixes for high contrast mode
Fixes https://github.com/telekom/scale/issues/2300
Deploy Preview for marvelous-moxie-a6e2fe ready!
| Name | Link |
|---|---|
| Latest commit | 4b8b0ffd8c77022162bd50abdddc197435ac6d56 |
| Latest deploy log | https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/66cefe46c6dbbf0009dc2241 |
| Deploy Preview | https://deploy-preview-2317--marvelous-moxie-a6e2fe.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
@maomaoZH @acstll @felix-ico hi, guys! I'm new here, gonna try to make some fixes. I was suggested to mention you for review and to give detailed description.
This is a fix of https://github.com/telekom/scale/issues/2300. The reason why check-icon was disappearing were scale-switch styles. In switch component shadow is put to false, I guess there was some reason?
Anyway I don't touch it, but just add extra selector in css (see changes).
Also within whis PR I've fixed disappearing borders for checkbox in high contrast mode, 'cause box-shadow borders are not visible in HC. So I just put extra blocks of css for HC mode with normal borders. Design for disabled end error checkboxes should be discussed and implemented extra, but functionally they are ok now.
Also I've added checkbox template to html folder, I hope it's ok.
I'm wainitg for your feedback! Have a nice weekend)
Before:
After:
@tshimber Thanks for the PR. LGTM. Yeah, the switch along with other input type is set shadow dom off by purpose so that the developers can access the elements easily.
thank you!
@maomaoZH @acstll @felix-ico hi, guys! could you please tell, what are next steps by PRs? seems that it should be approved by all reviewers, correct? should i do smth from my side? my team is asking me to clarify:)