Skip to content

Commit c4bbdb9

Browse files
ebidelebidel
committed
Adds noToolbar, noArrows, noHighlight properties
- turns off most styling when <google-codelab theme="minimal"> is used
1 parent b4a5829 commit c4bbdb9

File tree

9 files changed

+176
-86
lines changed

9 files changed

+176
-86
lines changed

‎codelab-style.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555

5656
paper-toolbar {
5757
background: var(--google-codelab-header-background, --paper-blue-600);
58+
color: #fff;
5859
}
5960

6061
paper-toolbar .title {
@@ -71,21 +72,15 @@
7172
flex-shrink: 0;
7273
}
7374

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

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

9186
#countdown iron-icon {
@@ -118,7 +113,7 @@
118113
}
119114

120115
.navbutton.prevbutton[disabled] {
121-
background: var(--google-codelab-fab-background, );
116+
background: var(--google-codelab-fab-background);
122117
color: white;
123118
transform: scale(0);
124119
}
@@ -133,6 +128,7 @@
133128
overflow: hidden;
134129
border-radius: 4px;
135130
padding: 6px 16px;
131+
box-sizing: content-box; /* override users that set * selector box-sizing. */
136132
}
137133

138134
.toc-item i {
@@ -196,11 +192,19 @@
196192

197193
#metadata {
198194
color: var(--google-codelab-footer-text-color, #777);
199-
font-size: 0.9em;
195+
font-size: 0.7em;
196+
}
197+
198+
:host(:not([theme="minimal"])) #metadata {
199+
position: fixed;
200+
bottom: 8px;
201+
background-color: var(--paper-grey-100);
202+
padding: 4px 8px;
200203
}
201204

202205
#feedback a {
203206
color: currentcolor;
207+
text-decoration: underline;
204208
}
205209

206210
@media (min-width: 641px) {

‎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: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,17 @@
2020
<meta charset="utf-8">
2121
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
2222
<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">
2733
<style is="custom-style">
28-
html, body {
29-
height: 100%;
30-
}
31-
body {
32-
padding: 40px;
33-
color: #212121;
34-
font: 400 16px/24px Roboto,sans-serif;
35-
}
3634
#container {
3735
display: flex;
3836
justify-content: center;
@@ -41,15 +39,11 @@
4139
margin: 0 auto;
4240
}
4341
google-codelab {
44-
height: 600px;
42+
height: 700px;
4543
/*background-color: #eee;*/
4644
}
47-
h1, h2 {
48-
font-weight: inherit;
49-
}
5045
:root {
5146
--google-codelab-background: transparent;
52-
--google-codelab-step-background: transparent;
5347

5448
/* Other customizations */
5549
/*--google-codelab-step-link-color: initial;*/
@@ -70,8 +64,10 @@ <h1>Codelabs > Build Google Maps Using Web Components & No Code!</h1>
7064
title="Build Google Maps Using Web Components & No Code!"
7165
feedback-link="https://github.com/googlecodelabs"
7266
environment="web"
73-
hide-toolbar
74-
last-updated="2015-01-28">
67+
last-updated="2015-01-28"
68+
no-toolbar
69+
no-arrows
70+
no-highlight>
7571

7672
<google-codelab-step label="Overview" duration="2">
7773

‎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.

‎google-codelab.html‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
<link rel="import" href="../paper-menu/paper-menu.html">
3434
<link rel="import" href="../paper-item/paper-item.html">
3535

36-
<link rel="import" href="shared-style.html">
3736
<link rel="import" href="layout-style.html">
3837
<link rel="import" href="codelab-style.html">
3938
<link rel="import" href="analytics-behavior.html">
@@ -44,7 +43,8 @@
4443
4544
Example:
4645
47-
<google-codelab title="Awesome codelab" feedback-link="http://example.org">
46+
<google-codelab title="Awesome codelab" feedback-link="http://example.org"
47+
last-updated="2015-01-28">
4848
<google-codelab-step label="One" step="1" duration="10">
4949
...
5050
</google-codelab-step>
@@ -53,12 +53,18 @@
5353
</google-codelab-step>
5454
</google-codelab>
5555
56+
The element can also be used in a minimalistic mode where less styling is
57+
applied. Use the `theme="minimal"` attribute and combine with the
58+
`noToolbar`, `noArrows`, and `noHighlight` properties to turn off the top nav and
59+
prevent syntax highlighting code blocks, respectively:
60+
61+
<google-codelab theme="minimal" no-toolbar no-arrows no-highlight>
62+
5663
@demo demo/codelab.html
5764
@demo demo/embed.html
5865
-->
5966
<dom-module id="google-codelab">
6067
<template strip-whitespace>
61-
<style include="shared-style"></style>
6268
<style include="layout-style"></style>
6369
<style include="codelab-style"></style>
6470

@@ -95,7 +101,7 @@
95101
</div>
96102

97103
<paper-scroll-header-panel id="headerpanel" fixed main>
98-
<paper-toolbar hidden$="[[hideToolbar]]">
104+
<paper-toolbar hidden$="[[noToolbar]]">
99105
<template is="dom-if" if="{{_narrow}}" strip-whitespace>
100106
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
101107
</template>
@@ -119,7 +125,7 @@ <h1 class="title">{{title}}</h1>
119125

120126
</paper-drawer-panel>
121127

122-
<footer id="controls">
128+
<footer id="controls" hidden$="[[noArrows]]">
123129
<div class="fabs layout horizontal justified">
124130
<paper-fab raised class="navbutton prevbutton" icon="chevron-left"
125131
on-tap="selectPrevious"
@@ -268,10 +274,26 @@ <h2>Would you like to resume where you left off?</h2>
268274
value: null
269275
},
270276

277+
/**
278+
* Hides the topnav toolbar.
279+
*/
280+
noToolbar: {
281+
type: Boolean,
282+
value: false
283+
},
284+
285+
/**
286+
* Hides the forward/background navigation arrows.
287+
*/
288+
noArrows: {
289+
type: Boolean,
290+
value: false
291+
},
292+
271293
/**
272294
* Property determines whether the toolbar is hidden.
273295
*/
274-
hideToolbar: {
296+
noHighlight: {
275297
type: Boolean,
276298
value: false,
277299
reflectToAttribute: true

‎shared-style.html‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--
2-
Copyright (c) 2015 Google Inc.
2+
Copyright (c) 2016 Google Inc.
33
44
Licensed under the Apache License, Version 2.0 (the "License"); you may not
55
use this file except in compliance with the License. You may obtain a copy of
@@ -22,25 +22,6 @@
2222
--paper-radio-button-checked-ink-color: #4285f4;
2323
--paper-radio-button-checked-color: #4285f4;
2424
--paper-radio-button-unchecked-color: #4285f4;
25-
26-
--text-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
27-
--text-font-size: 14px;
28-
--text-font-weight: 200;
29-
}
30-
31-
/* Components' shared styles */
32-
:host {
33-
font-family: var(--text-font-family);
34-
font-size: var(--text-font-size);
35-
font-weight: var(--text-font-weight);
36-
}
37-
38-
/* Document styles */
39-
/* TODO: Consider moving to site and preview projects. */
40-
body {
41-
font-family: var(--text-font-family);
42-
font-size: var(--text-font-size);
43-
font-weight: var(--text-font-weight);
4425
}
4526
</style>
4627
</template>

0 commit comments

Comments
 (0)