From 207b075e283be6dca0a75ee4a35da388bc5c7d14 Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Thu, 7 Sep 2023 01:04:21 +0100
Subject: [PATCH 1/2] Changed checkbox + switch with full range of sizes

---
 bs4-test.html           |  73 ++++++++++----
 bsformcontrols4.min.css |   5 +-
 src/checkbox.css        | 171 ++++++++++++++++++++++++++-------
 src/switch.css          | 208 ++++++++++++++++++++++++++++++++--------
 4 files changed, 364 insertions(+), 93 deletions(-)

diff --git a/bs4-test.html b/bs4-test.html
index 850cb21..16827e8 100644
--- a/bs4-test.html
+++ b/bs4-test.html
@@ -13,10 +13,10 @@
   <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/js/bootstrap.bundle.min.js"></script>
   <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
 
-  <!-- <link href="src/switch.css" rel="stylesheet"> -->
-  <!-- <link href="src/checkbox.css" rel="stylesheet"> -->
+  <link href="src/switch.css" rel="stylesheet">
+  <link href="src/checkbox.css" rel="stylesheet">
 
-  <link href="bsformcontrols4.min.css" rel="stylesheet">
+  <!-- <link href="bsformcontrols4.min.css" rel="stylesheet"> -->
 
   <title></title>
 </head>
@@ -26,6 +26,7 @@
     <div class="row pb-3 mb-3">
       <div class="col-6 border-right">
 
+<!--
         <div class="pb-3 mb-3 border-bottom">
           <p><b>Textbox Examples (BS4)</b></p>
 
@@ -50,13 +51,23 @@
             </div>
           </div>
         </div>
-
+-->
 
         <div class="pb-3 mb-3 border-bottom">
           <p><b>Switch Examples</b></p>
 
           <div class="mb-3 row">
-            <label for="switch6" class="col-sm-4 col-form-label-sm">Toggle Switch</label>
+            <label for="switch16" class="col-sm-4 col-form-label col-form-label-sm">Toggle Switch XS</label>
+            <div class="col-sm-8">
+              <label class="switch switch-xs switch-primary">
+                <input id="switch16" type="checkbox" />
+                <span class="switch-slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div class="mb-3 row">
+            <label for="switch6" class="col-sm-4 col-form-label col-form-label-sm">Toggle Switch SM</label>
             <div class="col-sm-8">
               <label class="switch switch-sm switch-primary">
                 <input id="switch6" type="checkbox" />
@@ -66,9 +77,9 @@
           </div>
 
           <div class="mb-3 row">
-            <label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
+            <label for="switch2" class="col-sm-4 col-form-label col-form-label-md">Toggle Switch MD</label>
             <div class="col-sm-8">
-              <label class="switch switch-primary">
+              <label class="switch switch-md switch-primary">
                 <input id="switch2" type="checkbox" />
                 <span class="switch-slider"></span>
               </label>
@@ -76,7 +87,7 @@
           </div>
 
           <div class="mb-3 row">
-            <label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
+            <label for="switch1" class="col-sm-4 col-form-label col-form-label-lg">Toggle Switch LG</label>
             <div class="col-sm-8">
               <label class="switch switch-lg switch-primary">
                 <input id="switch1" type="checkbox" />
@@ -84,15 +95,25 @@
               </label>
             </div>
           </div>
+
+          <div class="mb-3 row">
+            <label for="switch21" class="col-sm-4 col-form-label col-form-label-lg">Toggle Switch XL</label>
+            <div class="col-sm-8">
+              <label class="switch switch-xl switch-primary">
+                <input id="switch21" type="checkbox" />
+                <span class="switch-slider"></span>
+              </label>
+            </div>
+          </div>
         </div>
 
         <div class="pb-3 mb-3 border-bottom">
           <p><b>Checkbox Examples</b></p>
 
           <div class="mb-3 row">
-            <label for="checkbox1" class="col-sm-4 col-form-label-sm">Toggle Checkbox</label>
-            <div class="col-sm-8">
-              <label class="chxbox chxbox-sm">
+            <label for="checkbox1" class="col-sm-6 col-form-label-sm">Toggle Checkbox XS</label>
+            <div class="col-sm-6">
+              <label class="chxbox chxbox-xs">
                 <input id="checkbox1" type="checkbox" />
                 <span class="chxbox-slider"></span>
               </label>
