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

Stretch top-level tabbed labels to viewport on mobile

Browse Source
This commit is contained in:
squidfunk 2021-08-10 15:24:46 +02:00
parent 4f2f4b672c
commit e37223f0aa
4 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/stylesheets/main.163bcbda.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -39,7 +39,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.163bcbda.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ce6831e8.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 }}">

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

@ -162,7 +162,7 @@
// Tab labels container // Tab labels container
.tabbed-labels { .tabbed-labels {
display: flex; display: flex;
width: 100%; max-width: 100vw; // TODO: see if we can use something else
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;
@ -215,6 +215,17 @@
} }
} }
// [mobile -]: Align with body copy
@include break-to-device(mobile) {
// Top-level tab label containers
> .tabbed-alternate .tabbed-labels {
margin: 1em px2rem(-16px);
padding: 0 px2rem(16px);
scroll-padding: 0 px2rem(16px);
}
}
// Tab block container // Tab block container
.tabbed-alternate { .tabbed-alternate {
flex-direction: column; flex-direction: column;