Add time remaining to left nav

Author: ebidel

codelab-style.html

@@ -83,9 +83,18 @@
   margin: 0;
 }
 
-#countdown iron-icon {
+.countdown iron-icon {
   margin-right: 3px;
-  --iron-icon-fill-color: rgba(255, 255, 255, 0.8);
+}
+
+:host(:not([theme="minimal"])) [drawer] .countdown {
+  display: none;
+}
+
+:host([theme="minimal"]) [drawer] .countdown {
+  padding: 0 16px 16px 16px;
+  font-style: italic;
+  color: var(--paper-blue-500);
 }
 
 #controls {

google-codelab.html

@@ -75,8 +75,13 @@
 
     <paper-drawer-panel id="drawer" narrow="{{_narrow}}" selected="{{currDrawer}}">
 
-      <div drawer class="layout vertical justified">
-        <paper-menu id="toc" selected="{{selected}}"
+      <div drawer class="layout vertical">
+        <div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
+             class="countdown layout horizontal">
+          <iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
+        </div>
+
+        <paper-menu id="toc" class="flex" selected="{{selected}}"
                     on-iron-select="_allowCodelabComplete">
           <template is="dom-repeat" items="{{steps}}" strip-whitespace>
             <paper-item class$="{{_tocItemClass(selected, index)}}">
@@ -109,8 +114,8 @@
             <paper-icon-button icon="arrow-back" on-tap="_goToHome"></paper-icon-button>
           </template>
           <h1 class="title">{{title}}</h1>
-          <div id="countdown" title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
-               class="layout horizontal">
+          <div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
+               class="countdown layout horizontal">
             <iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
           </div>
         </paper-toolbar>