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.

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

Checkbox Label font-size And switch component #17

Open
MROALI opened this issue Aug 24, 2020 · 7 comments
Open

Checkbox Label font-size And switch component #17

MROALI opened this issue Aug 24, 2020 · 7 comments

Comments

@MROALI
Copy link

MROALI commented Aug 24, 2020

Hello,
I think there is some amelioration that we can do to the checkbox :

  • the custom-control-label must have a font-size: 1rem. It looks too small in 0.875rem.
  • The Label must be aligned to the bottom of the checkbox.
  • The space between the checkbox and the label must be reduced.

image

1 rem font-size for the label give this :
image

Another thing that can be ameliorated is the color of the switch when validating the form. I think turn it all to green, which make us loose the visual info if the switch is on or off. Same thing if switch is disabled the visual color info is not shown. Do you have any idea what can we do ?

FYI : In the https://material.io/components/selection-controls if we put the switch to disable it conserves it's color. Because the information of activation is visible only by color..

https://material-components.github.io/material-components-web-components/demos/switch/

@MROALI MROALI changed the title Checkbox Label font-size Checkbox Label font-size And switch component Aug 24, 2020
@djibe
Copy link
Owner

djibe commented Aug 27, 2020

Hi, I'll investigate this

@MROALI
Copy link
Author

MROALI commented Sep 9, 2020

Any news about the validation color issues for the switch component and disabled color also ?

@djibe
Copy link
Owner

djibe commented Sep 9, 2020

Hi,
considering https://material.io/components/selection-controls, Radio label is 14px.
And it is inline-flex with align-items: center

@MROALI
Copy link
Author

MROALI commented Sep 14, 2020

Any news about the switch validation color fix and also disabled switch..
https://material-components.github.io/material-components-web-components/demos/switch/

@djibe
Copy link
Owner

djibe commented Sep 14, 2020

Hi,
The disabled switch is here: https://djibe.github.io/material/docs/4.5/components/forms/#switches
And I didn't understand what was wrong with it.

@MROALI
Copy link
Author

MROALI commented Sep 14, 2020

Hi,
The disabled switch is here: https://djibe.github.io/material/docs/4.5/components/forms/#switches
And I didn't understand what was wrong with it.
Scenario :
Turn the switch on then disable it. ==> Switch must keep it's color and not transformed to gray
Scénario 2 :
If you validate a form which having a switch => even if the switch is off it's turning all its color to green. ==> The problem is we loose the info that the switch was off..

As I said before the information about the switch on or off is by its color so even when validating we must not put it all to green, we must keep the information (switch on / off)

@djibe
Copy link
Owner

djibe commented Sep 14, 2020

Thanks for feedback.
I'm on it.
But Bootstrap simple markup makes it harder to set opacity on switch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants