more progress on materialization: full-size navbar and button styles

misago/emberapp/app/styles/misago/buttons.less

@@ -23,12 +23,17 @@
 }
 
 
-// Flat buttons
-.btn-style(@color, @bg) {
+// Remove outline and shadow from all buttons
+.btn-reset-styles {
   &, &:link, &:visited, &:hover, &:focus, &:active {
     .box-shadow(none);
-    outline: none;
+    outline: 0;
   }
+}
+
+// Flat buttons
+.btn-style(@color, @bg) {
+  .btn-reset-styles();
 
   &, &:link, &:visited {
     background: transparent;
@@ -38,14 +43,14 @@
   }
 
   &:hover, &:focus {
-    background: fadeOut(@bg, 90%);
+    background: fadeOut(@bg, 80%);
     border-color: transparent;
 
     color: @color;
   }
 
   &:active {
-    background: fadeOut(@bg, 80%);
+    background: fadeOut(@bg, 60%);
     border-color: transparent;
 
     color: @color;
@@ -85,17 +90,21 @@
 
 // Raised buttons
 .btn-raised-style(@color, @bg) {
+  .btn-reset-styles();
+
   &, &:link, &:visited, &:hover, &:focus {
     background: @bg;
     border-color: @bg;
     .box-shadow(none);
     .shadow-2dp();
 
-    outline: none;
-
     color: @color;
   }
 
+  &:focus {
+    .shadow-4dp();
+  }
+
   &:active {
     background: darken(@bg, 8%);
     border-color: darken(@bg, 8%);

misago/emberapp/app/styles/misago/navbar.less

@@ -96,10 +96,36 @@
 .navbar-primary {
   .navbar-user-nav {
     float: right;
+  }
 
-    .btn-success {
-      position: relative;
-      top: 1px;
+  .btn-start-thread {
+    background: @navbar-start-thread-bg;
+    border-color: transparent;
+    height: @navbar-height;
+    padding: (@navbar-height - @navbar-icon-size) / 2;
+    padding-bottom: 0px;
+
+    color: @navbar-start-thread-color;
+
+    .material-icons {
+      top: -1px;
+
+      font-size: @navbar-icon-size;
+      line-height: @navbar-icon-size;
+    }
+
+    &:hover, &:focus {
+      background: @navbar-start-thread-hover-bg;
+      border-color: transparent;
+
+      color: @navbar-start-thread-hover-color;
+    }
+
+    &:active {
+      background: @navbar-start-thread-active-bg;
+      border-color: transparent;
+
+      color: @navbar-start-thread-active-color;
     }
   }
 
@@ -138,28 +164,35 @@
 .navbar-primary {
   .navbar-guest-nav {
     float: right;
+  }
+}
 
-    .btn {
-      position: relative;
-      top: 1px;
-    }
+
+// Navbar Buttons
+.navbar-primary {
+  .navbar-btn {
+    .btn-reset-styles();
+
+    margin-top: 0px;
+    margin-bottom: 0px;
+    padding-top:    11px;
+    padding-bottom: 11px;
+
+    font-size: @navbar-link-size;
   }
 }
 
 
 // Icons in buttons
 .navbar-primary {
-  .navbar-nav {
-    &>li {
-      &>.btn {
-        .material-icons {
-          font-size: @font-size-large;
-        }
-      }
+  &>.navbar-btn {
+    .material-icons {
+      font-size: @font-size-large;
     }
   }
 }
 
+
 // Dropdowns
 .navbar-static-top {
   & .navbar-nav > li > .dropdown-menu {

misago/emberapp/app/styles/misago/variables.less

@@ -81,7 +81,7 @@
 @badge-color:                 #fff;
 //** Linked badge text color on hover
 @badge-link-hover-color:      #fff;
-@badge-bg:                    @brand-info;
+@badge-bg:                    @brand-danger;
 
 //** Badge text color in active nav link
 @badge-active-color:          @link-color;
@@ -111,7 +111,7 @@
 @navbar-link-spacing:                      6px;
 @navbar-link-radius:                       @border-radius-base;
 @navbar-link-size:                         @font-size-base + 2px;
-@navbar-icon-size:                         26px;
+@navbar-icon-size:                         28px;
 
 @navbar-default-link-color:                @site-link-color;
 @navbar-default-link-hover-color:          @site-link-hover-color;
@@ -122,6 +122,13 @@
 @navbar-compact-link-active-color:         @navbar-default-bg;
 @navbar-compact-link-active-bg:            @site-link-active-color;
 
+@navbar-start-thread-color:                fadeOut(@brand-success, 40%);
+@navbar-start-thread-bg:                   transparent;
+@navbar-start-thread-hover-color:          @brand-success;
+@navbar-start-thread-hover-bg:             transparent;
+@navbar-start-thread-active-color:         @brand-success;
+@navbar-start-thread-active-bg:            fadeOut(@brand-success, 80%);
+
 // Navbar brand label
 @navbar-default-brand-color:               @headings-color;
 @navbar-default-brand-hover-color:         @headings-color;

misago/emberapp/app/templates/components/forum-navbar.hbs

@@ -41,12 +41,12 @@
     {{#if auth.isAuthenticated}}
     <ul class="nav navbar-nav navbar-user-nav hidden-xs hidden-sm">
       <li class="icon">
-        <a href="#">
+        <a href="#" title="{{gettext "Reports"}}">
           <i class="material-icons">error_outline</i>
           <span class="badge">132</span>
         </a>
       </li>
-      <li class="icon user-notices dropdown">
+      <li class="icon user-notices dropdown" title="{{gettext "Notifications"}}">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
           <i class="material-icons">notifications_none</i>
           <span class="badge">132</span>
@@ -61,19 +61,18 @@
       </li>
       {{user-nav}}
       <li>
-        <button type="button" class="btn btn-outlined btn-success navbar-btn">
-          <i class="material-icons">chat_bubble_outline</i>
-          {{gettext "Start thread"}}
+        <button type="button" class="btn btn-start-thread navbar-btn" title="{{gettext "Start thread"}}">
+          <i class="material-icons">chat</i>
         </button>
       </li>
     </ul>
     {{else}}
     <div class="navbar-guest-nav hidden-xs hidden-sm">
-      {{#show-modal-button modal="login-modal" class="btn btn-outlined btn-default navbar-btn"}}
+      {{#show-modal-button modal="login-modal" class="btn btn-default navbar-btn"}}
         {{gettext "Sign in"}}
       {{/show-modal-button}}
 
-      {{#register-button class="btn btn-outlined btn-success navbar-btn"}}
+      {{#register-button class="btn btn-success navbar-btn"}}
         {{gettext "Join"}}
       {{/register-button}}
     </div>