Merge pull request #16 from googlecodelabs/embed

Embeddable code labs!

Author: ebidel

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,32 @@
     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);
+  color: #fff;
 }
 
 paper-toolbar .title {
@@ -68,35 +67,39 @@
 }
 
 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;
 }
 
-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 {
+.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 {
-  position: fixed;
+  position: absolute;
+  right: 0;
   bottom: 16px;
   padding: 0 16px;
   width: calc(100% - 256px); /* width of drawer */
@@ -134,6 +137,7 @@
   overflow: hidden;
   border-radius: 4px;
   padding: 6px 16px;
+  box-sizing: content-box; /* override users that set * selector box-sizing. */
 }
 
 .toc-item i {
@@ -195,26 +199,25 @@
   display: none;
 }
 
-#feedback {
-  color: var(--google-codelab-footer-text-color);
-  font-size: 0.9em;
-  position: fixed;
-  bottom: 16px;
+#metadata {
+  color: var(--google-codelab-footer-text-color, #777);
+  font-size: 0.7em;
 }
 
-#last-updated {
-  color: var(--google-codelab-footer-text-color);
-  font-size: 0.9em;
+:host(:not([theme="minimal"])) #metadata {
   position: fixed;
-  bottom: 32px;
+  bottom: 8px;
+  background-color: var(--paper-grey-100);
+  padding: 4px 8px;
 }
 
 #feedback a {
   color: currentcolor;
+  text-decoration: underline;
 }
 
 @media (min-width: 641px) {
-  #pages {
+  :host(:not([theme="minimal"])) #pages {
     margin-top: 32px;
   }
   #controls {

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">
 

demo/embed.html

@@ -19,18 +19,55 @@
 <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>
+  <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">
+    #container {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    google-codelab {
+      height: 700px;
+      /*background-color: #eee;*/
+    }
+    :root {
+      --google-codelab-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>
+
+<div id="container">
+
+<h1>Codelabs  > Build Google Maps Using Web Components & No Code!</h1>
 
-  <google-codelab title="Build Google Maps Using Web Components & No Code!"
+<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>
+                  last-updated="2015-01-28"
+                  no-toolbar
+                  no-arrows
+                  no-highlight>
 
     <google-codelab-step label="Overview" duration="2">
 
@@ -146,5 +183,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>

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.