Skip to content
This repository was archived by the owner on Dec 16, 2025. It is now read-only.

Commit 1d52804

Browse files
ebidelebidel
committed
Merge pull request #16 from googlecodelabs/embed
Embeddable code labs!
2 parents f54f788 + dcd8d92 commit 1d52804

10 files changed

Lines changed: 359 additions & 148 deletions

‎codelab-style.html‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,6 @@
2020
<template strip-whitespace>
2121
<style>
2222

23-
:root {
24-
--google-codelab-background: var(--paper-grey-100);
25-
--google-codelab-header-background: var(--paper-blue-600);
26-
--google-codelab-fab-background: var(--paper-blue-700);
27-
--google-codelab-footer-text-color: #777;
28-
--google-codelab-width: 800px;
29-
}
30-
3123
:host {
3224
display: block;
3325
line-height: 24px;
@@ -38,25 +30,32 @@
3830
padding: 0;
3931
};
4032
--paper-drawer-panel-left-drawer-container: {
41-
background: var(--google-codelab-background);
33+
background: var(--google-codelab-background, --paper-grey-100);
4234
overflow-y: auto;
4335
};
4436
--paper-drawer-panel-main-container: {
45-
background: var(--paper-grey-300);
37+
background: var(--google-codelab-background, --paper-grey-300);
4638
};
4739
}
4840

49-
[drawer] {
41+
42+
:host([theme="minimal"]) {
43+
position: relative;
44+
}
45+
46+
:host(:not([theme="minimal"])) [drawer] {
5047
height: auto !important; /* override default styling */
5148
margin: 16px 16px 16px 12px;
5249
}
5350

51+
5452
#drawer[narrow] #controls {
5553
width: 100%;
5654
}
5755

5856
paper-toolbar {
59-
background: var(--google-codelab-header-background);
57+
background: var(--google-codelab-header-background, --paper-blue-600);
58+
color: #fff;
6059
}
6160

6261
paper-toolbar .title {
@@ -68,35 +67,39 @@
6867
}
6968

7069
paper-fab {
71-
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background);
72-
--paper-fab-background: var(--google-codelab-fab-background);
70+
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background, --paper-blue-700);
71+
--paper-fab-background: var(--google-codelab-fab-background, --paper-blue-700);
7372
flex-shrink: 0;
7473
}
7574

76-
h1 {
77-
font-size: 22px;
78-
font-weight: 300;
79-
line-height: 1em;
80-
color: white;
81-
padding: 0;
82-
margin: 0.67em 8px;
75+
/* override external styles */
76+
:host([theme="minimal"]) #resumeDialog > * {
77+
margin-top: 20px;
78+
padding: 0 24px;
8379
}
8480

85-
#countdown {
86-
text-align: right;
87-
vertical-align: bottom;
88-
font-weight: 400;
89-
min-width: 80px;
90-
color: white;
81+
:host([theme="minimal"]) #resumeDialog .buttons {
82+
padding: 8px 8px 8px 24px;
83+
margin: 0;
9184
}
9285

93-
#countdown iron-icon {
86+
.countdown iron-icon {
9487
margin-right: 3px;
95-
--iron-icon-fill-color: rgba(255, 255, 255, 0.8);
88+
}
89+
90+
:host(:not([theme="minimal"])) [drawer] .countdown {
91+
display: none;
92+
}
93+
94+
:host([theme="minimal"]) [drawer] .countdown {
95+
padding: 0 16px 16px 16px;
96+
font-style: italic;
97+
color: var(--paper-blue-500);
9698
}
9799

98100
#controls {
99-
position: fixed;
101+
position: absolute;
102+
right: 0;
100103
bottom: 16px;
101104
padding: 0 16px;
102105
width: calc(100% - 256px); /* width of drawer */
@@ -134,6 +137,7 @@
134137
overflow: hidden;
135138
border-radius: 4px;
136139
padding: 6px 16px;
140+
box-sizing: content-box; /* override users that set * selector box-sizing. */
137141
}
138142

139143
.toc-item i {
@@ -195,26 +199,25 @@
195199
display: none;
196200
}
197201

