starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-04 19:45:08 -04: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
Download Patch File Download Diff File Expand all files Collapse all files

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>