As you can see in the example above, this slidebox is easy to configure with these two css properties, color and font-size.
Include in your html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@monabbous/slidebox@0.0.3/dist/css/slidebox.css"/>
Add the slidebox class
<input style="font-size: 24px" type="checkbox" class="slidebox">
First you must include Font Awesome in your project (Preferable Font Awesome 5).
Using Sass with NPM just install with
npm i @monabbous/slidebox
Then include in your sass style file
@import '~@monabbous/slidebox';
Simply in your checkbox element add the slidebox class.
<input type="checkbox" class="slidebox">
Just like the Example, you can modify the color and the size of the checkbox.
<input style="font-size: 24px" type="checkbox" class="slidebox">
Make sure when modifying the color to add class dark when using a dark color, and light when using a light color.
<!-- dark color -->
<input style="color:#040491" type="checkbox" class="slidebox dark">
<!-- light color -->
<input style="color:#a8a8ff" type="checkbox" class="slidebox light">
You can also invert the visible output of the slide box, where the value of the checkbox is the opposite of how it is shown.
<input type="checkbox" class="slidebox inverted">
$slideboxColorDefaultColor: blue;
$slideboxClassPrefix: 'nabbous-';
@import '~@monabbous/slidebox';