input-switch
v1.1.0
Published
Simple CSS for display checkbox and radio inputs as switch buttons.
Downloads
17
Maintainers
Readme
input-switch
Simple CSS for display checkbox and radio inputs as switch buttons.
Example
Install
$ npm install input-switch
$ yarn add input-switch
From unpkg:
<link rel="stylesheet" href="//unpkg.com/input-switch" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/input-switch" />
Notice
If you installed via package manager, don't forget to import CSS into your project.
Usage
<label class="has-switch">
<input type="checkbox" />
<span class="switch is-round"></span>
Example text
</label>
Modifiers
.has-switch
.has-half-space-after
- space after switch is half sized.has-switch
.has-no-space-after
- space after switch is omitted.switch
.is-square
- switch is square shaped.switch
.is-round
- switch is round shaped.switch
.is-outline
- switch is outlined, can be combined with.is-square
or.is-round
Customization
It's possible to customize some variables, for example colors:
@charset "utf-8";
$switch-primary-color: #5ac65a;
$switch-secondary-color: #ff7157;
@import "../node_modules/input-switch/src/input-switch.scss";
Default values for all customizable variables:
/* sizes */
$switch-height: 1em; // default height of switch
$switch-width: $switch-height * 1.75; // default width of switch
$switch-space-after-width: $switch-height * .5; // default space after switch
/* colors */
$switch-primary-color: #2196f3; // default primary color of switch
$switch-secondary-color: grey; // default secondary color of switch
$switch-pointer-color: white; // default pointer color of switch
$switch-transparent-color: transparent; // default transparent color of switch
/* transitions */
$switch-transition-duration: .5s; // default transition duration of switch
$switch-transition-timing-function: ease; // default transition timing function of switch