From b4a58291041f9864c9b45e127dc7ec312b092c42 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Fri, 29 Jan 2016 19:04:17 -0800
Subject: [PATCH 1/5] Initial cut at embed layout

---
 codelab-style.html  | 46 ++++++++++---------------
 demo/embed.html     | 53 ++++++++++++++++++++++++++---
 google-codelab.html | 81 +++++++++++++++++++++++----------------------
 layout-style.html   | 61 ++++++++++++++++++++++++++++++++++
 step-style.html     |  6 ++--
 5 files changed, 171 insertions(+), 76 deletions(-)
 create mode 100644 layout-style.html
diff --git a/codelab-style.html b/codelab-style.html
index f8b6dea..558059d 100644
--- a/codelab-style.html
+++ b/codelab-style.html
@@ -20,14 +20,6 @@
   <template strip-whitespace>
     <style>
 
-:root {
-  --google-codelab-background: var(--paper-grey-100);
-  --google-codelab-header-background: var(--paper-blue-600);
-  --google-codelab-fab-background: var(--paper-blue-700);
-  --google-codelab-footer-text-color: #777;
-  --google-codelab-width: 800px;
-}
-
 :host {
   display: block;
   line-height: 24px;
@@ -38,25 +30,31 @@
     padding: 0;
   };
   --paper-drawer-panel-left-drawer-container: {
-    background: var(--google-codelab-background);
+    background: var(--google-codelab-background, --paper-grey-100);
     overflow-y: auto;
   };
   --paper-drawer-panel-main-container: {
-    background: var(--paper-grey-300);
+    background: var(--google-codelab-background, --paper-grey-300);
   };
 }
 
-[drawer] {
+
+:host([theme="minimal"]) {
+  position: relative;
+}
+
+:host(:not([theme="minimal"])) [drawer] {
   height: auto !important; /* override default styling */
   margin: 16px 16px 16px 12px;
 }
 
+
 #drawer[narrow] #controls {
   width: 100%;
 }
 
 paper-toolbar {
-  background: var(--google-codelab-header-background);
+  background: var(--google-codelab-header-background, --paper-blue-600);
 }
 
 paper-toolbar .title {
@@ -68,8 +66,8 @@
 }
 
 paper-fab {
-  --paper-fab-keyboard-focus-background: var(--google-codelab-fab-background);
-  --paper-fab-background: var(--google-codelab-fab-background);
+  --paper-fab-keyboard-focus-background: var(--google-codelab-fab-background, --paper-blue-700);
+  --paper-fab-background: var(--google-codelab-fab-background, --paper-blue-700);
   flex-shrink: 0;
 }
 
@@ -96,7 +94,8 @@
 }
 
 #controls {
-  position: fixed;
+  position: absolute;
+  right: 0;
   bottom: 16px;
   padding: 0 16px;
   width: calc(100% - 256px); /* width of drawer */
@@ -119,7 +118,7 @@
 }
 
 .navbutton.prevbutton[disabled] {
-  background: var(--google-codelab-fab-background);
+  background: var(--google-codelab-fab-background, );
   color: white;
   transform: scale(0);
 }
@@ -195,18 +194,9 @@
   display: none;
 }
 
-#feedback {
-  color: var(--google-codelab-footer-text-color);
-  font-size: 0.9em;
-  position: fixed;
-  bottom: 16px;
-}
-
-#last-updated {
-  color: var(--google-codelab-footer-text-color);
+#metadata {
+  color: var(--google-codelab-footer-text-color, #777);
   font-size: 0.9em;
-  position: fixed;
-  bottom: 32px;
 }
 
 #feedback a {
@@ -214,7 +204,7 @@
 }
 
 @media (min-width: 641px) {
-  #pages {
+  :host(:not([theme="minimal"])) #pages {
     margin-top: 32px;
   }
   #controls {
diff --git a/demo/embed.html b/demo/embed.html
index 9a6df3a..8464a9b 100644
--- a/demo/embed.html
+++ b/demo/embed.html
@@ -19,18 +19,59 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>codelab demo</title>
+  <title>Embeddable codelab demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
+  <style is="custom-style">
+    html, body {
+      height: 100%;
+    }
+    body {
+      padding: 40px;
+      color: #212121;
+      font: 400 16px/24px Roboto,sans-serif;
+    }
+    #container {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    google-codelab {
+      height: 600px;
+      /*background-color: #eee;*/
+    }
+    h1, h2 {
+      font-weight: inherit;
+    }
+    :root {
+      --google-codelab-background: transparent;
+      --google-codelab-step-background: transparent;
+
+      /* Other customizations */
+      /*--google-codelab-step-link-color: initial;*/
+      /*--google-codelab-fab-background: red;*/
+      /*--google-codelab-footer-text-color: green;*/
+    }
+  </style>
 </head>
