# CssCheckBox for Vaadin 7 and Vaadin 8 CssCheckBox is CSS based CheckBox component (Can you believe that?). At this point I would like to thank for the inspiration: + Eijsink Afrekensystemen BV for the [FormCheckBox](https://vaadin.com/directory#!addon/formcheckbox) addon. This addon showed me how easy is to change the DOM of a component. This addon was used as the base of my project. + Proto.io for the great CSS Switch. I used their generator to create the two basic CSS. So if you want to change, you should check this site how to do it: [https://proto.io/freebies/onoff/](https://proto.io/freebies/onoff/) # Developer Guide ## Getting started For using the component just simply create a new instance: new CssCheckBox(); The default size of the component is 60px * 24px and it is animated. ## Properties The component has three additional properties: - Big preset - Simple mode - Animated ### Big preset This preset changes the dimension of the component to 100px * 40px. To apply this preset just call the ```setBigPreset(boolean bigPreset)``` method. ### Simple preset The simple component is like a normal checkbox. There is no animation, and moving switch part. To use call the ```setSimpleMode(boolean simpleMode)``` method. ### Animated This turns on-off the animation of component. Default this property is true. To turn off call the ``setAnimated(boolean animated)`` method. ## Recoloring the component If we want to recolor the component, the two css selectors can be used: - ``.v-csscheckbox-inner:before`` - Select the OFF state of the component - ``.v-csscheckbox-inner:after`` - Select the ON state of the component For changing the color simply change background-color and color properties. For example: ```css .demo .recolored .v-csscheckbox-inner:after { background-color: palevioletred; color: palegreen; } .demo .recolored .v-csscheckbox-inner:before { background-color: palegreen; color: palevioletred; } ``` Note: The recolored class is optional. If you don't target an exact class, it will recolor all of the controllers. For a more comprehensive example, src/main/java/org/vaadin/addons/demo/DemoUI.java