mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Added support for tabs
This commit is contained in:
squidfunk
parent
09d579b516
commit
0eee81b048
1
material/assets/stylesheets/application-4ee152c883.css
Normal file
1
material/assets/stylesheets/application-4ee152c883.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -32,7 +32,7 @@
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-954a1bc95b.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4ee152c883.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
|
||||
{% endif %}
|
||||
|
||||
@ -2,11 +2,14 @@
|
||||
<nav class="md-header-nav md-grid">
|
||||
<div class="md-flex">
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-header-nav__button">
|
||||
{% if config.extra.logo %}
|
||||
{% if config.extra.logo %}
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-logo md-header-nav__button">
|
||||
<img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
|
||||
{% endif %}
|
||||
</a>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon md-icon--home md-header-nav__button">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||
<label class="md-nav__title md-nav__title--site" for="drawer">
|
||||
<i class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-nav__button">
|
||||
{% if config.extra.logo %}
|
||||
{% if config.extra.logo %}
|
||||
<i class="md-logo md-nav__button">
|
||||
<img src="{{ base_url }}/{{ config.extra.logo }}">
|
||||
{% endif %}
|
||||
</i>
|
||||
</i>
|
||||
{% else %}
|
||||
<i class="md-icon md-icon--home md-nav__button"></i>
|
||||
{% endif %}
|
||||
{{ config.site_name }}
|
||||
</label>
|
||||
{% if config.repo_url %}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{% if nav_item.children and nav_item.children | length > 0 %}
|
||||
{% if nav_item.is_homepage %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% for nav_item_ in nav %} {% if nav_item_.url == page.url %} md-tabs__link--active {% endif %} {% endfor %}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% elif nav_item.url == base_url %}
|
||||
{% elif nav_item.children and nav_item.children | length > 0 %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% for nav_item_ in nav %} {% if nav_item_.url == page.url and nav_item_.children | length == 0 %} md-tabs__link--active {% endif %} {% endfor %}">
|
||||
<a href="{{ (nav_item.children | first).url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<nav class="md-tabs" data-md-component="tabs">
|
||||
<nav class="md-tabs {% if page.ancestors | length > 0 %} md-tabs--active {% endif %}" data-md-component="tabs">
|
||||
<div class="md-tabs__inner md-grid">
|
||||
<ul class="md-tabs__list">
|
||||
{% for nav_item in nav %}
|
||||
|
||||
@ -23,60 +23,3 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
// Nothing to see here, move along
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// TODO: ONLY for screen+
|
||||
.md-nav--primary {
|
||||
|
||||
// // WE'RE IN THE TOP LEVEL LIST
|
||||
& > .md-nav__list {
|
||||
> .md-nav__item > .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
// the single nested entry that is active
|
||||
> .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav__link {
|
||||
display: block;
|
||||
margin-top: 0; // TODO: this really sucks... refactor into margin collapse if possible
|
||||
padding-top: 1.2rem; // TODO: first write gemini tests!
|
||||
font-weight: 700;
|
||||
cursor: text;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav {
|
||||
margin-left: -1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// WE'RE IN THE SUB LIST
|
||||
// TODO: SET THE ACTIVE ITEM
|
||||
// LINK IS ALREADY ACTIVE, MAYBE CHANGE
|
||||
// & > .md-nav__list {
|
||||
// > .md-nav__item {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// > .md-nav__item--active {
|
||||
// display: block;
|
||||
//
|
||||
// // OVERRIDE EXPAND...
|
||||
// > .md-nav__link {
|
||||
// font-weight: 700;
|
||||
//
|
||||
// &::after {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// [data-md-tier="1"] > .md-nav__list > .md-nav__item {
|
||||
// padding-left: 0 !important;
|
||||
//
|
||||
// // data-attribute for LEVEL
|
||||
// // data-md-level=0,1,2,3,4
|
||||
// // fix nested nav selectors in nav.scss (and toc!)
|
||||
// }
|
||||
}
|
||||
|
||||
@ -27,9 +27,9 @@
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
width: 100%;
|
||||
background: $md-color-primary;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
transition: background 0.25s;
|
||||
background: mix($md-color-primary, $md-color-black, 75%);
|
||||
overflow: auto;
|
||||
|
||||
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense
|
||||
@include break-to-device(tablet) {
|
||||
@ -81,9 +81,72 @@
|
||||
|
||||
// Hide tabs upon scrolling - disable transition to minimizes repaints whilte
|
||||
// scrolling down, while scrolling up seems to be okay
|
||||
&[data-md-state="hidden"] .md-tabs__link {
|
||||
transform: translateY(50%);
|
||||
transition: none;
|
||||
opacity: 0;
|
||||
&[data-md-state="hidden"] {
|
||||
background: $md-color-primary;
|
||||
|
||||
.md-tabs__link {
|
||||
transform: translateY(50%);
|
||||
transition:
|
||||
color 0.25s,
|
||||
transform 0s 0.4s,
|
||||
opacity 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Adjust main navigation styles
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Hide 1st level nested items, as they are listed in the tabs by setting
|
||||
// font-size to zero, as we need to preserve bottom padding
|
||||
~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
// We're on the 2nd+ level
|
||||
&--active ~ .md-main {
|
||||
|
||||
// Adjust 1st level styles
|
||||
.md-nav--primary {
|
||||
|
||||
// Hide site title
|
||||
.md-nav__title--site {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide 1st level normal items
|
||||
& > .md-nav__list > .md-nav__item {
|
||||
font-size: 0;
|
||||
|
||||
// Show 1st level nested items and induce margin collapse
|
||||
&--nested {
|
||||
font-size: 1.4rem;
|
||||
overflow: auto;
|
||||
|
||||
// Render link same as main navigation title
|
||||
> .md-nav__link {
|
||||
margin-top: 1.2rem;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
|
||||
// Hide icon for expansion
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Always expand nested navigation on 2nd level
|
||||
.md-nav[data-md-level="1"] {
|
||||
max-height: initial;
|
||||
|
||||
// Remove left spacing on 2nd level items
|
||||
> .md-nav__list > .md-nav__item {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,18 +29,17 @@
|
||||
|
||||
<!-- Link to home -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
|
||||
class="
|
||||
{% if config.extra.logo %}
|
||||
md-logo
|
||||
{% else %}
|
||||
md-icon md-icon--home
|
||||
{% endif %} md-header-nav__button">
|
||||
{% if config.extra.logo %}
|
||||
{% if config.extra.logo %}
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
|
||||
class="md-logo md-header-nav__button">
|
||||
<img src="{{ base_url }}/{{ config.extra.logo }}"
|
||||
width="24" height="24" />
|
||||
{% endif %}
|
||||
</a>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
|
||||
class="md-icon md-icon--home md-header-nav__button">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Button to toggle drawer -->
|
||||
|
||||
@ -23,16 +23,13 @@
|
||||
<!-- Main navigation -->
|
||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||
<label class="md-nav__title md-nav__title--site" for="drawer">
|
||||
<i class="
|
||||
{% if config.extra.logo %}
|
||||
md-logo
|
||||
{% else %}
|
||||
md-icon md-icon--home
|
||||
{% endif %} md-nav__button">
|
||||
{% if config.extra.logo %}
|
||||
{% if config.extra.logo %}
|
||||
<i class="md-logo md-nav__button">
|
||||
<img src="{{ base_url }}/{{ config.extra.logo }}" />
|
||||
{% endif %}
|
||||
</i>
|
||||
</i>
|
||||
{% else %}
|
||||
<i class="md-icon md-icon--home md-nav__button"></i>
|
||||
{% endif %}
|
||||
{{ config.site_name }}
|
||||
</label>
|
||||
{% if config.repo_url %}
|
||||
|
||||
@ -20,35 +20,29 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% if nav_item.children and nav_item.children | length > 0 %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}"
|
||||
class="md-tabs__link
|
||||
{% if nav_item.active %}
|
||||
md-tabs__link--active
|
||||
{% endif %}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Home page -->
|
||||
{% elif nav_item.url == base_url %}
|
||||
{% if nav_item.is_homepage %}
|
||||
<li class="md-tabs__item">
|
||||
|
||||
<!--
|
||||
Hack: the item should be active, if we're sure that we're on the first
|
||||
level of the tree and the current item doesn't have children
|
||||
-->
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
|
||||
class="md-tabs__link
|
||||
{% for nav_item_ in nav %}
|
||||
{% if nav_item_.url == page.url and
|
||||
nav_item_.children | length == 0 %}
|
||||
{% if nav_item_.url == page.url %}
|
||||
md-tabs__link--active
|
||||
{% endif %}
|
||||
{% endfor %}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% elif nav_item.children and nav_item.children | length > 0 %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ (nav_item.children | first).url }}"
|
||||
title="{{ nav_item.title }}" class="md-tabs__link
|
||||
{% if nav_item.active %}
|
||||
md-tabs__link--active
|
||||
{% endif %}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
@ -20,8 +20,12 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<!-- Tabs with outline -->
|
||||
<nav class="md-tabs" data-md-component="tabs">
|
||||
<!-- Tabs with outline (level denotes the active level) -->
|
||||
<nav class="md-tabs
|
||||
{% if page.ancestors | length > 0 %}
|
||||
md-tabs--active
|
||||
{% endif %}"
|
||||
data-md-component="tabs">
|
||||
<div class="md-tabs__inner md-grid">
|
||||
<ul class="md-tabs__list">
|
||||
{% for nav_item in nav %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user