Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-28 01:10:58 +01:00
Code Issues 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/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/stylesheets/main.css": "assets/stylesheets/main.24735edb.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.24735edb.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.e620dc14.min.css",
"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.map": "assets/stylesheets/overrides.9399043a.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.93389a19.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.93389a19.min.css.map"
"assets/stylesheets/palette.css": "assets/stylesheets/palette.a99d9558.min.css",
"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 %}
{% endblock %}
{% 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 %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.93389a19.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a99d9558.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}

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

@ -14,15 +14,11 @@
{% endif %}
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
<span class="md-nav__icon md-icon">
{% include ".icons/material/chevron-right.svg" %}
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}">
<span class="md-nav__icon md-icon">
{% include ".icons/material/arrow-left.svg" %}
</span>
<span class="md-nav__icon md-icon"></span>
{{ nav_item.title }}
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -45,9 +41,7 @@
{% if toc | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }}
<span class="md-nav__icon md-icon">
{% include ".icons/material/table-of-contents.svg" %}
</span>
<span class="md-nav__icon md-icon"></span>
</label>
{% endif %}
<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 %}
{% if toc | first is defined %}
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon">
{% include ".icons/material/arrow-left.svg" %}
</span>
<span class="md-nav__icon md-icon"></span>
{{ lang.t("toc.title") }}
</label>
<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"] {
cursor: pointer;
// Icons
// Sort icon
&::after {
display: inline-block;
width: 1.2em;

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

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

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

@ -24,6 +24,15 @@
// 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
.md-nav {
font-size: px2rem(14px);
@ -186,7 +195,7 @@
background-color: var(--md-default-fg-color--lightest);
cursor: pointer;
// Icon
// Navigation icon
.md-nav__icon {
position: absolute;
top: px2rem(8px);
@ -196,6 +205,17 @@
height: px2rem(24px);
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
[dir="rtl"] & {
right: px2rem(8px);
@ -291,15 +311,28 @@
margin-top: 0;
padding: px2rem(12px) px2rem(16px);
// Icon
// Navigation icon
.md-nav__icon {
position: absolute;
top: 50%;
right: px2rem(12px);
width: px2rem(24px);
height: px2rem(24px);
margin-top: px2rem(-12px);
color: inherit;
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
[dir="rtl"] & {
right: initial;
@ -308,14 +341,14 @@
}
}
// Icon
// Navigation icon
.md-nav__icon {
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
&::after {
transform: scale(-1);
}
}
@ -425,6 +458,16 @@
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
& ~ .md-nav {
display: flex;
@ -497,9 +540,10 @@
display: none;
}
// Icon
// Navigation icon
&__icon {
float: right;
width: px2rem(18px);
height: px2rem(18px);
transition: transform 250ms;
@ -509,12 +553,16 @@
transform: rotate(180deg);
}
// Inline icon and adjust to match font size
svg {
// Inline icon and adjust icon to match font size
&::after {
display: inline-block;
width: px2rem(18px);
height: px2rem(18px);
width: 100%;
height: 100%;
vertical-align: px2rem(-2px);
background-color: currentColor;
mask-image: var(--md-nav-icon--next);
mask-repeat: no-repeat;
content: "";
}
// 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);
}
// Icon color
// Search icon color
+ .md-search__icon {
color: var(--md-primary-bg-color);
}
@ -296,7 +296,7 @@ $md-toggle__search--checked:
background-color: var(--md-default-bg-color);
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,
&::placeholder {
color: var(--md-default-fg-color--light);
@ -305,7 +305,7 @@ $md-toggle__search--checked:
}
}
// Icon
// Search icon
&__icon {
position: absolute;
z-index: 2;
@ -596,7 +596,7 @@ $md-toggle__search--checked:
}
}
// Icon
// Search result icon
&__icon {
position: absolute;
left: 0;

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

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

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

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

4
src/partials/toc.html
View File

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