Skip to content

Commit

Permalink
TOC is collapisble in <detail>
Browse files Browse the repository at this point in the history
  • Loading branch information
ebidel committed Feb 7, 2014
1 parent 398ef7b commit b4c171b
Show file tree
Hide file tree
Showing 9 changed files with 161 additions and 98 deletions.
1 change: 1 addition & 0 deletions _includes/edit_on_github.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<span class="edit-on-github">
<a href="https://github.com/Polymer/docs/edit/master/{{page.path}}">Edit on Github</a>
</span>
<div><!-- intentionally blank --></div>
9 changes: 7 additions & 2 deletions _includes/toc.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
#### Content {#toc}
{:.no_toc}
<details id="toc">
<summary>Table of contents</summary>
</details>

{%comment%}
Moved inside the <details> element using JS.
{%endcomment%}

* toc placeholder
{:toc}
12 changes: 5 additions & 7 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,15 @@ <h1>{{page.title}}</h1>

<article class="{{permalinks_class | trim}}">
{% include edit_on_github.html %}

{% comment %}
{% if page.title %}
<div class="page-header">

<div class="onlyonmobile">
<h1>{{page.title}}</h1>
{% if page.subtitle %}
<h1><small>{{page.subtitle}}</small></h1>
<summary>{{page.subtitle}}</summary>
{% else if page.type %}
<summary>{{site.data.pagetypes[page.type].headertitle}}</summary>
{% endif %}
</div>
{% endif %}
{% endcomment %}

