customize topbar's style

buildbot · Apr 12, 2015 · da062ac · da062ac
1 parent 85a5a31
commit da062ac
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/www/md_base/src/app/index.jade b/www/md_base/src/app/index.jade
@@ -17,8 +17,7 @@ html(ng-app="app", ng-controller="appController")
         md-is-locked-open="$mdMedia('gt-md')"
       )
         md-toolbar(layout="row")
-          md-button.nav-button
-            md-icon(md-svg-icon="navicon")
+          md-icon.logo(md-svg-icon="navicon")
         md-content(flex, layout="column")
           md-button.nav-item
             md-icon(md-svg-icon="home-outline")
@@ -34,8 +33,10 @@ html(ng-app="app", ng-controller="appController")
             md-tooltip Info
 
       div(layout="column", role="main", flex)
-        md-toolbar
-          div.md-toolbar-tools(ng-bind="title")
+        md-toolbar.topbar
+          div.md-toolbar-tools
+            | Buildbot 
+            span.title(ng-bind="title")
         md-content.md-padding(flex)
           h1 Hello buildbot!
 

diff --git a/www/md_base/src/styles/sidenav.less b/www/md_base/src/styles/sidenav.less
@@ -8,9 +8,10 @@ md-sidenav {
     height: 40px;
   }
 
-  .nav-button {
+  .logo {
     width: 64px;
     height: 64px;
+    padding: 10px;
   }
 
   .nav-item {

diff --git a/www/md_base/src/styles/styles.less b/www/md_base/src/styles/styles.less
@@ -4,6 +4,7 @@
 @import (inline) "../../libs/angular-material/angular-material.css";
 
 @import "./sidenav.less";
+@import "./topbar.less";
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;

diff --git a/www/md_base/src/styles/topbar.less b/www/md_base/src/styles/topbar.less
@@ -0,0 +1,12 @@
+.topbar.md-default-theme {
+  color: rgb(33,150,243);
+  background: white;
+}
+
+.topbar {
+  span.title {
+    color: #666;
+    margin-left: 30px;
+    text-transform: uppercase;
+  }
+}