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

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% 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 %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@ -225,7 +225,7 @@
</script>
{% endblock %}
{% 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"] %}
<script src="{{ path | url }}"></script>
{% endfor %}

View File

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

View File

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