CSS: Introduce badge-nav-item

refs #5543

library/Icinga/Web/Navigation/Renderer/BadgeNavigationItemRenderer.php

@@ -94,7 +94,14 @@ abstract class BadgeNavigationItemRenderer extends NavigationItemRenderer
      */
     public function render(NavigationItem $item = null)
     {
-        return '<div class="clearfix">' . $this->renderBadge() . parent::render($item) . '</div>';
+        if ($item === null) {
+            $item = $this->getItem();
+        }
+        $item->setCssClass('badge-nav-item');
+        $this->setEscapeLabel(false);
+        $label = $this->view()->escape($item->getLabel());
+        $item->setLabel($this->renderBadge() . $label);
+        return parent::render($item);
     }
 
     /**
@@ -107,7 +114,7 @@ abstract class BadgeNavigationItemRenderer extends NavigationItemRenderer
         if ($count = $this->getCount()) {
             $view = $this->view();
             return sprintf(
-                '<span title="%s" class="badge pull-right state-%s">%s</span>',
+                '<span title="%s" class="badge state-%s">%s</span>',
                 $view->escape($this->getTitle()),
                 $view->escape($this->getState()),
                 $count

public/css/icinga/badges.less

@@ -1,15 +1,17 @@
+/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
 .badge {
-  min-width: 25px;
-  font-family: tahoma, verdana, sans-serif;
-  font-weight: @font-weight-bold;
-  font-size: 11px;
-  text-align: center;
-  color: @text-color-inverted;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   background-color: @gray-light;
+  color: @text-color-inverted;
+  font-family: @font-family-wide;
+  font-size: @font-size-small;
+  font-weight: @font-weight-bold;
+  line-height: 1;
+  min-width: 3em;
+  padding: @vertical-padding @horizontal-padding;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
 
   &.state-ok {
     .bg-color-ok();

public/css/icinga/nav.less

@@ -1,7 +1,18 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
+li.badge-nav-item {
+  > a {
+    .clearfix();
+
+    .badge {
+      float: right;
+    }
+  }
+}
+
 li.nav-item {
-  a, span {
+  > a,
+  > span {
     // Rollover
     display: block;
   }
@@ -18,6 +29,6 @@ ul.tab-nav {
   .clearfix();
 
   li {
-    .pull-left();
+    float: left;
   }
 }