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: https://github.com/nodejs/node/pull/4748 Reviewed-By: James M Snell <jasnell@gmail.com>
This commit is contained in:
parent
c00d08f5ec
commit
55607a0f32
@ -370,18 +370,27 @@ span.type {
|
||||
width: 234px;
|
||||
background: #333;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#column2.interior:after {
|
||||
#column2 .no-scrollbar {
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#column2 .no-scrollbar:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 234px;
|
||||
height: 4em;
|
||||
background: linear-gradient(rgba(242,245,240, 0), rgba(51, 51, 51, 1));
|
||||
background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 1));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
@ -11,12 +11,14 @@
|
||||
<body class="alt apidoc" id="api-section-__FILENAME__">
|
||||
<div id="content" class="clearfix">
|
||||
<div id="column2" class="interior">
|
||||
<div id="intro" class="interior">
|
||||
<a href="/" title="Go back to the home page">
|
||||
Node.js (1)
|
||||
</a>
|
||||
<div class="no-scrollbar">
|
||||
<div id="intro" class="interior">
|
||||
<a href="/" title="Go back to the home page">
|
||||
Node.js (1)
|
||||
</a>
|
||||
</div>
|
||||
__GTOC__
|
||||
</div>
|
||||
__GTOC__
|
||||
</div>
|
||||
|
||||
<div id="column1" data-id="__ID__" class="interior">
|
||||
|
Loading…
x
Reference in New Issue
Block a user