//// Sidebar// ._sidebar { position: absolute; z-index: var(--sidebarZ); top: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll; padding-top: var(--headerHeight); background: var(--sidebarBackground); background-clip: content-box; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; // IE 10 doesn't support pointer-events @extend %border-box; @extend %user-select-none; &:focus { outline: none; } ._overlay-scrollbars & { padding-top: 0; top: var(--headerHeight); } body:not(._native-scrollbars) & { &::-webkit-scrollbar { width: 10px; } &::-webkit-scrollbar-track { background: var(--contentBackground); border: 0; } &::-webkit-scrollbar-thumb { border-width: 3px; &:hover, &:active { border-width: 2px; } } } ._sidebar-hidden & { transform: translateX(-95%); transform: translateX(calc(.5rem - 100%)); opacity: 0; } &:hover:not(.no-hover), &.show { transform: none; opacity: 1; }} ._resizer { position: absolute; z-index: var(--headerZ); top: var(--headerHeight); bottom: var(--headerHeight); left: var(--sidebarWidth); margin-left: -2px; width: 3px; cursor: col-resize; ._sidebar-hidden & { display: none; } ._sidebar-hidden ._sidebar.show ~ & { display: block; }} //// List// ._list { margin: 0; padding: 0; list-style: none; width: var(--sidebarWidth); box-shadow: inset -1px 0 var(--sidebarBorder); @extend %border-box; @include mobile { width: var(--sidebarMediumWidth); } ._sidebar > & { min-height: 100%; } a:focus { outline: 0; }} ._list-title { position: relative; margin: .5rem 0 0; padding: 0 .75rem 0 2.125rem; line-height: 2rem; font-size: .75rem; color: var(--textColorLight); text-transform: uppercase; cursor: default;} ._list-title-link { display: none; float: right; font-weight: normal; text-transform: none; ._list-title:hover > & { display: block; }} ._list-item { display: block; position: relative; padding: .25rem .75rem; line-height: 1.5rem; font-size: .875rem; cursor: default; background: var(--sidebarBackground); box-shadow: inset -1px 0 var(--sidebarBorder); @extend %truncate-text; &, &:hover { color: inherit; text-decoration: none; } &.focus, &.focus:hover, &.active, &.active:hover { color: var(--focusText); background: var(--focusBackground); box-shadow: inset -1px 0 var(--focusBorder); } &.active, &.active:hover { color: var(--selectionText); background: var(--selectionBackground); box-shadow: inset -1px 0 var(--selectionBorder); } &:before { float: left; margin: .25rem .625rem 0 0; @extend %doc-icon; }} ._list-text { display: block; pointer-events: none; @extend %truncate-text;} ._list-count, ._list-enable { float: right; font-size: .75rem; margin-left: .375rem; .focus > &, .active > & { color: inherit; }} ._list-count { color: var(--textColorLighter); pointer-events: none; ._list-disabled:hover > & { display: none; }} ._list-enable { display: none; color: var(--linkColor); cursor: pointer; &:hover { text-decoration: underline; } ._list-disabled:hover > &, ._list-result > & { display: block; } ._list-result.active > & { margin-right: -1rem; }} //// List hierarchy// ._list-dir:not(._list-rdir),%_list-dir { padding-left: 2.125rem;} ._list-disabled { @extend %_list-dir; &, &:hover { color: var(--textColorLight); } &:before { opacity: .7; }} ._list-arrow { position: absolute; top: 0; left: .25rem; padding: .5rem .375rem .5rem .5rem; width: 1rem; height: 1rem; cursor: pointer; fill: var(--absolute); opacity: .4; &:hover { opacity: .65; } ._list-rdir > & { left: auto; right: .25rem; } .open > &, .open-title > & { -webkit-transform: rotate(90deg); transform: rotate(90deg); }} ._list-sub { display: none; .open + & { display: block; } > ._list-item { padding-left: 2.375rem; } > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; } > ._list-disabled { padding-left: 3.75rem; } > ._list-item:before { content: none; } > ._list-dir { line-height: 1.375rem; } ._list-arrow { left: 1rem; padding: .4375rem; }} //// List pagination// ._list-pagelink { color: var(--linkColor); cursor: pointer; &:hover { color: var(--linkColorHover); text-decoration: underline; }} //// Search results// ._list-result.active { padding-right: 1.75rem; > ._list-reveal { display: block; } > ._list-count { display: none; }} ._list-reveal { display: none; position: absolute; top: 0; bottom: 0; right: 0; width: 2rem; cursor: pointer; &:before { content: ''; position: absolute; bottom: 50%; left: .75rem; width: .75rem; height: 1px; background: var(--transparentSelectionText); box-shadow: 0 -3px var(--transparentSelectionText), // top line 0 3px var(--transparentSelectionText); // bottom line }} //// List note// ._list-note { padding: .5rem .75rem; line-height: 1.25rem; font-size: .8125rem; color: var(--textColorLight); & + & { padding-top: 0; }} ._list-note-link { cursor: pointer; } //// List hover clone// ._list-hover.clone { position: fixed; overflow: visible; z-index: var(--hoverZ); left: 0; min-width: var(--sidebarWidth); padding: .25rem .75rem; pointer-events: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); @extend %border-box; @include mobile { min-width: var(--sidebarMediumWidth); } > ._list-text { display: inline; } &:not(._list-result) { padding-left: 2.75rem; &:before { content: none; } } ._list-reveal, ._list-enable { display: none; }} //// List picker// ._list-picker { ._list-item { cursor: pointer; } ._list-sub > ._list-item { padding-left: 2.375rem; }} ._list-picker-head { display: flex; justify-content: space-between; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; margin-right: 1px; padding: .5rem .75rem .25rem .75rem; line-height: 1.5rem; font-size: .75rem; font-weight: var(--bolderFontWeight); color: var(--textColorLight); text-transform: uppercase; background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground)); cursor: default;} ._list-checkbox { position: absolute; top: .5rem; right: .75rem;} ._list-link { display: block; padding: .75rem 0; font-size: .8125rem; text-align: center; @extend %external-link; &:after { visibility: hidden; } &:hover:after { visibility: visible; }}
//
// Sidebar
//
._sidebar {
position: absolute;
z-index: var(--sidebarZ);
top: 0;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-top: var(--headerHeight);
background: var(--sidebarBackground);
background-clip: content-box;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; // IE 10 doesn't support pointer-events
@extend %border-box;
@extend %user-select-none;
&:focus { outline: none; }
._overlay-scrollbars & {
padding-top: 0;
top: var(--headerHeight);
}
body:not(._native-scrollbars) & {
&::-webkit-scrollbar { width: 10px; }
&::-webkit-scrollbar-track {
background: var(--contentBackground);
border: 0;
}
&::-webkit-scrollbar-thumb {
border-width: 3px;
&:hover, &:active { border-width: 2px; }
}
}
._sidebar-hidden & {
transform: translateX(-95%);
transform: translateX(calc(.5rem - 100%));
opacity: 0;
}
&:hover:not(.no-hover),
&.show {
transform: none;
opacity: 1;
}
}
._resizer {
position: absolute;
z-index: var(--headerZ);
top: var(--headerHeight);
bottom: var(--headerHeight);
left: var(--sidebarWidth);
margin-left: -2px;
width: 3px;
cursor: col-resize;
._sidebar-hidden & { display: none; }
._sidebar-hidden ._sidebar.show ~ & { display: block; }
}
//
// List
//
._list {
margin: 0;
padding: 0;
list-style: none;
width: var(--sidebarWidth);
box-shadow: inset -1px 0 var(--sidebarBorder);
@extend %border-box;
@include mobile { width: var(--sidebarMediumWidth); }
._sidebar > & { min-height: 100%; }
a:focus { outline: 0; }
}
._list-title {
position: relative;
margin: .5rem 0 0;
padding: 0 .75rem 0 2.125rem;
line-height: 2rem;
font-size: .75rem;
color: var(--textColorLight);
text-transform: uppercase;
cursor: default;
}
._list-title-link {
display: none;
float: right;
font-weight: normal;
text-transform: none;
._list-title:hover > & { display: block; }
}
._list-item {
display: block;
position: relative;
padding: .25rem .75rem;
line-height: 1.5rem;
font-size: .875rem;
cursor: default;
background: var(--sidebarBackground);
box-shadow: inset -1px 0 var(--sidebarBorder);
@extend %truncate-text;
&, &:hover {
color: inherit;
text-decoration: none;
}
&.focus,
&.focus:hover,
&.active,
&.active:hover {
color: var(--focusText);
background: var(--focusBackground);
box-shadow: inset -1px 0 var(--focusBorder);
}
&.active,
&.active:hover {
color: var(--selectionText);
background: var(--selectionBackground);
box-shadow: inset -1px 0 var(--selectionBorder);
}
&:before {
float: left;
margin: .25rem .625rem 0 0;
@extend %doc-icon;
}
}
._list-text {
display: block;
pointer-events: none;
@extend %truncate-text;
}
._list-count, ._list-enable {
float: right;
font-size: .75rem;
margin-left: .375rem;
.focus > &,
.active > & {
color: inherit;
}
}
._list-count {
color: var(--textColorLighter);
pointer-events: none;
._list-disabled:hover > & { display: none; }
}
._list-enable {
display: none;
color: var(--linkColor);
cursor: pointer;
&:hover { text-decoration: underline; }
._list-disabled:hover > &, ._list-result > & { display: block; }
._list-result.active > & { margin-right: -1rem; }
}
//
// List hierarchy
//
._list-dir:not(._list-rdir),
%_list-dir {
padding-left: 2.125rem;
}
._list-disabled {
@extend %_list-dir;
&, &:hover { color: var(--textColorLight); }
&:before { opacity: .7; }
}
._list-arrow {
position: absolute;
top: 0;
left: .25rem;
padding: .5rem .375rem .5rem .5rem;
width: 1rem;
height: 1rem;
cursor: pointer;
fill: var(--absolute);
opacity: .4;
&:hover { opacity: .65; }
._list-rdir > & {
left: auto;
right: .25rem;
}
.open > &, .open-title > & {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
._list-sub {
display: none;
.open + & { display: block; }
> ._list-item { padding-left: 2.375rem; }
> ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }
> ._list-disabled { padding-left: 3.75rem; }
> ._list-item:before { content: none; }
> ._list-dir { line-height: 1.375rem; }
._list-arrow {
left: 1rem;
padding: .4375rem;
}
}
//
// List pagination
//
._list-pagelink {
color: var(--linkColor);
cursor: pointer;
&:hover {
color: var(--linkColorHover);
text-decoration: underline;
}
}
//
// Search results
//
._list-result.active {
padding-right: 1.75rem;
> ._list-reveal { display: block; }
> ._list-count { display: none; }
}
._list-reveal {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2rem;
cursor: pointer;
&:before {
content: '';
position: absolute;
bottom: 50%;
left: .75rem;
width: .75rem;
height: 1px;
background: var(--transparentSelectionText);
box-shadow: 0 -3px var(--transparentSelectionText), // top line
0 3px var(--transparentSelectionText); // bottom line
}
}
//
// List note
//
._list-note {
padding: .5rem .75rem;
line-height: 1.25rem;
font-size: .8125rem;
color: var(--textColorLight);
& + & { padding-top: 0; }
}
._list-note-link { cursor: pointer; }
//
// List hover clone
//
._list-hover.clone {
position: fixed;
overflow: visible;
z-index: var(--hoverZ);
left: 0;
min-width: var(--sidebarWidth);
padding: .25rem .75rem;
pointer-events: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
@extend %border-box;
@include mobile { min-width: var(--sidebarMediumWidth); }
> ._list-text { display: inline; }
&:not(._list-result) {
padding-left: 2.75rem;
&:before { content: none; }
}
._list-reveal, ._list-enable { display: none; }
}
//
// List picker
//
._list-picker {
._list-item { cursor: pointer; }
._list-sub > ._list-item { padding-left: 2.375rem; }
}
._list-picker-head {
display: flex;
justify-content: space-between;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
margin-right: 1px;
padding: .5rem .75rem .25rem .75rem;
line-height: 1.5rem;
font-size: .75rem;
font-weight: var(--bolderFontWeight);
color: var(--textColorLight);
text-transform: uppercase;
background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground));
cursor: default;
}
._list-checkbox {
position: absolute;
top: .5rem;
right: .75rem;
}
._list-link {
display: block;
padding: .75rem 0;
font-size: .8125rem;
text-align: center;
@extend %external-link;
&:after { visibility: hidden; }
&:hover:after { visibility: visible; }
}