commit 1e3450cb0fe121974a24d4895b7ad03372e19e1b Author: Ray Date: Mon Aug 21 23:41:12 2023 +0100 Initial commit diff --git a/bs4-test.html b/bs4-test.html new file mode 100644 index 0000000..850cb21 --- /dev/null +++ b/bs4-test.html @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+

Textbox Examples (BS4)

+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ + +
+

Switch Examples

+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+

Checkbox Examples

+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/bsformcontrols4.min.css b/bsformcontrols4.min.css new file mode 100644 index 0000000..cc3a66e --- /dev/null +++ b/bsformcontrols4.min.css @@ -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;} \ No newline at end of file diff --git a/src/checkbox.css b/src/checkbox.css new file mode 100644 index 0000000..dcaa23e --- /dev/null +++ b/src/checkbox.css @@ -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; +} \ No newline at end of file diff --git a/src/switch.css b/src/switch.css new file mode 100644 index 0000000..c44dbd1 --- /dev/null +++ b/src/switch.css @@ -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); +}