actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sidebar): add sidebar indicator

This commit is contained in:
Evgeny Chaban 2023-10-02 18:24:55 +03:00
parent 94e0a44e15
commit f92d24e89c
3 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/theme/css/chrome.css
View File

@ -422,22 +422,35 @@ ul#searchresults span.teaser em {
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
width: 0; width: 0;
right: 0; right: calc(var(--sidebar-resize-indicator-width) * -1);
top: 0; top: 0;
bottom: 0; bottom: 0;
display: flex;
align-items: center;
}
.sidebar-resize-handle .sidebar-resize-indicator {
width: 100%;
height: 12px;
background-color: var(--icons);
margin-inline-start: var(--sidebar-resize-indicator-space);
}
[dir=rtl] .sidebar .sidebar-resize-handle {
left: calc(var(--sidebar-resize-indicator-width) * -1);
right: unset;
} }
[dir=rtl] .sidebar .sidebar-resize-handle { right: unset; left: 0; }
.js .sidebar .sidebar-resize-handle { .js .sidebar .sidebar-resize-handle {
cursor: col-resize; cursor: col-resize;
width: 5px; width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
} }
/* sidebar-hidden */ /* sidebar-hidden */
#sidebar-toggle-anchor:not(:checked) ~ .sidebar { #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(calc(0px - var(--sidebar-width))); transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
z-index: -1; z-index: -1;
} }
[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { [dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(var(--sidebar-width)); transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
background: var(--sidebar-bg); background: var(--sidebar-bg);
@ -448,15 +461,15 @@ ul#searchresults span.teaser em {
/* sidebar-visible */ /* sidebar-visible */
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(var(--sidebar-width)); transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
} }
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(calc(0px - var(--sidebar-width))); transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
} }
@media only screen and (min-width: 620px) { @media only screen and (min-width: 620px) {
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: none; transform: none;
margin-inline-start: var(--sidebar-width); margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
} }
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: none; transform: none;

2
src/theme/css/variables.css
View File

@ -3,6 +3,8 @@
:root { :root {
--sidebar-width: 300px; --sidebar-width: 300px;
--sidebar-resize-indicator-width: 8px;
--sidebar-resize-indicator-space: 2px;
--page-padding: 15px; --page-padding: 15px;
--content-max-width: 750px; --content-max-width: 750px;
--menu-bar-height: 50px; --menu-bar-height: 50px;

4
src/theme/index.hbs
View File

@ -112,7 +112,9 @@
<div class="sidebar-scrollbox"> <div class="sidebar-scrollbox">
{{#toc}}{{/toc}} {{#toc}}{{/toc}}
</div> </div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div> <div id="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav> </nav>
<!-- Track and set sidebar scroll position --> <!-- Track and set sidebar scroll position -->