198-
#feedback {
199-
color: var(--google-codelab-footer-text-color);
200-
font-size: 0.9em;
201-
position: fixed;
202-
bottom: 16px;
202+
#metadata {
203+
color: var(--google-codelab-footer-text-color, #777);
204+
font-size: 0.7em;
203205
}
204206

205-
#last-updated {
206-
color: var(--google-codelab-footer-text-color);
207-
font-size: 0.9em;
207+
:host(:not([theme="minimal"])) #metadata {
208208
position: fixed;
209-
bottom: 32px;
209+
bottom: 8px;
210+
background-color: var(--paper-grey-100);
211+
padding: 4px 8px;
210212
}
211213

212214
#feedback a {
213215
color: currentcolor;
216+
text-decoration: underline;
214217
}
215218

216219
@media (min-width: 641px) {
217-
#pages {
220+
:host(:not([theme="minimal"])) #pages {
218221
margin-top: 32px;
219222
}
220223
#controls {

‎demo/codelab.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,16 @@
2121
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
2222
<title>codelab demo</title>
2323
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
24+
<link rel="stylesheet"
25+
href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
2426
<link rel="import" href="../../iron-icons/iron-icons.html">
2527
<link rel="import" href="../../paper-button/paper-button.html">
2628
<link rel="import" href="../google-codelab-elements.html">
29+
<style>
30+
body {
31+
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
32+
}
33+
</style>
2734
</head>
2835
<body unresolved class="fullbleed">
2936

‎demo/embed.html‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,55 @@
1919
<head>
2020
<meta charset="utf-8">
2121
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
22-
<title>codelab demo</title>
22+
<title>Embeddable codelab demo</title>
23+
<link rel="stylesheet"
24+
href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons">
25+
<link rel="stylesheet"
26+
href="https://developers.google.com/_static/80c6b067d5/css/devsite-google-blue.css">
27+
<link rel="stylesheet" href="https://developers.google.com/maps/styles/common.css">
28+
2329
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
2430
<link rel="import" href="../../iron-icons/iron-icons.html">
2531
<link rel="import" href="../../paper-button/paper-button.html">
2632
<link rel="import" href="../google-codelab-elements.html">
33+
<style is="custom-style">
34+
#container {
35+
display: flex;
36+
justify-content: center;
37+
flex-direction: column;
38+
max-width: 1000px;
39+
margin: 0 auto;
40+
}
41+
google-codelab {
42+
height: 700px;
43+
/*background-color: #eee;*/
44+
}
45+
:root {
46+
--google-codelab-background: transparent;
47+
48+
/* Other customizations */
49+
/*--google-codelab-step-link-color: initial;*/
50+
/*--google-codelab-fab-background: red;*/
51+
/*--google-codelab-footer-text-color: green;*/
52+
}
53+
</style>
2754
</head>
28-
<body unresolved class="fullbleed">
55+
<body unresolved>
56+
57+
<div id="container">
58+
59+
<h1>Codelabs > Build Google Maps Using Web Components & No Code!</h1>
2960

30-
<google-codelab title="Build Google Maps Using Web Components & No Code!"
61+
<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>
62+
63+
<google-codelab theme="minimal"
64+
title="Build Google Maps Using Web Components & No Code!"
3165
feedback-link="https://github.com/googlecodelabs"
3266
environment="web"
33-
hide-toolbar>
67+
last-updated="2015-01-28"
68+
no-toolbar
69+
no-arrows
70+
no-highlight>
3471

3572
<google-codelab-step label="Overview" duration="2">
3673

@@ -146,5 +183,9 @@ <h3 class="faq">Frequently Asked Questions</h3>
146183

147184
</google-codelab>
148185

186+
<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>
187+
188+
</div>
189+
149190
</body>
150191
</html>

‎google-codelab-step.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@ <h2 id="title"><span>{{step}}</span>. <span>{{label}}</span></h2>
122122
_isHighlighted: false,
123123

124124
_activeChanged: function() {
125+
var codelab = Polymer.dom(this).parentNode;
126+
127+
// Don't syntax highlight code if google-codelab requests it.
128+
if (codelab.localName === 'google-codelab' && codelab.noHighlight) {
129+
return;
130+
}
131+
125132
if (this.active && !this._isHighlighted) {
126133

127134
// Minimize jank by waiting one click to do syntax highlighting.

0 commit comments

Comments
 (0)