line-height

Author: haubek

HISTORY.md

@@ -1,5 +1,9 @@
 # Release History
 
+## 1.1.1
+
+* Fixed `line-height` issue
+
 ## 1.1.0
 
 * Fixed keyboard accessibility

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

dist/css/component-custom-switch.css

@@ -51,25 +51,25 @@
           <input class="custom-switch-input" id="example_06" type="checkbox">
           <label class="custom-switch-btn" for="example_06"></label>
         </div>
-        <p>I'm <code>sm</code></p>
+        <p class="my-2">I'm <code>custom-switch-sm</code></p>
 
         <hr>
 
         <div class="custom-switch custom-switch-label-onoff custom-switch-xs pl-0">
           <input class="custom-switch-input" id="example_07" type="checkbox">
           <label class="custom-switch-btn" for="example_07"></label>
         </div>
-        <p>I'm <code>xs</code></p>
+        <p class="my-2">I'm <code>custom-switch-xs</code></p>
 
         <hr>
 
         <div class="custom-switch custom-switch-label-yesno pl-0">
           <input class="custom-switch-input" id="example_08" type="checkbox">
           <label class="custom-switch-btn" for="example_08"></label>
-          <div class="custom-switch-content-checked">
+          <div class="custom-switch-content-checked my-3">
             <span class="text-success">I'm checked</span>
           </div>
-          <div class="custom-switch-content-unchecked">
+          <div class="custom-switch-content-unchecked my-3">
             <span class="text-danger">I'm unchecked (click me!)</span>
           </div>
         </div>
@@ -80,24 +80,25 @@
           <input class="custom-switch-input" id="example_09" type="checkbox" required>
           <label class="custom-switch-btn" for="example_09"></label>
         </div>
-        <p>I'm <code>required</code></p>
+        <p class="my-2">I'm <code>required</code></p>
 
         <hr>
 
         <div class="custom-switch pl-0">
           <input class="custom-switch-input" id="example_10" type="checkbox" disabled>
           <label class="custom-switch-btn" for="example_10"></label>
         </div>
+        <br>
         <div class="custom-switch pl-0">
           <input class="custom-switch-input" id="example_11" type="checkbox" checked disabled>
           <label class="custom-switch-btn" for="example_11"></label>
         </div>
-        <p>I'm <code>disabled</code></p>
+        <p class="my-2">I'm <code>disabled</code></p>
 
         <hr>
 
         <div class="form-group">
-          <div for="example_12">I'm a &lt;div&gt; form label:</div>
+          <label for="example_12">I'm a &lt;label&gt; and can be clicked:</label>
           <div class="custom-switch pl-0">
             <input type="checkbox" class="custom-switch-input" id="example_12" checked>
             <label class="custom-switch-btn text-hide" for="example_12">{value}</label>
@@ -114,7 +115,7 @@
             </div>
           </div>
         </form>
-        <p>I'm <code>invalid</code></p>
+        <p class="my-2">I'm <code>invalid</code></p>
 
       </div>
     </div>

dist/css/component-custom-switch.min.css

@@ -1,12 +1,15 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "author": {
     "name": "Martin Haubek",
     "email": "[email protected]"
   },
+  "scripts": {
+    "build": "gulp build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/haubek/bootstrap4c-custom-switch"

example.html

@@ -1,4 +1,5 @@
 .custom-switch {
+  line-height: ($switch-font-size + $switch-unit);
   .custom-switch-input {
     position: absolute;
     z-index: -1;
@@ -150,6 +151,7 @@
   }
 }
 .custom-switch-sm {
+  line-height: ($switch-font-size-sm + $switch-unit);
   .custom-switch-input {
     + .custom-switch-btn {
       width: ($switch-width-sm + $switch-unit);
@@ -222,6 +224,7 @@
   }
 }
 .custom-switch-xs {
+  line-height: ($switch-font-size-xs + $switch-unit);
   .custom-switch-input {
     + .custom-switch-btn {
       width: ($switch-width-xs + $switch-unit);

package.json

@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.1.0
+ * Version: 1.1.1
  * Copyright (c) 2017-18 Martin Haubek
  *
  *