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

Reduce repaints on scroll with new tabs

Browse Source
This commit is contained in:
squidfunk 2017-01-27 23:21:41 +01:00
parent c994ce1dd9
commit 82a98ae9d3
6 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/stylesheets/application-9fbcbbadc4.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-ad31b93a47.css Normal file
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -45,7 +45,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9fbcbbadc4.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ad31b93a47.css">
{% if config.extra.palette %} {% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
{% endif %} {% endif %}

2
material/partials/tabs-item.html
View File

@ -3,7 +3,7 @@
<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.children[0].url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
{{ nav_item.title }} {{ nav_item.title }}
</a> </a>
{% else %} {% elif nav_item.url == base_url %}
<a href="{{ nav_item.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 {% if nav_item.active %} md-tabs__link--active {% endif %}">
{{ nav_item.title }} {{ nav_item.title }}
</a> </a>

14
src/assets/stylesheets/layout/_tabs.scss
View File

@ -40,9 +40,7 @@
margin: 0; margin: 0;
margin-left: 0.4rem; margin-left: 0.4rem;
padding: 0; padding: 0;
transition: transition: opacity 0.1s;
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.1s;
list-style: none; list-style: none;
white-space: nowrap; white-space: nowrap;
} }
@ -57,7 +55,9 @@
display: block; display: block;
padding-right: 1.2rem; padding-right: 1.2rem;
padding-left: 1.2rem; padding-left: 1.2rem;
transition: color 0.25s; transition:
color 0.25s,
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
color: $md-color-white--light; color: $md-color-white--light;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 4.8rem; line-height: 4.8rem;
@ -69,9 +69,11 @@
} }
} }
// Hide tabs upon scrolling // Hide tabs upon scrolling - disable transition to minimizes repaints whilte
&[data-md-state="hidden"] .md-tabs__list { // scrolling down, while scrolling up seems to be okay
&[data-md-state="hidden"] .md-tabs__link {
transform: translateY(10%); transform: translateY(10%);
transition: none;
opacity: 0; opacity: 0;
} }
} }

3
src/partials/tabs-item.html
View File

@ -34,7 +34,8 @@
</a> </a>
<!-- Main navigation item --> <!-- Main navigation item -->
{% else %}
{% elif nav_item.url == base_url %}
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
class="md-tabs__link class="md-tabs__link
{% if nav_item.active %} {% if nav_item.active %}