Fixes #5775: Collapse labels/badges

* When :empty, display: none;
* Add documentation for change in behavior

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 142df455aa529913ac7fe4949114d81c4c009922..83c9bec75a308fb4d8f3aa82d80f60f76e93e8aa 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5427,6 +5427,11 @@ a.thumbnail:hover {
           border-radius: 9px;
 }
 
+.label:empty,
+.badge:empty {
+  display: none;
+}
+
 a.label:hover,
 a.badge:hover {
   color: #ffffff;

diff --git a/docs/components.html b/docs/components.html
index 1874470f462684fc7ca6e39aba9aa10937cd899a..a99a96b9b10e06b040751a34404bad9f338cf94b 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -1859,6 +1859,9 @@
             </tbody>
           </table>
 
+          <h3>Easily collapsible</h3>
+          <p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+
         </section>
 
 

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3c024451c21531f36a7e1e6f0f4857a6b1d110e7..0a655d6de25f66c62b6f8ed45aea75568fe09526 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1788,6 +1788,9 @@
             </tbody>
           </table>
 
+          <h3>{{_i}}Easily collapsible{{/i}}</h3>
+          <p>{{_i}}For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.{{/i}}</p>
+
         </section>
 
 

diff --git a/less/labels-badges.less b/less/labels-badges.less
index d118a0190eba325c13616e60bb8efe3dfff72355..9c3a40bfbf8231b4310990e708ddc4296579a1ea 100644 (file)
--- a/less/labels-badges.less
+++ b/less/labels-badges.less
@@ -27,6 +27,14 @@
   .border-radius(9px);
 }
 
+// Empty labels/badges collapse
+.label,
+.badge {
+  &:empty {
+    display: none;
+  }
+}
+
 // Hover state, but only for links
 a {
   &.label:hover,