title: AngularDart App Layout issue with material-navigation
body: <p>I've been trying to implement a material design site using AngularDart, and I've hit a wall using the angular_components App Layout setup.  For the life of me I can't figure out how to change the look of the nav class="material-navigation" content to match the examples (things like background, text color, and text highlight color).  Currently the text has a grey box surrounding it rather than matching the header color. It doesn't seem like these properties are set in layout.scss, so I'm stumped.  I've made minimal changes to the layout.scss file, which I've posted below. Any insight into what I'm missing?  Thanks in advance :)</p>
  
  <p><a href="https://i.stack.imgur.com/Jfruh.png" rel="nofollow noreferrer">AngularDart Material Nav</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import 'package:angular/angular.dart';
  import 'package:angular_components/angular_components.dart';
  import 'package:angular_components/material_icon/material_icon.dart';
  import 'package:angular_components/material_button/material_button.dart';
  import 'package:angular_components/material_list/material_list.dart';
  import 'package:angular_components/material_list/material_list_item.dart';
  import 'package:angular_components/material_toggle/material_toggle.dart';
  import 'package:angular_components/app_layout/material_persistent_drawer.dart';
  import 'dart:async';
  
  @Component(
    selector: 'my-app',
    directives: [
      coreDirectives,
      MaterialIconComponent,
      MaterialButtonComponent,
      MaterialToggleComponent,
      MaterialListComponent,
      MaterialListItemComponent,
      MaterialPersistentDrawerDirective],
    templateUrl: 'app_component.html',
    styleUrls: [
      //Holds modifications for angular_components style sheets. Particularly
      //app_layout, which is *not* a component but a weird grouping of components
      //and styles.
      'main.css',
      'app_component.css',
    ],
    providers: [ClassProvider(NomiService)],
  )
  ...</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import 'package:angular_components/app_layout/layout';
  
  .material-header {
    background-color: $mat-vanilla-red-400; //vs. $mat-indigo-500
  }
  
  // A row within the header.
  .material-header-row {
    /// Class uses for the title inside of a header.
    .material-header-title {
      left: auto; //vs. $mat-grid * 10;
      height: 36px; //$mat-header-height; //vs. $mat-title-font-size
      font-size: 36px;
      //border: 3px solid green; Use to check work!
      //Used to center text!
      margin-left: 37.5%;
      margin-right: 37.5%;
      text-align: center;
      width: 25%;
    }
  
    .material-navigation{
      border: 3px solid green;
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="material-header shadow"&gt;
      &lt;div class="material-header-row"&gt;
          &lt;material-button icon class="material-drawer-button" (trigger)="drawer.toggle()"&gt;
              &lt;material-icon icon="menu"&gt;&lt;/material-icon&gt;
          &lt;/material-button&gt;
          &lt;img src="favicon.png" width="30"&gt;
          &lt;span class="material-header-title"&gt;Nomi&lt;/span&gt;
          &lt;div class="material-spacer"&gt;&lt;/div&gt;
          &lt;nav class="material-navigation"&gt;
              &lt;a&gt;Test&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;material-drawer persistent #drawer="drawer"&gt;
      &lt;material-list&gt;
          &lt;div group&gt;
              &lt;material-list-item&gt;
                  &lt;material-icon icon ="inbox"&gt;&lt;/material-icon&gt;Inbox
              &lt;/material-list-item&gt;
              &lt;material-list-item&gt;
                  &lt;material-icon icon ="star"&gt;&lt;/material-icon&gt;Star
              &lt;/material-list-item&gt;
              &lt;material-list-item&gt;
                  &lt;material-icon icon ="send"&gt;&lt;/material-icon&gt;Sent Mail
              &lt;/material-list-item&gt;
              &lt;material-list-item&gt;
                  &lt;material-icon icon ="drafts"&gt;&lt;/material-icon&gt;Drafts
              &lt;/material-list-item&gt;
          &lt;/div&gt;
      &lt;/material-list&gt;
  &lt;/material-drawer&gt;</code></pre>
  </div>
  </div>
  </p>