-<body unresolved class="fullbleed">
+<body unresolved>
 
-  <google-codelab title="Build Google Maps Using Web Components & No Code!"
+<div id="container">
+
+<h1>Codelabs  > Build Google Maps Using Web Components & No Code!</h1>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>
+
+  <google-codelab theme="minimal"
+                  title="Build Google Maps Using Web Components & No Code!"
                   feedback-link="https://github.com/googlecodelabs"
                   environment="web"
-                  hide-toolbar>
+                  hide-toolbar
+                  last-updated="2015-01-28">
 
     <google-codelab-step label="Overview" duration="2">
 
@@ -146,5 +187,9 @@ <h3 class="faq">Frequently Asked Questions</h3>
 
   </google-codelab>
 
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>
+
+</div>
+
 </body>
 </html>
diff --git a/google-codelab.html b/google-codelab.html
index 0f7617d..698f88f 100644
--- a/google-codelab.html
+++ b/google-codelab.html
@@ -18,7 +18,6 @@
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-localstorage/iron-localstorage.html">
-<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="../neon-animation/neon-animated-pages.html">
 <link rel="import" href="../neon-animation/animations/slide-from-right-animation.html">
 <link rel="import" href="../neon-animation/animations/slide-from-left-animation.html">
@@ -35,6 +34,7 @@
 <link rel="import" href="../paper-item/paper-item.html">
 
 <link rel="import" href="shared-style.html">
+<link rel="import" href="layout-style.html">
 <link rel="import" href="codelab-style.html">
 <link rel="import" href="analytics-behavior.html">
 
@@ -59,16 +59,17 @@
 <dom-module id="google-codelab">
   <template strip-whitespace>
     <style include="shared-style"></style>
+    <style include="layout-style"></style>
     <style include="codelab-style"></style>
 
-    <iron-localstorage name="{{title}}" value="{{state}}"
+    <iron-localstorage name="{{title}}" value="{{state}}" hidden
         on-iron-localstorage-load-empty="_stateInit"
         on-iron-localstorage-load="_stateLoaded">
     </iron-localstorage>
 
-    <paper-drawer-panel narrow="{{_narrow}}" selected="{{currDrawer}}" id="drawer">
+    <paper-drawer-panel id="drawer" narrow="{{_narrow}}" selected="{{currDrawer}}">
 
-      <div drawer>
+      <div drawer class="layout vertical justified">
         <paper-menu id="toc" selected="{{selected}}"
                     on-iron-select="_allowCodelabComplete">
           <template is="dom-repeat" items="{{steps}}" strip-whitespace>
@@ -78,18 +79,18 @@
           </template>
         </paper-menu>
 
-        <template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
-          <div id="feedback">
-            Did you find a mistake?
-            <a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
-          </div>
-        </template>
+        <div id="metadata">
+          <template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
+            <div id="feedback">
+              Did you find a mistake?
+              <a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
+            </div>
+          </template>
 
-        <template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
-          <div id="last-updated">
-            Last updated on {{lastUpdated}}.
-          </div>
-        </template>
+          <template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
+            <div id="last-updated">Last updated on {{lastUpdated}}.</div>
+          </template>
+        </div>
 
       </div>
 
@@ -114,35 +115,35 @@ <h1 class="title">{{title}}</h1>
           <content select="google-codelab-step"></content>
         </neon-animated-pages>
 
-        <footer id="controls">
-          <div class="fabs layout horizontal justified">
-            <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
-              on-tap="selectPrevious"
-              title="Previous step"
-              disabled$="{{_isFirstStep(selected)}}">
-            </paper-fab>
-
-            <div>
-              <template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
-                <paper-fab icon="chevron-right" raised class="navbutton nextbutton"
-                  title="{{_nextFabTitle(selected)}}"
-                  on-tap="selectNext">
-                </paper-fab>
-              </template>
-
-              <template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
-                <paper-fab icon="done" raised class="navbutton donebutton"
-                  on-tap="_goToHome" title="Complete codelab">
-                </paper-fab>
-              </template>
-            </div>
-          </div>
-        </footer>
-
       </paper-scroll-header-panel>
 
     </paper-drawer-panel>
 
