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

Changed checkbox + switch with full range of sizes

Browse Source
This commit is contained in:
Ray 2023-09-07 01:04:21 +01:00
parent 1e3450cb0f
commit 207b075e28
4 changed files with 364 additions and 93 deletions
Show Stats Download Patch File Download Diff File 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>
<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>

5
bsformcontrols4.min.css vendored
View File

@ -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;}

171
src/checkbox.css
View File

@ -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;
}

208
src/switch.css
View File

@ -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);
}