diff --git a/.gitignore b/.gitignore
index 91dfed8..37e0121 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
.DS_Store
-node_modules
\ No newline at end of file
+node_modules
+*.log
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..7a6df1d
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,82 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+## [3.7.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.7.0) 2019-??-??
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.6.0...v3.7.0)
+
+## [3.6.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.6.0) 2019-10-17
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.5.0...v3.6.0)
+### Added
+- Added option to change toggle without triggering onChange event (silent toggle) [\#7](https://github.com/gitbrent/bootstrap4-toggle/issue/7) ([aswin1980](https://github.com/aswin1980))
+- Added accessibility properties to labels [\#11](https://github.com/gitbrent/bootstrap4-toggle/issue/11) ([aproquot](https://github.com/aproquot))
+### Changed
+- Fixed URLs in js and css file top comment [\#5](https://github.com/gitbrent/bootstrap4-toggle/issue/5) ([wilecoyte78](https://github.com/wilecoyte78))
+- Disable style is not working [\#18](https://github.com/gitbrent/bootstrap4-toggle/issue/18) ([rychlym](https://github.com/rychlym))
+
+## [3.5.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.5.0) 2019-07-02
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.4.0...v3.5.0)
+### Added
+- Added ARIA `role="button"` tag to toggle
+- Added `cursor: pointer;` style to toggle
+### Changed
+- Fixed: Touch not working on mobile [\#2](https://github.com/gitbrent/bootstrap4-toggle/issue/2) ([wilecoyte78](https://github.com/wilecoyte78))
+- Updated to Bootstrap version 4.3.1
+- Updated README with better Yarn instructions
+
+## [3.4.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.4.0) 2019-01-03
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.3.0...v3.4.0)
+### Added
+- Outline button styles are now available
+### Changed
+- Updated to Bootstrap version 4.2.1
+
+## [3.3.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.3.0) 2018-12-19
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.2.0...v3.3.0)
+### Added
+- New test created to compare core bootstrap sizes to bootstrap4-toggle
+### Changed
+- Introduced new `size` values that mirror bootstrap 4: (`lg`, `sm`, `xs`)
+- Converted all css units from `px` to `rem`
+- Properly added border on `light` button (moved from .toggle class)
+### Removed
+**DEPRECATED** Classic `size` values (`large`, `small`, `mini`)
+
+
+## [3.2.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.2.0) 2018-11-27
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0)
+### Added
+### Changed
+- Removed permanent `active` state from "Off" label so mouse-over highlighting works the same as "On"
+### Removed
+
+
+
+## [3.1.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.1.0) 2018-10-25
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0)
+### Added
+- `index.html` includes new section with dark mode colors
+### Changed
+- `index.html` now fully responsive, better menu, rearranged sections
+- Tweaked `border` property to work with all backgrounds and colors
+### Removed
+
+
+
+## [3.0.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.0.0) 2018-10-21
+### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0)
+### Added
+- Touch support
+### Changed
+- Implements Bootstrap 4 colors/styles
+### Removed
+- Old Bootstrap 2 files
+
+[Unreleased]: https://github.com/gitbrent/bootstrap4-toggle/compare/v1.9.0...HEAD
+[3.2.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0
+[3.1.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0
+[3.0.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0
diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..eb2b444
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+https://gitbrent.github.io/bootstrap4-toggle/
diff --git a/Gruntfile.js b/Gruntfile.js
index 9ac6fc5..c5212ac 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,4 +1,4 @@
-module.exports = function(grunt) {
+module.exports = function(grunt){
'use strict';
grunt.initConfig({
@@ -33,5 +33,4 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['clean', 'uglify', 'cssmin']);
-
-};
\ No newline at end of file
+};
diff --git a/LICENSE b/LICENSE
index 88bb5ab..9da406a 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,7 @@
The MIT License (MIT)
Copyright (c) 2011-2014 Min Hur, The New York Times Company
+Copyright (c) 2018 Brent Ely
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
\ No newline at end of file
+THE SOFTWARE.
diff --git a/README.md b/README.md
index 301ff03..6b70f0f 100644
--- a/README.md
+++ b/README.md
@@ -1,83 +1,95 @@
-# Bootstrap Toggle
-Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
+[](https://opensource.org/licenses/mit-license.php) [](https://getbootstrap.com/docs/4.1) [](https://snyk.io/test/npm/bootstrap4-toggle) [](https://www.npmjs.com/package/bootstrap4-toggle) [](https://www.jsdelivr.com/package/gh/gitbrent/bootstrap4-toggle)
-Visit http://www.bootstraptoggle.com for demos.
+# Bootstrap 4 Toggle
-## Getting Started
+**Bootstrap 4 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
-### Installation
-You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library.
+**************************************************************************************************
-`Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead.
+#### Library Distributions
+Project |Description
+-------------------------------------------------------------------------------------------|-------------------------------------------------------
+[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery)
+[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies)
+[bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)
-```html
-
-
-```
+# Demos
+**Demos and API Docs:** https://gitbrent.github.io/bootstrap4-toggle/
-### Bower Install
-```bash
-bower install bootstrap-toggle
-```
+
+
+
+
+**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-## Usage
+- [Installation](#installation)
+ - [CDN](#cdn)
+ - [Download](#download)
+ - [NPM](#npm)
+ - [Yarn](#yarn)
+- [Usage](#usage)
+ - [Initialize With HTML](#initialize-with-html)
+ - [Initialize With Code](#initialize-with-code)
+- [API](#api)
+ - [Options](#options)
+ - [Methods](#methods)
+- [Events](#events)
+ - [Event Propagation](#event-propagation)
+ - [Stopping Event Propagation](#stopping-event-propagation)
+ - [API vs Input](#api-vs-input)
-### Basic example
-Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
+
+**************************************************************************************************
+
+# Installation
+
+## CDN
```html
-
+
+
```
-### Stacked checkboxes
-Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
+## Download
+[Latest GitHub Release](https://github.com/gitbrent/bootstrap4-toggle/releases/latest)
-```html
-
-
-
-
-
-
+## NPM
+```ksh
+npm install bootstrap4-toggle
```
-### Inline Checkboxes
-Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles.
+## Yarn
+```ksh
+yarn add bootstrap4-toggle
+```
+
+# Usage
+
+## Initialize With HTML
+Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle.
```html
-
-
-
+
```
-## API
-
-### Initialize by JavaScript
-Initialize toggles with id `toggle-one` with a single line of JavaScript.
+## Initialize With Code
+Toggles can also be initialized via JavaScript code.
+EX: Initialize id `chkToggle` with a single line of JavaScript.
```html
-
+
```
-### Options
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`.
+# API
+
+## Options
+* Options can be passed via data attributes or JavaScript
+* For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
```html
@@ -92,37 +104,37 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
```
-Name|Type|Default|Description|
----|---|---|---
-on|string/html|"On"|Text of the on toggle
-off|string/html|"Off"|Text of the off toggle
-size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`.
-onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
-width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated.
-height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated.
-
-### Methods
+Name |Type |Default |Description |
+----------|-----------|----------|----------------------------|
+`on` |string/html|"On" |Text of the on toggle
+`off` |string/html|"Off" |Text of the off toggle
+`size` |string |"normal" |Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`.
+`onstyle` |string |"primary" |Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
+`offstyle`|string |"light" |Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
+`style` |string | |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
+`width` |integer |*null* |Sets the width of the toggle. if set to *null*, width will be auto-calculated.
+`height` |integer |*null* |Sets the height of the toggle. if set to *null*, height will be auto-calculated.
+
+## Methods
Methods can be used to control toggles directly.
```html
```
-Method|Example|Description
----|---|---
-initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options
-destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle
-on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state
-off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state
-toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle
-enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle
-disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle
+Method |Example |Description
+-----------|------------------------------------------------|------------------------------------------
+initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options
+destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle
+on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state
+off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state
+toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off
+enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle
+disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle
-## Events
+# Events
-### Event Propagation
+## Event Propagation
Note All events are propagated to and from input element to the toggle.
You should listen to events from the `` directly rather than look for custom events.
@@ -139,37 +151,53 @@ You should listen to events from the `` directly rather t
```
-### API vs Input
+## Stopping Event Propagation
+Passing `true` to the on/off methods will enable the silent option to prevent the control from propagating the change event in
+cases where you want to update the controls on/off state, but do not want to fire the onChange event.
+
+```html
+
+
+
+
+
+
+```
+
+## API vs Input
This also means that using the API or Input to trigger events will work both ways.
```html
-
-
-
-
+
+
+
+
```
-
-### Integration
-
-#### [KnockoutJS](http://knockoutjs.com)
-
-A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle)
-
-## Demos
-
-Visit http://www.bootstraptoggle.com for demos.
diff --git a/bower.json b/bower.json
index 9d941df..1724e7c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,26 +1,31 @@
{
- "name": "bootstrap-toggle",
- "description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles",
- "version": "2.2.1",
+ "name": "bootstrap4-toggle",
+ "description": "Bootstrap 4 Toggle is a Bootstrap plugin/widget that converts checkboxes into toggles",
+ "version": "3.4.0",
"keywords": [
"bootstrap",
- "toggle",
- "bootstrap-toggle",
- "switch",
- "bootstrap-switch"
+ "bootstrap4",
+ "bootstrap 4",
+ "bootstrap 4 switch",
+ "bootstrap 4 toggle",
+ "bootstrap-switch",
+ "bootstrap-toggle",
+ "bootstrap4-toggle",
+ "toggle"
],
- "homepage": "http://www.bootstraptoggle.com",
+ "homepage": "https://gitbrent.github.io/bootstrap4-toggle/",
"repository": {
"type": "git",
- "url": "https://github.com/minhur/bootstrap-toggle.git"
+ "url": "https://github.com/gitbrent/bootstrap4-toggle.git"
},
"license": "MIT",
- "authors": [
- "Min Hur "
- ],
+ "author": {
+ "name": "Brent Ely",
+ "url": "https://github.com/gitbrent/"
+ },
"main": [
- "./js/bootstrap-toggle.min.js",
- "./css/bootstrap-toggle.min.css"
+ "./js/bootstrap4-toggle.js",
+ "./css/bootstrap4-toggle.css"
],
"ignore": [
"**/.*",
diff --git a/css/bootstrap-toggle.css b/css/bootstrap-toggle.css
deleted file mode 100644
index 057d08b..0000000
--- a/css/bootstrap-toggle.css
+++ /dev/null
@@ -1,83 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-
-
-.checkbox label .toggle,
-.checkbox-inline .toggle {
- margin-left: -20px;
- margin-right: 5px;
-}
-
-.toggle {
- position: relative;
- overflow: hidden;
-}
-.toggle input[type="checkbox"] {
- display: none;
-}
-.toggle-group {
- position: absolute;
- width: 200%;
- top: 0;
- bottom: 0;
- left: 0;
- transition: left 0.35s;
- -webkit-transition: left 0.35s;
- -moz-user-select: none;
- -webkit-user-select: none;
-}
-.toggle.off .toggle-group {
- left: -100%;
-}
-.toggle-on {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 50%;
- margin: 0;
- border: 0;
- border-radius: 0;
-}
-.toggle-off {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- right: 0;
- margin: 0;
- border: 0;
- border-radius: 0;
-}
-.toggle-handle {
- position: relative;
- margin: 0 auto;
- padding-top: 0px;
- padding-bottom: 0px;
- height: 100%;
- width: 0px;
- border-width: 0 1px;
-}
-
-.toggle.btn { min-width: 59px; min-height: 34px; }
-.toggle-on.btn { padding-right: 24px; }
-.toggle-off.btn { padding-left: 24px; }
-
-.toggle.btn-lg { min-width: 79px; min-height: 45px; }
-.toggle-on.btn-lg { padding-right: 31px; }
-.toggle-off.btn-lg { padding-left: 31px; }
-.toggle-handle.btn-lg { width: 40px; }
-
-.toggle.btn-sm { min-width: 50px; min-height: 30px;}
-.toggle-on.btn-sm { padding-right: 20px; }
-.toggle-off.btn-sm { padding-left: 20px; }
-
-.toggle.btn-xs { min-width: 35px; min-height: 22px;}
-.toggle-on.btn-xs { padding-right: 12px; }
-.toggle-off.btn-xs { padding-left: 12px; }
-
diff --git a/css/bootstrap-toggle.min.css b/css/bootstrap-toggle.min.css
deleted file mode 100644
index 0d42ed0..0000000
--- a/css/bootstrap-toggle.min.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
-.toggle{position:relative;overflow:hidden}
-.toggle input[type=checkbox]{display:none}
-.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
-.toggle.off .toggle-group{left:-100%}
-.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
-.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
-.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
-.toggle.btn{min-width:59px;min-height:34px}
-.toggle-on.btn{padding-right:24px}
-.toggle-off.btn{padding-left:24px}
-.toggle.btn-lg{min-width:79px;min-height:45px}
-.toggle-on.btn-lg{padding-right:31px}
-.toggle-off.btn-lg{padding-left:31px}
-.toggle-handle.btn-lg{width:40px}
-.toggle.btn-sm{min-width:50px;min-height:30px}
-.toggle-on.btn-sm{padding-right:20px}
-.toggle-off.btn-sm{padding-left:20px}
-.toggle.btn-xs{min-width:35px;min-height:22px}
-.toggle-on.btn-xs{padding-right:12px}
-.toggle-off.btn-xs{padding-left:12px}
\ No newline at end of file
diff --git a/css/bootstrap2-toggle.css b/css/bootstrap2-toggle.css
deleted file mode 100644
index 3f48927..0000000
--- a/css/bootstrap2-toggle.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-
-
-label.checkbox .toggle,
-label.checkbox.inline .toggle {
- margin-left: -20px;
- margin-right: 5px;
-}
-.toggle {
- min-width: 40px;
- height: 20px;
- position: relative;
- overflow: hidden;
-}
-.toggle input[type="checkbox"] {
- display: none;
-}
-.toggle-group {
- position: absolute;
- width: 200%;
- top: 0;
- bottom: 0;
- left: 0;
- transition: left 0.35s;
- -webkit-transition: left 0.35s;
- -moz-user-select: none;
- -webkit-user-select: none;
-}
-.toggle.off .toggle-group {
- left: -100%;
-}
-.toggle-on {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 50%;
- margin: 0;
- border: 0;
- border-radius: 0;
-}
-.toggle-off {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- right: 0;
- margin: 0;
- border: 0;
- border-radius: 0;
-}
-.toggle-handle {
- position: relative;
- margin: 0 auto;
- padding-top: 0px;
- padding-bottom: 0px;
- height: 100%;
- width: 0px;
- border-width: 0 1px;
-}
-.toggle-handle.btn-mini {
- top: -1px;
-}
-.toggle.btn { min-width: 30px; }
-.toggle-on.btn { padding-right: 24px; }
-.toggle-off.btn { padding-left: 24px; }
-
-.toggle.btn-large { min-width: 40px; }
-.toggle-on.btn-large { padding-right: 35px; }
-.toggle-off.btn-large { padding-left: 35px; }
-
-.toggle.btn-small { min-width: 25px; }
-.toggle-on.btn-small { padding-right: 20px; }
-.toggle-off.btn-small { padding-left: 20px; }
-
-.toggle.btn-mini { min-width: 20px; }
-.toggle-on.btn-mini { padding-right: 12px; }
-.toggle-off.btn-mini { padding-left: 12px; }
-
diff --git a/css/bootstrap2-toggle.min.css b/css/bootstrap2-toggle.min.css
deleted file mode 100644
index 1509c57..0000000
--- a/css/bootstrap2-toggle.min.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px}
-.toggle{min-width:40px;height:20px;position:relative;overflow:hidden}
-.toggle input[type=checkbox]{display:none}
-.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
-.toggle.off .toggle-group{left:-100%}
-.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
-.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
-.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
-.toggle-handle.btn-mini{top:-1px}
-.toggle.btn{min-width:30px}
-.toggle-on.btn{padding-right:24px}
-.toggle-off.btn{padding-left:24px}
-.toggle.btn-large{min-width:40px}
-.toggle-on.btn-large{padding-right:35px}
-.toggle-off.btn-large{padding-left:35px}
-.toggle.btn-small{min-width:25px}
-.toggle-on.btn-small{padding-right:20px}
-.toggle-off.btn-small{padding-left:20px}
-.toggle.btn-mini{min-width:20px}
-.toggle-on.btn-mini{padding-right:12px}
-.toggle-off.btn-mini{padding-left:12px}
\ No newline at end of file
diff --git a/css/bootstrap4-toggle.css b/css/bootstrap4-toggle.css
new file mode 100755
index 0000000..c4259f7
--- /dev/null
+++ b/css/bootstrap4-toggle.css
@@ -0,0 +1,142 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.css v3.7.0
+|*| https://gitbrent.github.io/bootstrap4-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+
+/*
+* @added 3.0.0: Return support for "*-xs" removed in Bootstrap-4
+* @see: [Comment](https://github.com/twbs/bootstrap/issues/21881#issuecomment-341972830)
+*/
+.btn-group-xs > .btn, .btn-xs {
+ padding: .35rem .4rem .25rem .4rem;
+ font-size: .875rem;
+ line-height: .5;
+ border-radius: .2rem;
+}
+
+.checkbox label .toggle, .checkbox-inline .toggle {
+ margin-left: -1.25rem;
+ margin-right: .35rem;
+}
+
+.toggle {
+ position: relative;
+ overflow: hidden;
+}
+.toggle.btn.btn-light, .toggle.btn.btn-outline-light {
+ /* bootstrap-4 - add a border so toggle is delineated */
+ border-color: rgba(0, 0, 0, .15);
+}
+.toggle input[type="checkbox"] {
+ display: none;
+}
+.toggle-group {
+ position: absolute;
+ width: 200%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ transition: left 0.35s;
+ -webkit-transition: left 0.35s;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+}
+.toggle-group label, .toggle-group span { cursor: pointer; }
+.toggle.off .toggle-group {
+ left: -100%;
+}
+.toggle-on {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 50%;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+}
+.toggle-off {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ right: 0;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+ box-shadow: none; /* Bootstrap 4.0 Support via (Issue #186)[https://github.com/minhur/bootstrap-toggle/issues/186]) */
+}
+.toggle-handle {
+ position: relative;
+ margin: 0 auto;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ height: 100%;
+ width: 0px;
+ border-width: 0 1px;
+ background-color: #fff;
+}
+
+.toggle.btn-outline-primary .toggle-handle {
+ background-color: var(--primary);
+ border-color: var(--primary);
+}
+.toggle.btn-outline-secondary .toggle-handle {
+ background-color: var(--secondary);
+ border-color: var(--secondary);
+}
+.toggle.btn-outline-success .toggle-handle {
+ background-color: var(--success);
+ border-color: var(--success);
+}
+.toggle.btn-outline-danger .toggle-handle {
+ background-color: var(--danger);
+ border-color: var(--danger);
+}
+.toggle.btn-outline-warning .toggle-handle {
+ background-color: var(--warning);
+ border-color: var(--warning);
+}
+.toggle.btn-outline-info .toggle-handle {
+ background-color: var(--info);
+ border-color: var(--info);
+}
+.toggle.btn-outline-light .toggle-handle {
+ background-color: var(--light);
+ border-color: var(--light);
+}
+.toggle.btn-outline-dark .toggle-handle {
+ background-color: var(--dark);
+ border-color: var(--dark);
+}
+.toggle[class*="btn-outline"]:hover .toggle-handle {
+ background-color: var(--light);
+ opacity: 0.5;
+}
+
+/* NOTE: Must come first, so classes below override as needed */
+/* [default] (bootstrap-4.1.3 - .btn - h:38px) */
+.toggle.btn { min-width: 3.7rem; min-height: 2.15rem; }
+.toggle-on.btn { padding-right: 1.5rem; }
+.toggle-off.btn { padding-left: 1.5rem; }
+
+/* `lg` (bootstrap-4.1.3 - .btn - h:48px) */
+.toggle.btn-lg { min-width: 5rem; min-height: 2.815rem; }
+.toggle-on.btn-lg { padding-right: 2rem; }
+.toggle-off.btn-lg { padding-left: 2rem; }
+.toggle-handle.btn-lg { width: 2.5rem; }
+
+/* `sm` (bootstrap-4.1.3 - .btn - h:31px) */
+.toggle.btn-sm { min-width: 3.125rem; min-height: 1.938rem; }
+.toggle-on.btn-sm { padding-right: 1rem; }
+.toggle-off.btn-sm { padding-left: 1rem; }
+
+/* `xs` (bootstrap-3.3 - .btn - h:22px) */
+.toggle.btn-xs { min-width: 2.19rem; min-height: 1.375rem; }
+.toggle-on.btn-xs { padding-right: .8rem; }
+.toggle-off.btn-xs { padding-left: .8rem; }
diff --git a/css/bootstrap4-toggle.min.css b/css/bootstrap4-toggle.min.css
new file mode 100644
index 0000000..42b1ec7
--- /dev/null
+++ b/css/bootstrap4-toggle.min.css
@@ -0,0 +1,10 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.css v3.6.1
+|*| https://gitbrent.github.io/bootstrap4-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+.btn-group-xs>.btn,.btn-xs{padding:.35rem .4rem .25rem .4rem;font-size:.875rem;line-height:.5;border-radius:.2rem}.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-1.25rem;margin-right:.35rem}.toggle{position:relative;overflow:hidden}.toggle.btn.btn-light,.toggle.btn.btn-outline-light{border-color:rgba(0,0,0,.15)}.toggle input[type=checkbox]{display:none}.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}.toggle-group label,.toggle-group span{cursor:pointer}.toggle.off .toggle-group{left:-100%}.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0;box-shadow:none}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px;background-color:#fff}.toggle.btn-outline-primary .toggle-handle{background-color:var(--primary);border-color:var(--primary)}.toggle.btn-outline-secondary .toggle-handle{background-color:var(--secondary);border-color:var(--secondary)}.toggle.btn-outline-success .toggle-handle{background-color:var(--success);border-color:var(--success)}.toggle.btn-outline-danger .toggle-handle{background-color:var(--danger);border-color:var(--danger)}.toggle.btn-outline-warning .toggle-handle{background-color:var(--warning);border-color:var(--warning)}.toggle.btn-outline-info .toggle-handle{background-color:var(--info);border-color:var(--info)}.toggle.btn-outline-light .toggle-handle{background-color:var(--light);border-color:var(--light)}.toggle.btn-outline-dark .toggle-handle{background-color:var(--dark);border-color:var(--dark)}.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--light);opacity:.5}.toggle.btn{min-width:3.7rem;min-height:2.15rem}.toggle-on.btn{padding-right:1.5rem}.toggle-off.btn{padding-left:1.5rem}.toggle.btn-lg{min-width:5rem;min-height:2.815rem}.toggle-on.btn-lg{padding-right:2rem}.toggle-off.btn-lg{padding-left:2rem}.toggle-handle.btn-lg{width:2.5rem}.toggle.btn-sm{min-width:3.125rem;min-height:1.938rem}.toggle-on.btn-sm{padding-right:1rem}.toggle-off.btn-sm{padding-left:1rem}.toggle.btn-xs{min-width:2.19rem;min-height:1.375rem}.toggle-on.btn-xs{padding-right:.8rem}.toggle-off.btn-xs{padding-left:.8rem}
diff --git a/doc/bootstrap4-toggle-demo.gif b/doc/bootstrap4-toggle-demo.gif
new file mode 100644
index 0000000..2ef581c
Binary files /dev/null and b/doc/bootstrap4-toggle-demo.gif differ
diff --git a/doc/header.png b/doc/header.png
index eb8d58b..7de5940 100644
Binary files a/doc/header.png and b/doc/header.png differ
diff --git a/doc/nyt.png b/doc/nyt.png
deleted file mode 100644
index 4025f26..0000000
Binary files a/doc/nyt.png and /dev/null differ
diff --git a/doc/nytdev.svg b/doc/nytdev.svg
deleted file mode 100644
index 39669ee..0000000
--- a/doc/nytdev.svg
+++ /dev/null
@@ -1,239 +0,0 @@
-
-
-
-
diff --git a/doc/stylesheet.css b/doc/stylesheet.css
index fe7a444..1d8a83b 100644
--- a/doc/stylesheet.css
+++ b/doc/stylesheet.css
@@ -1,10 +1,9 @@
-header, footer {
+header {
padding: 20px;
background-image: url('header.png');
background-size: 256px 256px;
}
footer {
- color: #fff;
text-align: center;
}
.nyt-logo {
@@ -109,4 +108,4 @@ code.hljs {
.table-striped code {
background-color: inherit;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index c255754..3e4f35a 100644
--- a/index.html
+++ b/index.html
@@ -1,139 +1,291 @@
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
- Bootstrap Toggle
-
-
-
-
-
-
-
+ Bootstrap 4 Toggle Switch Button Checkbox
+
+
+
+
+
+
+
-