@@ -100,9 +121,9 @@
           </div>
 
           <div class="mb-3 row">
-            <label for="checkbox2" class="col-sm-4 col-form-label">Toggle Checkbox</label>
-            <div class="col-sm-8">
-              <label class="chxbox">
+            <label for="checkbox2" class="col-sm-6 col-form-label">Toggle Checkbox SM</label>
+            <div class="col-sm-6">
+              <label class="chxbox chxbox-sm">
                 <input id="checkbox2" type="checkbox" />
                 <span class="chxbox-slider"></span>
               </label>
@@ -110,9 +131,29 @@
           </div>
 
           <div class="mb-3 row">
-            <label for="checkbox3" class="col-sm-4 col-form-label-lg">Toggle Checkbox</label>
-            <div class="col-sm-8">
+            <label for="checkbox22" class="col-sm-6 col-form-label">Toggle Checkbox MD</label>
+            <div class="col-sm-6">
+              <label class="chxbox chxbox-md">
+                <input id="checkbox22" type="checkbox" />
+                <span class="chxbox-slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div class="mb-3 row">
+            <label for="checkbox32" class="col-sm-6 col-form-label">Toggle Checkbox LG</label>
+            <div class="col-sm-6">
               <label class="chxbox chxbox-lg">
+                <input id="checkbox32" type="checkbox" />
+                <span class="chxbox-slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div class="mb-3 row">
+            <label for="checkbox3" class="col-sm-6 col-form-label-lg">Toggle Checkbox XL</label>
+            <div class="col-sm-6">
+              <label class="chxbox chxbox-xl">
                 <input id="checkbox3" type="checkbox" />
                 <span class="chxbox-slider"></span>
               </label>
diff --git a/bsformcontrols4.min.css b/bsformcontrols4.min.css
index cc3a66e..5754747 100644
--- a/bsformcontrols4.min.css
+++ b/bsformcontrols4.min.css
@@ -1,7 +1,4 @@
 /***
  * BSFormControls4
- * @version v1.0.0.066 (2023/08/21 23:39)
+ * @version v1.0.0.126 (2023/09/07 00:26)
  */
