Ray/bsformcontrols4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Ray:3418d8c8b7acf0d79d126b6e04926d2a465505aa
Branches Tags
Ray:master
Ray:release/1.0.0.126
Ray:release/1.0.0.066
..
compare: Ray:1e3450cb0fe121974a24d4895b7ad03372e19e1b
Branches Tags
Ray:master
Ray:release/1.0.0.126
Ray:release/1.0.0.066

No commits in common. "3418d8c8b7acf0d79d126b6e04926d2a465505aa" and "1e3450cb0fe121974a24d4895b7ad03372e19e1b" have entirely different histories.
3418d8c8b7 ... 1e3450cb0f

4 changed files with 92 additions and 366 deletions
Show Stats Expand all files Collapse all files

73
bs4-test.html
View File

@ -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> <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="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/switch.css" rel="stylesheet"> -->
<link href="src/checkbox.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> <title></title>
</head> </head>
@ -26,7 +26,6 @@
<div class="row pb-3 mb-3"> <div class="row pb-3 mb-3">
<div class="col-6 border-right"> <div class="col-6 border-right">
<!--
<div class="pb-3 mb-3 border-bottom"> <div class="pb-3 mb-3 border-bottom">
<p><b>Textbox Examples (BS4)</b></p> <p><b>Textbox Examples (BS4)</b></p>
@ -51,23 +50,13 @@
</div> </div>
</div> </div>
</div> </div>
-->
<div class="pb-3 mb-3 border-bottom"> <div class="pb-3 mb-3 border-bottom">
<p><b>Switch Examples</b></p> <p><b>Switch Examples</b></p>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="switch16" class="col-sm-4 col-form-label col-form-label-sm">Toggle Switch XS</label> <label for="switch6" class="col-sm-4 col-form-label-sm">Toggle Switch</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"> <div class="col-sm-8">
<label class="switch switch-sm switch-primary"> <label class="switch switch-sm switch-primary">
<input id="switch6" type="checkbox" /> <input id="switch6" type="checkbox" />
@ -77,9 +66,9 @@
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="switch2" class="col-sm-4 col-form-label col-form-label-md">Toggle Switch MD</label> <label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
<div class="col-sm-8"> <div class="col-sm-8">
<label class="switch switch-md switch-primary"> <label class="switch switch-primary">
<input id="switch2" type="checkbox" /> <input id="switch2" type="checkbox" />
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
@ -87,7 +76,7 @@
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="switch1" class="col-sm-4 col-form-label col-form-label-lg">Toggle Switch LG</label> <label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
<div class="col-sm-8"> <div class="col-sm-8">
<label class="switch switch-lg switch-primary"> <label class="switch switch-lg switch-primary">
<input id="switch1" type="checkbox" /> <input id="switch1" type="checkbox" />
@ -95,25 +84,15 @@
</label> </label>
</div> </div>
</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>
<div class="pb-3 mb-3 border-bottom"> <div class="pb-3 mb-3 border-bottom">
<p><b>Checkbox Examples</b></p> <p><b>Checkbox Examples</b></p>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="checkbox1" class="col-sm-6 col-form-label-sm">Toggle Checkbox XS</label> <label for="checkbox1" class="col-sm-4 col-form-label-sm">Toggle Checkbox</label>
<div class="col-sm-6"> <div class="col-sm-8">
<label class="chxbox chxbox-xs"> <label class="chxbox chxbox-sm">
<input id="checkbox1" type="checkbox" /> <input id="checkbox1" type="checkbox" />
<span class="chxbox-slider"></span> <span class="chxbox-slider"></span>
</label> </label>
@ -121,9 +100,9 @@
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="checkbox2" class="col-sm-6 col-form-label">Toggle Checkbox SM</label> <label for="checkbox2" class="col-sm-4 col-form-label">Toggle Checkbox</label>
<div class="col-sm-6"> <div class="col-sm-8">
<label class="chxbox chxbox-sm"> <label class="chxbox">
<input id="checkbox2" type="checkbox" /> <input id="checkbox2" type="checkbox" />
<span class="chxbox-slider"></span> <span class="chxbox-slider"></span>
</label> </label>
@ -131,29 +110,9 @@
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="checkbox22" class="col-sm-6 col-form-label">Toggle Checkbox MD</label> <label for="checkbox3" class="col-sm-4 col-form-label-lg">Toggle Checkbox</label>
<div class="col-sm-6"> <div class="col-sm-8">
<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"> <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" /> <input id="checkbox3" type="checkbox" />
<span class="chxbox-slider"></span> <span class="chxbox-slider"></span>
</label> </label>

6
bsformcontrols4.min.css vendored
View File

@ -1,7 +1,7 @@
/*** /***
* BSFormControls4 * BSFormControls4
* @version v1.0.0.126 (2023/09/07 00:26) * @version v1.0.0.066 (2023/08/21 23:39)
*/ */
.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)} .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;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} .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;}

171
src/checkbox.css
View File