{{content}}
</article>
Expand Down
24 changes: 14 additions & 10 deletions css/elements/site-banner.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
/* line 3, ../../sass/elements/site-banner.scss */
:host { background-color: #1f2036; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; position: relative; z-index: 1; height: 286px; color: white; overflow: hidden; padding-left: 64px; }

/* line 17, ../../sass/elements/site-banner.scss */
/* @polyfill :host.mobile header */
/* line 18, ../../sass/elements/site-banner.scss */
:host(.mobile) ::content header { display: none; }

/* line 22, ../../sass/elements/site-banner.scss */
:host([type="platform"]:host) { background-color: #9f499b; }

/* line 21, ../../sass/elements/site-banner.scss */
/* line 26, ../../sass/elements/site-banner.scss */
:host([type="core"]:host) { background-color: #d61a7f; }

/* line 25, ../../sass/elements/site-banner.scss */
/* line 30, ../../sass/elements/site-banner.scss */
:host([type="elements"]:host) { background-color: #5c6bc0; }

/* @polyfill :host header */
/* line 30, ../../sass/elements/site-banner.scss */
/* line 35, ../../sass/elements/site-banner.scss */
::content header { padding: 30px 0 40px 0; width: 100%; }

/* @polyfill header h1 */
/* line 36, ../../sass/elements/site-banner.scss */
/* line 41, ../../sass/elements/site-banner.scss */
::content h1 { letter-spacing: -0.01em; line-height: 48px; font-size: 45px; -webkit-transform-origin: 0 0; transform-origin: 0 0; }

/* @polyfill :host header.shrink h1 */
/* line 48, ../../sass/elements/site-banner.scss */
/* line 53, ../../sass/elements/site-banner.scss */
::content header.shrink h1 { -webkit-transform: scale(0.44444); transform: scale(0.44444); }

/* @polyfill :host header.shrink summary */
/* line 54, ../../sass/elements/site-banner.scss */
/* line 59, ../../sass/elements/site-banner.scss */
::content header.shrink summary { visibility: hidden; }

/* @polyfill :host header.shrink */
/* line 59, ../../sass/elements/site-banner.scss */
/* line 64, ../../sass/elements/site-banner.scss */
::content header.shrink { position: fixed; pointer-events: none; }

/* @polyfill header a */
/* line 65, ../../sass/elements/site-banner.scss */
/* line 70, ../../sass/elements/site-banner.scss */
::content a { color: currentcolor; }

/* @polyfill header summary */
/* line 71, ../../sass/elements/site-banner.scss */
/* line 76, ../../sass/elements/site-banner.scss */
::content summary { margin-top: 20px; opacity: 0.6; }
168 changes: 90 additions & 78 deletions css/site2.css
Original file line number Diff line number Diff line change
Expand Up @@ -126,191 +126,203 @@ dl.horizontal dt { float: left; width: 160px; }
/* line 125, ../sass/site2.scss */
blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #eeeeee; }

/* line 131, ../sass/site2.scss */
summary { outline: none; }

/* Help catch template errors. */
/* line 132, ../sass/site2.scss */
/* line 136, ../sass/site2.scss */
.error { border: 3px solid red; background-color: rgba(255, 0, 0, 0.3); padding: 5px; }

/* line 138, ../sass/site2.scss */
/* line 142, ../sass/site2.scss */
.alert { color: #999999; border: 1px solid #eeeeee; font-size: 14px; padding: 10px 15px; }
/* line 144, ../sass/site2.scss */
/* line 148, ../sass/site2.scss */
.alert b, .alert strong { margin-right: 5px; }
/* line 150, ../sass/site2.scss */
/* line 154, ../sass/site2.scss */
.alert.alert-success b, .alert.alert-success strong { color: green; }
/* line 157, ../sass/site2.scss */
/* line 161, ../sass/site2.scss */
.alert.alert-info b, .alert.alert-info strong { color: #3367d6; }
/* line 164, ../sass/site2.scss */
/* line 168, ../sass/site2.scss */
.alert.alert-error b, .alert.alert-error strong { color: #ff4120; }

/* Remove empty p generated from markdown conversion. */
/* line 171, ../sass/site2.scss */
/* line 175, ../sass/site2.scss */
p:empty { display: none; }

/* line 174, ../sass/site2.scss */
/* line 178, ../sass/site2.scss */
a[disabled] { pointer-events: none; color: #ccc; }

/* -------------------------------------------------------------------------- */
/* line 196, ../sass/site2.scss */
/* line 200, ../sass/site2.scss */
a.paper-button { color: inherit; }

/* line 200, ../sass/site2.scss */
/* line 204, ../sass/site2.scss */
.paper-button { -webkit-transition: box-shadow 0.2s, background 0.2s; transition: box-shadow 0.2s, background 0.2s; border: none; cursor: default; overflow: hidden; position: relative; color: #666666; padding: 14px 14px 12px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; outline: none; }
/* line 215, ../sass/site2.scss */
/* line 219, ../sass/site2.scss */
.paper-button[borderless] { border: none; background: none; }
/* line 220, ../sass/site2.scss */
/* line 224, ../sass/site2.scss */
.paper-button:not([borderless]) { background: #fafafa; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px; }
/* line 225, ../sass/site2.scss */
/* line 229, ../sass/site2.scss */
.paper-button:hover, .paper-button.active { background: #fff; box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.1); }
/* line 231, ../sass/site2.scss */
.paper-button[sink] { padding: 7px 10px; transition: none; }
/* line 235, ../sass/site2.scss */
.paper-button[sink] { padding: 7px 10px; transition: none; }
/* line 239, ../sass/site2.scss */
.paper-button[sink]:hover, .paper-button[sink].active { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0px rgba(0, 0, 0, 0.2) inset; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.08) 40%); background: linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.08) 40%); }
/* line 242, ../sass/site2.scss */
/* line 246, ../sass/site2.scss */
.paper-button a { font-size: 13px; line-height: 24px; letter-spacing: 0.06em; color: inherit; vertical-align: middle; opacity: 0.6; color: black; margin-left: 5px; text-decoration: none; }

/* line 255, ../sass/site2.scss */
/* line 259, ../sass/site2.scss */
polymer-ui-icon { width: 24px; height: 24px; background-size: 48px !important; }

/* line 263, ../sass/site2.scss */
/* line 267, ../sass/site2.scss */
.content-padding, .panel, footer > :first-child { max-width: 1032px; margin: 0 auto; }

/* line 268, ../sass/site2.scss */
/* line 272, ../sass/site2.scss */
.bar { padding: 16px !important; height: 80px; }
/* line 273, ../sass/site2.scss */
/* line 277, ../sass/site2.scss */
.bar a { text-decoration: none; }

/* line 278, ../sass/site2.scss */
/* line 282, ../sass/site2.scss */
.panel { padding: 150px 0; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
/* line 286, ../sass/site2.scss */
/* line 290, ../sass/site2.scss */
.panel.left img { margin-right: 88px; }
/* line 291, ../sass/site2.scss */
/* line 295, ../sass/site2.scss */
.panel.right img { margin-left: 88px; }
/* line 296, ../sass/site2.scss */
/* line 300, ../sass/site2.scss */
.panel summary { -webkit-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; }
/* line 299, ../sass/site2.scss */
.panel summary + summary { margin-left: 25px; }
/* line 303, ../sass/site2.scss */
.panel summary + summary { margin-left: 25px; }
/* line 307, ../sass/site2.scss */
.panel summary p { margin: 56px 0; line-height: 32px; }
/* line 309, ../sass/site2.scss */
/* line 313, ../sass/site2.scss */
.panel img { -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; -o-align-self: center; align-self: center; }

/* line 314, ../sass/site2.scss */
/* line 318, ../sass/site2.scss */
polymer-ui-toolbar { font: inherit !important; border: none !important; background: inherit !important; height: auto; color: inherit !important; }

/* line 323, ../sass/site2.scss */
/* line 327, ../sass/site2.scss */
.sticky { position: fixed !important; width: 100%; }

/* line 335, ../sass/site2.scss */
/* line 339, ../sass/site2.scss */
section { border-bottom: 1px solid #eeeeee; }

/* line 363, ../sass/site2.scss */
#future polymer-ui-toolbar { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; }
/* line 367, ../sass/site2.scss */
#future polymer-ui-toolbar { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; }
/* line 371, ../sass/site2.scss */
#future .paper-button:not(:last-child) { margin-right: 30px; }

/* line 381, ../sass/site2.scss */
/* line 385, ../sass/site2.scss */
#everything-element .panel img { max-width: 312px; }
/* line 384, ../sass/site2.scss */
/* line 388, ../sass/site2.scss */
#everything-element summary { color: #fff; }
/* line 387, ../sass/site2.scss */
#everything-element .paper-button { background: #262742 !important; }
/* line 391, ../sass/site2.scss */
#everything-element .paper-button:hover { background: #3a3b56 !important; }
#everything-element .paper-button { background: #262742 !important; }
/* line 395, ../sass/site2.scss */
#everything-element .paper-button:hover { background: #3a3b56 !important; }
/* line 399, ../sass/site2.scss */
#everything-element .paper-button a { color: white; }

/* line 402, ../sass/site2.scss */
/* line 406, ../sass/site2.scss */
#architecture .panel { padding: 35px 0; }
/* line 405, ../sass/site2.scss */
/* line 409, ../sass/site2.scss */
#architecture .box { padding: 100px 24px 14px; margin-bottom: 56px; }
/* line 410, ../sass/site2.scss */
/* line 414, ../sass/site2.scss */
#architecture h5 { font-size: 14px; font-weight: normal; color: #999999; line-height: 24px; letter-spacing: 0.01em; margin-top: 6px; margin-bottom: 18px; }
/* line 419, ../sass/site2.scss */
/* line 423, ../sass/site2.scss */
#architecture p { font-size: 14px; line-height: 24px; margin-top: 0; }
/* line 424, ../sass/site2.scss */
/* line 428, ../sass/site2.scss */
#architecture img { height: 92px; width: auto; }

/* line 432, ../sass/site2.scss */
/* line 436, ../sass/site2.scss */
footer { position: relative; z-index: 100; background-color: #e6e6e6; padding: 100px 0; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px inset; }
/* line 439, ../sass/site2.scss */
footer polymer-ui-toolbar { margin-bottom: 56px; }
/* line 443, ../sass/site2.scss */
footer .paper-button { margin-right: 30px; }
footer polymer-ui-toolbar { margin-bottom: 56px; }
/* line 447, ../sass/site2.scss */
footer .paper-button { margin-right: 30px; }
/* line 451, ../sass/site2.scss */
footer .paper-button a { opacity: 0.6; color: black; }
/* line 457, ../sass/site2.scss */
footer #copyright { color: #b3b3b3; font-size: 14px; }
/* line 461, ../sass/site2.scss */
footer #copyright { color: #b3b3b3; font-size: 14px; }
/* line 465, ../sass/site2.scss */
footer #copyright a { color: #666666; }

/* line 468, ../sass/site2.scss */
#content-container .article { margin-bottom: 2em; }
/* line 472, ../sass/site2.scss */
#content-container .article { margin-bottom: 2em; }
/* line 476, ../sass/site2.scss */
#content-container h2 { margin-top: 40px; }
/* line 475, ../sass/site2.scss */
/* line 479, ../sass/site2.scss */
#content-container h3 { margin-top: 30px; }
/* line 478, ../sass/site2.scss */
/* line 482, ../sass/site2.scss */
#content-container h4 { margin-top: 20px; }

/* line 485, ../sass/site2.scss */
/* line 489, ../sass/site2.scss */
#sidebar { position: fixed; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); height: 100%; width: 248px; background-color: #eeeeee; box-shadow: rgba(0, 0, 0, 0.14902) 1px 1px 1px 0px; z-index: 10; }
/* line 496, ../sass/site2.scss */
#sidebar docs-menu { padding: 0 16px; }
/* line 500, ../sass/site2.scss */
#sidebar docs-menu { padding: 0 16px; }
/* line 504, ../sass/site2.scss */
#sidebar .logo { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; height: 80px; margin-bottom: 24px; padding-left: 16px; }

/* line 510, ../sass/site2.scss */
/* line 514, ../sass/site2.scss */
.edit-on-github { /*position: absolute;
top: 0;
right: 0;*/ float: right; }
/* line 516, ../sass/site2.scss */
/* line 520, ../sass/site2.scss */
.edit-on-github + * { clear: both; }

/* line 521, ../sass/site2.scss */
/* line 525, ../sass/site2.scss */
.permalink { display: none; margin-left: 5px; vertical-align: top; }

/* line 526, ../sass/site2.scss */
/* line 530, ../sass/site2.scss */
.has-permalink:hover .permalink { display: initial; }

/* line 529, ../sass/site2.scss */
/* line 533, ../sass/site2.scss */
.no-permalink .permalink { display: none !important; }

/* line 536, ../sass/site2.scss */
/* line 540, ../sass/site2.scss */
.forversion { float: right; color: #ccc; font-style: italic; }

/* line 541, ../sass/site2.scss */
/* line 545, ../sass/site2.scss */
.article .byline { font-size: smaller; color: #ccc; }

/* line 546, ../sass/site2.scss */
/* line 550, ../sass/site2.scss */
.author { margin-bottom: 20px; }
/* line 549, ../sass/site2.scss */
.author > p { display: inline-block; margin: 0; }
/* line 553, ../sass/site2.scss */
.author > p { display: inline-block; margin: 0; }
/* line 557, ../sass/site2.scss */
.author > p:first-of-type { vertical-align: top; }
/* line 558, ../sass/site2.scss */
/* line 562, ../sass/site2.scss */
.author img { border-radius: 7px; margin-right: 5px; height: 40px; width: 40px; }

/* Elements */
/* line 570, ../sass/site2.scss */
/* line 574, ../sass/site2.scss */
.element-list > [data-element-file] { padding-bottom: 24px; border-top: 1px solid #eeeeee; }
/* line 575, ../sass/site2.scss */
/* line 579, ../sass/site2.scss */
.element-list header { margin: 24px 0; }
/* line 578, ../sass/site2.scss */
/* line 582, ../sass/site2.scss */
.element-list header h2 { margin: 0 !important; }
/* line 585, ../sass/site2.scss */
/* line 589, ../sass/site2.scss */
.element-list header a { margin-left: 20px; }
/* line 587, ../sass/site2.scss */
/* line 591, ../sass/site2.scss */
.element-list header a:not(.permalink) { font-size: initial; }
/* line 593, ../sass/site2.scss */
/* line 597, ../sass/site2.scss */
.element-list .name { display: inline-block; }
/* line 595, ../sass/site2.scss */
/* line 599, ../sass/site2.scss */
.element-list .name code { white-space: nowrap; }
/* line 600, ../sass/site2.scss */
.element-list .nodocs { margin-left: 17px; font-style: italic; }
/* line 604, ../sass/site2.scss */
.element-list .nodocs { margin-left: 17px; font-style: italic; }
/* line 608, ../sass/site2.scss */
.element-list .nodocs:after { content: 'No documentation available.'; }
/* line 609, ../sass/site2.scss */
/* line 613, ../sass/site2.scss */
.element-list iframe { border: none; width: 100%; }
/* line 615, ../sass/site2.scss */
/* line 619, ../sass/site2.scss */
.element-list .bower_install_instructions, .element-list .api_documentation { display: block; }
/* line 617, ../sass/site2.scss */
/* line 621, ../sass/site2.scss */
.element-list .bower_install_instructions > label, .element-list .api_documentation > label { font-weight: 600; }

/* line 628, ../sass/site2.scss */
.onlyonmobile { display: none; }

/* line 632, ../sass/site2.scss */
#toc summary { font-size: 16px; font-weight: 600; }

@media only screen and (max-width: 580px) { /* line 639, ../sass/site2.scss */
.onlyonmobile { display: initial !important; } }
Loading

0 comments on commit b4c171b

Please sign in to comment.