Sidebar but Pure CSS, fix rust-lang/mdBook#859
* change sidebar-toggle button by input:checked and label * change nav-wrappers' CSS selectors * remove loading animation when page opens with z-index
This commit is contained in:
parent
56c225bd34
commit
36327efe9d
|
@ -93,7 +93,7 @@ a > .hljs {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
.no-js .left-buttons {
|
.no-js .left-buttons button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -187,9 +187,10 @@ a > .hljs {
|
||||||
.nav-wrapper { display: block; }
|
.nav-wrapper { display: block; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* sidebar-visible */
|
||||||
@media only screen and (max-width: 1380px) {
|
@media only screen and (max-width: 1380px) {
|
||||||
.sidebar-visible .nav-wide-wrapper { display: none; }
|
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
|
||||||
.sidebar-visible .nav-wrapper { display: block; }
|
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inline code */
|
/* Inline code */
|
||||||
|
@ -375,6 +376,7 @@ ul#searchresults span.teaser em {
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
.no-js .sidebar,
|
||||||
.js:not(.sidebar-resizing) .sidebar {
|
.js:not(.sidebar-resizing) .sidebar {
|
||||||
transition: transform 0.3s; /* Animation: slide away */
|
transition: transform 0.3s; /* Animation: slide away */
|
||||||
}
|
}
|
||||||
|
@ -402,8 +404,10 @@ ul#searchresults span.teaser em {
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
.sidebar-hidden .sidebar {
|
/* sidebar-hidden */
|
||||||
|
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||||
transform: translateX(calc(0px - var(--sidebar-width)));
|
transform: translateX(calc(0px - var(--sidebar-width)));
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.sidebar::-webkit-scrollbar {
|
.sidebar::-webkit-scrollbar {
|
||||||
background: var(--sidebar-bg);
|
background: var(--sidebar-bg);
|
||||||
|
@ -412,11 +416,12 @@ ul#searchresults span.teaser em {
|
||||||
background: var(--scrollbar);
|
background: var(--scrollbar);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-visible .page-wrapper {
|
/* sidebar-visible */
|
||||||
|
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||||
transform: translateX(var(--sidebar-width));
|
transform: translateX(var(--sidebar-width));
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 620px) {
|
@media only screen and (min-width: 620px) {
|
||||||
.sidebar-visible .page-wrapper {
|
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||||
transform: none;
|
transform: none;
|
||||||
margin-left: var(--sidebar-width);
|
margin-left: var(--sidebar-width);
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,7 +84,9 @@ h6:target::before {
|
||||||
}
|
}
|
||||||
.page-wrapper {
|
.page-wrapper {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background-color: var(--bg);
|
||||||
}
|
}
|
||||||
|
.no-js .page-wrapper,
|
||||||
.js:not(.sidebar-resizing) .page-wrapper {
|
.js:not(.sidebar-resizing) .page-wrapper {
|
||||||
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
|
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
|
||||||
}
|
}
|
||||||
|
|
|
@ -89,16 +89,20 @@
|
||||||
html.classList.add('js');
|
html.classList.add('js');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
<!-- Hide / unhide sidebar before it is displayed -->
|
||||||
<script>
|
<script>
|
||||||
var html = document.querySelector('html');
|
var html = document.querySelector('html');
|
||||||
var sidebar = null;
|
var sidebar = null;
|
||||||
|
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
|
||||||
if (document.body.clientWidth >= 1080) {
|
if (document.body.clientWidth >= 1080) {
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||||||
sidebar = sidebar || 'visible';
|
sidebar = sidebar || 'visible';
|
||||||
} else {
|
} else {
|
||||||
sidebar = 'hidden';
|
sidebar = 'hidden';
|
||||||
}
|
}
|
||||||
|
sidebar_toggle.checked = sidebar === 'visible';
|
||||||
html.classList.remove('sidebar-visible');
|
html.classList.remove('sidebar-visible');
|
||||||
html.classList.add("sidebar-" + sidebar);
|
html.classList.add("sidebar-" + sidebar);
|
||||||
</script>
|
</script>
|
||||||
|
@ -139,9 +143,9 @@
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
<div id="menu-bar-hover-placeholder"></div>
|
||||||
<div id="menu-bar" class="menu-bar sticky">
|
<div id="menu-bar" class="menu-bar sticky">
|
||||||
<div class="left-buttons">
|
<div class="left-buttons">
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||||||
<i class="fa fa-bars"></i>
|
<i class="fa fa-bars"></i>
|
||||||
</button>
|
</label>
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||||||
<i class="fa fa-paint-brush"></i>
|
<i class="fa fa-paint-brush"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue