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

Fixed #1887: Moved icons in navigation to CSS to reduce size of large projects

Browse Source
This commit is contained in:
squidfunk 2020-08-28 18:20:23 +02:00
parent c6c6760885
commit 355a1cacd5
18 changed files with 85 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
material/assets/manifest.json
View File

@ -5,10 +5,10 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.48dbe4ba.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.48dbe4ba.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.24735edb.min.css", "assets/stylesheets/main.css": "assets/stylesheets/main.e620dc14.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.24735edb.min.css.map", "assets/stylesheets/main.css.map": "assets/stylesheets/main.e620dc14.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.9399043a.min.css", "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.9399043a.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.9399043a.min.css.map", "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.9399043a.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.93389a19.min.css", "assets/stylesheets/palette.css": "assets/stylesheets/palette.a99d9558.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.93389a19.min.css.map" "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a99d9558.min.css.map"
} }

3
material/assets/stylesheets/main.24735edb.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.24735edb.min.css.map
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/main.e620dc14.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.93389a19.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/palette.93389a19.min.css → material/assets/stylesheets/palette.a99d9558.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.a99d9558.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,9 +41,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.24735edb.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e620dc14.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %} {% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.93389a19.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a99d9558.min.css' | url }}">
{% endif %} {% endif %}
{% if palette.primary %} {% if palette.primary %}
{% import "partials/palette.html" as map %} {% import "partials/palette.html" as map %}

12
material/partials/nav-item.html
View File

@ -14,15 +14,11 @@
{% endif %} {% endif %}
<label class="md-nav__link" for="{{ path }}"> <label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }} {{ nav_item.title }}
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/chevron-right.svg" %}
</span>
</label> </label>
<nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}"> <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}"> <label class="md-nav__title" for="{{ path }}">
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ nav_item.title }} {{ nav_item.title }}
</label> </label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>
@ -45,9 +41,7 @@
{% if toc | first is defined %} {% if toc | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }} {{ nav_item.title }}
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/table-of-contents.svg" %}
</span>
</label> </label>
{% endif %} {% endif %}
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active"> <a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active">

4
material/partials/toc.html
View File

@ -9,9 +9,7 @@
{% endif %} {% endif %}
{% if toc | first is defined %} {% if toc | first is defined %}
<label class="md-nav__title" for="__toc"> <label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ lang.t("toc.title") }} {{ lang.t("toc.title") }}
</label> </label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>

2
src/assets/stylesheets/main/_typeset.scss
View File

