Spectre: Need bigger switch/checkbox/radio buttons

[bybrunobarros]

Hi,

Currently you can change input sizes with .input-sm/.input-lg, but there is no equivalent for switch/checkbox/radio buttons.
These elements should be able to be resized.

Nice job by the way and thanks for the framework.

[tomlutzenberger]

Seems legit.
But in case of checkboxes and radio buttons this would mean (correct me if I'm wrong), that they have to be overwritten to

1. even be resizable
2. match the look of the other form-controls

[bybrunobarros]

I'd say

.form-checkbox .form-icon.input-lg {
  height: 2.4rem;
  width: 2.4rem;
}
.form-checkbox input:checked + .form-icon.input-lg::after {
  height: 1.4rem;
  left: 46%;
  top: 38%;
  width: .8rem;
}

should be enough for the checkbox.

I don't understand the second point, they already have the same look and feel.

[tomlutzenberger]

Could you post a test case e.g. CodePen?
Yeah, you're right. I withdraw my statement on the second point.

[bybrunobarros]

Actually I moved the logic to .checkform to fix the label positioning issue http://codepen.io/bybb/pen/aZZqrB

[tomlutzenberger]

I forked your code and added a small version + radio buttons.
Positioning is not good, yet. But I will fix it and also append small and large switches.
Maybe we should also tweak the font-size.

http://codepen.io/tomlutzenberger/pen/zBBWdw?editors=1100

[Randore]

https://jsfiddle.net/Randore/6sw05zdL/
This roughly done but I think you should change the border-radius to 50% that will give perfect circle instead of using em (correct me, if I'm wrong)

[leroydev]

@picturepan2 Was this issue closed because of inactivity or because there's now a way to make checkboxes / switches bigger within Spectre.css?
I unfortunately can't seem to find a way to make them bigger using .input-lg or .label-lg.

[picturepan2]

@leroydev I closed it because I am not adding larger version of checkbox and switch.