diff --git a/HISTORY.md b/HISTORY.md
index d7483b6..2417690 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,5 +1,10 @@
# Release History
+## 1.0.3
+
+* Better integration with Boostrap variables and mixins
+* Removed `block-inline`
+
## 1.0.2
* Killed emoji class
diff --git a/bower.json b/bower.json
index 7c3af64..fb6452b 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
{
"name": "bootstrap4c-custom-switch",
"description": "Bootstrap 4 Component - Custom switch",
- "version": "1.0.2",
+ "version": "1.0.3",
"license": "MIT",
"authors": [
{ "name": "Martin Haubek", "email": "haubek@gmail.com", "homepage": "https://haubek.github.io" }
diff --git a/dist/css/component-custom-switch.css b/dist/css/component-custom-switch.css
index e59eff9..1cb2515 100644
--- a/dist/css/component-custom-switch.css
+++ b/dist/css/component-custom-switch.css
@@ -3,90 +3,94 @@
*
*
* Bootstrap 4 Component - Custom switch
- * Version: 1.0.2
+ * Version: 1.0.3
* Copyright (c) 2017 Martin Haubek
*
*
*
*/
-.custom-switch {
- display: inline-block; }
- .custom-switch .custom-switch-input {
- display: none; }
- .custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before,
- .custom-switch .custom-switch-input *,
- .custom-switch .custom-switch-input *:after,
- .custom-switch .custom-switch-input *:before,
- .custom-switch .custom-switch-input + .custom-switch-btn {
- box-sizing: border-box; }
- .custom-switch .custom-switch-input::-moz-selection, .custom-switch .custom-switch-input:after::-moz-selection, .custom-switch .custom-switch-input:before::-moz-selection,
- .custom-switch .custom-switch-input *::-moz-selection,
- .custom-switch .custom-switch-input *:after::-moz-selection,
- .custom-switch .custom-switch-input *:before::-moz-selection,
- .custom-switch .custom-switch-input + .custom-switch-btn::-moz-selection {
- background: none; }
- .custom-switch .custom-switch-input::selection, .custom-switch .custom-switch-input:after::selection, .custom-switch .custom-switch-input:before::selection,
- .custom-switch .custom-switch-input *::selection,
- .custom-switch .custom-switch-input *:after::selection,
- .custom-switch .custom-switch-input *:before::selection,
- .custom-switch .custom-switch-input + .custom-switch-btn::selection {
- background: none; }
- .custom-switch .custom-switch-input + .custom-switch-btn {
- outline: 0;
- display: inline-block;
+.custom-switch .custom-switch-input {
+ display: none; }
+ .custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before,
+ .custom-switch .custom-switch-input *,
+ .custom-switch .custom-switch-input *:after,
+ .custom-switch .custom-switch-input *:before,
+ .custom-switch .custom-switch-input + .custom-switch-btn {
+ box-sizing: border-box; }
+ .custom-switch .custom-switch-input::-moz-selection, .custom-switch .custom-switch-input:after::-moz-selection, .custom-switch .custom-switch-input:before::-moz-selection,
+ .custom-switch .custom-switch-input *::-moz-selection,
+ .custom-switch .custom-switch-input *:after::-moz-selection,
+ .custom-switch .custom-switch-input *:before::-moz-selection,
+ .custom-switch .custom-switch-input + .custom-switch-btn::-moz-selection {
+ background: none; }
+ .custom-switch .custom-switch-input::selection, .custom-switch .custom-switch-input:after::selection, .custom-switch .custom-switch-input:before::selection,
+ .custom-switch .custom-switch-input *::selection,
+ .custom-switch .custom-switch-input *:after::selection,
+ .custom-switch .custom-switch-input *:before::selection,
+ .custom-switch .custom-switch-input + .custom-switch-btn::selection {
+ background: none; }
+ .custom-switch .custom-switch-input + .custom-switch-btn {
+ outline: 0;
+ display: inline-block;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ width: 68px;
+ height: 38px;
+ margin: 0;
+ padding: 4px;
+ background: #eceeef;
+ border-radius: 76px;
+ transition: all 300ms ease; }
+ .custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before {
position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- width: 68px;
- height: 38px;
- margin: 0;
- padding: 4px;
- background: #ccc;
- border-radius: 76px;
+ display: block;
+ content: "";
+ width: 50%;
+ height: 100%; }
+ .custom-switch .custom-switch-input + .custom-switch-btn:after {
+ left: 0;
+ border-radius: 50%;
+ background: white;
transition: all 300ms ease; }
- .custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before {
- position: relative;
- display: block;
- content: "";
- width: 50%;
- height: 100%; }
- .custom-switch .custom-switch-input + .custom-switch-btn:after {
- left: 0;
- border-radius: 50%;
- background: white;
- transition: all 300ms ease; }
- .custom-switch .custom-switch-input + .custom-switch-btn:before {
- display: none; }
- .custom-switch .custom-switch-input:checked + .custom-switch-btn {
- background: #5cb85c; }
- .custom-switch .custom-switch-input:checked + .custom-switch-btn:after {
- left: 50%; }
- .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-checked {
- opacity: 1;
- height: auto; }
- .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-unchecked {
- display: none;
- opacity: 0;
- height: 0; }
- .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-checked {
+ .custom-switch .custom-switch-input + .custom-switch-btn:before {
+ display: none; }
+ .custom-switch .custom-switch-input:checked + .custom-switch-btn {
+ background: #5cb85c; }
+ .custom-switch .custom-switch-input:checked + .custom-switch-btn:after {
+ left: 50%; }
+ .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-checked {
+ opacity: 1;
+ height: auto; }
+ .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-unchecked {
display: none;
opacity: 0;
height: 0; }
- .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-unchecked {
- opacity: 1;
- height: auto; }
- .custom-switch.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
- .custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
- .custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
- .custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
- .custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
- .custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
- background-image: url("data:image/svg+xml;utf8,"); }
+ .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-checked {
+ display: none;
+ opacity: 0;
+ height: 0; }
+ .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-unchecked {
+ opacity: 1;
+ height: auto; }
+
+.custom-switch.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
+
+.custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
+
+.custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
+
+.custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
+
+.custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
+
+.custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
+ background-image: url("data:image/svg+xml;utf8,"); }
diff --git a/dist/css/component-custom-switch.min.css b/dist/css/component-custom-switch.min.css
index f610f6d..27b60f9 100644
--- a/dist/css/component-custom-switch.min.css
+++ b/dist/css/component-custom-switch.min.css
@@ -1 +1 @@
-.custom-switch{display:inline-block}.custom-switch .custom-switch-input{display:none}.custom-switch .custom-switch-input,.custom-switch .custom-switch-input *,.custom-switch .custom-switch-input :after,.custom-switch .custom-switch-input :before,.custom-switch .custom-switch-input+.custom-switch-btn,.custom-switch .custom-switch-input:after,.custom-switch .custom-switch-input:before{box-sizing:border-box}.custom-switch .custom-switch-input ::-moz-selection,.custom-switch .custom-switch-input :after::-moz-selection,.custom-switch .custom-switch-input :before::-moz-selection,.custom-switch .custom-switch-input+.custom-switch-btn::-moz-selection,.custom-switch .custom-switch-input::-moz-selection,.custom-switch .custom-switch-input:after::-moz-selection,.custom-switch .custom-switch-input:before::-moz-selection{background:0 0}.custom-switch .custom-switch-input ::selection,.custom-switch .custom-switch-input :after::selection,.custom-switch .custom-switch-input :before::selection,.custom-switch .custom-switch-input+.custom-switch-btn::selection,.custom-switch .custom-switch-input::selection,.custom-switch .custom-switch-input:after::selection,.custom-switch .custom-switch-input:before::selection{background:0 0}.custom-switch .custom-switch-input+.custom-switch-btn{outline:0;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:68px;height:38px;margin:0;padding:4px;background:#ccc;border-radius:76px;transition:all .3s ease}.custom-switch .custom-switch-input+.custom-switch-btn:after,.custom-switch .custom-switch-input+.custom-switch-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.custom-switch .custom-switch-input+.custom-switch-btn:after{left:0;border-radius:50%;background:#fff;transition:all .3s ease}.custom-switch .custom-switch-input+.custom-switch-btn:before{display:none}.custom-switch .custom-switch-input:checked+.custom-switch-btn{background:#5cb85c}.custom-switch .custom-switch-input:checked+.custom-switch-btn:after{left:50%}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-checked{opacity:1;height:auto}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-unchecked,.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-checked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-unchecked{opacity:1;height:auto}.custom-switch.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}
\ No newline at end of file
+.custom-switch .custom-switch-input{display:none}.custom-switch .custom-switch-input,.custom-switch .custom-switch-input *,.custom-switch .custom-switch-input :after,.custom-switch .custom-switch-input :before,.custom-switch .custom-switch-input+.custom-switch-btn,.custom-switch .custom-switch-input:after,.custom-switch .custom-switch-input:before{box-sizing:border-box}.custom-switch .custom-switch-input ::-moz-selection,.custom-switch .custom-switch-input :after::-moz-selection,.custom-switch .custom-switch-input :before::-moz-selection,.custom-switch .custom-switch-input+.custom-switch-btn::-moz-selection,.custom-switch .custom-switch-input::-moz-selection,.custom-switch .custom-switch-input:after::-moz-selection,.custom-switch .custom-switch-input:before::-moz-selection{background:0 0}.custom-switch .custom-switch-input ::selection,.custom-switch .custom-switch-input :after::selection,.custom-switch .custom-switch-input :before::selection,.custom-switch .custom-switch-input+.custom-switch-btn::selection,.custom-switch .custom-switch-input::selection,.custom-switch .custom-switch-input:after::selection,.custom-switch .custom-switch-input:before::selection{background:0 0}.custom-switch .custom-switch-input+.custom-switch-btn{outline:0;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:68px;height:38px;margin:0;padding:4px;background:#eceeef;border-radius:76px;transition:all .3s ease}.custom-switch .custom-switch-input+.custom-switch-btn:after,.custom-switch .custom-switch-input+.custom-switch-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.custom-switch .custom-switch-input+.custom-switch-btn:after{left:0;border-radius:50%;background:#fff;transition:all .3s ease}.custom-switch .custom-switch-input+.custom-switch-btn:before{display:none}.custom-switch .custom-switch-input:checked+.custom-switch-btn{background:#5cb85c}.custom-switch .custom-switch-input:checked+.custom-switch-btn:after{left:50%}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-checked{opacity:1;height:auto}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-unchecked,.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-checked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-unchecked{opacity:1;height:auto}.custom-switch.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}.custom-switch.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;utf8,")}
\ No newline at end of file
diff --git a/package.json b/package.json
index c923a00..fea2b76 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "bootstrap4c-custom-switch",
"description": "Bootstrap 4 Component - Custom switch",
- "version": "1.0.2",
+ "version": "1.0.3",
"license": "MIT",
"author": {
"name": "Martin Haubek",
@@ -11,7 +11,7 @@
"type": "git",
"url": "https://github.com/haubek/bootstrap4c-custom-switch"
},
- "main": "dist/css/bootstrap4c-custom-switch.min.css",
+ "main": "dist/css/bootstrap4c-custom-switch.css",
"homepage": "https://haubek.github.io",
"bugs": {
"url": "https://github.com/haubek/bootstrap4c-custom-switch/issues"
@@ -25,7 +25,8 @@
"scss",
"css"
],
- "dependencies": {},
+ "dependencies": {
+ },
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
@@ -33,6 +34,7 @@
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
- "gulp-strip-css-comments": "^1.2.0"
+ "gulp-strip-css-comments": "^1.2.0",
+ "bootstrap": "^4.0.0-alpha.6"
}
}
diff --git a/src/scss/_bootstrap-variables.scss b/src/scss/_bootstrap-variables.scss
deleted file mode 100644
index f07a45d..0000000
--- a/src/scss/_bootstrap-variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$white: #fff !default;
-$red: #d9534f !default;
-$green: #5cb85c !default;
-$gray-lighter: #ccc !default;
-$brand-success: $green !default;
-$brand-danger: $red !default;
-$font-family-sans-serif: sans-serif !default;
diff --git a/src/scss/_component-custom-switch.scss b/src/scss/_component-custom-switch.scss
index bea7b50..3b52607 100644
--- a/src/scss/_component-custom-switch.scss
+++ b/src/scss/_component-custom-switch.scss
@@ -1,15 +1,3 @@
-/*
- *
- *
- *
- * Bootstrap 4 Component - Custom switch
- * Version: 1.0.2
- * Copyright (c) 2017 Martin Haubek
- *
- *
- *
- */
-
.custom-switch {
.custom-switch-input {
display: none;
diff --git a/src/scss/_component-custom-switch-variables.scss b/src/scss/_component-variables.scss
similarity index 100%
rename from src/scss/_component-custom-switch-variables.scss
rename to src/scss/_component-variables.scss
diff --git a/src/scss/build.scss b/src/scss/build.scss
index 55533b5..68a6c51 100644
--- a/src/scss/build.scss
+++ b/src/scss/build.scss
@@ -1,3 +1,17 @@
-@import "bootstrap-variables";
-@import "component-custom-switch-variables";
+/*
+ *
+ *
+ *
+ * Bootstrap 4 Component - Custom switch
+ * Version: 1.0.3
+ * Copyright (c) 2017 Martin Haubek
+ *
+ *
+ *
+ */
+
+@import "./node_modules/bootstrap/scss/variables";
+@import "./node_modules/bootstrap/scss/mixins";
+
+@import "component-variables";
@import "component-custom-switch";