@ -533,7 +533,7 @@ kbd {
table th[role="columnheader"] { table th[role="columnheader"] {
cursor: pointer; cursor: pointer;
// Icons // Sort icon
&::after { &::after {
display: inline-block; display: inline-block;
width: 1.2em; width: 1.2em;

4
src/assets/stylesheets/main/extensions/markdown/_admonition.scss
View File

@ -133,7 +133,7 @@ $admonitions: (
margin-bottom: 0; margin-bottom: 0;
} }
// Icon // Admonition icon
&::before { &::before {
position: absolute; position: absolute;
left: px2rem(16px); left: px2rem(16px);
@ -185,7 +185,7 @@ $admonitions: (
.md-typeset .#{$name} > .admonition-title { .md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9); background-color: transparentize($tint, 0.9);
// Icon // Admonition icon
&::before { &::before {
background-color: $tint; background-color: $tint;
mask-image: var(--md-admonition-icon--#{$name}); mask-image: var(--md-admonition-icon--#{$name});

66
src/assets/stylesheets/main/layout/_nav.scss
View File

@ -24,6 +24,15 @@
// Rules // Rules
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Icon definitions
:root {
--md-nav-icon--prev: svg-load("@mdi/svg/svg/arrow-left.svg");
--md-nav-icon--next: svg-load("@mdi/svg/svg/chevron-right.svg");
--md-toc-icon: svg-load("@mdi/svg/svg/table-of-contents.svg");
}
// ----------------------------------------------------------------------------
// Navigation container // Navigation container
.md-nav { .md-nav {
font-size: px2rem(14px); font-size: px2rem(14px);
@ -186,7 +195,7 @@
background-color: var(--md-default-fg-color--lightest); background-color: var(--md-default-fg-color--lightest);
cursor: pointer; cursor: pointer;
// Icon // Navigation icon
.md-nav__icon { .md-nav__icon {
position: absolute; position: absolute;
top: px2rem(8px); top: px2rem(8px);
@ -196,6 +205,17 @@
height: px2rem(24px); height: px2rem(24px);
margin: px2rem(4px); margin: px2rem(4px);
// Previous navigation item icon
&::after {
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
mask-image: var(--md-nav-icon--prev);
mask-repeat: no-repeat;
content: "";
}
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
right: px2rem(8px); right: px2rem(8px);
@ -291,15 +311,28 @@
margin-top: 0; margin-top: 0;
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
// Icon // Navigation icon
.md-nav__icon { .md-nav__icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: px2rem(12px); right: px2rem(12px);
width: px2rem(24px);
height: px2rem(24px);
margin-top: px2rem(-12px); margin-top: px2rem(-12px);
color: inherit; color: inherit;
font-size: px2rem(24px); font-size: px2rem(24px);
// Next navigation item icon
&::after {
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
mask-image: var(--md-nav-icon--next);
mask-repeat: no-repeat;
content: "";
}
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
right: initial; right: initial;
@ -308,14 +341,14 @@
} }
} }
// Icon // Navigation icon
.md-nav__icon { .md-nav__icon {
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
// Flip icon vertically // Flip icon vertically
svg { &::after {
transform: scale(-1); transform: scale(-1);
} }
} }
@ -425,6 +458,16 @@
display: none; display: none;
} }
// Table of contents icon
.md-icon::after {
display: block;
width: 100%;
height: 100%;
mask-image: var(--md-toc-icon);
background-color: currentColor;
content: "";
}
// Show table of contents // Show table of contents
& ~ .md-nav { & ~ .md-nav {
display: flex; display: flex;
@ -497,9 +540,10 @@
display: none; display: none;
} }
// Icon // Navigation icon
&__icon { &__icon {
float: right; float: right;
width: px2rem(18px);
height: px2rem(18px); height: px2rem(18px);
transition: transform 250ms; transition: transform 250ms;
@ -509,12 +553,16 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
// Inline icon and adjust to match font size // Inline icon and adjust icon to match font size
svg { &::after {
display: inline-block; display: inline-block;
width: px2rem(18px); width: 100%;
height: px2rem(18px); height: 100%;
vertical-align: px2rem(-2px); vertical-align: px2rem(-2px);
background-color: currentColor;
mask-image: var(--md-nav-icon--next);
mask-repeat: no-repeat;
content: "";
} }
// Rotate icon for expanded lists // Rotate icon for expanded lists

8
src/assets/stylesheets/main/layout/_search.scss
View File

@ -274,7 +274,7 @@ $md-toggle__search--checked:
padding-right: px2rem(44px); padding-right: px2rem(44px);
} }
// Icon color // Search icon color
+ .md-search__icon { + .md-search__icon {
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
} }
@ -296,7 +296,7 @@ $md-toggle__search--checked:
background-color: var(--md-default-bg-color); background-color: var(--md-default-bg-color);
border-radius: px2rem(2px) px2rem(2px) 0 0; border-radius: px2rem(2px) px2rem(2px) 0 0;
// Icon and placeholder color in active state // Search icon and placeholder color in active state
+ .md-search__icon, + .md-search__icon,
&::placeholder { &::placeholder {
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
@ -305,7 +305,7 @@ $md-toggle__search--checked:
} }
} }
// Icon // Search icon
&__icon { &__icon {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -596,7 +596,7 @@ $md-toggle__search--checked:
} }
} }
// Icon // Search result icon
&__icon { &__icon {
position: absolute; position: absolute;
left: 0; left: 0;

2
src/assets/stylesheets/palette/_primary.scss
View File

@ -99,7 +99,7 @@
.md-search__input { .md-search__input {
background-color: hsla(0, 0%, 0%, 0.07); background-color: hsla(0, 0%, 0%, 0.07);
// Icon color // Search icon color
+ .md-search__icon { + .md-search__icon {
color: hsla(0, 0%, 0%, 0.87); color: hsla(0, 0%, 0%, 0.87);
} }

12
src/partials/nav-item.html
View File

@ -51,9 +51,7 @@
<!-- Expand active pages --> <!-- Expand active pages -->
<label class="md-nav__link" for="{{ path }}"> <label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }} {{ nav_item.title }}
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/chevron-right.svg" %}
</span>
</label> </label>
<nav <nav
class="md-nav" class="md-nav"
@ -61,9 +59,7 @@
data-md-level="{{ level }}" data-md-level="{{ level }}"
> >
<label class="md-nav__title" for="{{ path }}"> <label class="md-nav__title" for="{{ path }}">
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ nav_item.title }} {{ nav_item.title }}
</label> </label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>
@ -101,9 +97,7 @@
{% if toc | first is defined %} {% if toc | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }} {{ nav_item.title }}
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/table-of-contents.svg" %}
</span>
</label> </label>
{% endif %} {% endif %}
<a <a

4
src/partials/toc.html
View File

@ -39,9 +39,7 @@
<!-- Render item list --> <!-- Render item list -->
{% if toc | first is defined %} {% if toc | first is defined %}
<label class="md-nav__title" for="__toc"> <label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"> <span class="md-nav__icon md-icon"></span>
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ lang.t("toc.title") }} {{ lang.t("toc.title") }}
</label> </label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>