Sizes

[flatlogic]

Sizes

[swrocket]

In case someone wants to try this, I added the following CSS into the CSS file

.checkbox.checkbox-lg label::before{
    width: 30px;
    height: 30px;
}

.checkbox.checkbox-lg label::after{
    width: 30px;
    height: 30px;
    padding-left: 4px;
    font-size: 20px;
}

and then, when I define the element in HTML i add checkbox-lg

[gandaldf]

+1 - I'd need it too!

[okendoken]

Guys, thanks for your proposal. We can handle this when there will be free time, but you are very welcome with a Pull Request ;)

[gandaldf]

Here is my solution:

.checkbox.checkbox-sm label::before {
  width: 30px;
  height: 30px;
  top: -13px;
}
.checkbox.checkbox-sm label::after {
  width: 30px;
  height: 30px;
  padding-left: 4px;
  font-size: 20px;
  left: 1px;
  top: -13px;
}
.checkbox.checkbox-sm label {
  padding-left: 18px;
  top: 13px;
}
.checkbox.checkbox-md label::before {
  width: 34px;
  height: 34px;
  top: -17px;
}
.checkbox.checkbox-md label::after {
  width: 34px;
  height: 34px;
  padding-left: 4px;
  font-size: 24px;
  left: 1px;
  top: -18px;
}
.checkbox.checkbox-md label {
  padding-left: 22px;
  top: 17px;
}
.checkbox.checkbox-lg label::before {
  width: 46px;
  height: 46px;
  top: -28px;
}
.checkbox.checkbox-lg label::after {
  width: 46px;
  height: 46px;
  padding-left: 4px;
  font-size: 36px;
  left: 1px;
  top: -31px;
}
.checkbox.checkbox-lg label {
  padding-left: 34px;
  top: 32px;
}

.radio.radio-sm label::before {
  width: 30px;
  height: 30px;
  top: -13px;
}
.radio.radio-sm label::after {
  width: 22px;
  height: 22px;
  padding-left: 4px;
  font-size: 20px;
  left: 4px;
  top: -9px;
}
.radio.radio-sm label {
  padding-left: 18px;
  top: 13px;
}
.radio.radio-md label::before {
  width: 34px;
  height: 34px;
  top: -17px;
}
.radio.radio-md label::after {
  width: 26px;
  height: 26px;
  padding-left: 4px;
  font-size: 24px;
  left: 4px;
  top: -13px;
}
.radio.radio-md label {
  padding-left: 22px;
  top: 17px;
}
.radio.radio-lg label::before {
  width: 46px;
  height: 46px;
  top: -28px;
}
.radio.radio-lg label::after {
  width: 36px;
  height: 36px;
  padding-left: 4px;
  font-size: 36px;
  left: 5px;
  top: -23px;
}
.radio.radio-lg label {
  padding-left: 34px;
  top: 32px;
}

and here is the plunker: http://plnkr.co/edit/B4BatpwxCa2cBoYo0oEQ?p=preview (show it in fullscreen)
Hope it could help and be in the next release.

[0xadri]

+1 for this issue.

I don't see the point of using Font Awesome in the first place if this plugin can't scale in icon sizes.

@gandaldf is there a pattern in which the code changes when increasing the font size?

If yes, it'd be great to have the SASS mixin doing the magic. It'd make your solution even more generic.

[0xadri]

@gandaldf Did you also have this problem with the ".checkbox-single & .radio-single clickable area" #76 ?

This became really "unacceptable" once the size of the icon got bigger :(

Switching to prettyCheckable. Not CSS only unfortunately, but more mature.

[gandaldf]

Yeah the problem of checkbox/radiobox without label is real, but I haven't time to fix it now... :(
I can't understand what you mean with "a pattern"; I only made a demo with 3 sizes... you can customize the css and have any other dimension.

[0xadri]

I meant some calculation to make it more generic. For instance, allowing to set a given width just changing one variable: ideally you want to build a mixin.

[hellboy81]

Can I use this solution at the moment?

[hellboy81]

xs classes missing

[gandaldf]

@hellboy81 I don't have the time at the moment to add a new format, if you can, try to develop it by your own and feel free to share your solution.

@adrien-be I don't think it's possibile to have a "pixel perfect" solution using percentual or proportional values... from my tests it always ended with something not perfectly centered.