- .switch {display: inline-block;height: 30px;position: relative;width: 56px;margin-top: 4px;}.switch > input {height: 0;opacity: 0;width: 0;}.switch > .switch-slider {-webkit-transition: .4s;background-color: #ccc;border-radius: 30px;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: .4s;}.switch > .switch-slider:before {-webkit-transition: .4s;background-color: white;border-radius: 50%;bottom: 4px;content: "";height: 22px;left: 4px;position: absolute;transition: .4s;width: 22px;}.switch > input:checked + .switch-slider:before {-ms-transform: translateX(26px);-webkit-transform: translateX(26px);transform: translateX(26px);}.switch.switch-off-primary > input + .switch-slider {background-color: #2196F3;}.switch.switch-off-success > input + .switch-slider {background-color: #5cb85c;}.switch.switch-off-info > input + .switch-slider {background-color: #5bc0de;}.switch.switch-off-warning > input + .switch-slider {background-color: #f0ad4e;}.switch.switch-off-danger > input + .switch-slider {background-color: #d9534f;}.switch.switch-off-muted > input + .switch-slider {background-color: #555555;}.switch.switch-primary > input:checked + .switch-slider {background-color: #2196F3;box-shadow: 0 0 3px #2196F3;}.switch.switch-success > input:checked + .switch-slider {background-color: #5cb85c;box-shadow: 0 0 3px #5cb85c;}.switch.switch-info > input:checked + .switch-slider {background-color: #5bc0de;box-shadow: 0 0 3px #5bc0de;}.switch.switch-warning > input:checked + .switch-slider {background-color: #f0ad4e;box-shadow: 0 0 3px #f0ad4e;}.switch.switch-danger > input:checked + .switch-slider {background-color: #d9534f;box-shadow: 0 0 3px #d9534f;}.switch.switch-muted > input:checked + .switch-slider {background-color: #555555;box-shadow: 0 0 3px #555555;}.switch-label, .label-switch {float: left;font-weight: bold;padding-top: 5px;}.switch-sm {height: 26px;width: 48px;}.switch-sm > .switch-slider:before {height: 18px;width: 18px;}.switch-sm > input:checked + .switch-slider:before {-ms-transform: translateX(22px);-webkit-transform: translateX(22px);transform: translateX(22px);}.switch-lg {height: 36px;width: 58px;margin-top: 6px;}.switch-lg > .switch-slider:before {height: 28px;width: 28px;}.switch-lg > input:checked + .switch-slider:before {-ms-transform: translateX(20px);-webkit-transform: translateX(20px);transform: translateX(20px);}
-
- .chxbox {display: inline-block;height: 30px;position: relative;width: 32px;margin-top: 4px;}.chxbox > input {height: 0;opacity: 0;width: 0;}.chxbox > input:checked + .chxbox-slider:before {background-color: #2196F3;}.chxbox > .chxbox-slider {-webkit-transition: .4s;background-color: #ccc;border-style: solid;border-width: 1px;border-color: #ccc;border-radius: 0.25rem;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: .4s;}.chxbox > .chxbox-slider:before {-webkit-transition: .4s;background-color: #ffffff;border-radius: 50%;bottom: 3px;content: "";height: 22px;left: 4px;position: absolute;transition: .4s;width: 22px;}.chxbox.chxbox-off-primary > input + .chxbox-slider {background-color: #2196F3;}.chxbox.chxbox-off-success > input + .chxbox-slider {background-color: #5cb85c;}.chxbox.chxbox-off-info > input + .chxbox-slider {background-color: #5bc0de;}.chxbox.chxbox-off-warning > input + .chxbox-slider {background-color: #f0ad4e;}.chxbox.chxbox-off-danger > input + .chxbox-slider {background-color: #d9534f;}.chxbox.chxbox-off-muted > input + .chxbox-slider {background-color: #555555;}.chxbox.chxbox-primary > input:checked + .chxbox-slider:before {background-color: #2196F3;box-shadow: 0 0 3px #2196F3;}.chxbox.chxbox-success > input:checked + .chxbox-slider:before {background-color: #5cb85c;box-shadow: 0 0 3px #5cb85c;}.chxbox.chxbox-info > input:checked + .chxbox-slider:before {background-color: #5bc0de;box-shadow: 0 0 3px #5bc0de;}.chxbox.chxbox-warning > input:checked + .chxbox-slider:before {background-color: #f0ad4e;box-shadow: 0 0 3px #f0ad4e;}.chxbox.chxbox-danger > input:checked + .chxbox-slider:before {background-color: #d9534f;box-shadow: 0 0 3px #d9534f;}.chxbox.chxbox-muted > input:checked + .chxbox-slider:before {background-color: #555555;box-shadow: 0 0 3px #555555;}.chxbox-sm {height: 26px;width: 28px;margin-top: 3px;}.chxbox-sm > .chxbox-slider:before {height: 18px;width: 18px;}.chxbox-lg {height: 36px;width: 38px;margin-top: 6px;}.chxbox-lg > .chxbox-slider:before {height: 28px;width: 28px;}
\ No newline at end of file
diff --git a/src/checkbox.css b/src/checkbox.css
index dcaa23e..bfe2495 100644
--- a/src/checkbox.css
+++ b/src/checkbox.css
@@ -1,9 +1,6 @@
 .chxbox {
     display: inline-block;
-    height: 30px;
     position: relative;
-    width: 32px;
-    margin-top: 4px;
 }
 
 .chxbox > input {
@@ -17,7 +14,7 @@
 }
 
 .chxbox > .chxbox-slider {
-    -webkit-transition: .4s;
+    -webkit-transition: .2s;
     background-color: #ccc;
     border-style: solid;
     border-width: 1px;
@@ -29,54 +26,162 @@
     position: absolute;
     right: 0;
     top: 0;
-    transition: .4s;
+    transition: .2s;
 }
 
 .chxbox > .chxbox-slider:before {
-    -webkit-transition: .4s;
+    -webkit-transition: .2s;
     background-color: #ffffff;
     border-radius: 50%;
-    bottom: 3px;
     content: "";
-    height: 22px;
-    left: 4px;
     position: absolute;
-    transition: .4s;
-    width: 22px;
+    transition: .2s;
 }
 
 
-.chxbox.chxbox-off-primary > input + .chxbox-slider { background-color: #2196F3; }
-.chxbox.chxbox-off-success > input + .chxbox-slider { background-color: #5cb85c; }
-.chxbox.chxbox-off-info > input + .chxbox-slider    { background-color: #5bc0de; }
-.chxbox.chxbox-off-warning > input + .chxbox-slider { background-color: #f0ad4e; }
-.chxbox.chxbox-off-danger > input + .chxbox-slider  { background-color: #d9534f; }
-.chxbox.chxbox-off-muted > input + .chxbox-slider   { background-color: #555555; }
 
-.chxbox.chxbox-primary > input:checked + .chxbox-slider:before { background-color: #2196F3; box-shadow: 0 0 3px #2196F3; }
-.chxbox.chxbox-success > input:checked + .chxbox-slider:before { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; }
-.chxbox.chxbox-info > input:checked + .chxbox-slider:before    { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; }
-.chxbox.chxbox-warning > input:checked + .chxbox-slider:before { background-color: #f0ad4e; box-shadow: 0 0 3px #f0ad4e; }
-.chxbox.chxbox-danger > input:checked + .chxbox-slider:before  { background-color: #d9534f; box-shadow: 0 0 3px #d9534f; }
-.chxbox.chxbox-muted > input:checked + .chxbox-slider:before   { background-color: #555555; box-shadow: 0 0 3px #555555; }
+
+.chxbox.chxbox-primary > input:checked + .chxbox-slider:before {
+    background-color: #2196F3;
+    box-shadow: 0 0 3px #2196F3;
+}
+.chxbox.chxbox-success > input:checked + .chxbox-slider:before {
+    background-color: #5cb85c;
+    box-shadow: 0 0 3px #5cb85c;
+}
+.chxbox.chxbox-info > input:checked + .chxbox-slider:before    {
+    background-color: #5bc0de;
+    box-shadow: 0 0 3px #5bc0de;
+}
+.chxbox.chxbox-warning > input:checked + .chxbox-slider:before {
+    background-color: #f0ad4e;
+    box-shadow: 0 0 3px #f0ad4e;
+}
+.chxbox.chxbox-danger > input:checked + .chxbox-slider:before  {
+    background-color: #d9534f;
+    box-shadow: 0 0 3px #d9534f;
+}
+.chxbox.chxbox-muted > input:checked + .chxbox-slider:before   {
+    background-color: #555555;
+    box-shadow: 0 0 3px #555555;
+}
+
+
+
+
+.chxbox.chxbox-off-primary > input + .chxbox-slider {
+    background-color: #2196F3;
+}
+.chxbox.chxbox-off-success > input + .chxbox-slider {
+    background-color: #5cb85c;
+}
+.chxbox.chxbox-off-info > input + .chxbox-slider    {
+    background-color: #5bc0de;
+}
+.chxbox.chxbox-off-warning > input + .chxbox-slider {
+    background-color: #f0ad4e;
+}
+.chxbox.chxbox-off-danger > input + .chxbox-slider  {
+    background-color: #d9534f;
+}
+.chxbox.chxbox-off-muted > input + .chxbox-slider   {
+    background-color: #555555;
+}
+
+
+
+
+.chxbox {
+    font-size: 1rem;
+    height: 2.4em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    width: 2.4em;
+}
+.chxbox > .chxbox-slider:before {
+    bottom: 0.45em;
+    height: 1.375em;
+    left: 0.45em;
+    width: 1.375em;
+}
+
+
+.chxbox-xs {
+    font-size: .65rem;
+    height: 2.4em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    width: 2.4em;
+}
+.chxbox-xs > .chxbox-slider:before {
+    bottom: 0.4em;
+    height: 1.4em;
+    left: 0.4em;
+    width: 1.4em;
+}
 
 
 .chxbox-sm {
-    height: 26px;
-    width: 28px;
-    margin-top: 3px;
+    font-size: .875rem;
+    height: 2.2em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    width: 2.2em;
 }
 .chxbox-sm > .chxbox-slider:before {
-    height: 18px;
-    width: 18px;
+    bottom: 0.3em;
+    height: 1.45em;
+    left: 0.3em;
+    width: 1.45em;
 }
 
+
+.chxbox-md {
+    font-size: 1rem;
+    height: 2.4em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    width: 2.4em;
+}
+.chxbox-md > .chxbox-slider:before {
+    bottom: 0.45em;
+    height: 1.375em;
+    left: 0.45em;
+    width: 1.375em;
+}
+
+
 .chxbox-lg {
-    height: 36px;
-    width: 38px;
-    margin-top: 6px;
+    font-size: 1.25rem;
+    height: 2.45em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.5rem 1rem;
+    width: 2.45em;
 }
 .chxbox-lg > .chxbox-slider:before {
-    height: 28px;
-    width: 28px;
+    bottom: 0.5em;
+    height: 1.35em;
+    left: 0.5em;
+    width: 1.35em;
+}
+
+
+.chxbox-xl {
+    font-size: 1.5rem;
+    height: 2.2em;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.5rem 1rem;
+    width: 2.2em;
+}
+.chxbox-xl > .chxbox-slider:before {
+    bottom: 0.35em;
+    height: 1.45em;
+    left: 0.35em;
+    width: 1.45em;
 }
\ No newline at end of file
diff --git a/src/switch.css b/src/switch.css
index c44dbd1..31a714f 100644
--- a/src/switch.css
+++ b/src/switch.css
@@ -1,9 +1,6 @@
 .switch {
     display: inline-block;
-    height: 30px;
     position: relative;
-    width: 56px;
-    margin-top: 4px;
 }
 
 .switch > input {
@@ -13,7 +10,7 @@
 }
 
 .switch > .switch-slider {
-    -webkit-transition: .4s;
+    -webkit-transition: .2s;
     background-color: #ccc;
     border-radius: 30px;
     bottom: 0;
@@ -22,20 +19,16 @@
     position: absolute;
     right: 0;
     top: 0;
-    transition: .4s;
+    transition: .2s;
 }
 
 .switch > .switch-slider:before {
-    -webkit-transition: .4s;
+    -webkit-transition: .2s;
     background-color: white;
     border-radius: 50%;
-    bottom: 4px;
     content: "";
-    height: 22px;
-    left: 4px;
     position: absolute;
-    transition: .4s;
-    width: 22px;
+    transition: .2s;
 }
 
 .switch > input:checked + .switch-slider:before {
@@ -44,20 +37,6 @@
     transform: translateX(26px);
 }
 
-.switch.switch-off-primary > input + .switch-slider { background-color: #2196F3; }
-.switch.switch-off-success > input + .switch-slider { background-color: #5cb85c; }
-.switch.switch-off-info > input + .switch-slider    { background-color: #5bc0de; }
-.switch.switch-off-warning > input + .switch-slider { background-color: #f0ad4e; }
-.switch.switch-off-danger > input + .switch-slider  { background-color: #d9534f; }
-.switch.switch-off-muted > input + .switch-slider   { background-color: #555555; }
-
-.switch.switch-primary > input:checked + .switch-slider { background-color: #2196F3; box-shadow: 0 0 3px #2196F3; }
-.switch.switch-success > input:checked + .switch-slider { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; }
-.switch.switch-info > input:checked + .switch-slider    { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; }
-.switch.switch-warning > input:checked + .switch-slider { background-color: #f0ad4e; box-shadow: 0 0 3px #f0ad4e; }
-.switch.switch-danger > input:checked + .switch-slider  { background-color: #d9534f; box-shadow: 0 0 3px #d9534f; }
-.switch.switch-muted > input:checked + .switch-slider   { background-color: #555555; box-shadow: 0 0 3px #555555; }
-
 .switch-label, .label-switch {
     float: left;
     font-weight: bold;
@@ -65,32 +44,181 @@
 }
 
 
+
+
+.switch.switch-primary > input:checked + .switch-slider {
+    background-color: #2196F3;
+    box-shadow: 0 0 3px #2196F3;
+}
+.switch.switch-success > input:checked + .switch-slider {
+    background-color: #5cb85c;
+    box-shadow: 0 0 3px #5cb85c;
+}
+.switch.switch-info > input:checked + .switch-slider    {
+    background-color: #5bc0de;
+    box-shadow: 0 0 3px #5bc0de;
+}
+.switch.switch-warning > input:checked + .switch-slider {
+    background-color: #f0ad4e;
+    box-shadow: 0 0 3px #f0ad4e;
+}
+.switch.switch-danger > input:checked + .switch-slider  {
+    background-color: #d9534f;
+    box-shadow: 0 0 3px #d9534f;
+}
+.switch.switch-muted > input:checked + .switch-slider   {
+    background-color: #555555;
+    box-shadow: 0 0 3px #555555;
+}
+
+
+
+
+.switch.switch-off-primary > input + .switch-slider {
+    background-color: #2196F3;
+}
+.switch.switch-off-success > input + .switch-slider {
+    background-color: #5cb85c;
+}
+.switch.switch-off-info > input + .switch-slider    {
+    background-color: #5bc0de;
+}
+.switch.switch-off-warning > input + .switch-slider {
+    background-color: #f0ad4e;
+}
+.switch.switch-off-danger > input + .switch-slider  {
+    background-color: #d9534f;
+}
+.switch.switch-off-muted > input + .switch-slider   {
+    background-color: #555555;
+}
+
+
+
+
+.switch {
+    font-size: 1rem;
+    height: calc(1.5em + 0.75rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    width: 4em;
+}
+.switch > .switch-slider:before {
+    bottom: 0.5em;
+    height: 1.375em;
+    left: 0.5em;
+    width: 1.375em;
+}
+.switch > input:checked + .switch-slider:before {
+    -ms-transform: translateX(1.625em);
+    -webkit-transform: translateX(1.625em);
+    transform: translateX(1.625em);
+}
+
+
+
+
+.switch-xs {
+    font-size: .65rem;
+    height: calc(1.5em + 0.5rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    width: 4em;
+}
+.switch-xs > .switch-slider:before {
+    bottom: 0.5em;
+    height: 1.4em;
+    left: 0.5em;
+    width: 1.4em;
+}
+.switch-xs > input:checked + .switch-slider:before {
+    -ms-transform: translateX(1.6em);
+    -webkit-transform: translateX(1.6em);
+    transform: translateX(1.6em);
+}
+
+
 .switch-sm {
-    height: 26px;
-    width: 48px;
+    font-size: .875rem;
+    height: calc(1.5em + 0.5rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    width: 4em;
 }
 .switch-sm > .switch-slider:before {
-    height: 18px;
-    width: 18px;
+    bottom: 0.4em;
+    height: 1.4em;
+    left: 0.4em;
+    width: 1.4em;
 }
 .switch-sm > input:checked + .switch-slider:before {
-    -ms-transform: translateX(22px);
-    -webkit-transform: translateX(22px);
-    transform: translateX(22px);
+    -ms-transform: translateX(1.8em);
+    -webkit-transform: translateX(1.8em);
+    transform: translateX(1.8em);
+}
+
+
+.switch-md {
+    font-size: 1rem;
+    height: calc(1.5em + 0.75rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    width: 4em;
+}
+.switch-md > .switch-slider:before {
+    bottom: 0.5em;
+    height: 1.375em;
+    left: 0.5em;
+    width: 1.375em;
+}
+.switch-md > input:checked + .switch-slider:before {
+    -ms-transform: translateX(1.625em);
+    -webkit-transform: translateX(1.625em);
+    transform: translateX(1.625em);
 }
 
 
 .switch-lg {
-    height: 36px;
-    width: 58px;
-    margin-top: 6px;
+    font-size: 1.25rem;
+    height: calc(1.5em + 1rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.5rem 1rem;
+    width: 4em;
 }
 .switch-lg > .switch-slider:before {
-    height: 28px;
-    width: 28px;
+    bottom: 0.55em;
+    height: 1.35em;
+    left: 0.55em;
+    width: 1.35em;
 }
 .switch-lg > input:checked + .switch-slider:before {
-    -ms-transform: translateX(20px);
-    -webkit-transform: translateX(20px);
-    transform: translateX(20px);
+    -ms-transform: translateX(1.55em);
+    -webkit-transform: translateX(1.55em);
+    transform: translateX(1.55em);
 }
+
+
+.switch-xl {
+    font-size: 1.5rem;
+    height: calc(1.5em + 1rem + 2px);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0.5rem 1rem;
+    width: 4em;
+}
+.switch-xl > .switch-slider:before {
+    bottom: 0.45em;
+    height: 1.35em;
+    left: 0.45em;
+    width: 1.35em;
+}
+.switch-xl > input:checked + .switch-slider:before {
+    -ms-transform: translateX(1.75em);
+    -webkit-transform: translateX(1.75em);
+    transform: translateX(1.75em);
+}
\ No newline at end of file

From 2d7fa31cb4f86c81e5095350c8dad509a19e8133 Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Thu, 7 Sep 2023 01:07:45 +0100
Subject: [PATCH 2/2] Updated minified css

---
 bsformcontrols4.min.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/bsformcontrols4.min.css b/bsformcontrols4.min.css
index 5754747..5e45b93 100644
--- a/bsformcontrols4.min.css
+++ b/bsformcontrols4.min.css
@@ -2,3 +2,6 @@
  * BSFormControls4
  * @version v1.0.0.126 (2023/09/07 00:26)
  */
+.switch{display:inline-block;position:relative}.switch>input{height:0;opacity:0;width:0}.switch>.switch-slider{-webkit-transition:.2s;background-color:#ccc;border-radius:30px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.2s}.switch>.switch-slider:before{-webkit-transition:.2s;background-color:#fff;border-radius:50%;content:"";position:absolute;transition:.2s}.switch>input:checked+.switch-slider:before{-ms-transform:translateX(26px);-webkit-transform:translateX(26px);transform:translateX(26px)}.switch-label,.label-switch{float:left;font-weight:700;padding-top:5px}.switch.switch-primary>input:checked+.switch-slider{background-color:#2196F3;box-shadow:0 0 3px #2196F3}.switch.switch-success>input:checked+.switch-slider{background-color:#5cb85c;box-shadow:0 0 3px #5cb85c}.switch.switch-info>input:checked+.switch-slider{background-color:#5bc0de;box-shadow:0 0 3px #5bc0de}.switch.switch-warning>input:checked+.switch-slider{background-color:#f0ad4e;box-shadow:0 0 3px #f0ad4e}.switch.switch-danger>input:checked+.switch-slider{background-color:#d9534f;box-shadow:0 0 3px #d9534f}.switch.switch-muted>input:checked+.switch-slider{background-color:#555;box-shadow:0 0 3px #555}.switch.switch-off-primary>input+.switch-slider{background-color:#2196F3}.switch.switch-off-success>input+.switch-slider{background-color:#5cb85c}.switch.switch-off-info>input+.switch-slider{background-color:#5bc0de}.switch.switch-off-warning>input+.switch-slider{background-color:#f0ad4e}.switch.switch-off-danger>input+.switch-slider{background-color:#d9534f}.switch.switch-off-muted>input+.switch-slider{background-color:#555}.switch{font-size:1rem;height:calc(1.5em + 0.75rem + 2px);line-height:1.5;margin:0;padding:.375rem .75rem;width:4em}.switch>.switch-slider:before{bottom:.5em;height:1.375em;left:.5em;width:1.375em}.switch>input:checked+.switch-slider:before{-ms-transform:translateX(1.625em);-webkit-transform:translateX(1.625em);transform:translateX(1.625em)}.switch-xs{font-size:.65rem;height:calc(1.5em + 0.5rem + 2px);line-height:1.5;margin:0;padding:.25rem .5rem;width:4em}.switch-xs>.switch-slider:before{bottom:.5em;height:1.4em;left:.5em;width:1.4em}.switch-xs>input:checked+.switch-slider:before{-ms-transform:translateX(1.6em);-webkit-transform:translateX(1.6em);transform:translateX(1.6em)}.switch-sm{font-size:.875rem;height:calc(1.5em + 0.5rem + 2px);line-height:1.5;margin:0;padding:.25rem .5rem;width:4em}.switch-sm>.switch-slider:before{bottom:.4em;height:1.4em;left:.4em;width:1.4em}.switch-sm>input:checked+.switch-slider:before{-ms-transform:translateX(1.8em);-webkit-transform:translateX(1.8em);transform:translateX(1.8em)}.switch-md{font-size:1rem;height:calc(1.5em + 0.75rem + 2px);line-height:1.5;margin:0;padding:.375rem .75rem;width:4em}.switch-md>.switch-slider:before{bottom:.5em;height:1.375em;left:.5em;width:1.375em}.switch-md>input:checked+.switch-slider:before{-ms-transform:translateX(1.625em);-webkit-transform:translateX(1.625em);transform:translateX(1.625em)}.switch-lg{font-size:1.25rem;height:calc(1.5em + 1rem + 2px);line-height:1.5;margin:0;padding:.5rem 1rem;width:4em}.switch-lg>.switch-slider:before{bottom:.55em;height:1.35em;left:.55em;width:1.35em}.switch-lg>input:checked+.switch-slider:before{-ms-transform:translateX(1.55em);-webkit-transform:translateX(1.55em);transform:translateX(1.55em)}.switch-xl{font-size:1.5rem;height:calc(1.5em + 1rem + 2px);line-height:1.5;margin:0;padding:.5rem 1rem;width:4em}.switch-xl>.switch-slider:before{bottom:.45em;height:1.35em;left:.45em;width:1.35em}.switch-xl>input:checked+.switch-slider:before{-ms-transform:translateX(1.75em);-webkit-transform:translateX(1.75em);transform:translateX(1.75em)}
+
+.chxbox{display:inline-block;position:relative}.chxbox>input{height:0;opacity:0;width:0}.chxbox>input:checked+.chxbox-slider:before{background-color:#2196F3}.chxbox>.chxbox-slider{-webkit-transition:.2s;background-color:#ccc;border-style:solid;border-width:1px;border-color:#ccc;border-radius:.25rem;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.2s}.chxbox>.chxbox-slider:before{-webkit-transition:.2s;background-color:#fff;border-radius:50%;content:"";position:absolute;transition:.2s}.chxbox.chxbox-primary>input:checked+.chxbox-slider:before{background-color:#2196F3;box-shadow:0 0 3px #2196F3}.chxbox.chxbox-success>input:checked+.chxbox-slider:before{background-color:#5cb85c;box-shadow:0 0 3px #5cb85c}.chxbox.chxbox-info>input:checked+.chxbox-slider:before{background-color:#5bc0de;box-shadow:0 0 3px #5bc0de}.chxbox.chxbox-warning>input:checked+.chxbox-slider:before{background-color:#f0ad4e;box-shadow:0 0 3px #f0ad4e}.chxbox.chxbox-danger>input:checked+.chxbox-slider:before{background-color:#d9534f;box-shadow:0 0 3px #d9534f}.chxbox.chxbox-muted>input:checked+.chxbox-slider:before{background-color:#555;box-shadow:0 0 3px #555}.chxbox.chxbox-off-primary>input+.chxbox-slider{background-color:#2196F3}.chxbox.chxbox-off-success>input+.chxbox-slider{background-color:#5cb85c}.chxbox.chxbox-off-info>input+.chxbox-slider{background-color:#5bc0de}.chxbox.chxbox-off-warning>input+.chxbox-slider{background-color:#f0ad4e}.chxbox.chxbox-off-danger>input+.chxbox-slider{background-color:#d9534f}.chxbox.chxbox-off-muted>input+.chxbox-slider{background-color:#555}.chxbox{font-size:1rem;height:2.4em;line-height:1.5;margin:0;padding:.375rem .75rem;width:2.4em}.chxbox>.chxbox-slider:before{bottom:.45em;height:1.375em;left:.45em;width:1.375em}.chxbox-xs{font-size:.65rem;height:2.4em;line-height:1.5;margin:0;padding:.25rem .5rem;width:2.4em}.chxbox-xs>.chxbox-slider:before{bottom:.4em;height:1.4em;left:.4em;width:1.4em}.chxbox-sm{font-size:.875rem;height:2.2em;line-height:1.5;margin:0;padding:.25rem .5rem;width:2.2em}.chxbox-sm>.chxbox-slider:before{bottom:.3em;height:1.45em;left:.3em;width:1.45em}.chxbox-md{font-size:1rem;height:2.4em;line-height:1.5;margin:0;padding:.375rem .75rem;width:2.4em}.chxbox-md>.chxbox-slider:before{bottom:.45em;height:1.375em;left:.45em;width:1.375em}.chxbox-lg{font-size:1.25rem;height:2.45em;line-height:1.5;margin:0;padding:.5rem 1rem;width:2.45em}.chxbox-lg>.chxbox-slider:before{bottom:.5em;height:1.35em;left:.5em;width:1.35em}.chxbox-xl{font-size:1.5rem;height:2.2em;line-height:1.5;margin:0;padding:.5rem 1rem;width:2.2em}.chxbox-xl>.chxbox-slider:before{bottom:.35em;height:1.45em;left:.35em;width:1.45em}
\ No newline at end of file