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

Initial commit

Browse Source
This commit is contained in:
Ray 2023-08-21 23:41:12 +01:00
commit 1e3450cb0f
4 changed files with 316 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
bs4-test.html Normal file
View File

@ -0,0 +1,131 @@
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<!-- jquery -->
<script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/jquery/3.7.0/dist/jquery.min.js"></script>
<!-- bootstrap -->
<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="bsformcontrols4.min.css" rel="stylesheet">
<title></title>
</head>
<body class="py-5">
<div class="container">
<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>
<div class="mb-3 row">
<label for="control6" class="col-sm-4 col-form-label col-form-label-sm">Textbox</label>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="control6" placeholder="textbox">
</div>
</div>
<div class="mb-3 row">
<label for="control2" class="col-sm-4 col-form-label">Textbox</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="control2" placeholder="textbox">
</div>
</div>
<div class="mb-3 row">
<label for="control4" class="col-sm-4 col-form-label col-form-label-lg">Textbox</label>
<div class="col-sm-8">
<input type="text" class="form-control form-control-lg" id="control4" placeholder="textbox">
</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>
<div class="col-sm-8">
<label class="switch switch-sm switch-primary">
<input id="switch6" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
<div class="col-sm-8">
<label class="switch switch-primary">
<input id="switch2" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
<div class="col-sm-8">
<label class="switch switch-lg switch-primary">
<input id="switch1" 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">
<input id="checkbox1" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</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">
<input id="checkbox2" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</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 class="chxbox chxbox-lg">
<input id="checkbox3" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</body>
</html>

7
bsformcontrols4.min.css vendored Normal file
View File

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

82
src/checkbox.css Normal file
View File

@ -0,0 +1,82 @@
.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;
}

96
src/switch.css Normal file
View File

@ -0,0 +1,96 @@
.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);
}