+
+
+
diff --git a/bsformcontrols4.min.css b/bsformcontrols4.min.css
index cc3a66e..5e45b93 100644
--- a/bsformcontrols4.min.css
+++ b/bsformcontrols4.min.css
@@ -1,7 +1,7 @@
/***
* 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);}
+.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;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
+.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
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