Better integration with Boostrap variables and mixins

haubek · Feb 5, 2017 · a1a7808 · a1a7808
1 parent 87cf3f8
commit a1a7808
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 104 deletions.
diff --git 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
@@ -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": "[email protected]", "homepage": "https://haubek.github.io" }

diff --git 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,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='42.5' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>O</text></svg>"); }
-  .custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='18.13333' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>I</text></svg>"); }
-  .custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>Off</text></svg>"); }
-  .custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>On</text></svg>"); }
-  .custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>No</text></svg>"); }
-  .custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='sans-serif' fill='#fff'>Yes</text></svg>"); }
+  .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,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='42.5' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>O</text></svg>"); }
+
+.custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>I</text></svg>"); }
+
+.custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Off</text></svg>"); }
+
+.custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>On</text></svg>"); }
+
+.custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>No</text></svg>"); }
+
+.custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Yes</text></svg>"); }
diff --git a/dist/css/component-custom-switch.min.css b/dist/css/component-custom-switch.min.css