diff --git a/_includes/howto.html b/_includes/howto.html
index c058a93..6290fb3 100644
--- a/_includes/howto.html
+++ b/_includes/howto.html
@@ -14,12 +14,12 @@
Latest version (Bootstrap 4)
$ npm install titatoggle --save-dev
Previous version (Bootstrap 3)
+
$ npm install titatoggle@1.0.0 --save-dev
Bower
-
$ bower install titatoggle
-
+
$ bower install titatoggle
SASS
@@ -37,4 +37,4 @@
CSS
License
-
GNU General Public License v2.0
\ No newline at end of file
+
GNU General Public License v2.0
diff --git a/bower.json b/bower.json
index 3954888..a059696 100644
--- a/bower.json
+++ b/bower.json
@@ -1,11 +1,11 @@
{
"name": "titatoggle",
- "version": "2.0.0",
+ "version": "2.0.1",
"homepage": "https://github.com/kleinejan/titatoggle",
"authors": [
"Jan Enning
"
],
- "description": "Default bootstrap checkbox toggle buttons. Just default Bootstrap, add a class to use these awesome toggle buttons. Browser support: Internet Explorer 9, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android",
+ "description": "Default bootstrap 4 checkbox toggle buttons. Just default Bootstrap, add a class to use these awesome toggle buttons. Browser support: Internet Explorer 9/10.11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android",
"main": [
"dist/_titatoggle.less",
"dist/titatoggle-dist.css",
diff --git a/dist/titatoggle.less b/dist/titatoggle.less
deleted file mode 100644
index bd7f06c..0000000
--- a/dist/titatoggle.less
+++ /dev/null
@@ -1,789 +0,0 @@
-/*******************************************************
-Variables
-*******************************************************/
-@white: #FFF;
-// Sizes
-@scrubber-width-default: 20px;
-@scrubber-width-sm: 10px;
-@scrubber-width-md: 30px;
-@scrubber-width-lg: 40px;
-
-// Scrubber text
-// - off
-@slider-text-unchecked: "Off";
-@slider-text-unchecked-color: #000;
-// - on
-@slider-text-checked: "On";
-@slider-text-checked-color: #fff;
-
-/*******************************************************
-Animation
-*******************************************************/
-
-@keyframes popIn {
- 0% { transform: scale(1, 1); }
- 25% { transform: scale(1.2, 1); }
- 50% { transform: scale(1.4, 1); }
- 100% { transform: scale(1, 1); }
-}
-
-@keyframes popOut {
- 0% { transform: scale(1, 1); }
- 25% { transform: scale(1.2, 1); }
- 50% { transform: scale(1.4, 1); }
- 100% { transform: scale(1, 1); }
-}
-
-@keyframes splashIn {
- 0% { transform: scale(1); opacity: 1; }
- 25% { transform: scale(1.1); opacity: .8 }
- 50% { transform: scale(1.1); opacity: .9; }
- 100% { transform: scale(1); opacity: 1; }
-}
-
-@keyframes splashOut {
- 0% { transform: scale(1); opacity: 1; }
- 25% { transform: scale(1); opacity: .8 }
- 50% { transform: scale(1); opacity: .9; }
- 100% { transform: scale(.5); opacity: 1; }
-}
-
-/*******************************************************
-Main Slider basics
-*******************************************************/
-
-.checkbox-toggle {
- position: relative;
-
- input[type="checkbox"] {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 0%;
- height: 0%;
- margin: 0 0;
- cursor: pointer;
- opacity: 0;
-
-
- &:focus + *:before
- {
- outline:solid @input-border-focus 2px;
- }
- }
-
- input + span {
- cursor: pointer;
- user-select: none;
-
- &:before {
- position: absolute;
- left: 0px;
- display: inline-block;
- }
-
- > h4 {
- display: inline;
- }
- }
-}
-
-.form-horizontal [class^='checkbox'] {
- input + span:after {
- top: 7px;
- }
-}
-
-/*******************************************************
-Main Slider
-*******************************************************/
-
-.checkbox-slider {
- .checkbox-toggle;
-
- input {
-
- + span {
- padding-left: @scrubber-width-default * 2;
-
- &:before {
- content: "";
- height: @scrubber-width-default;
- width: @scrubber-width-default * 2;
- background: rgba(100, 100, 100, .2);
- box-shadow: inset 0 0 5px rgba(0, 0, 0, .8);
- transition: background .2s ease-out;
- }
- // Off State
- &:after {
- width: @scrubber-width-default;
- height: @scrubber-width-default;
- position: absolute;
- left: 0px;
- top: 0;
- display: block;
- background: @white;
- transition: margin-left 0.1s ease-in-out;
- text-align: center;
- font-weight: bold;
- content: "";
- }
- }
- // On state
- &:checked + span:after {
- margin-left: @scrubber-width-default;
- content: "";
- }
- &:checked + span:before {
- transition: background .2s ease-in;
- }
-
- }
-
-}
-
-/*******************************************************
-Slider default
-*******************************************************/
-
-.checkbox-slider--default {
- .checkbox-slider;
-
- input + span:after {
- background: @white;
- border: solid transparent 1px;
- background-clip: content-box;
- }
-
- input:checked + span:after {
- background: @brand-success;
- border: solid transparent 1px;
- background-clip: content-box;
- }
-
-}
-
-/*******************************************************
-Slider default rounded
-*******************************************************/
-
-.checkbox-slider--a-rounded {
- .checkbox-slider--default;
-
- input + span:after,
- input + span:before {
- border-radius: @border-radius-base;
- }
-
- input + span:after,
- input:checked + span:after {
- border: solid transparent 2px;
- background-clip: content-box;
- }
-}
-
-/*******************************************************
-Slider default rounded Sizes
-*******************************************************/
-
-.checkbox-slider--a-rounded {
-
- &.checkbox-slider-sm {
-
- input + span:before,
- input + span:after {
- border-radius: @border-radius-small;
- }
- }
-
- &.checkbox-slider-md {
-
- input + span:before,
- input + span:after {
- border-radius: @border-radius-base;
- }
- }
-
- &.checkbox-slider-lg {
-
- input + span:before,
- input + span:after {
- border-radius: @border-radius-large;
- }
- }
-
-}
-
-/*******************************************************
-Slider A
-*******************************************************/
-
-.checkbox-slider--a {
- .checkbox-slider;
-
- input {
- + span {
- padding-left: @scrubber-width-default * 3;
- }
-
- + span:before {
- content: "";
- width: @scrubber-width-default * 3;
- }
-
- + span:after {
- width: @scrubber-width-default * 2;
- font-size: @scrubber-width-default / 2;
- color: @slider-text-unchecked-color;
- content: @slider-text-unchecked;
- border: solid transparent 1px;
- background-clip: content-box;
- }
-
- &:checked + span:after {
- content: @slider-text-checked;
- color: @slider-text-checked-color;
- background: @brand-success;
- border: solid transparent 1px;
- background-clip: content-box;
- }
- }
-}
-
-/*******************************************************
-Slider A SIZES
-*******************************************************/
-
-.checkbox-slider--a {
-
- &.checkbox-slider-sm {
-
- input + span {
- padding-left: @scrubber-width-sm * 3;
- }
-
- input + span:before {
- width: @scrubber-width-sm * 3;
- }
-
- input + span:after {
- width: @scrubber-width-sm * 2;
- font-size: @scrubber-width-sm / 2;
- }
- input:checked + span:after {
- margin-left: @scrubber-width-sm;
- }
- }
-
- &.checkbox-slider-md {
-
- input + span {
- padding-left: @scrubber-width-md * 3;
- }
-
- input + span:before {
- width: @scrubber-width-md * 3;
- }
-
- input + span:after {
- width: @scrubber-width-md * 2;
- font-size: @scrubber-width-md / 2;
- }
- input:checked + span:after {
- margin-left: @scrubber-width-md;
- }
- }
-
- &.checkbox-slider-lg {
-
- input + span {
- padding-left: @scrubber-width-lg * 3;;
- }
-
- input + span:before {
- width: @scrubber-width-lg * 3;
- }
-
- input + span:after {
- width: @scrubber-width-lg * 2;
- font-size: @scrubber-width-lg / 2;
- }
-
- input:checked + span:after {
- margin-left: @scrubber-width-lg;
- }
- }
-}
-
-/*******************************************************
-Slider B
-*******************************************************/
-
-.checkbox-slider--b {
- .checkbox-slider;
-
- input {
-
- + span {
- padding-left: @scrubber-width-default * 2;
- }
-
- + span:before {
- border-radius: @scrubber-width-default;
- width: @scrubber-width-default * 2;
- }
-
- + span:after {
- background: @white;
- content: "";
- width: @scrubber-width-default;
- border: solid transparent 2px;
- background-clip: padding-box;
- border-radius: @scrubber-width-default;
- }
- &:not(:checked) + span:after {
- animation: popOut ease-in .3s normal;
- }
- &:checked + span:after {
- content: "";
- margin-left: @scrubber-width-default;
- border: solid transparent 2px;
- background-clip: padding-box;
- animation: popIn ease-in .3s normal;
- }
-
- &:checked + span:before {
- background: @brand-success;
- }
- }
-
-}
-
-/*******************************************************
-Slider B Sizes
-*******************************************************/
-
-.checkbox-slider--b {
-
- &.checkbox-slider-md {
-
- input + span:before {
- border-radius: @scrubber-width-md;
- }
-
- input + span:after {
- border-radius: @scrubber-width-md;
- }
-
- }
-
- &.checkbox-slider-lg {
-
- input + span:before {
- border-radius: @scrubber-width-lg;
- }
-
- input + span:after {
- border-radius: @scrubber-width-lg;
- }
-
- }
-}
-
-/*******************************************************
-Slider B-flat
-*******************************************************/
-
-.checkbox-slider--b-flat {
- .checkbox-slider--b;
-
- input {
-
- + span:before {
- box-shadow: none;
- }
-
- }
-
-}
-
-/*******************************************************
-Slider C
-*******************************************************/
-
-.checkbox-slider--c {
- .checkbox-slider;
-
- input {
-
- + span {
- padding-left: @scrubber-width-default * 2;
- }
-
- + span:before {
- height: 2px !important; // needs to be
- top: @scrubber-width-default / 2;
- box-shadow: none;
- width: @scrubber-width-default * 2;
- background: @gray;
- }
-
- + span:after {
- box-shadow: none;
- width: @scrubber-width-default;
- border: solid @gray 2px;
- border-radius: @scrubber-width-default;
- }
-
- &:checked + span:after {
- background: @brand-success;
- margin-left: @scrubber-width-default;
- border: solid @brand-success 2px;
- animation: splashIn ease-in .3s normal;
- }
-
- &:checked + span:before {
- background: @brand-success;
- }
-
- }
-
-}
-
-/*******************************************************
-Slider C Sizes
-*******************************************************/
-
-.checkbox-slider--c {
-
- &.checkbox-slider-sm {
-
- input + span:before {
- top: @scrubber-width-sm / 2 - 1;
- }
- }
-
- &.checkbox-slider-md {
-
- input + span:before {
- top: @scrubber-width-md / 2 - 1;
- }
-
- input + span:after {
- width: @scrubber-width-md;
- border-radius: @scrubber-width-md;
- }
- }
-
- &.checkbox-slider-lg {
-
- input + span:before {
- top: @scrubber-width-lg / 2 - 1; //correct border
- }
- input + span:after {
- width: @scrubber-width-lg;
- border-radius: @scrubber-width-lg;
- }
- }
-
-}
-
-// Horizontal Form
-.form-horizontal [class*='checkbox-slider--c'] {
-
- &.checkbox-slider-sm {
-
- input + span:before {
- top: @scrubber-width-sm / 2 + 5;
- }
- }
-
- &.checkbox-slider-md {
-
- input + span:before {
- top: @scrubber-width-md / 2 + 5;
- }
-
-
- }
-
- &.checkbox-slider-lg {
-
- input + span:before {
- top: @scrubber-width-lg / 2 + 5;
- }
-
- }
-}
-
-/*******************************************************
-Slider C-weight
-*******************************************************/
-
-.checkbox-slider--c-weight {
- .checkbox-slider--c;
-
- input {
-
- + span:before {
- height: 1px !important; // needs to be
- }
-
- &:checked + span:before {
- height: 2px !important; // needs to be
- }
- &:not(:checked) + span:after {
- transform: scale(.7);
- left: -6px
- }
- }
-
-}
-
-/******************************************************
-State Disabled
-*******************************************************/
-
-.checkbox-slider--default input:disabled {
- + span:after { background: @gray-light; }
- + span:before { box-shadow: 0 0 0 black; }
- + span {
- color: @gray-light;
- }
-}
-
-.checkbox-slider--a input:disabled {
- + span:after { background: @gray-light; color: @white; }
- + span:before { box-shadow: 0 0 0 black; }
- + span {
- color: @gray-light;
- }
-}
-
-.checkbox-slider--b input:disabled {
-
- + span:after {
- border: solid transparent 2px;
- border-radius: @scrubber-width-lg;
- }
- + span:before { box-shadow: 0 0 0 black; }
- + span {
- color: @gray-light;
- }
-}
-
-.checkbox-slider--c input:disabled {
- &:checked + span:after {
- background: @gray-light;
- }
-
- + span:after {
- border-color: @gray-light;
- }
- + span:before { background: @gray-light; }
- + span {
- color: @gray-light;
- }
-}
-
-/*******************************************************
-Indicators
-*******************************************************/
-
-input:checked + .indicator-success {
- color: @brand-success;
-}
-
-input:checked + .indicator-info {
- color: @brand-info;
-}
-
-input:checked + .indicator-warning {
- color: @brand-warning;
-}
-
-input:checked + .indicator-danger {
- color: @brand-danger;
-}
-
-/*******************************************************
-Sizes
-*******************************************************/
-
-// Small
-.checkbox-slider-sm {
- line-height: @scrubber-width-sm;
-
- input + span {
- padding-left: @scrubber-width-sm * 2;
- }
-
- input + span:before {
- width: @scrubber-width-sm * 2;
- }
-
- input + span:after,
- input + span:before {
- height: @scrubber-width-sm;
- line-height: @scrubber-width-sm;
- }
-
- input + span:after {
- width: @scrubber-width-sm;
- vertical-align: middle;
- }
-
- input:checked + span:after {
- margin-left: @scrubber-width-sm;
- }
-}
-
-// Medium
-.checkbox-slider-md {
- line-height: @scrubber-width-md;
-
- input + span {
- padding-left: @scrubber-width-md * 2;
- }
-
- input + span:before {
- width: @scrubber-width-md * 2;
- }
-
- input + span:after,
- input + span:before {
- height: @scrubber-width-md;
- line-height: @scrubber-width-md;
- }
-
- input + span:after {
- width: @scrubber-width-md;
- vertical-align: middle;
- }
-
- input:checked + span:after {
- margin-left: @scrubber-width-md;
- }
-}
-
-// Large
-.checkbox-slider-lg {
- line-height: @scrubber-width-lg;
-
- input + span {
- padding-left: @scrubber-width-lg * 2;
- }
-
- input + span:before {
- width: @scrubber-width-lg * 2;
- }
-
- input + span:after,
- input + span:before {
- height: @scrubber-width-lg;
- line-height: @scrubber-width-lg;
- }
- input + span:after {
- width: @scrubber-width-lg;
- vertical-align: middle;
- }
-
- input:checked + span:after {
- margin-left: @scrubber-width-lg;
- }
-}
-
-/*******************************************************
-Variations
-*******************************************************/
-
-// info
-.checkbox-slider-info {
- &.checkbox-slider--default,
- &.checkbox-slider--a,
- &.checkbox-slider--a-rounded,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- background: @brand-info;
- background-clip: content-box;
- }
- }
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- border-color: @brand-info;
- }
- }
-
- &.checkbox-slider--b,
- &.checkbox-slider--b-flat,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:before {
- background: @brand-info;
- }
- }
-}
-
-// warning
-.checkbox-slider-warning {
- &.checkbox-slider--default,
- &.checkbox-slider--a,
- &.checkbox-slider--a-rounded,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- background: @brand-warning;
- background-clip: content-box;
- }
- }
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- border-color: @brand-warning;
- }
- }
-
- &.checkbox-slider--b,
- &.checkbox-slider--b-flat,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:before {
- background: @brand-warning;
- }
- }
-}
-
-// danger
-.checkbox-slider-danger {
- &.checkbox-slider--default,
- &.checkbox-slider--a,
- &.checkbox-slider--a-rounded,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- background: @brand-danger;
- background-clip: content-box;
- }
- }
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:after {
- border-color: @brand-danger;
- }
- }
-
- &.checkbox-slider--b,
- &.checkbox-slider--b-flat,
- &.checkbox-slider--c,
- &.checkbox-slider--c-weight {
- input:checked + span:before {
- background: @brand-danger;
- }
- }
-}
-
diff --git a/docs/index.html b/docs/index.html
index 365d92a..f638856 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1019,12 +1019,12 @@ Latest version (Bootstrap 4)
$ npm install titatoggle --save-dev
Previous version (Bootstrap 3)
+
$ npm install titatoggle@1.0.0 --save-dev
Bower
-$ bower install titatoggle
-
+$ bower install titatoggle
SASS
@@ -1043,6 +1043,7 @@ CSS
License
GNU General Public License v2.0
+