Icons and better brands in dropdowns. #332

uiframework/misago/css/flavor/navbar.less

@@ -38,6 +38,7 @@
       border: none;
       border-radius: @border-radius-base !important;
       box-shadow: 0px 0px 0px 6px @dropdown-shadow;
+      width: 256px;
 
       &:after {
         border: solid transparent;
@@ -51,6 +52,37 @@
         top: -11px;
         width: 0;
       }
+
+      a {
+        .glyphicon, .fa {
+          display: inline-block;
+          width: 16px;
+
+          text-align: center;
+        }
+
+        .badge {
+          border-radius: @border-radius-small;
+          position: relative;
+          top: 1px;
+        }
+
+        &:link, &:visited {
+          .badge {
+            background-color: @brand-danger;
+
+            color: @dropdown-bg;
+          }
+        }
+
+        &:hover, &:active {
+          .badge {
+            background-color: @dropdown-bg;
+
+            color: @brand-danger;
+          }
+        }
+      }
     }
   }
 }

uiframework/misago/css/flavor/variables.less

@@ -100,5 +100,6 @@
 //** Active dropdown menu item background color.
 @dropdown-link-active-bg:        #34495e;
 
+
 //** Open dropdown shadow color.
 @dropdown-shadow:                fadeOut(#333, 50%);

uiframework/misago/css/style.css

@@ -5953,6 +5953,7 @@ button.close {
     border: none;
     border-radius: 4px !important;
     box-shadow: 0px 0px 0px 6px rgba(51, 51, 51, 0.5);
+    width: 256px;
   }
   .navbar-nav-user .dropdown-menu:after {
     border: solid transparent;
@@ -5966,6 +5967,27 @@ button.close {
     top: -11px;
     width: 0;
   }
+  .navbar-nav-user .dropdown-menu a .glyphicon,
+  .navbar-nav-user .dropdown-menu a .fa {
+    display: inline-block;
+    width: 16px;
+    text-align: center;
+  }
+  .navbar-nav-user .dropdown-menu a .badge {
+    border-radius: 3px;
+    position: relative;
+    top: 1px;
+  }
+  .navbar-nav-user .dropdown-menu a:link .badge,
+  .navbar-nav-user .dropdown-menu a:visited .badge {
+    background-color: #d9534f;
+    color: #ffffff;
+  }
+  .navbar-nav-user .dropdown-menu a:hover .badge,
+  .navbar-nav-user .dropdown-menu a:active .badge {
+    background-color: #ffffff;
+    color: #d9534f;
+  }
 }
 .jumbotron {
   margin-top: -20px;

uiframework/navbar.html

@@ -48,18 +48,39 @@
                 rafalp
               </a>
               <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
+                <li>
+                  <a href="#">
+                    <span class="fa fa-plane"></span>
+                    Action
+                  </a>
+                </li>
                 <li>
                   <a href="#">
                     <span class="badge pull-right">42</span>
+                    <span class="fa fa-plane"></span>
                     Another action
                   </a>
                 </li>
-                <li><a href="#">Something else here</a></li>
+                <li>
+                  <a href="#">
+                    <span class="fa fa-plane"></span>
+                    Something else here
+                  </a>
+                </li>
                 <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
+                <li>
+                  <a href="#">
+                    <span class="fa fa-plane"></span>
+                    Separated link
+                  </a>
+                </li>
                 <li class="divider"></li>
-                <li><a href="#">One more separated link</a></li>
+                <li>
+                  <a href="#">
+                    <span class="fa fa-plane"></span>
+                    One more separated link
+                  </a>
+                </li>
               </ul>
             </li>
           </ul>