Color styles for badges in small display navbar. #332

uiframework/misago/css/misago/navbar.less

@@ -18,6 +18,38 @@
   li {
     a {
       font-size: @font-size-large;
+
+      .badge {
+        border-radius: @border-radius-base;
+        position: relative;
+        bottom: 2px;
+      }
+
+      &:hover, &:active {
+        .badge {
+          background-color: @link-color;
+        }
+      }
+
+      &.new {
+        &:hover, &:active {
+          color: @navbar-new-link-hover-color;
+
+          .badge {
+            background-color: @navbar-new-link-hover-color;
+          }
+        }
+      }
+
+      &.important {
+        &:hover, &:active {
+          color: @navbar-important-link-hover-color;
+
+          .badge {
+            background-color: @navbar-important-link-hover-color;
+          }
+        }
+      }
     }
   }
 }
@@ -50,10 +82,7 @@
           width: auto;
 
           .badge {
-            border-radius: @border-radius-base;
             margin-bottom: -2px;
-            position: relative;
-            bottom: 2px;
           }
         }
 
@@ -338,18 +367,21 @@
   .navbar {
     .dropdown-menu {
       li {
-        a, &:link, &:visited, &:hover, &:active {
-          .badge {
-            background-color: @brand-danger;
+        a {
+          &, &:link, &:visited, &:hover, &:active {
+            .badge {
+              background-color: @brand-danger;
+              border-radius: @border-radius-base;
 
-            color: @dropdown-bg;
+              color: @dropdown-bg;
+            }
           }
         }
       }
     }
   }
 
-  /* Dropdown look */
+  /* Dropdown links and buttons */
   .navbar {
     .dropdown-menu {
       li {
@@ -372,23 +404,6 @@
         }
       }
     }
-
-    .dropdown.open {
-      background: darken(@navbar-default-bg, 3%);
-      border-bottom: 2px solid darken(@navbar-default-bg, 6%);
-
-      .dropdown-toggle {
-        &:link, &:active, &:visited, &:hover {
-          background: darken(@navbar-default-bg, 6%);
-        }
-      }
-
-      .dropdown-menu {
-        li.divider {
-          background-color: darken(@navbar-default-bg, 9%);
-        }
-      }
-    }
   }
 
   .navbar-inverse {
@@ -409,10 +424,31 @@
         }
       }
     }
+  }
 
+  /* Make open dropdowns differ*/
+  .navbar {
+    .dropdown.open {
+      background: darken(@navbar-default-bg, 3%);
+      border-bottom: 2px solid darken(@navbar-default-bg, 6%);
+
+      .dropdown-toggle {
+        &:link, &:active, &:visited, &:hover {
+          background: darken(@navbar-default-bg, 6%);
+        }
+      }
+
+      .dropdown-menu {
+        li.divider {
+          background-color: darken(@navbar-default-bg, 9%);
+        }
+      }
+    }
+  }
+
+  .navbar-inverse {
     .dropdown.open {
       background: lighten(@navbar-inverse-bg, 3%);
-      border-left: 2px solid lighten(@navbar-inverse-bg, 6%);
       border-bottom: 2px solid lighten(@navbar-inverse-bg, 6%);
 
       .dropdown-menu {

uiframework/misago/css/style.css

@@ -5842,11 +5842,12 @@ button.close {
   background-color: #ffffff;
   color: #d9534f;
 }
+/* Move arrow to right on pull-right dropdowns */
 .pull-right .dropdown-menu:after {
   left: auto;
   right: 10px;
 }
-/* On big displays */
+/* Big displays */
 @media (min-width: 768px) {
   .dropdown-menu li button {
     background: none;
@@ -5872,6 +5873,31 @@ button.close {
 .navbar-nav-primary li a {
   font-size: 18px;
 }
+.navbar-nav-primary li a .badge {
+  border-radius: 4px;
+  position: relative;
+  bottom: 2px;
+}
+.navbar-nav-primary li a:hover .badge,
+.navbar-nav-primary li a:active .badge {
+  background-color: #3498db;
+}
+.navbar-nav-primary li a.new:hover,
+.navbar-nav-primary li a.new:active {
+  color: #2ecc71;
+}
+.navbar-nav-primary li a.new:hover .badge,
+.navbar-nav-primary li a.new:active .badge {
+  background-color: #2ecc71;
+}
+.navbar-nav-primary li a.important:hover,
+.navbar-nav-primary li a.important:active {
+  color: #ea6153;
+}
+.navbar-nav-primary li a.important:hover .badge,
+.navbar-nav-primary li a.important:active .badge {
+  background-color: #ea6153;
+}
 /* Big displays */
 @media (min-width: 768px) {
   .navbar-nav-primary {
@@ -5902,10 +5928,7 @@ button.close {
     width: auto;
   }
   .navbar-nav-primary > li > a.badged .badge {
-    border-radius: 4px;
     margin-bottom: -2px;
-    position: relative;
-    bottom: 2px;
   }
   .navbar-nav-primary > li > a:link,
   .navbar-nav-primary > li > a:visited {
@@ -6101,14 +6124,15 @@ button.close {
   }
   /* Color badges in red and white */
   .navbar .dropdown-menu li a .badge,
-  .navbar .dropdown-menu li:link .badge,
-  .navbar .dropdown-menu li:visited .badge,
-  .navbar .dropdown-menu li:hover .badge,
-  .navbar .dropdown-menu li:active .badge {
+  .navbar .dropdown-menu li a:link .badge,
+  .navbar .dropdown-menu li a:visited .badge,
+  .navbar .dropdown-menu li a:hover .badge,
+  .navbar .dropdown-menu li a:active .badge {
     background-color: #d9534f;
+    border-radius: 4px;
     color: #ffffff;
   }
-  /* Dropdown look */
+  /* Dropdown links and buttons */
   .navbar .dropdown-menu li form button {
     color: #7f8c8d;
   }
@@ -6121,6 +6145,19 @@ button.close {
     background: none;
     color: #3498db;
   }
+  .navbar-inverse .dropdown-menu button {
+    color: #999999;
+  }
+  .navbar-inverse .dropdown-menu button:hover {
+    background: none;
+    color: #ffffff;
+  }
+  .navbar-inverse .dropdown-menu button:active,
+  .navbar-inverse .dropdown-menu button:focus {
+    background: none;
+    color: #ffffff;
+  }
+  /* Make open dropdowns differ*/
   .navbar .dropdown.open {
     background: #f0f0f0;
     border-bottom: 2px solid #e9e9e9;
@@ -6134,21 +6171,8 @@ button.close {
   .navbar .dropdown.open .dropdown-menu li.divider {
     background-color: #e1e1e1;
   }
-  .navbar-inverse .dropdown-menu button {
-    color: #999999;
-  }
-  .navbar-inverse .dropdown-menu button:hover {
-    background: none;
-    color: #ffffff;
-  }
-  .navbar-inverse .dropdown-menu button:active,
-  .navbar-inverse .dropdown-menu button:focus {
-    background: none;
-    color: #ffffff;
-  }
   .navbar-inverse .dropdown.open {
     background: #2a2a2a;
-    border-left: 2px solid #313131;
     border-bottom: 2px solid #313131;
   }
   .navbar-inverse .dropdown.open .dropdown-menu li.divider {