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

Fixed overflow for alternate style when more than 10 tabs are present

Browse Source
This commit is contained in:
squidfunk 2021-10-11 14:33:28 +02:00
parent 6fab1e3654
commit 969c713567
8 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/javascripts/bundle.526051bc.min.js → material/assets/javascripts/bundle.f89c2efe.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.526051bc.min.js.map → material/assets/javascripts/bundle.f89c2efe.min.js.map
View File

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/main.c856cb08.min.css → material/assets/stylesheets/main.c46c0193.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.c46c0193.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.c856cb08.min.css.map
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -39,7 +39,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.c856cb08.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c46c0193.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@ -225,7 +225,7 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.526051bc.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.f89c2efe.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %} {% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script> <script src="{{ path | url }}"></script>
{% endfor %} {% endfor %}

2
src/assets/javascripts/components/content/tabs/index.ts
View File

@ -80,7 +80,7 @@ export function mountContentTabs(
// TODO: Hack, scrollIntoView is too buggy // TODO: Hack, scrollIntoView is too buggy
const container = active.parentElement! const container = active.parentElement!
if ( if (
active.offsetLeft + active.offsetWidth > container.offsetWidth || active.offsetLeft + active.offsetWidth > container.scrollLeft + container.offsetWidth ||
active.offsetLeft < container.scrollLeft active.offsetLeft < container.scrollLeft
) )
container.scrollTo({ container.scrollTo({

9
src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
View File

@ -156,7 +156,7 @@
// Tabbed labels // Tabbed labels
.tabbed-labels { .tabbed-labels {
display: flex; display: flex;
max-width: 100vw; max-width: 100%;
overflow: auto; overflow: auto;
box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset; box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
scroll-snap-type: x proximity; scroll-snap-type: x proximity;
@ -196,7 +196,7 @@
@media print { @media print {
// Ensure correct order of labels // Ensure correct order of labels
@for $i from 1 through 10 { @for $i from 1 through 20 {
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
order: $i; order: $i;
} }
@ -215,6 +215,7 @@
// Top-level tabbed labels // Top-level tabbed labels
> .tabbed-alternate .tabbed-labels { > .tabbed-alternate .tabbed-labels {
max-width: 100vw;
margin: 0 px2rem(-16px); margin: 0 px2rem(-16px);
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
scroll-padding: 0 px2rem(16px); scroll-padding: 0 px2rem(16px);
@ -247,7 +248,7 @@
display: block; display: block;
// Ensure correct order of containers // Ensure correct order of containers
@for $i from 1 through 10 { @for $i from 1 through 20 {
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
order: $i; order: $i;
} }
@ -275,7 +276,7 @@
} }
// Tab label states // Tab label states
@for $i from 10 through 1 { @for $i from 20 through 1 {
input:nth-child(#{$i}) { input:nth-child(#{$i}) {
// Tab is active // Tab is active