CSS: Move badge related styles to badges.less

library/Icinga/Web/StyleSheet.php

@@ -15,6 +15,7 @@ class StyleSheet
         'css/vendor/tipsy.css',
         'css/icinga/themes/icinga.less',
         'css/icinga/colors.less',
+        'css/icinga/badges.less',
         'css/icinga/mixins.less',
         'css/icinga/base.less',
         'css/icinga/nav.less',

modules/monitoring/public/css/module.less

@@ -2,37 +2,12 @@
 
 /* Badges */
 .state-badges {
-
   > ul > li {
     padding-right: 5px;
     &:last-child {
       padding-right: 0;
     }
   }
-
-  li .state-ok {
-    .bg-color-ok(); 
-  }
-
-  li .state-warning {
-    .bg-color-warning(); 
-  }
-
-  li .state-critical {
-    .bg-color-critcal(); 
-  }
-
-  li .state-unreachable {
-    .bg-color-unreachable(); 
-  }
-
-  li .state-unknown {
-    .bg-color-unknown(); 
-  }
-
-  li .state-pending {
-    .bg-color-pending(); 
-  }
 }
 
 //p.pluginoutput {

public/css/icinga/badges.less

@@ -0,0 +1,45 @@
+.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;
+
+  &.state-ok {
+    .bg-color-ok();
+  }
+
+  &.state-up {
+    .bg-color-up();
+  }
+
+  &.state-warning {
+    .bg-color-warning();
+  }
+
+  &.state-critical {
+    .bg-color-critical();
+  }
+
+  &.state-down {
+    .bg-color-down();
+  }
+
+  &.state-unreachable {
+    .bg-color-unreachable();
+  }
+
+  &.state-unknown {
+    .bg-color-unknown();
+  }
+
+  &.state-pending {
+    .bg-color-pending();
+  }
+}

public/css/icinga/main.less

@@ -127,23 +127,6 @@ a.button {
   }
 }
 
-.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;
-
-  &.state-critical {
-    .bg-color-critical();
-  }
-}
-
 .user-avatar {
   height: 16px;
   width: 16px;