+    <footer id="controls">
+      <div class="fabs layout horizontal justified">
+        <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
+          on-tap="selectPrevious"
+          title="Previous step"
+          disabled$="{{_isFirstStep(selected)}}">
+        </paper-fab>
+
+        <div>
+          <template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
+            <paper-fab icon="chevron-right" raised class="navbutton nextbutton"
+              title="{{_nextFabTitle(selected)}}"
+              on-tap="selectNext">
+            </paper-fab>
+          </template>
+
+          <template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
+            <paper-fab icon="done" raised class="navbutton donebutton"
+              on-tap="_goToHome" title="Complete codelab">
+            </paper-fab>
+          </template>
+        </div>
+      </div>
+    </footer>
+
     <paper-dialog id="resumeDialog" modal>
       <h2>Would you like to resume where you left off?</h2>
       <p>Step <span>{{_storedStep.step}}</span>: <span>{{_storedStep.label}}</span></p>
diff --git a/layout-style.html b/layout-style.html
new file mode 100644
index 0000000..1d5da78
--- /dev/null
+++ b/layout-style.html
@@ -0,0 +1,61 @@
+<!--
+Copyright (c) 2016 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+
+<dom-module id="layout-style">
+  <template>
+    <style>
+      .layout {
+        @apply(--layout);
+      }
+      .layout.horizontal {
+        @apply(--layout-horizontal);
+      }
+      .layout.vertical {
+        @apply(--layout-vertical);
+      }
+      .layout.center {
+        @apply(--layout-center);
+      }
+      .layout.center-center {
+        @apply(--layout-center-center);
+      }
+      .flex {
+        @apply(--layout-flex);
+      }
+      .two {
+        @apply(--layout-flex-2);
+      }
+      .end-justified {
+        @apply(--layout-end-justified);
+      }
+      .end {
+        @apply(--layout-end);
+      }
+      .justified {
+        @apply(--layout-justified);
+      }
+      .self-center {
+        @apply(--layout-self-center);
+      }
+      .wrap {
+         @apply(--layout-wrap);
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/step-style.html b/step-style.html
index ff78f5b..630a85f 100644
--- a/step-style.html
+++ b/step-style.html
@@ -18,8 +18,6 @@
   <template>
     <style>
       :host {
-        --google-codelab-step-background: #fff;
-        --google-codelab-step-link-color: #0097A7;
         --google-codelab-step-note: {};
         --google-codelab-step-tip: {};
         --google-codelab-step-warn: {};
@@ -41,7 +39,7 @@
 
       .instructions {
         box-shadow: 1px 1px 16px #ccc;
-        background: var(--google-codelab-step-background);
+        background: var(--google-codelab-step-background, #fff);
         max-width: 800px;
         font-size: 14px;
         margin: 0 auto;
@@ -60,7 +58,7 @@
 
       .instructions ::content a,
       .instructions ::content a:visited {
-        color: var(--google-codelab-step-link-color);
+        color: var(--google-codelab-step-link-color, #0097A7);
       }
 
       .instructions ::content h2,

From c4bbdb9c7a1f0eef12e4227fcf099ab9aa7b96c2 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Sat, 30 Jan 2016 14:55:15 -0800
Subject: [PATCH 2/5] Adds noToolbar, noArrows, noHighlight properties - turns
 off most styling when <google-codelab theme="minimal"> is used

---
 codelab-style.html       | 34 ++++++++++--------
 demo/codelab.html        |  7 ++++
 demo/embed.html          | 26 ++++++--------
 google-codelab-step.html |  7 ++++
 google-codelab.html      | 34 ++++++++++++++----
 shared-style.html        | 21 +----------
 step-style.html          | 54 ++++++++++++++---------------
 test/codelab.html        |  4 ++-
 test/embed.html          | 75 ++++++++++++++++++++++++++++++++++++++++
 9 files changed, 176 insertions(+), 86 deletions(-)
 create mode 100644 test/embed.html

diff --git a/codelab-style.html b/codelab-style.html
index 558059d..ee6a192 100644
--- a/codelab-style.html
+++ b/codelab-style.html
@@ -55,6 +55,7 @@
 
 paper-toolbar {
   background: var(--google-codelab-header-background, --paper-blue-600);
+  color: #fff;
 }
 
 paper-toolbar .title {
@@ -71,21 +72,15 @@
   flex-shrink: 0;
 }
 
-h1 {
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 1em;
-  color: white;
-  padding: 0;
-  margin: 0.67em 8px;
+/* override external styles */
+:host([theme="minimal"]) #resumeDialog > * {
+  margin-top: 20px;
+  padding: 0 24px;
 }
 
-#countdown {
-  text-align: right;
-  vertical-align: bottom;
-  font-weight: 400;
-  min-width: 80px;
-  color: white;
+:host([theme="minimal"]) #resumeDialog .buttons {
+  padding: 8px 8px 8px 24px;
+  margin: 0;
 }
 
 #countdown iron-icon {
@@ -118,7 +113,7 @@
 }
 
 .navbutton.prevbutton[disabled] {
-  background: var(--google-codelab-fab-background, );
+  background: var(--google-codelab-fab-background);
   color: white;
   transform: scale(0);
 }
@@ -133,6 +128,7 @@
   overflow: hidden;
   border-radius: 4px;
   padding: 6px 16px;
+  box-sizing: content-box; /* override users that set * selector box-sizing. */
 }
 
 .toc-item i {
@@ -196,11 +192,19 @@
 
 #metadata {
   color: var(--google-codelab-footer-text-color, #777);
-  font-size: 0.9em;
+  font-size: 0.7em;
+}
+
+:host(:not([theme="minimal"])) #metadata {
+  position: fixed;
+  bottom: 8px;
+  background-color: var(--paper-grey-100);
+  padding: 4px 8px;
 }
 
 #feedback a {
   color: currentcolor;
+  text-decoration: underline;
 }
 
 @media (min-width: 641px) {
diff --git a/demo/codelab.html b/demo/codelab.html
index bd1ab93..76054a7 100644
--- a/demo/codelab.html
+++ b/demo/codelab.html
@@ -21,9 +21,16 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>codelab demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
+  <style>
+  body {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+  }
+  </style>
 </head>
 <body unresolved class="fullbleed">
 
diff --git a/demo/embed.html b/demo/embed.html
index 8464a9b..43a21ca 100644
--- a/demo/embed.html
+++ b/demo/embed.html
@@ -20,19 +20,17 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Embeddable codelab demo</title>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons">
+  <link rel="stylesheet"
+      href="https://developers.google.com/_static/80c6b067d5/css/devsite-google-blue.css">
+  <link rel="stylesheet" href="https://developers.google.com/maps/styles/common.css">
+
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
   <style is="custom-style">
-    html, body {
-      height: 100%;
-    }
-    body {
-      padding: 40px;
-      color: #212121;
-      font: 400 16px/24px Roboto,sans-serif;
-    }
     #container {
       display: flex;
       justify-content: center;
@@ -41,15 +39,11 @@
       margin: 0 auto;
     }
     google-codelab {
-      height: 600px;
+      height: 700px;
       /*background-color: #eee;*/
     }
-    h1, h2 {
-      font-weight: inherit;
-    }
     :root {
       --google-codelab-background: transparent;
-      --google-codelab-step-background: transparent;
 
       /* Other customizations */
       /*--google-codelab-step-link-color: initial;*/
@@ -70,8 +64,10 @@ <h1>Codelabs  > Build Google Maps Using Web Components & No Code!</h1>
                   title="Build Google Maps Using Web Components & No Code!"
                   feedback-link="https://github.com/googlecodelabs"
                   environment="web"
-                  hide-toolbar
-                  last-updated="2015-01-28">
+                  last-updated="2015-01-28"
+                  no-toolbar
+                  no-arrows
+                  no-highlight>
 
     <google-codelab-step label="Overview" duration="2">
 
diff --git a/google-codelab-step.html b/google-codelab-step.html
index 7a24a57..21e1235 100644
--- a/google-codelab-step.html
+++ b/google-codelab-step.html
@@ -122,6 +122,13 @@ <h2 id="title"><span>{{step}}</span>. <span>{{label}}</span></h2>
       _isHighlighted: false,
 
       _activeChanged: function() {
+        var codelab = Polymer.dom(this).parentNode;
+
+        // Don't syntax highlight code if google-codelab requests it.
+        if (codelab.localName === 'google-codelab' && codelab.noHighlight) {
+          return;
+        }
+
         if (this.active && !this._isHighlighted) {
 
           // Minimize jank by waiting one click to do syntax highlighting.
diff --git a/google-codelab.html b/google-codelab.html
index 698f88f..acd5018 100644
--- a/google-codelab.html
+++ b/google-codelab.html
@@ -33,7 +33,6 @@
 <link rel="import" href="../paper-menu/paper-menu.html">
 <link rel="import" href="../paper-item/paper-item.html">
 
-<link rel="import" href="shared-style.html">
 <link rel="import" href="layout-style.html">
 <link rel="import" href="codelab-style.html">
 <link rel="import" href="analytics-behavior.html">
@@ -44,7 +43,8 @@
 
 Example:
 
-    <google-codelab title="Awesome codelab" feedback-link="http://example.org">
+    <google-codelab title="Awesome codelab" feedback-link="http://example.org"
+                    last-updated="2015-01-28">
       <google-codelab-step label="One" step="1" duration="10">
         ...
       </google-codelab-step>
@@ -53,12 +53,18 @@
       </google-codelab-step>
     </google-codelab>
 
+The element can also be used in a minimalistic mode where less styling is
+applied. Use the `theme="minimal"` attribute and combine with the
+`noToolbar`, `noArrows`, and `noHighlight` properties to turn off the top nav and
+prevent syntax highlighting code blocks, respectively:
+
+    <google-codelab theme="minimal" no-toolbar no-arrows no-highlight>
+
 @demo demo/codelab.html
 @demo demo/embed.html
 -->
 <dom-module id="google-codelab">
   <template strip-whitespace>
-    <style include="shared-style"></style>
     <style include="layout-style"></style>
     <style include="codelab-style"></style>
 
@@ -95,7 +101,7 @@
       </div>
 
       <paper-scroll-header-panel id="headerpanel" fixed main>
-        <paper-toolbar hidden$="[[hideToolbar]]">
+        <paper-toolbar hidden$="[[noToolbar]]">
           <template is="dom-if" if="{{_narrow}}" strip-whitespace>
             <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
           </template>
@@ -119,7 +125,7 @@ <h1 class="title">{{title}}</h1>
 
     </paper-drawer-panel>
 
-    <footer id="controls">
+    <footer id="controls" hidden$="[[noArrows]]">
       <div class="fabs layout horizontal justified">
         <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
           on-tap="selectPrevious"
@@ -268,10 +274,26 @@ <h2>Would you like to resume where you left off?</h2>
           value: null
         },
 
+        /**
+         * Hides the topnav toolbar.
+         */
+        noToolbar: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Hides the forward/background navigation arrows.
+         */
+        noArrows: {
+          type: Boolean,
+          value: false
+        },
+
         /**
          * Property determines whether the toolbar is hidden.
          */
-        hideToolbar: {
+        noHighlight: {
           type: Boolean,
           value: false,
           reflectToAttribute: true
diff --git a/shared-style.html b/shared-style.html
index 4995e1e..b0f32c9 100644
--- a/shared-style.html
+++ b/shared-style.html
@@ -1,5 +1,5 @@
 <!--
-Copyright (c) 2015 Google Inc.
+Copyright (c) 2016 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License. You may obtain a copy of
@@ -22,25 +22,6 @@
         --paper-radio-button-checked-ink-color: #4285f4;
         --paper-radio-button-checked-color: #4285f4;
         --paper-radio-button-unchecked-color: #4285f4;
-
-        --text-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-        --text-font-size: 14px;
-        --text-font-weight: 200;
-      }
-
-      /* Components' shared styles */
-      :host {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
-      }
-
-      /* Document styles */
-      /* TODO: Consider moving to site and preview projects. */
-      body {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
       }
     </style>
   </template>
diff --git a/step-style.html b/step-style.html
index 630a85f..1d575e3 100644
--- a/step-style.html
+++ b/step-style.html
@@ -1,5 +1,5 @@
 <!--
-Copyright (c) 2015 Google Inc.
+Copyright (c) 2016 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License. You may obtain a copy of
@@ -37,7 +37,7 @@
         margin: 0 0 30px;
       }
 
-      .instructions {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions {
         box-shadow: 1px 1px 16px #ccc;
         background: var(--google-codelab-step-background, #fff);
         max-width: 800px;
@@ -56,70 +56,70 @@
         }
       }
 
-      .instructions ::content a,
-      .instructions ::content a:visited {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content a:visited {
         color: var(--google-codelab-step-link-color, #0097A7);
       }
 
-      .instructions ::content h2,
-      .instructions ::content h3,
-      .instructions ::content h4 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h4 {
         font-weight: 400;
         margin: 0;
       }
 
-      .instructions ::content h2 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
         font-weight: 300;
         line-height: 1em;
         font-size: 22px;
       }
 
-      .instructions ::content {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content {
         line-height: 24px;
       }
 
-      .instructions ::content li {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content li {
         margin: 0.5em 0;
       }
 
-      .instructions ::content h2 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h2 {
         font-weight: 500;
         margin: 1.5em 0 0 0;
         font-size: 20px;
       }
 
-      .instructions ::content h3 {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3 {
         font-weight: 500;
         margin: 20px 0 0 0;
       }
 
-      .instructions ::content aside {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside {
         padding: 0.5em 1em;
         margin: 2em 0;
         border-left: 4px solid;
       }
 
-      .instructions ::content aside p {
+      :host-context(google-codelab:not([theme="minimal"]))  :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside p {
         margin: 0.5em 0;
       }
 
-      .instructions ::content aside.note,
-      .instructions ::content aside.notice {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.note,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.notice {
         border-color: #fca;
         background: #fed;
         color: #842;
         @apply(--google-codelab-step-note);
       }
 
-      .instructions ::content aside.tip,
-      .instructions ::content aside.special {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.tip,
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.special {
         border-color: #6a6;
         background: #ded;
         color: #464;
         @apply(--google-codelab-step-tip);
       }
 
-      .instructions ::content aside.warning {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content aside.warning {
         border-color: #DB8A61;
         background: #fed;
         color: #842;
@@ -167,6 +167,7 @@
 
       .instructions ::content paper-button a {
         text-decoration: none;
+        color: inherit !important;
       }
 
       .instructions ::content paper-button.colored {
@@ -174,11 +175,6 @@
         color: #fff;
       }
 
-      .instructions ::content paper-button.colored a,
-      .instructions ::content paper-button.colored a:visited {
-        color: #fff;
-      }
-
       .instructions ::content paper-button.red {
         background-color: #DB4437;
       }
@@ -203,26 +199,26 @@
         margin: 0;
       }
 
-      .instructions ::content h3.faq {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content h3.faq {
         border-bottom: 1px solid #ddd;
       }
 
-      .instructions ::content ul.faq {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content ul.faq {
         list-style: none;
         padding-left: 1em;
       }
 
-      .instructions ::content .faq li {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq li {
         font-size: 1.1em;
         margin-bottom: 0.8em;
       }
 
-      .instructions ::content .faq a {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a {
         color: inherit;
         text-decoration: none;
       }
 
-      .instructions ::content .faq a:hover {
+      :host-context(google-codelab:not([theme="minimal"])) .instructions ::content .faq a:hover {
         text-decoration: underline;
       }
 
diff --git a/test/codelab.html b/test/codelab.html
index 0485d60..0987478 100644
--- a/test/codelab.html
+++ b/test/codelab.html
@@ -34,7 +34,8 @@
 
   <test-fixture id="codelab">
     <template>
-      <google-codelab title="Test title" feedback-link="http://codelab.example.org">
+      <google-codelab title="Test title" feedback-link="http://codelab.example.org"
+          last-updated="2015-01-28">
         <google-codelab-step label="First" duration="2">
           First step body
         </google-codelab-step>
@@ -101,6 +102,7 @@
           assert.equal(codelab.feedbackLink, 'http://codelab.example.org');
           assert.equal(codelab.steps[0].step, 1);
           assert.equal(codelab.steps[1].step, 2);
+          assert.equal(codelab.lastUpdated, '2015-01-28');
 
           assert.equal(codelab.querySelector('h1').textContent, 'Test title');
 
diff --git a/test/embed.html b/test/embed.html
new file mode 100644
index 0000000..eb01d30
--- /dev/null
+++ b/test/embed.html
@@ -0,0 +1,75 @@
+<!--
+Copyright (c) 2015 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>embed tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../google-codelab-step.html">
+  <link rel="import" href="../google-codelab.html">
+</head>
+<body>
+
+  <test-fixture id="codelab">
+    <template>
+      <google-codelab title="Test title" feedback-link="http://codelab.example.org"
+                      no-toolbar no-highlight no-arrows>
+        <google-codelab-step label="First" duration="2">
+<pre><code language="">&lt;head&gt;
+  ....
+  &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
+  &lt;link rel="import" href="bower_components/google-map/google-map.html"&gt;
+&lt;/head&gt;</code></pre>
+        </google-codelab-step>
+      </google-codelab>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('ui toggles', function() {
+
+      test('test properties', function(done) {
+        var codelab = fixture('codelab');
+
+        var toolbar = codelab.$.headerpanel.querySelector('paper-toolbar');
+        assert.equal(toolbar.hidden, true, 'toolbar hidden');
+        assert.equal(getComputedStyle(toolbar).display,
+                     'none', 'toolbar not displayed');
+
+        assert.equal(codelab.$.controls.hidden, true, 'arrows hidden');
+        assert.equal(getComputedStyle(
+            codelab.$.controls).display, 'none', 'arrows not displayed');
+
+        var higlighted = codelab.querySelector('code span');
+        async.nextTick(function() {
+          assert.equal(higlighted, null, 'code was not syntax higlighted');
+          done();
+        });
+      });
+
+    });
+  </script>
+
+</body>

From 6b3e570bdb6ef4322e356fa7750be15b1fae554b Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Sat, 30 Jan 2016 15:30:20 -0800
Subject: [PATCH 3/5] Add time remaining to left nav

---
 codelab-style.html  | 13 +++++++++++--
 google-codelab.html | 13 +++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/codelab-style.html b/codelab-style.html
index ee6a192..cbeb899 100644
--- a/codelab-style.html
+++ b/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 {
diff --git a/google-codelab.html b/google-codelab.html
index acd5018..c505755 100644
--- a/google-codelab.html
+++ b/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>

From 5727191099f46fb06fa1e9b2115a86418df256fd Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Sat, 30 Jan 2016 15:34:02 -0800
Subject: [PATCH 4/5] No padding for embed

---
 step-style.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/step-style.html b/step-style.html
index 1d575e3..0b6438d 100644
--- a/step-style.html
+++ b/step-style.html
@@ -50,6 +50,10 @@
         padding: 24px;
       }
 
+      :host-context(google-codelab[theme="minimal"]) .instructions .inner {
+        padding: 0 24px;
+      }
+
       @media (max-width: 800px) {
         .instructions {
           margin: 0 0 16px 0;

From dcd8d92ca241603ddabec33ddb5c7e62ec852829 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Sat, 30 Jan 2016 18:05:04 -0800
Subject: [PATCH 5/5] Unbreak tests

---
 test/codelab.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/test/codelab.html b/test/codelab.html
index 0987478..a476129 100644
--- a/test/codelab.html
+++ b/test/codelab.html
@@ -55,7 +55,10 @@
       function verifySecondSelected(codelab) {
         assert.equal(codelab.selected, 1, 'selected');
         assert.equal(codelab.remaining, '3 min remaining', 'remaining');
-        assert.match(codelab.$.countdown.textContent.trim(), /3 min/);
+        var countdowns = codelab.root.querySelectorAll('.countdown');
+        for (var i = 0, countdown; countdown = countdowns[i]; ++i) {
+          assert.match(countdown.textContent.trim(), /3 min/);
+        }
         assert.equal(location.hash, '#1', 'location.hash');
         assert.equal(codelab.$.toc.selected, 1, '$.toc.selected');
         assert(!codelab.querySelector('.prevbutton').disabled, 'prev fab is disabled');
@@ -193,7 +196,12 @@
           async.nextTick(function() {
             assert.equal(codelab.selected, 0, 'selected');
             assert.equal(codelab.remaining, '5 min remaining', 'remaining');
-            assert.match(codelab.$.countdown.textContent.trim(), /5 min/);
+
+            var countdowns = codelab.root.querySelectorAll('.countdown');
+            for (var i = 0, countdown; countdown = countdowns[i]; ++i) {
+              assert.match(codelab.$.countdown.textContent.trim(), /5 min/);
+            }
+
             assert.equal(codelab.$.toc.selected, 0, '$.toc.selected');
             assert(location.hash === '#0' || location.hash === '', 'location.hash');
             assert(codelab.querySelector('.prevbutton').disabled, 'prev fab is not disabled');
