Checkboxes and radios without label text. Close flatlogic#17

Author: micrum

awesome-bootstrap-checkbox.css

@@ -49,6 +49,8 @@
     border-radius: 50%; }
 .checkbox.checkbox-inline {
     margin-top: 0; }
+.checkbox.checkbox-single label {
+    height: 17px; }
 
 .checkbox-primary input[type="checkbox"]:checked + label::before {
     background-color: #428bca;
@@ -137,6 +139,8 @@
     cursor: not-allowed; }
 .radio.radio-inline {
     margin-top: 0; }
+.radio.radio-single label {
+    height: 17px; }
 
 .radio-primary input[type="radio"] + label::after {
     background-color: #428bca; }

awesome-bootstrap-checkbox.less

@@ -80,6 +80,10 @@
     border-radius: 50%;
   }
 
+  &.checkbox-single label{
+    height: 17px;
+  }
+
   &.checkbox-inline{
     margin-top: 0;
   }
@@ -178,6 +182,10 @@
   &.radio-inline{
     margin-top: 0;
   }
+
+  &.radio-single label{
+    height: 17px;
+  }
 }
 
 .radio-variant(radio-primary, @brand-primary);

awesome-bootstrap-checkbox.scss

@@ -83,6 +83,10 @@
   &.checkbox-inline{
     margin-top: 0;
   }
+
+  &.checkbox-single label{
+    height: 17px;
+  }
 }
 
 @include checkbox-variant('.checkbox-primary', $brand-primary);
@@ -178,6 +182,10 @@
   &.radio-inline{
     margin-top: 0;
   }
+
+  &.radio-single label{
+    height: 17px;
+  }
 }
 
 @include radio-variant('.radio-primary', $brand-primary);

demo/build.css

@@ -49,6 +49,8 @@
     border-radius: 50%; }
   .checkbox.checkbox-inline {
     margin-top: 0; }
+  .checkbox.checkbox-single label {
+    height: 17px; }
 
 .checkbox-primary input[type="checkbox"]:checked + label::before {
   background-color: #428bca;
@@ -137,6 +139,8 @@
         cursor: not-allowed; }
   .radio.radio-inline {
     margin-top: 0; }
+  .radio.radio-single label {
+    height: 17px; }
 
 .radio-primary input[type="radio"] + label::after {
   background-color: #428bca; }

demo/index.html

@@ -56,6 +56,15 @@ <h2>Checkboxes</h2>
                             Check me out
                         </label>
                     </div>
+                    <p>Checkboxes without label text <code>.checkbox-single</code></p>
+                    <div class="checkbox checkbox-single">
+                        <input type="checkbox" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
+                        <label></label>
+                    </div>
+                    <div class="checkbox checkbox-primary checkbox-single">
+                        <input type="checkbox" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
+                        <label></label>
+                    </div>
                     <p>Inline checkboxes</p>
                     <div class="checkbox checkbox-inline">
                         <input type="checkbox" id="inlineCheckbox1" value="option1">
@@ -164,13 +173,22 @@ <h2>Radios</h2>
                             </div>
                         </div>
                     </div>
+                    <p>Radios without label text <code>.radio-single</code></p>
+                    <div class="radio radio-single">
+                        <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
+                        <label></label>
+                    </div>
+                    <div class="radio radio-success radio-single">
+                        <input type="radio" id="singleRadio2" value="option2" name="radioSingle2" checked aria-label="Single radio Two">
+                        <label></label>
+                    </div>
                     <p>Inline radios</p>
                     <div class="radio radio-info radio-inline">
                         <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
                         <label for="inlineRadio1"> Inline One </label>
                     </div>
                     <div class="radio radio-inline">
-                        <input type="radio" id="inlineRadio2" value="option1" name="radioInline">
+                        <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                         <label for="inlineRadio2"> Inline Two </label>
                     </div>
                 </fieldset>