New status variables

HISTORY.md

@@ -1,5 +1,9 @@
 # Release History
 
+## 1.0.4
+
+* New `status` variable
+
 ## 1.0.3
 
 * Better integration with Boostrap variables and mixins

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

dist/css/component-custom-switch.css

@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.0.3
+ * Version: 1.0.4
  * Copyright (c) 2017 Martin Haubek
  *
  *
@@ -49,10 +49,10 @@
       position: relative;
       display: block;
       content: "";
-      width: 50%;
-      height: 100%; }
+      width: 30px;
+      height: 30px; }
     .custom-switch .custom-switch-input + .custom-switch-btn:after {
-      left: 0;
+      left: 2px;
       border-radius: 50%;
       background: white;
       transition: all 300ms ease; }
@@ -61,7 +61,7 @@
   .custom-switch .custom-switch-input:checked + .custom-switch-btn {
     background: #5cb85c; }
     .custom-switch .custom-switch-input:checked + .custom-switch-btn:after {
-      left: 50%; }
+      left: 30px; }
     .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-checked {
       opacity: 1;
       height: auto; }
@@ -94,3 +94,12 @@
 
 .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>"); }
+
+.custom-switch.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
+  width: 88px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' 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'>Disabled</text></svg>"); }
+
+.custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' 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'>Enabled</text></svg>"); }
+  .custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
+    left: 50px; }

package.json

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

src/scss/_component-custom-switch.scss

@@ -31,11 +31,11 @@
         position: relative;
         display: block;
         content: "";
-        width: 50%;
-        height: 100%;
+        width: (($switch-height - 8) + $switch-unit);
+        height: (($switch-height - 8) + $switch-unit);
       }
       &:after {
-        left: 0;
+        left: 2px;
         border-radius: 50%;
         background: white;
         transition: all $switch-duration ease;
@@ -47,7 +47,7 @@
     &:checked + .custom-switch-btn {
       background: $switch-checked-bg;
       &:after {
-        left: 50%;
+        left: (($switch-width - $switch-height) + $switch-unit);
       }
       ~ .custom-switch-content-checked {
         opacity: 1;
@@ -101,4 +101,18 @@
       }
     }
   }
+  &.custom-switch-label-status {
+    .custom-switch-input {
+      + .custom-switch-btn {
+        width: ($switch-width-status + $switch-unit);
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$switch-width-status}' height='#{$switch-height}'><text x='#{($switch-width / 1.75)}' y='#{($switch-height / 1.6)}' font-size='#{($switch-font-size + $switch-unit)}' font-family='#{$switch-font-family}' fill='#{$switch-unchecked-color}'>#{$switch-unchecked-text-status}</text></svg>");
+      }
+      &:checked + .custom-switch-btn {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$switch-width-status}' height='#{$switch-height}'><text x='#{($switch-width / 7)}' y='#{($switch-height / 1.6)}' font-size='#{($switch-font-size + $switch-unit)}' font-family='#{$switch-font-family}' fill='#{$switch-checked-color}'>#{$switch-checked-text-status}</text></svg>");
+        &:after {
+          left: (($switch-width-status - $switch-height) + $switch-unit);
+        }
+      }
+    }
+  }
 }

src/scss/_component-variables.scss

@@ -1,5 +1,6 @@
 $switch-unit:                     px;
 $switch-width:                    68;
+$switch-width-status:             88;
 $switch-height:                   38; // The default Bootstrap btn height in px
 $switch-font-size:                12;
 $switch-font-family:              $font-family-sans-serif;
@@ -10,9 +11,11 @@ $switch-checked-bg:               $brand-success;
 $switch-checked-text-io:          "I";
 $switch-checked-text-onoff:       "On";
 $switch-checked-text-yesno:       "Yes";
+$switch-checked-text-status:      "Enabled";
 
 $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-status:    "Disabled";

src/scss/build.scss

@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.0.3
+ * Version: 1.0.4
  * Copyright (c) 2017 Martin Haubek
  *
  *