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

Finished new Tabbed implementation

Browse Source
This commit is contained in:
squidfunk 2021-09-26 11:54:50 +02:00
parent ebfa4f71eb
commit 7f9b64d44f
6 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/stylesheets/main.d2f7d19d.min.css → material/assets/stylesheets/main.55b1b295.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.d2f7d19d.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.d2f7d19d.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.55b1b295.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 }}">

5
requirements.txt
View File

@ -22,8 +22,5 @@
mkdocs>=1.2.2 mkdocs>=1.2.2
Pygments>=2.4 Pygments>=2.4
markdown>=3.2 markdown>=3.2
# pymdown-extensions>=7.0 pymdown-extensions>=8.2
mkdocs-material-extensions>=1.0 mkdocs-material-extensions>=1.0
# Use feature branch temporarily
pymdown-extensions @ git+https://github.com/facelessuser/pymdown-extensions.git@feature/tabbed-alternate

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

@ -20,16 +20,14 @@
/// DEALINGS /// DEALINGS
//// ////
@use "sass:selector";
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Rules // Rules: legacy implementation (deprecated, removed in v8)
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content // Scoped in typesetted content to match specificity of regular content
.md-typeset { .md-typeset {
// Tabbed block content // Tabbed content
.tabbed-content { .tabbed-content {
display: none; display: none;
order: 99; order: 99;
@ -62,7 +60,7 @@
} }
} }
// Tabbed block container // Tabbed container
.tabbed-set { .tabbed-set {
position: relative; position: relative;
display: flex; display: flex;
@ -124,10 +122,6 @@
} }
} }
// ----------------------------------------------------------------------------
// See https://github.com/facelessuser/pymdown-extensions/issues/1415
// ----------------------------------------------------------------------------
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Placeholders: improve colocation for better compression // Placeholders: improve colocation for better compression
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -159,10 +153,10 @@
// Scoped in typesetted content to match specificity of regular content // Scoped in typesetted content to match specificity of regular content
.md-typeset { // stylelint-disable-line .md-typeset { // stylelint-disable-line
// Tab labels container // Tabbed labels
.tabbed-labels { .tabbed-labels {
display: flex; display: flex;
max-width: 100vw; // TODO: see if we can use something else max-width: 100vw;
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;
@ -218,19 +212,19 @@
// [mobile -]: Align with body copy // [mobile -]: Align with body copy
@include break-to-device(mobile) { @include break-to-device(mobile) {
// Top-level tab label containers // Top-level tabbed labels
> .tabbed-alternate .tabbed-labels { > .tabbed-alternate .tabbed-labels {
margin: 1em px2rem(-16px); margin: 0 px2rem(-16px);
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
scroll-padding: 0 px2rem(16px); scroll-padding: 0 px2rem(16px);
} }
} }
// Tab block container // Tabbed container
.tabbed-alternate { .tabbed-alternate {
flex-direction: column; flex-direction: column;
// Tab content container // Tabbed content
.tabbed-content { .tabbed-content {
display: initial; display: initial;
order: initial; order: initial;
@ -243,8 +237,8 @@
} }
} }
// Tab content - TODO: nested tabs might break here... // Tabbed block
.tabbed-subcontent { // TODO: this might not be necessary to nest under .tabbed-alternate! .tabbed-block {
display: none; display: none;
// [print]: Intersperse labels with containers // [print]: Intersperse labels with containers
@ -273,7 +267,7 @@
} }
} }
// Adjust spacing for nested tab // Adjust spacing for nested tabbed container
> .tabbed-set { > .tabbed-set {
margin: 0; margin: 0;
} }
@ -297,7 +291,7 @@
} }
} }
// Tab on keyboard focus // Tab label on keyboard focus
&.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) { &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
@extend %tabbed-label-focus-visible; @extend %tabbed-label-focus-visible;
} }