@ -1,6 +1,9 @@
.chxbox { .chxbox {
display: inline-block; display: inline-block;
height: 30px;
position: relative; position: relative;
width: 32px;
margin-top: 4px;
} }
.chxbox > input { .chxbox > input {
@ -14,7 +17,7 @@
} }
.chxbox > .chxbox-slider { .chxbox > .chxbox-slider {
-webkit-transition: .2s; -webkit-transition: .4s;
background-color: #ccc; background-color: #ccc;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
@ -26,162 +29,54 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
transition: .2s; transition: .4s;
} }
.chxbox > .chxbox-slider:before { .chxbox > .chxbox-slider:before {
-webkit-transition: .2s; -webkit-transition: .4s;
background-color: #ffffff; background-color: #ffffff;
border-radius: 50%; border-radius: 50%;
bottom: 3px;
content: ""; content: "";
height: 22px;
left: 4px;
position: absolute; position: absolute;
transition: .2s; 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-primary > input:checked + .chxbox-slider:before { .chxbox.chxbox-success > input:checked + .chxbox-slider:before { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; }
background-color: #2196F3; .chxbox.chxbox-info > input:checked + .chxbox-slider:before { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; }
box-shadow: 0 0 3px #2196F3; .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-success > input:checked + .chxbox-slider:before { .chxbox.chxbox-muted > input:checked + .chxbox-slider:before { background-color: #555555; box-shadow: 0 0 3px #555555; }
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 { .chxbox-sm {
font-size: .875rem; height: 26px;
height: 2.2em; width: 28px;
line-height: 1.5; margin-top: 3px;
margin: 0;
padding: 0.25rem 0.5rem;
width: 2.2em;
} }
.chxbox-sm > .chxbox-slider:before { .chxbox-sm > .chxbox-slider:before {
bottom: 0.3em; height: 18px;
height: 1.45em; width: 18px;
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 { .chxbox-lg {
font-size: 1.25rem; height: 36px;
height: 2.45em; width: 38px;
line-height: 1.5; margin-top: 6px;
margin: 0;
padding: 0.5rem 1rem;
width: 2.45em;
} }
.chxbox-lg > .chxbox-slider:before { .chxbox-lg > .chxbox-slider:before {
bottom: 0.5em; height: 28px;
height: 1.35em; width: 28px;
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;
} }

208
src/switch.css
View File

@ -1,6 +1,9 @@
.switch { .switch {
display: inline-block; display: inline-block;
height: 30px;
position: relative; position: relative;
width: 56px;
margin-top: 4px;
} }
.switch > input { .switch > input {
@ -10,7 +13,7 @@
} }
.switch > .switch-slider { .switch > .switch-slider {
-webkit-transition: .2s; -webkit-transition: .4s;
background-color: #ccc; background-color: #ccc;
border-radius: 30px; border-radius: 30px;
bottom: 0; bottom: 0;
@ -19,16 +22,20 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
transition: .2s; transition: .4s;
} }
.switch > .switch-slider:before { .switch > .switch-slider:before {
-webkit-transition: .2s; -webkit-transition: .4s;
background-color: white; background-color: white;
border-radius: 50%; border-radius: 50%;
bottom: 4px;
content: ""; content: "";
height: 22px;
left: 4px;
position: absolute; position: absolute;
transition: .2s; transition: .4s;
width: 22px;
} }
.switch > input:checked + .switch-slider:before { .switch > input:checked + .switch-slider:before {
@ -37,6 +44,20 @@
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 { .switch-label, .label-switch {
float: left; float: left;
font-weight: bold; font-weight: bold;
@ -44,181 +65,32 @@
} }
.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 { .switch-sm {
font-size: .875rem; height: 26px;
height: calc(1.5em + 0.5rem + 2px); width: 48px;
line-height: 1.5;
margin: 0;
padding: 0.25rem 0.5rem;
width: 4em;
} }
.switch-sm > .switch-slider:before { .switch-sm > .switch-slider:before {
bottom: 0.4em; height: 18px;
height: 1.4em; width: 18px;
left: 0.4em;
width: 1.4em;
} }
.switch-sm > input:checked + .switch-slider:before { .switch-sm > input:checked + .switch-slider:before {
-ms-transform: translateX(1.8em); -ms-transform: translateX(22px);
-webkit-transform: translateX(1.8em); -webkit-transform: translateX(22px);
transform: translateX(1.8em); transform: translateX(22px);
}
.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 { .switch-lg {
font-size: 1.25rem; height: 36px;
height: calc(1.5em + 1rem + 2px); width: 58px;
line-height: 1.5; margin-top: 6px;
margin: 0;
padding: 0.5rem 1rem;
width: 4em;
} }
.switch-lg > .switch-slider:before { .switch-lg > .switch-slider:before {
bottom: 0.55em; height: 28px;
height: 1.35em; width: 28px;
left: 0.55em;
width: 1.35em;
} }
.switch-lg > input:checked + .switch-slider:before { .switch-lg > input:checked + .switch-slider:before {
-ms-transform: translateX(1.55em); -ms-transform: translateX(20px);
-webkit-transform: translateX(1.55em); -webkit-transform: translateX(20px);
transform: translateX(1.55em); transform: translateX(20px);
} }
.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);
}