Commit 39cb69c
doc: style fixes for the TOC
- Hide the scrollbar on the TOC on all browsers. It was never the
intention for it to be visible with the scroll indication in place.
A wrapper element with 20px padding was added to accommodate for
hopefully all scrollbar widths as well as to avoid overflowing
content.
- Fixed the scroll indication gradient on Safari, which was caused by
the wrong from-color, which now matches the to-color.
- Fixed a issue in old IE where the TOC didn't render on the correct
position through setting `left: 0` and `top: 0` on it.
PR-URL: #4748
Reviewed-By: James M Snell <jasnell@gmail.com>1 parent be82745 commit 39cb69c
2 files changed
Lines changed: 18 additions & 7 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -370,18 +370,27 @@ span.type { | |||
| 370 | 370 | width: 234px; | |
| 371 | 371 | background: #333; | |
| 372 | 372 | position: fixed; | |
| 373 | + left: 0; | ||
| 374 | + top: 0; | ||
| 373 | 375 | height: 100%; | |
| 376 | + overflow: hidden; | ||
| 377 | + } | ||
| 378 | + | ||
| 379 | + #column2 .no-scrollbar { | ||
| 374 | 380 | overflow-y: scroll; | |
| 381 | + height: 100%; | ||
| 382 | + width: 100%; | ||
| 383 | + padding-right: 20px; | ||
| 375 | 384 | } | |
| 376 | 385 | ||
| 377 | - #column2.interior:after { | ||
| 386 | + #column2 .no-scrollbar:after { | ||
| 378 | 387 | content: ''; | |
| 379 | 388 | position: fixed; | |
| 380 | 389 | bottom: 0; | |
| 381 | 390 | left: 0; | |
| 382 | 391 | width: 234px; | |
| 383 | 392 | height: 4em; | |
| 384 | - background: linear-gradient(rgba(242,245,240, 0), rgba(51, 51, 51, 1)); | ||
| 393 | + background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 1)); | ||
| 385 | 394 | pointer-events: none; | |
| 386 | 395 | } | |
| 387 | 396 | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -11,12 +11,14 @@ | |||
| 11 | 11 | <body class="alt apidoc" id="api-section-__FILENAME__"> | |
| 12 | 12 | <div id="content" class="clearfix"> | |
| 13 | 13 | <div id="column2" class="interior"> | |
| 14 | - <div id="intro" class="interior"> | ||
| 15 | - <a href="/" title="Go back to the home page"> | ||
| 16 | - Node.js (1) | ||
| 17 | - </a> | ||
| 14 | + <div class="no-scrollbar"> | ||
| 15 | + <div id="intro" class="interior"> | ||
| 16 | + <a href="/" title="Go back to the home page"> | ||
| 17 | + Node.js (1) | ||
| 18 | + </a> | ||
| 19 | + </div> | ||
| 20 | + __GTOC__ | ||
| 18 | 21 | </div> | |
| 19 | - __GTOC__ | ||
| 20 | 22 | </div> | |
| 21 | 23 | ||
| 22 | 24 | <div id="column1" data-id="__ID__" class="interior"> | |
0 commit comments