more variables for the SCSS build + new classes

.gitignore

@@ -2,3 +2,4 @@ Thumbs.db
 .DS_Store
 /node_modules/
 npm-debug.log
+test.html

HISTORY.md

@@ -1,5 +1,12 @@
 # Release History
 
+## 1.0.1
+
+* More variables for the SCSS build
+* New I/O class
+* New Yes/No class
+* New emoji class
+
 ## 1.0.0
 
 * First release

README.md

@@ -2,13 +2,21 @@
 
 ### Bootstrap 4 Component - Custom switch
 
-The **Custom switch** is a simple Bootstrap 4 component that turn your default HTML checkbox inputs `<input type="checkbox">` into beautiful iOS style switches — and allow you to display different content depening on the `checked` attribute. The component is 100% CSS, no JavaScript.
+The *Custom switch* is a simple Bootstrap 4 component that turn your default HTML checkbox inputs `<input type="checkbox">` into beautiful iOS style switches — and allow you to display different content depening on the `checked` attribute. The component is 100% CSS, no JavaScript.
 
 See demo here => https://haubek.github.io
 
-**HTML5 markup**
+**HTML5 markup:**
+
+```
+<div class="custom-switch">
+  <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
+  <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
+</div>
+```
+
 ```
-<div class="custom-switch custom-switch-label-onoff">
+<div class="custom-switch custom-switch-label-yesno">
   <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
   <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
   <div class="custom-switch-content-checked">

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }
@@ -11,7 +11,7 @@
     "url": "https://github.com/haubek/bootstrap4c-custom-switch"
   },
   "main": [
-    "dist/css/bootstrap4c-custom-switch.min.css"
+    "dist/css/bootstrap4c-custom-switch.css"
   ],
   "ignore": [
     "**/.*",

dist/css/component-custom-switch.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
  *
  *
@@ -44,8 +45,8 @@
       height: 38px;
       margin: 0;
       padding: 4px;
-      background: #eceeef;
-      border-radius: 10rem;
+      background: #ccc;
+      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;
@@ -78,10 +79,19 @@
     .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;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 38'%3E%3Cpath fill='#fff' d='M41.36,23.1v-8.3h2.38L47.42,21h.11a18.59,18.59,0,0,1-.23-2.29V14.79H49v8.3H46.65L43,16.81H43q.12,1.66.12,2.37V23.1Z M49.72,19.91a3.39,3.39,0,0,1,.81-2.42,3,3,0,0,1,2.28-.86,3.19,3.19,0,0,1,1.61.4,2.65,2.65,0,0,1,1.07,1.14,3.83,3.83,0,0,1,.37,1.74A3.42,3.42,0,0,1,55,22.33a3,3,0,0,1-2.27.88,3.19,3.19,0,0,1-1.61-.4,2.66,2.66,0,0,1-1.07-1.15A3.86,3.86,0,0,1,49.72,19.91Zm1.76,0a2.66,2.66,0,0,0,.31,1.42,1.11,1.11,0,0,0,1,.48,1.09,1.09,0,0,0,1-.48,2.69,2.69,0,0,0,.3-1.43,2.61,2.61,0,0,0-.31-1.41,1.31,1.31,0,0,0-2,0A2.61,2.61,0,0,0,51.48,19.91Z'/%3E%3C/svg%3E");
-    background-size: 68px 38px;
-    background-position: center center;
-    background-repeat: no-repeat; }
+    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;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 38'%3E%3Cpath fill='#fff' d='M8.32,14.79h1.91L12,18.21l1.74-3.42h1.9l-2.76,5.07V23.1H11.07V19.92Z M15.52,20a3.52,3.52,0,0,1,.8-2.47,2.85,2.85,0,0,1,2.21-.87,3,3,0,0,1,2.17.77,2.84,2.84,0,0,1,.78,2.12v.84h-4.2a1.68,1.68,0,0,0,.44,1.16,1.53,1.53,0,0,0,1.14.41A5.13,5.13,0,0,0,20,21.81a5.87,5.87,0,0,0,1.11-.38v1.34a4.34,4.34,0,0,1-1,.34,6.63,6.63,0,0,1-1.31.11,3.28,3.28,0,0,1-2.4-.85A3.21,3.21,0,0,1,15.52,20Zm1.8-.77h2.43a1.36,1.36,0,0,0-.33-1,1.15,1.15,0,0,0-.87-.34,1.12,1.12,0,0,0-.86.34A1.52,1.52,0,0,0,17.32,19.2Z M21.81,18.4a1.5,1.5,0,0,1,.66-1.31,3.22,3.22,0,0,1,1.87-.46,5.37,5.37,0,0,1,2.25.5l-.53,1.25c-.32-.14-.62-.25-.9-.33a2.84,2.84,0,0,0-.85-.13q-.76,0-.76.41a.49.49,0,0,0,.25.4,6.69,6.69,0,0,0,1.08.5,5.13,5.13,0,0,1,1.1.56,1.65,1.65,0,0,1,.52.6,1.81,1.81,0,0,1,.17.81,1.76,1.76,0,0,1-.68,1.5,3.38,3.38,0,0,1-2,.51,6.34,6.34,0,0,1-1.19-.1,4.41,4.41,0,0,1-.92-.28V21.39a6.07,6.07,0,0,0,1.09.38,4.39,4.39,0,0,0,1.07.15q.94,0,.94-.54a.45.45,0,0,0-.12-.33,1.81,1.81,0,0,0-.43-.29q-.31-.16-.81-.38a5.2,5.2,0,0,1-1.08-.57,1.59,1.59,0,0,1-.5-.6A2,2,0,0,1,21.81,18.4Z'/%3E%3C/svg%3E"); }
+    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-label-emoji .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='25.33333' font-size='12px' font-family='sans-serif' fill='#fff'>😴</text></svg>"); }
+  .custom-switch.custom-switch-label-emoji .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='10.07407' y='25.33333' font-size='12px' font-family='sans-serif' fill='#fff'>😀</text></svg>"); }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "author": {
     "name": "Martin Haubek",

src/scss/_bootstrap-variables.scss

@@ -1,4 +1,7 @@
 $white:                       #fff !default;
+$red:                         #d9534f !default;
 $green:                       #5cb85c !default;
-$gray-lighter:                #eceeef !default;
+$gray-lighter:                #ccc !default;
 $brand-success:               $green !default;
+$brand-danger:                $red !default;
+$font-family-sans-serif:      sans-serif !default;

src/scss/_component-custom-switch-variables.scss

@@ -1,9 +1,20 @@
-$switch-checked-color:        $white;
-$switch-checked-bg:           $brand-success;
-$switch-unchecked-color:      $white;
-$switch-unchecked-bg:         $gray-lighter;
+$switch-unit:                     px;
+$switch-width:                    68;
+$switch-height:                   38; // The default Bootstrap btn height in px
+$switch-font-size:                12;
+$switch-font-family:              $font-family-sans-serif;
+$switch-duration:                 300ms;
 
-$switch-duration:             300ms;
+$switch-checked-color:            $white;
+$switch-checked-bg:               $brand-success;
+$switch-checked-text-io:          "I";
+$switch-checked-text-onoff:       "On";
+$switch-checked-text-yesno:       "Yes";
+$switch-checked-text-emoji:       "😀";
 
-$switch-svg-yes:              "M8.32,14.79h1.91L12,18.21l1.74-3.42h1.9l-2.76,5.07V23.1H11.07V19.92Z M15.52,20a3.52,3.52,0,0,1,.8-2.47,2.85,2.85,0,0,1,2.21-.87,3,3,0,0,1,2.17.77,2.84,2.84,0,0,1,.78,2.12v.84h-4.2a1.68,1.68,0,0,0,.44,1.16,1.53,1.53,0,0,0,1.14.41A5.13,5.13,0,0,0,20,21.81a5.87,5.87,0,0,0,1.11-.38v1.34a4.34,4.34,0,0,1-1,.34,6.63,6.63,0,0,1-1.31.11,3.28,3.28,0,0,1-2.4-.85A3.21,3.21,0,0,1,15.52,20Zm1.8-.77h2.43a1.36,1.36,0,0,0-.33-1,1.15,1.15,0,0,0-.87-.34,1.12,1.12,0,0,0-.86.34A1.52,1.52,0,0,0,17.32,19.2Z M21.81,18.4a1.5,1.5,0,0,1,.66-1.31,3.22,3.22,0,0,1,1.87-.46,5.37,5.37,0,0,1,2.25.5l-.53,1.25c-.32-.14-.62-.25-.9-.33a2.84,2.84,0,0,0-.85-.13q-.76,0-.76.41a.49.49,0,0,0,.25.4,6.69,6.69,0,0,0,1.08.5,5.13,5.13,0,0,1,1.1.56,1.65,1.65,0,0,1,.52.6,1.81,1.81,0,0,1,.17.81,1.76,1.76,0,0,1-.68,1.5,3.38,3.38,0,0,1-2,.51,6.34,6.34,0,0,1-1.19-.1,4.41,4.41,0,0,1-.92-.28V21.39a6.07,6.07,0,0,0,1.09.38,4.39,4.39,0,0,0,1.07.15q.94,0,.94-.54a.45.45,0,0,0-.12-.33,1.81,1.81,0,0,0-.43-.29q-.31-.16-.81-.38a5.2,5.2,0,0,1-1.08-.57,1.59,1.59,0,0,1-.5-.6A2,2,0,0,1,21.81,18.4Z";
-$switch-svg-no:               "M41.36,23.1v-8.3h2.38L47.42,21h.11a18.59,18.59,0,0,1-.23-2.29V14.79H49v8.3H46.65L43,16.81H43q.12,1.66.12,2.37V23.1Z M49.72,19.91a3.39,3.39,0,0,1,.81-2.42,3,3,0,0,1,2.28-.86,3.19,3.19,0,0,1,1.61.4,2.65,2.65,0,0,1,1.07,1.14,3.83,3.83,0,0,1,.37,1.74A3.42,3.42,0,0,1,55,22.33a3,3,0,0,1-2.27.88,3.19,3.19,0,0,1-1.61-.4,2.66,2.66,0,0,1-1.07-1.15A3.86,3.86,0,0,1,49.72,19.91Zm1.76,0a2.66,2.66,0,0,0,.31,1.42,1.11,1.11,0,0,0,1,.48,1.09,1.09,0,0,0,1-.48,2.69,2.69,0,0,0,.3-1.43,2.61,2.61,0,0,0-.31-1.41,1.31,1.31,0,0,0-2,0A2.61,2.61,0,0,0,51.48,19.91Z";
+$switch-unchecked-color:          $white;
+$switch-unchecked-bg:             $gray-lighter;
+$switch-unchecked-text-io:        "O";
+$switch-unchecked-text-onoff:     "Off";
+$switch-unchecked-text-yesno:     "No";
+$switch-unchecked-text-emoji:     "😴";