Updates to release v1.5.7 fix #55 fix #56 fix #57 fix #58

kartik-v · Sep 19, 2021 · 93f411c · 93f411c
1 parent 326460d
commit 93f411c
Show file tree

Hide file tree

Showing 17 changed files with 2,586 additions and 801 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,6 +1,17 @@
 Change Log: `bootstrap-checkbox-x`
 ==================================
 
+## Version 1.5.7
+
+**Date**: 19-Sep-2021
+
+- (enh #58): New boolean property `useCrossIcon` for checked indicator.
+- (enh #57): Revamp bootstrap checkbox-x markup for better styling & alignment across Bootstrap versions.
+    - New CSS class `.cbx-krajee` for the container markup to enclose all checkboxes with their labels
+    - Automated label and input vertical alignment for checkboxes
+- (enh #56): Enhancements to support all bootstrap versions (5.x, 4.x. and 3.x) enhancement
+- (enh #55): Use enhanced SVG icons
+
 ## Version 1.5.6
 
 **Date**: 19-May-2021

diff --git a/README.md b/README.md
@@ -6,18 +6,21 @@
     bootstrap-checkbox-x
     <hr>
     <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU"
-       title="Donate via Paypal" target="_blank">
-        <img src="http://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" alt="Donate"/>
-    </a>
+       title="Donate via Paypal" target="_blank"><img src="https://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" height="60" alt="Donate"/></a>
+    &nbsp; &nbsp; &nbsp;
+    <a href="https://www.buymeacoffee.com/kartikv" title="Buy me a coffee" ><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="60" alt="kartikv" /></a>
 </h1>
 
+<div align="center">
+
 [![Bower version](https://badge.fury.io/bo/bootstrap-checkbox-x.svg)](http://badge.fury.io/bo/bootstrap-checkbox-x)
-[![Stable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
-[![Unstable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/unstable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
+[![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 [![License](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/license)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 [![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/downloads)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 [![Monthly Downloads](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/d/monthly)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 
+</div>
+
 An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability. 
 
 With v1.5.5, the plugin now supports initializing widget on a SELECT input as well (other than a CHECKBOX or TEXT input).
@@ -32,7 +35,7 @@ With v1.5.5, the plugin now supports initializing widget on a SELECT input as we
    - `'0'`: Checkbox is unchecked. This value is configurable through `valueUnchecked` property.
    - `''`: Checkbox is indeterminate. This value is configurable through `valueNull` property.
 3. You can set the plugin to allow **three states** or the default **two states** for the checkbox.
-4. Specifically uses Bootstrap 3.x styles & glyphs. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
+4. Specifically uses Bootstrap 5.x or 4.x or 3.x styles. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
 5. Special CSS 3 styling, to enhance the control to look like any Bootstrap 3 form control. Supports the `has-error`, `has-success`, `has-warning`
    styling states like other Bootstrap form-controls.
 6. Plugin CSS styling automatically defaults the checkboxes to inline display. You can also control the markup for block display like in checkbox lists.
@@ -46,15 +49,15 @@ With v1.5.5, the plugin now supports initializing widget on a SELECT input as we
 13. Allow third state to be configured (only on init) for two state checkboxes.
 14. Added support for displaying native checkboxes with tristate capability. When displaying native checkboxes, the advanced styling offerred by the plugin will not be available.
 
-> NOTE: The latest version of the plugin v1.5.6 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details.
+> NOTE: The latest version of the plugin v1.5.7 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details.
 
 ## Documentation and Demo
 
 View the [plugin documentation](http://plugins.krajee.com/checkbox-x) and [plugin demos](http://plugins.krajee.com/checkbox-x/demo) at Krajee JQuery plugins. 
 
 ## Pre-requisites  
 
-1. [Bootstrap 3.x](http://getbootstrap.com/)
+1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/)
 2. Latest [JQuery](http://jquery.com/)
 3. Most browsers supporting CSS3 & JQuery. 
 
@@ -87,12 +90,12 @@ You can also manually install the plugin easily to your project. Just download t
 Step 1: Load the following assets in your header. 
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/js/checkbox-x.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/js/checkbox-x.min.js"></script>
 <!-- optional if you are using themes -->
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />
 ```
 
 If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `checkbox-x.min.css` and `checkbox-x.min.js` for
@@ -106,7 +109,14 @@ Step 2: Setup your input markup with `data-toggle="checkbox-x"` to automatically
 Step 3: You can also initialize the plugin on your page using javascript as well, instead of using `data-toggle` attribute as above. For example,
 
 ```html
-<input id="input-id">
+<!-- enclose the checkbox input & label in container with class `cbx-krajee`
+  -- and also add the `cbx-label` class to your checkbox labels -->
+
+<div class="cbx-krajee">
+   <input id="input-id" type="checkbox" value="1" checked>
+   <label for="input-id" class="cbx-label"></label>
+</div>
+
 <script>
 $(document).on("ready", function() {
     // initialize with defaults
@@ -122,7 +132,7 @@ The `#input-id` is the identifier for the input on your page, which is hidden au
 
 Alternatively, you can directly call the plugin options by setting data attributes to your input field.
 
-> **Note:** You can add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (with additional enhancements for contextual colors).
+> **Note:** You should wrap the input and label in a container with CSS class `cbx-krajee` for better alignment. You should also can add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (which includes additional enhancements for contextual colors).
 
 ## License
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-checkbox-x",
-    "version": "1.5.6",
+    "version": "1.5.7",
     "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
     "authors": [
         "Kartik Visweswaran <kartikv2@gmail.com>"

diff --git a/composer.json b/composer.json
@@ -1,24 +1,32 @@
 {
-    "name": "kartik-v/bootstrap-checkbox-x",
-    "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
-    "keywords": ["bootstrap", "checkbox", "jquery", "three", "state", "indeterminate", "null"],
-    "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
-    "license": "BSD-3-Clause",
-    "authors": [
-        {
-            "name": "Kartik Visweswaran",
-            "email": "kartikv2@gmail.com",
-            "homepage": "http://www.krajee.com/"
-        }
-    ],
-    "autoload": {
-        "psr-4": {
-            "kartik\\plugins\\checkbox\\": ""
-        }
-    },
-    "extra": {
-        "branch-alias": {
-            "dev-master": "1.5.x-dev"
-        }
+  "name": "kartik-v/bootstrap-checkbox-x",
+  "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
+  "keywords": [
+    "bootstrap",
+    "checkbox",
+    "jquery",
+    "three",
+    "state",
+    "indeterminate",
+    "null"
+  ],
+  "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
+  "license": "BSD-3-Clause",
+  "authors": [
+    {
+      "name": "Kartik Visweswaran",
+      "email": "kartikv2@gmail.com",
+      "homepage": "http://www.krajee.com/"
     }
+  ],
+  "autoload": {
+    "psr-4": {
+      "kartik\\plugins\\checkbox\\": ""
+    }
+  },
+  "extra": {
+    "branch-alias": {
+      "dev-master": "1.5.x-dev"
+    }
+  }
 }
diff --git a/css/checkbox-x.css b/css/checkbox-x.css
@@ -1,6 +1,6 @@
 /*!
  * @copyright &copy; Kartik Visweswaran, Krajee.com, 2014 - 2021
- * @version 1.5.6
+ * @version 1.5.7
  *
  * An extended checkbox plugin for Bootstrap 3 that allows three states and additional styles.
  *
@@ -41,20 +41,13 @@
     cursor: pointer;
     font-weight: 400;
     margin: 0;
-    display: inline-block;
-    vertical-align: middle;
 }
 
 .cbx-label.disabled {
     cursor: not-allowed;
     opacity: .65;
 }
 
-.cbx-native input {
-    position: absolute;
-    margin: 5px;
-}
-
 label + .cbx-container, .cbx-container + label, .cbx-container + .cbx-container {
     margin-left: 5px;
 }
@@ -102,56 +95,19 @@ label + .cbx-block, .cbx-block + label, .cbx-block + .cbx-block, label .cbx-bloc
 
 .cbx-icon {
     position: absolute;
-    margin: 1px;;
+    margin: 1px;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
 }
 
-.cbx-icon-null {
-    background-color: #333;
-}
-
-.has-error .cbx-icon-null {
-    background-color: #843534;
-}
-
-.has-success .cbx-icon-null {
-    background-color: #2b542c;
-}
-
-.has-warning .cbx-icon-null {
-    background-color: #66512c;
-}
-
-.cbx-xs .cbx-icon-null {
-    padding: 4px;
-    margin: 2px;
-}
-
-.cbx-sm .cbx-icon-null {
-    padding: 5px;
-    margin: 3px;
-}
-
-.cbx-md .cbx-icon-null {
-    padding: 6px;
-    margin: 4px;
-}
-
-.cbx-lg .cbx-icon-null {
-    padding: 8px;
-    margin: 5px;
-}
-
-.cbx-xl .cbx-icon-null {
-    padding: 10px;
-    margin: 6px;
-}
-
-.cbx-disabled .cbx-icon-null {
-    background-color: #aaa;
+.cbx-icon-krajee {
+    position: absolute;
+    top: 15%;
+    bottom: 15%;
+    left: 15%;
+    right: 15%;
 }
 
 .cbx-active {
@@ -165,10 +121,9 @@ label + .cbx-block, .cbx-block + label, .cbx-block + .cbx-block, label .cbx-bloc
 }
 
 .cbx-active:hover, .cbx-active:focus {
-    border-color: #66afe9;
+    border-color: #86b7fe;
     outline: 0;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
 }
 
 .cbx-disabled {
@@ -179,54 +134,45 @@ label + .cbx-block, .cbx-block + label, .cbx-block + .cbx-block, label .cbx-bloc
 }
 
 .has-success .cbx-active {
-    border-color: #3c763d;
-    color: #2b542c;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    border-color: #198754;
+    color: #198754;
 }
 
 .has-success .cbx-active:hover, .has-success .cbx-active:focus {
-    border-color: #2b542c;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
+    border-color: #198754;
+    box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
 }
 
 .has-warning .cbx-active {
-    border-color: #8a6d3b;
-    color: #66512c;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    border-color: #ffc107;
+    color: #ffc107;
 }
 
 .has-warning .cbx-active:hover, .has-warning .cbx-active:focus {
-    border-color: #66512c;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
+    border-color: #ffc107;
+    box-shadow: 0 0 0 0.25rem rgb(255 193 7 / 25%);
 }
 
 .has-error .cbx-active {
-    border-color: #a94442;
-    color: #843534;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    border-color: #dc3545;
+    color: #dc3545;
 }
 
 .has-error .cbx-active:hover, .has-error .cbx-active:focus {
-    border-color: #843534;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
 }
 
 .has-success .cbx-label {
-    color: #2b542c;
+    color: #198754;
 }
 
 .has-warning .cbx-label {
-    color: #66512c;
+    color: #ffc107;
 }
 
 .has-error .cbx-label {
-    color: #843534;
+    color: #dc3545;
 }
 
 .cbx-block {
@@ -236,4 +182,13 @@ label + .cbx-block, .cbx-block + label, .cbx-block + .cbx-block, label .cbx-bloc
 
 .cbx-block + .cbx-block {
     margin: 5px 0 0 0;
-}
+}
+
+.cbx-krajee, .cbx-enclosed {
+    display: inline-flex;
+    align-items: center;
+}
+
+.cbx-krajee input[type=checkbox] {
+    margin: 0 3px;
+}