OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added support for scrollbar-gutter

Browse Source
This commit is contained in:
squidfunk 2022-09-28 18:41:33 +02:00
parent 290de4acc7
commit 4c8620c6ee
5 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/stylesheets/main.4eacb97b.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.80dcb947.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.4eacb97b.min.css.map → material/assets/stylesheets/main.80dcb947.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -34,7 +34,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.4eacb97b.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.80dcb947.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">

30
src/assets/stylesheets/main/layout/_sidebar.scss
View File

@ -130,6 +130,7 @@
// this reason, we disable scroll snapping until this is resolved (#1667).
// scroll-snap-type: y mandatory;
scrollbar-width: thin;
scrollbar-gutter: stable;
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
// Sidebar scroll wrapper on hover
@ -154,19 +155,24 @@
}
}
// Sidebar wrapper
&__inner {
// Hack: the scrollbar is only visible when the sidebar's contents overflow,
// which is nice, but leads to the problem where the chevrons of expandable
// sections will jump by `4px` when the sidebar is shown. We wanted to fix
// this problem for so long, but haven't found a clean way of doing it.
// Until now. The following declaration is only applied to Webkit browsers
// (e.g. Chrome and Safari), which support styling of scrollbars. The trick
// is to add conditional padding on the side of the scrollbar only if the
// sidebar's content doesn't overflow. This hack is inspired and adapted
// from Ayke van Laëthem's year old trick – see https://bit.ly/3Sb1qql
@supports selector(::-webkit-scrollbar) {
// Hack: the scrollbar is only visible when the sidebar's contents overflow,
// which is nice, but leads to the problem where the chevrons of expandable
// sections will jump by `4px` when the sidebar is shown. We wanted to fix
// this problem for so long, but haven't found a clean way of doing it.
// Until now. The following declaration is only applied to Webkit browsers
// (e.g. Chrome and Safari), which support styling of scrollbars. The trick
// is to add conditional padding on the side of the scrollbar only if the
// sidebar's content doesn't overflow. This hack is inspired and adapted
// from Ayke van Laëthem's year old trick – see https://bit.ly/3Sb1qql
@supports selector(::-webkit-scrollbar) {
// Sidebar scroll wrapper
&__scrollwrap {
scrollbar-gutter: auto;
}
// Sidebar wrapper
&__inner {
padding-inline-end: calc(100% - #{px2rem(230px)});
}
}