mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Refactored Material icon integration - bye bye webfonts
This commit is contained in:
squidfunk
parent
b345a0b650
commit
11d1b839a1
@ -51,8 +51,8 @@ hero: Metadata enables hero teaser texts
|
||||
|
||||
### Linking sources
|
||||
|
||||
When a document is related to a specific set of source files and the `repo_url`
|
||||
is defined inside the project's `mkdocs.yml`, the files can be linked using the
|
||||
When a document is related to a specific source file and the `repo_url` is
|
||||
defined inside the project's `mkdocs.yml`, the file can be linked using the
|
||||
`source` key:
|
||||
|
||||
``` markdown
|
||||
@ -69,12 +69,6 @@ path: tree/master/docs/extensions
|
||||
source: metadata.md
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
See the [source][2] section for the resulting output.
|
||||
|
||||
[2]: #__source
|
||||
|
||||
### Redirecting to another page
|
||||
|
||||
It's sometimes necessary to move documents around in the navigation tree and
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.262abba4.min.js.map
Normal file
1
material/assets/javascripts/bundle.262abba4.min.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.84919d3b.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.84919d3b.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.262abba4.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.262abba4.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
|
||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.b565871e.min.css"
|
||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.865ff948.min.css",
|
||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.bdffa146.min.css"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/app.bdffa146.min.css
vendored
Normal file
1
material/assets/stylesheets/app.bdffa146.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -43,9 +43,9 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.b565871e.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.bdffa146.min.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.865ff948.min.css' | url }}">
|
||||
{% endif %}
|
||||
{% if palette.primary %}
|
||||
{% import "partials/palette.html" as map %}
|
||||
@ -141,26 +141,31 @@
|
||||
<article class="md-content__inner md-typeset">
|
||||
{% block content %}
|
||||
{% if page.edit_url %}
|
||||
<a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__icon"></a>
|
||||
<a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-content__button md-icon">
|
||||
{% include ".icons/material/pencil.svg" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if not "\x3ch1" in page.content %}
|
||||
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
||||
{% endif %}
|
||||
{{ page.content }}
|
||||
{% block source %}
|
||||
{% if page and page.meta and page.meta.source %}
|
||||
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
|
||||
{% set repo = config.repo_url %}
|
||||
{% if repo | last == "/" %}
|
||||
{% set repo = repo[:-1] %}
|
||||
{% endif %}
|
||||
{% set path = page.meta.path | default([""]) %}
|
||||
{% set file = page.meta.source %}
|
||||
<a href="{{ [repo, path, file] | join('/') }}" title="{{ file }}" class="md-source-file">
|
||||
{{ file }}
|
||||
{% set repo_icon = config.extra.repo_icon | default(
|
||||
"fontawesome/brands/git-alt"
|
||||
) %}
|
||||
<a href="{{ [repo, path, page.meta.source] | join('/') }}" title="{{ file }}" class="md-content__button md-icon">
|
||||
{{ lang.t("meta.source") }}
|
||||
{% include ".icons/" ~ repo_icon ~ ".svg" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% if not "\x3ch1" in page.content %}
|
||||
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
||||
{% endif %}
|
||||
{{ page.content }}
|
||||
{% if page and page.meta and (
|
||||
page.meta.git_revision_date_localized or
|
||||
page.meta.revision_date
|
||||
@ -190,7 +195,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/bundle.84919d3b.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.262abba4.min.js' | url }}"></script>
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
"clipboard.copy",
|
||||
|
||||
@ -7,37 +7,33 @@
|
||||
<div class="md-footer-nav">
|
||||
<nav class="md-footer-nav__inner md-grid">
|
||||
{% if page.previous_page %}
|
||||
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-footer-nav__button">
|
||||
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<div class="md-icon md-icon__button">
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
||||
<span class="md-flex__ellipsis">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
{{ lang.t("footer.previous") }}
|
||||
</span>
|
||||
{{ page.previous_page.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if page.next_page %}
|
||||
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
||||
<span class="md-flex__ellipsis">
|
||||
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
{{ lang.t("footer.next") }}
|
||||
</span>
|
||||
{{ page.next_page.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-footer-nav__button">
|
||||
</div>
|
||||
<div class="md-icon md-icon__button">
|
||||
{% include ".icons/material/arrow-right.svg" %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
-#}
|
||||
<header class="md-header" data-md-component="header">
|
||||
<nav class="md-header-nav md-grid">
|
||||
<div class="md-flex">
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
|
||||
{% if config.theme.logo.icon %}
|
||||
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||
@ -12,12 +10,11 @@
|
||||
<img src="{{ config.theme.logo | url }}" width="24" height="24" alt="logo">
|
||||
{% endif %}
|
||||
</a>
|
||||
<label class="md-header-nav__button" for="__drawer">
|
||||
<label class="md-header-nav__button md-icon md-icon__button" for="__drawer">
|
||||
{% include ".icons/material/menu.svg" %}
|
||||
</label>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--stretch">
|
||||
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="header-title">
|
||||
<div class="md-header-nav__title" data-md-component="header-title">
|
||||
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||
{% if config.site_name == page.title %}
|
||||
{{ config.site_name }}
|
||||
{% else %}
|
||||
@ -34,21 +31,16 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
{% if "search" in config["plugins"] %}
|
||||
<label class="md-header-nav__button" for="__search">
|
||||
<label class="md-header-nav__button md-icon md-icon__button" for="__search">
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
</label>
|
||||
{% include "partials/search.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if config.repo_url %}
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-header-nav__source">
|
||||
{% include "partials/source.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -8,15 +8,21 @@
|
||||
{% if nav_item.children %}
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% if nav_item.active %}
|
||||
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
|
||||
{% else %}
|
||||
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
|
||||
{% 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>
|
||||
</label>
|
||||
<nav class="md-nav" 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>
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
@ -32,13 +38,16 @@
|
||||
{% elif nav_item == page %}
|
||||
<li class="{{ class }}">
|
||||
{% set toc_ = page.toc %}
|
||||
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||||
{% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
|
||||
{% set toc_ = (toc_ | first).children %}
|
||||
{% endif %}
|
||||
{% 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>
|
||||
</label>
|
||||
{% endif %}
|
||||
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active">
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||
<label class="md-nav__title md-nav__title--site" for="__drawer">
|
||||
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
|
||||
{% if config.theme.logo.icon %}
|
||||
<i class="md-icon">{{ config.theme.logo.icon }}</i>
|
||||
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||
{% else %}
|
||||
<img src="{{ config.theme.logo | url }}" width="48" height="48" alt="logo">
|
||||
{% endif %}
|
||||
|
||||
@ -7,10 +7,11 @@
|
||||
<div class="md-search__inner" role="search">
|
||||
<form class="md-search__form" name="search">
|
||||
<input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
|
||||
<label class="md-search__icon" for="__search">
|
||||
<label class="md-search__icon md-icon" for="__search">
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</label>
|
||||
<button type="reset" class="md-search__icon" data-md-component="search-reset" tabindex="-1">
|
||||
<button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
|
||||
{% include ".icons/material/close.svg" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
-#}
|
||||
{% import "partials/language.html" as lang with context %}
|
||||
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
|
||||
<div class="md-source__icon">
|
||||
<div class="md-source__icon md-icon">
|
||||
{% set repo_icon = config.extra.repo_icon | default(
|
||||
"fontawesome/brands/git-alt"
|
||||
) %}
|
||||
|
||||
@ -8,29 +8,16 @@
|
||||
{% set toc_ = (toc_ | first).children %}
|
||||
{% endif %}
|
||||
{% if toc_ | first is defined %}
|
||||
<label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
|
||||
<label class="md-nav__title" for="__toc">
|
||||
<span class="md-nav__icon md-icon">
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</span>
|
||||
{{ lang.t("toc.title") }}
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
{% for toc_item in toc_ %}
|
||||
{% include "partials/toc-item.html" %}
|
||||
{% endfor %}
|
||||
{% if page.meta.source and page.meta.source | length > 0 %}
|
||||
<li class="md-nav__item">
|
||||
<a href="#__source" class="md-nav__link md-nav__link--active">
|
||||
{{ lang.t("meta.source") }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% set disqus = config.extra.disqus %}
|
||||
{% if page and page.meta and page.meta.disqus is string %}
|
||||
{% set disqus = page.meta.disqus %}
|
||||
{% endif %}
|
||||
{% if not page.is_homepage and disqus %}
|
||||
<li class="md-nav__item">
|
||||
<a href="#__comments" class="md-nav__link md-nav__link--active">
|
||||
{{ lang.t("meta.comments") }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
78
package-lock.json
generated
78
package-lock.json
generated
@ -999,12 +999,6 @@
|
||||
"integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
|
||||
"dev": true
|
||||
},
|
||||
"boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"boxen": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
|
||||
@ -2010,24 +2004,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-select": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
|
||||
"integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^3.2.1",
|
||||
"domutils": "^1.7.0",
|
||||
"nth-check": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
||||
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
|
||||
"dev": true
|
||||
},
|
||||
"cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@ -5139,15 +5115,6 @@
|
||||
"path-key": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"nth-check": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
|
||||
"integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
@ -5605,51 +5572,6 @@
|
||||
"htmlparser2": "^3.10.0"
|
||||
}
|
||||
},
|
||||
"postcss-inline-svg": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz",
|
||||
"integrity": "sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-select": "^2.0.2",
|
||||
"dom-serializer": "^0.1.1",
|
||||
"htmlparser2": "^3.10.1",
|
||||
"postcss": "^7.0.17",
|
||||
"postcss-value-parser": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"dom-serializer": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
|
||||
"integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "^1.3.0",
|
||||
"entities": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "7.0.27",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
|
||||
"integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-jsx": {
|
||||
"version": "0.36.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -46,12 +46,17 @@ const css = {
|
||||
*/
|
||||
export function renderClipboard(
|
||||
id: string
|
||||
): HTMLElement {
|
||||
) {
|
||||
const path = require("material-design-icons-svg/paths/content-copy.json")
|
||||
return (
|
||||
<button
|
||||
class={css.container}
|
||||
title={translate("clipboard.copy")}
|
||||
data-clipboard-target={`#${id} code`}
|
||||
></button>
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d={path}></path>
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@ -52,12 +52,24 @@ const css = {
|
||||
*/
|
||||
export function renderSearchResult(
|
||||
{ article, sections }: SearchResult
|
||||
): HTMLElement {
|
||||
) {
|
||||
|
||||
// create page with icon
|
||||
const path = require("material-design-icons-svg/paths/file-search-outline.json")
|
||||
|
||||
const children = [article, ...sections].map(document => {
|
||||
const { location, title, text } = document
|
||||
return (
|
||||
<a href={location} class={css.link} tabIndex={-1}>
|
||||
<article class={"parent" in document ? css.section : css.article}>
|
||||
{!("parent" in document)
|
||||
? <div class="md-search-result__icon md-icon__button md-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d={path}></path>
|
||||
</svg>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<h1 class={css.title}>{title}</h1>
|
||||
{text.length
|
||||
? <p class={css.teaser}>{truncate(text, 320)}</p>
|
||||
|
||||
@ -48,7 +48,7 @@ const css = {
|
||||
*/
|
||||
export function renderSource(
|
||||
facts: SourceFacts
|
||||
): HTMLElement {
|
||||
) {
|
||||
const children = facts.map(fact => (
|
||||
<li class={css.fact}>{fact}</li>
|
||||
))
|
||||
|
||||
@ -47,7 +47,7 @@ const css = {
|
||||
*/
|
||||
export function renderTable(
|
||||
table: HTMLTableElement
|
||||
): HTMLElement {
|
||||
) {
|
||||
return (
|
||||
<div class={css.wrapper}>
|
||||
<div class={css.table}>
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
// tslint:disable no-null-keyword
|
||||
|
||||
import { JSX as JSXInternal } from "preact"
|
||||
import { keys } from "ramda"
|
||||
|
||||
@ -28,7 +30,7 @@ import { keys } from "ramda"
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* HTML attributes
|
||||
* HTML and SVG attributes
|
||||
*/
|
||||
type Attributes =
|
||||
& JSXInternal.HTMLAttributes
|
||||
@ -40,6 +42,7 @@ type Attributes =
|
||||
*/
|
||||
type Child =
|
||||
| HTMLElement
|
||||
| SVGElement
|
||||
| Text
|
||||
| string
|
||||
| number
|
||||
@ -48,13 +51,69 @@ type Child =
|
||||
* Helper functions
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Create an element
|
||||
*
|
||||
* @param tag - HTML or SVG tag
|
||||
*
|
||||
* @return Element
|
||||
*/
|
||||
function createElement(tag: string): HTMLElement | SVGElement {
|
||||
switch (tag) {
|
||||
|
||||
/* SVG elements */
|
||||
case "svg":
|
||||
case "path":
|
||||
return document.createElementNS("http://www.w3.org/2000/svg", tag)
|
||||
|
||||
/* HTML elements */
|
||||
default:
|
||||
return document.createElement(tag)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set an attribute
|
||||
*
|
||||
* @param el - Element
|
||||
* @param name - Attribute name
|
||||
* @param value - Attribute value
|
||||
*/
|
||||
function setAttribute(
|
||||
el: HTMLElement | SVGElement, name: string, value: string) {
|
||||
switch (name) {
|
||||
|
||||
/* Attributes to be ignored */
|
||||
case "xmlns":
|
||||
break
|
||||
|
||||
/* Attributes of SVG elements */
|
||||
case "viewBox":
|
||||
case "d":
|
||||
if (typeof value !== "boolean")
|
||||
el.setAttributeNS(null, name, value)
|
||||
else if (value)
|
||||
el.setAttributeNS(null, name, "")
|
||||
break
|
||||
|
||||
/* Attributes of HTML elements */
|
||||
default:
|
||||
if (typeof value !== "boolean")
|
||||
el.setAttribute(name, value)
|
||||
else if (value)
|
||||
el.setAttribute(name, "")
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Append a child node to an element
|
||||
*
|
||||
* @param el - Element
|
||||
* @param child - Child node(s)
|
||||
*/
|
||||
function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
||||
function appendChild(
|
||||
el: HTMLElement | SVGElement, child: Child | Child[]
|
||||
): void {
|
||||
|
||||
/* Handle primitive types (including raw HTML) */
|
||||
if (typeof child === "string" || typeof child === "number") {
|
||||
@ -78,7 +137,7 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
||||
/**
|
||||
* JSX factory
|
||||
*
|
||||
* @param tag - HTML tag
|
||||
* @param tag - HTML or SVG tag
|
||||
* @param attributes - HTML attributes
|
||||
* @param children - Child elements
|
||||
*
|
||||
@ -86,16 +145,13 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
||||
*/
|
||||
export function h(
|
||||
tag: string, attributes: Attributes | null, ...children: Child[]
|
||||
): HTMLElement {
|
||||
const el = document.createElement(tag)
|
||||
): HTMLElement | SVGElement {
|
||||
const el = createElement(tag)
|
||||
|
||||
/* Set attributes, if any */
|
||||
if (attributes)
|
||||
for (const attr of keys(attributes))
|
||||
if (typeof attributes[attr] !== "boolean")
|
||||
el.setAttribute(attr, attributes[attr])
|
||||
else if (attributes[attr])
|
||||
el.setAttribute(attr, "")
|
||||
setAttribute(el, attr, attributes[attr])
|
||||
|
||||
/* Append child nodes */
|
||||
for (const child of children)
|
||||
@ -111,7 +167,7 @@ export function h(
|
||||
|
||||
export declare namespace h {
|
||||
namespace JSX {
|
||||
type Element = HTMLElement
|
||||
type Element = HTMLElement | SVGElement
|
||||
type IntrinsicElements = JSXInternal.IntrinsicElements
|
||||
}
|
||||
}
|
||||
|
||||
@ -136,7 +136,7 @@ button[data-md-color-accent] {
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Site title in main navigation
|
||||
html & .md-nav--primary .md-nav__title--site {
|
||||
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@ -211,7 +211,7 @@ button[data-md-color-primary="white"] {
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Site title in main navigation
|
||||
html & .md-nav--primary .md-nav__title--site {
|
||||
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
}
|
||||
@ -278,7 +278,7 @@ button[data-md-color-primary="black"] {
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Site title in main navigation
|
||||
html & .md-nav--primary .md-nav__title--site {
|
||||
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||
background-color: $clr-black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "../../../../.stylelintrc",
|
||||
"rules": {
|
||||
"font-weight-notation": null,
|
||||
"property-no-vendor-prefix": null
|
||||
}
|
||||
}
|
||||
@ -20,78 +20,27 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// stylelint-disable font-family-no-missing-generic-family-keyword
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Font faces
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Icon font
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Material Icons"),
|
||||
local("MaterialIcons-Regular"),
|
||||
url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
|
||||
url("../fonts/MaterialIcons-Regular.woff") format("woff"),
|
||||
url("../fonts/MaterialIcons-Regular.ttf") format("truetype")
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Icon placeholders
|
||||
%md-icon {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
// Icon
|
||||
.md-icon {
|
||||
|
||||
// Icon rendered as button
|
||||
// Icon with button spacing
|
||||
&__button {
|
||||
display: inline-block;
|
||||
width: #{$md-icon-size + 2 * $md-icon-padding};
|
||||
margin: $md-icon-margin;
|
||||
padding: $md-icon-padding;
|
||||
font-size: $md-icon-size;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Representational classes
|
||||
.md-icon {
|
||||
@extend %md-icon;
|
||||
|
||||
// Build representational classes
|
||||
@each $ligature, $name in (
|
||||
"\E5C4": "arrow-back", // arrow_back
|
||||
"\E5C8": "arrow-forward", // arrow_forward
|
||||
"\E5D2": "menu", // menu
|
||||
"\E8B6": "search" // search
|
||||
) {
|
||||
&--#{$name}::before {
|
||||
content: $ligature;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
// Flip ligatures for arrows
|
||||
@each $ligature, $name in (
|
||||
"\E5C8": "arrow-back", // arrow_forward
|
||||
"\E5C4": "arrow-forward" // arrow_back
|
||||
) {
|
||||
&--#{$name}::before {
|
||||
content: $ligature;
|
||||
}
|
||||
}
|
||||
// Inherit current color
|
||||
svg {
|
||||
display: block;
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
margin: 0 auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ hr {
|
||||
|
||||
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
|
||||
a {
|
||||
-webkit-text-decoration-skip: objects;
|
||||
-webkit-text-decoration-skip: objects; // stylelint-disable-line
|
||||
}
|
||||
|
||||
// Reset tap outlines on iOS and Android
|
||||
@ -111,7 +111,7 @@ table {
|
||||
// Reset table cell styles
|
||||
td,
|
||||
th {
|
||||
font-weight: normal;
|
||||
font-weight: normal; // stylelint-disable-line
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@ kbd {
|
||||
line-height: 1.6;
|
||||
|
||||
// Colors should be kept when printing
|
||||
-webkit-print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact; // stylelint-disable-line
|
||||
|
||||
// Default spacing
|
||||
p,
|
||||
@ -143,9 +143,9 @@ kbd {
|
||||
transition: color 125ms;
|
||||
}
|
||||
|
||||
// Hovered and active links
|
||||
&:hover,
|
||||
&:active {
|
||||
// Focused or hover links
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $md-color-accent;
|
||||
}
|
||||
|
||||
@ -242,7 +242,7 @@ kbd {
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
|
||||
@ -314,7 +314,7 @@ kbd {
|
||||
sub {
|
||||
margin-left: 0.0625em * 1 / 0.8;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.0625em * 1 / 0.8;
|
||||
margin-left: initial;
|
||||
@ -327,7 +327,7 @@ kbd {
|
||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||
color: $md-color-black--light;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: initial;
|
||||
@ -347,7 +347,7 @@ kbd {
|
||||
margin-left: 0.625em;
|
||||
padding: 0;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.625em;
|
||||
margin-left: initial;
|
||||
@ -368,7 +368,7 @@ kbd {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 1.25em;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.25em;
|
||||
margin-left: initial;
|
||||
@ -390,7 +390,7 @@ kbd {
|
||||
ol {
|
||||
margin: 0.5em 0 0.5em 0.625em;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.625em;
|
||||
margin-left: initial;
|
||||
@ -403,7 +403,7 @@ kbd {
|
||||
dd {
|
||||
margin: 1em 0 1em 1.875em;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.875em;
|
||||
margin-left: initial;
|
||||
@ -439,7 +439,7 @@ kbd {
|
||||
td:not([align]) {
|
||||
text-align: left;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -31,16 +31,21 @@
|
||||
.admonition {
|
||||
margin: 1.5625em 0;
|
||||
padding: 0 px2rem(12px);
|
||||
border-left: px2rem(4px) solid $clr-blue-a200;
|
||||
border-left: px2rem(3px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(2px);
|
||||
font-size: ms(-1);
|
||||
box-shadow: inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85);
|
||||
box-shadow:
|
||||
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
|
||||
inset 1px 0 $clr-blue-a200;
|
||||
overflow: auto;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
border-right: px2rem(4px) solid $clr-blue-a200;
|
||||
border-right: px2rem(3px) solid $clr-blue-a200;
|
||||
border-left: none;
|
||||
box-shadow:
|
||||
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
|
||||
inset -1px 0 $clr-blue-a200;
|
||||
}
|
||||
|
||||
// Adjust spacing on last element
|
||||
@ -60,7 +65,7 @@
|
||||
background-color: transparentize($clr-blue-a200, 0.9);
|
||||
font-weight: 700;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
|
||||
}
|
||||
@ -72,8 +77,6 @@
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
width: px2rem(20px);
|
||||
height: px2rem(20px);
|
||||
@ -82,7 +85,7 @@
|
||||
mask-image: url("{{ pencil }}");
|
||||
content: "";
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(-28px);
|
||||
margin-left: initial;
|
||||
@ -111,11 +114,16 @@
|
||||
&%#{nth($names, 1)},
|
||||
&.#{nth($names, 1)} {
|
||||
border-left-color: $tint;
|
||||
box-shadow: inset 0 0 0 px2rem(1px) transparentize($tint, 0.85);
|
||||
box-shadow:
|
||||
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
|
||||
inset 1px 0 $tint;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
border-right-color: $tint;
|
||||
box-shadow:
|
||||
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
|
||||
inset -1px 0 $tint;
|
||||
}
|
||||
|
||||
// Title
|
||||
|
||||
@ -268,6 +268,7 @@ $codehilite-whitespace: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: refactor
|
||||
[data-linenos] {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
|
||||
@ -115,8 +115,6 @@
|
||||
|
||||
// Footnote back reference
|
||||
.footnote-backref {
|
||||
@extend %md-icon;
|
||||
|
||||
display: inline-block;
|
||||
transform: translateX(px2rem(5px));
|
||||
transition:
|
||||
@ -129,7 +127,7 @@
|
||||
opacity: 0;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(px2rem(-5px));
|
||||
}
|
||||
@ -137,10 +135,13 @@
|
||||
// Back reference icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
font-size: px2rem(16px);
|
||||
content: "\E31B"; // keyboard_return
|
||||
width: px2rem(16px);
|
||||
height: px2rem(16px);
|
||||
background-color: currentColor;
|
||||
mask-image: url("{{ anchor }}");
|
||||
content: "";
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: scaleX(-1)
|
||||
}
|
||||
|
||||
@ -35,12 +35,12 @@
|
||||
transition:
|
||||
transform 250ms 250ms,
|
||||
color 250ms,
|
||||
opacity 125ms 250ms,
|
||||
visibility 0ms 500ms;
|
||||
opacity 125ms 250ms;
|
||||
// visibility 0ms 500ms;
|
||||
opacity: 0;
|
||||
// Hack: If we don't set visibility hidden, the text content of the node
|
||||
// will include the headerlink character, which is why Google indexes them.
|
||||
visibility: hidden;
|
||||
// visibility: hidden;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
@ -92,10 +92,10 @@
|
||||
transition:
|
||||
transform 250ms 250ms,
|
||||
color 250ms,
|
||||
opacity 125ms 250ms,
|
||||
visibility 0ms;
|
||||
opacity 125ms 250ms;
|
||||
// visibility 0ms;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
// visibility: visible;
|
||||
}
|
||||
|
||||
// Active or targeted permalink
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
// Deletion
|
||||
del.critic {
|
||||
background-color: $codehilite-diff-deleted; // TODO: dependent on order of inclusion
|
||||
background-color: $codehilite-diff-deleted;
|
||||
box-shadow:
|
||||
+0.25em 0 0 $codehilite-diff-deleted,
|
||||
-0.25em 0 0 $codehilite-diff-deleted;
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
// Addition
|
||||
ins.critic {
|
||||
background-color: $codehilite-diff-inserted; // TODO: dependent on order of inclusion
|
||||
background-color: $codehilite-diff-inserted;
|
||||
box-shadow:
|
||||
+0.25em 0 0 $codehilite-diff-inserted,
|
||||
-0.25em 0 0 $codehilite-diff-inserted;
|
||||
@ -55,20 +55,16 @@
|
||||
|
||||
// Comment
|
||||
.critic.comment {
|
||||
background-color: $md-code-background; // TODO: rename, centralize somehow
|
||||
color: $md-code-color;
|
||||
box-shadow:
|
||||
+0.25em 0 0 $md-code-background,
|
||||
-0.25em 0 0 $md-code-background;
|
||||
color: $codehilite-comment;
|
||||
|
||||
// Icon
|
||||
// Comment opening mark
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
content: "/* ";
|
||||
}
|
||||
|
||||
padding-right: 0.125em;
|
||||
color: $md-color-black--lighter;
|
||||
content: "\E0B7"; // chat
|
||||
vertical-align: -0.125em;
|
||||
// Comment closing mark
|
||||
&::after {
|
||||
content: " */";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -54,25 +54,11 @@
|
||||
position: relative;
|
||||
padding-right: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-left: px2rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
// Manually hide and show, if browser doesn't support details
|
||||
.no-details &:not([open]) {
|
||||
|
||||
// Hide all nested tags ...
|
||||
> * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ... but show title
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
@ -91,16 +77,15 @@
|
||||
|
||||
// Icon
|
||||
&::after {
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
top: px2rem(8px);
|
||||
right: px2rem(12px);
|
||||
color: $md-color-black--lighter;
|
||||
font-size: px2rem(20px);
|
||||
content: "\E313"; // keyboard_arrow_down
|
||||
width: px2rem(20px);
|
||||
height: px2rem(20px);
|
||||
background-color: $md-color-black--lighter;
|
||||
mask-image: url("{{ chevron-down }}");
|
||||
content: "";
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(12px);
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
top: 0.45em;
|
||||
left: -2em;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: -2em;
|
||||
left: initial;
|
||||
@ -52,26 +52,26 @@
|
||||
|
||||
// Checkbox icon in unchecked state
|
||||
.task-list-indicator::before {
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
top: 0.15em;
|
||||
left: -1.25em;
|
||||
color: $md-color-black--lighter;
|
||||
font-size: 1.25em;
|
||||
content: "\E835"; // check_box_outline_blank
|
||||
vertical-align: -0.25em;
|
||||
left: px2em(-24px);
|
||||
width: px2em(20px);
|
||||
height: px2em(20px);
|
||||
background-color: $md-color-black--lightest;
|
||||
mask-image: url("{{ checkbox-blank-circle }}");
|
||||
content: "";
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: -1.25em;
|
||||
right: px2em(-24px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox icon in checked state
|
||||
[type="checkbox"]:checked + .task-list-indicator::before {
|
||||
content: "\E834"; // check_box
|
||||
background-color: $clr-green-a400;
|
||||
mask-image: url("{{ check-circle }}");
|
||||
}
|
||||
|
||||
// Hide original checkbox behind icon
|
||||
|
||||
@ -119,6 +119,14 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
// Apply ellipsis in case of overflowing text
|
||||
.md-ellipsis {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: navigational elements
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -158,37 +166,6 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: flexible elements
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Flexible layout container
|
||||
.md-flex {
|
||||
display: flex;
|
||||
|
||||
// Flexible layout container cell/element
|
||||
&__cell {
|
||||
position: relative;
|
||||
|
||||
// Shrink to minimum width
|
||||
&--shrink {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
// Stretch to maximum width
|
||||
&--stretch {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply ellipsis in case of overflowing text
|
||||
&__ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: skip link
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@ -27,14 +27,13 @@
|
||||
// Copy to clipboard
|
||||
.md-clipboard {
|
||||
position: absolute;
|
||||
top: px2rem(6px);
|
||||
right: px2rem(6px);
|
||||
width: px2rem(28px);
|
||||
height: px2rem(28px);
|
||||
top: px2rem(8px);
|
||||
right: px2rem(8px);
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
transition: color 250ms;
|
||||
border-radius: px2rem(2px);
|
||||
color: $md-color-black--lightest;
|
||||
font-size: px2rem(16px);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
// Hack: put everything on the GPU to omit flickering
|
||||
@ -45,6 +44,12 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Slightly smaller icon
|
||||
svg {
|
||||
width: px2rem(18px);
|
||||
height: px2rem(18px);
|
||||
}
|
||||
|
||||
// Show on container hover
|
||||
pre:hover &,
|
||||
.codehilite:hover & {
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-right: px2rem(242px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: initial;
|
||||
margin-left: px2rem(242px);
|
||||
@ -42,7 +42,7 @@
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem(242px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(242px);
|
||||
}
|
||||
@ -73,20 +73,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
&__icon {
|
||||
@extend %md-icon__button;
|
||||
|
||||
position: relative;
|
||||
// Button next to the title
|
||||
&__button {
|
||||
margin: px2rem(8px) 0;
|
||||
margin-left: px2rem(8px);
|
||||
padding: 0;
|
||||
float: right;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(8px);
|
||||
margin-left: initial;
|
||||
float: left;
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Override default link color for icons
|
||||
.md-typeset & {
|
||||
color: $md-color-black--lighter;
|
||||
}
|
||||
|
||||
// Align text with icon
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
|
||||
@ -38,12 +38,6 @@
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
|
||||
// Icons
|
||||
svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
padding: px2rem(4px);
|
||||
@ -52,6 +46,7 @@
|
||||
|
||||
// Links to previous and next page
|
||||
&__link {
|
||||
display: flex;
|
||||
padding-top: px2rem(28px);
|
||||
padding-bottom: px2rem(8px);
|
||||
transition: opacity 250ms;
|
||||
@ -61,7 +56,8 @@
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// Hovered link
|
||||
// Focused or hovered links
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -71,9 +67,14 @@
|
||||
width: 25%;
|
||||
float: left;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
@ -92,24 +93,24 @@
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
&__button {
|
||||
@extend %md-icon__button;
|
||||
|
||||
transition: background 250ms;
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - #{px2rem(48px)});
|
||||
padding: 0 px2rem(20px);
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
@ -161,7 +162,7 @@
|
||||
max-width: 75%;
|
||||
float: left;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
@ -183,7 +184,7 @@
|
||||
padding: px2rem(12px) 0;
|
||||
float: right;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
@ -194,7 +195,7 @@
|
||||
display: inline-block;
|
||||
width: px2rem(32px);
|
||||
height: px2rem(32px);
|
||||
font-size: px2rem(16px);
|
||||
transition: color 250ms;
|
||||
text-align: center;
|
||||
|
||||
// Adjust line-height to match height for correct alignment
|
||||
@ -205,15 +206,8 @@
|
||||
// Social icon
|
||||
svg {
|
||||
width: px2rem(16px);
|
||||
transition: fill 250ms;
|
||||
vertical-align: -25%;
|
||||
fill: $md-color-white--light;
|
||||
}
|
||||
|
||||
// Focused or hovered link
|
||||
&:focus svg,
|
||||
&:hover svg {
|
||||
fill: $md-color-white;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,12 +41,6 @@
|
||||
// Hack: putting the header on the GPU avoids unnecessary repaints
|
||||
backface-visibility: hidden;
|
||||
|
||||
// Icons
|
||||
svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Always hide shadow, in case JavaScript is not available
|
||||
.no-js & {
|
||||
transition: none;
|
||||
@ -72,28 +66,50 @@
|
||||
|
||||
// Navigation within header
|
||||
.md-header-nav {
|
||||
display: flex;
|
||||
padding: 0 px2rem(4px);
|
||||
|
||||
// Icon buttons
|
||||
&__button {
|
||||
@extend %md-icon__button;
|
||||
|
||||
position: relative;
|
||||
transition: opacity 250ms;
|
||||
z-index: 1;
|
||||
|
||||
// Hovered icon
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Focused or hovered icon
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Logo
|
||||
&.md-logo {
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
|
||||
// Set correct display on image or icon
|
||||
&.md-logo * {
|
||||
* {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Inherit current color
|
||||
svg {
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide search icon, if JavaScript is not available.
|
||||
.no-js &.md-icon--search {
|
||||
.no-js &[for="search"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -129,7 +145,8 @@
|
||||
&__topic {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc(100% - #{px2rem(20px)});
|
||||
width: calc(100% - #{px2rem(40px)});
|
||||
padding: 0 px2rem(20px);
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms;
|
||||
@ -147,7 +164,7 @@
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(px2rem(-25px));
|
||||
}
|
||||
@ -166,7 +183,7 @@
|
||||
|
||||
// Header title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
padding: 0 px2rem(20px);
|
||||
flex-grow: 1;
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
|
||||
@ -180,7 +197,7 @@
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(px2rem(25px));
|
||||
}
|
||||
@ -196,6 +213,13 @@
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Patch ellipsis
|
||||
> .md-header-nav__ellipsis {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Repository containing source
|
||||
@ -209,7 +233,7 @@
|
||||
max-width: px2rem(234px);
|
||||
margin-left: px2rem(20px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(20px);
|
||||
margin-left: initial;
|
||||
@ -220,7 +244,7 @@
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem(28px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(28px);
|
||||
}
|
||||
|
||||
@ -37,22 +37,20 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
// Icon, hidden by default
|
||||
&::before {
|
||||
@extend %md-icon, %md-icon__button;
|
||||
|
||||
display: none;
|
||||
content: "\E5C4"; // arrow_back
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
content: "\E5C8"; // arrow_forward
|
||||
}
|
||||
}
|
||||
|
||||
// Hide button by default
|
||||
// Hide buttons by default
|
||||
.md-nav__button {
|
||||
display: none;
|
||||
|
||||
// Stretch images
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Logo
|
||||
&.md-logo svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +74,7 @@
|
||||
& & {
|
||||
padding-right: 0;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: 0;
|
||||
@ -89,17 +87,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Button with logo
|
||||
&__button {
|
||||
@extend %md-icon, %md-icon__button;
|
||||
|
||||
// Stretch image
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Link inside item
|
||||
&__link {
|
||||
display: block;
|
||||
@ -110,16 +97,6 @@
|
||||
overflow: hidden;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Icon
|
||||
&::after {
|
||||
@extend %md-icon;
|
||||
|
||||
// Item contains a nested list
|
||||
.md-nav__item--nested > & {
|
||||
content: "\E313"; // keyboard_arrow_down
|
||||
}
|
||||
}
|
||||
|
||||
// Hide link to table of contents by default - this will only match the
|
||||
// table of contents inside the drawer below and including tablet portrait
|
||||
html &[for="__toc"] {
|
||||
@ -129,11 +106,6 @@
|
||||
& ~ .md-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide icon for current item
|
||||
+ .md-nav__link::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Blurred link
|
||||
@ -142,8 +114,7 @@
|
||||
}
|
||||
|
||||
// Active link
|
||||
&:active,
|
||||
&--active {
|
||||
.md-nav__item &--active {
|
||||
color: $md-color-primary;
|
||||
}
|
||||
|
||||
@ -191,9 +162,8 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// List title - higher specificity is necessary to ensure that the title
|
||||
// inside the drawer is always styled accordingly
|
||||
html & .md-nav__title {
|
||||
// List title
|
||||
.md-nav__title {
|
||||
position: relative;
|
||||
height: px2rem(112px);
|
||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||
@ -205,14 +175,20 @@
|
||||
cursor: pointer;
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
.md-nav__icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
width: px2rem(40px);
|
||||
height: px2rem(40px);
|
||||
color: $md-color-black--light;
|
||||
top: px2rem(8px);
|
||||
left: px2rem(8px);
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
margin: px2rem(4px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(8px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Main lists
|
||||
@ -229,7 +205,7 @@
|
||||
}
|
||||
|
||||
// Site title in main navigation
|
||||
&--site {
|
||||
&[for="__drawer"] {
|
||||
position: relative;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
@ -242,27 +218,18 @@
|
||||
left: px2rem(4px);
|
||||
width: px2rem(64px);
|
||||
height: px2rem(64px);
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
font-size: px2rem(48px);
|
||||
}
|
||||
|
||||
// Hide back arrow icon
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
html [dir="rtl"] & .md-nav__title {
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Site title in main navigation
|
||||
&--site .md-nav__button {
|
||||
&[for="__drawer"] .md-nav__button {
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
@ -278,7 +245,7 @@
|
||||
padding: 0;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding: 0;
|
||||
}
|
||||
@ -287,21 +254,11 @@
|
||||
&--nested > .md-nav__link {
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Replace icon with right arrow
|
||||
&::after {
|
||||
content: "\E315"; // keyboard_arrow_right
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
content: "\E314"; // keyboard_arrow_left
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -311,8 +268,8 @@
|
||||
margin-top: 0;
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
|
||||
// Rotate icon
|
||||
&::after {
|
||||
// Icon
|
||||
.md-nav__icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: px2rem(12px);
|
||||
@ -320,7 +277,7 @@
|
||||
color: inherit;
|
||||
font-size: px2rem(24px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(12px);
|
||||
@ -328,6 +285,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.md-nav__icon {
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scale(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table of contents inside navigation
|
||||
.md-nav--secondary {
|
||||
|
||||
@ -345,7 +315,7 @@
|
||||
.md-nav__link {
|
||||
padding-left: px2rem(28px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(28px);
|
||||
padding-left: initial;
|
||||
@ -356,7 +326,7 @@
|
||||
.md-nav .md-nav__link {
|
||||
padding-left: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(40px);
|
||||
padding-left: initial;
|
||||
@ -367,7 +337,7 @@
|
||||
.md-nav .md-nav .md-nav__link {
|
||||
padding-left: px2rem(52px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(52px);
|
||||
padding-left: initial;
|
||||
@ -378,7 +348,7 @@
|
||||
.md-nav .md-nav .md-nav .md-nav__link {
|
||||
padding-left: px2rem(64px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(64px);
|
||||
padding-left: initial;
|
||||
@ -397,15 +367,10 @@
|
||||
opacity 125ms 50ms;
|
||||
opacity: 0;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
// Just hide navigation, if browser doesn't supports 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Expand nested navigation, if toggle is checked
|
||||
@ -415,11 +380,6 @@
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 125ms 125ms;
|
||||
opacity: 1;
|
||||
|
||||
// Just show navigation, if browser doesn't supports 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -432,12 +392,6 @@
|
||||
display: block;
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
// Unrotate icon for table of contents
|
||||
&::after {
|
||||
color: inherit;
|
||||
content: "\E8DE"; // toc
|
||||
}
|
||||
|
||||
// Hide link to current item
|
||||
+ .md-nav__link {
|
||||
display: none;
|
||||
@ -449,7 +403,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
html [dir="rtl"] &__link {
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
@ -471,12 +425,21 @@
|
||||
// property must be calculated before transitioning
|
||||
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
// List title
|
||||
.md-nav__title {
|
||||
|
||||
// Snap to site and table of contents title
|
||||
.md-nav__title[for="__drawer"],
|
||||
.md-nav__title[for="__toc"] {
|
||||
&[for="__drawer"],
|
||||
&[for="__toc"] {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Hide icons
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
.md-nav__toggle ~ & {
|
||||
display: none;
|
||||
@ -492,27 +455,23 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Link inside item - ideally the link display method would be set to
|
||||
// inline on screen, but this doesn't work with text ellipsis
|
||||
&__link {
|
||||
// Icon
|
||||
&__icon {
|
||||
height: px2rem(18px);
|
||||
float: right;
|
||||
transition: transform 250ms;
|
||||
|
||||
// Item contains a nested list
|
||||
.md-nav__item--nested > &::after {
|
||||
// Inline icon and adjust to match font size
|
||||
svg {
|
||||
display: inline-block;
|
||||
transform-origin: 0.45em 0.45em;
|
||||
transform-style: preserve-3d;
|
||||
vertical-align: -0.125em;
|
||||
|
||||
// Only animate icon when JavaScript is available, as the height can
|
||||
// not be animated anyway, and better no fun than half the fun
|
||||
.js & {
|
||||
transition: transform 400ms;
|
||||
}
|
||||
width: px2rem(18px);
|
||||
height: px2rem(18px);
|
||||
vertical-align: px2rem(-2px);
|
||||
}
|
||||
|
||||
// Rotate icon for expanded lists
|
||||
.md-nav__item--nested .md-nav__toggle:checked ~ &::after {
|
||||
transform: rotateX(180deg);
|
||||
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@ $md-toggle__search--checked:
|
||||
|
||||
// Search container
|
||||
.md-search {
|
||||
position: relative;
|
||||
|
||||
// Hide search, if JavaScript is not available.
|
||||
.no-js & {
|
||||
@ -42,7 +43,6 @@ $md-toggle__search--checked:
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-left: px2rem(4px);
|
||||
padding: px2rem(4px) 0;
|
||||
}
|
||||
|
||||
@ -55,9 +55,9 @@ $md-toggle__search--checked:
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
width: px2rem(36px);
|
||||
height: px2rem(36px);
|
||||
left: px2rem(-44px);
|
||||
width: px2rem(40px);
|
||||
height: px2rem(40px);
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 300ms 100ms,
|
||||
@ -67,9 +67,9 @@ $md-toggle__search--checked:
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(4px);
|
||||
right: px2rem(-44px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ $md-toggle__search--checked:
|
||||
background-color: $md-color-black--light;
|
||||
cursor: pointer;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
left: initial;
|
||||
@ -164,14 +164,14 @@ $md-toggle__search--checked:
|
||||
opacity 150ms 150ms;
|
||||
opacity: 1;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
html [dir="rtl"] & {
|
||||
right: 100%;
|
||||
left: initial;
|
||||
@ -187,7 +187,7 @@ $md-toggle__search--checked:
|
||||
float: right;
|
||||
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
@ -225,7 +225,7 @@ $md-toggle__search--checked:
|
||||
text-overflow: ellipsis;
|
||||
z-index: 2;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding: 0 px2rem(72px) 0 px2rem(44px);
|
||||
}
|
||||
@ -239,10 +239,6 @@ $md-toggle__search--checked:
|
||||
~ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
|
||||
svg {
|
||||
fill: $md-color-black--light; // TODO: currentColor?
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the "x" rendered by Internet Explorer
|
||||
@ -270,14 +266,14 @@ $md-toggle__search--checked:
|
||||
color: inherit;
|
||||
font-size: ms(0);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(44px);
|
||||
}
|
||||
|
||||
// Icon color
|
||||
+ .md-search__icon {
|
||||
fill: inherit;
|
||||
color: $md-color-white;
|
||||
}
|
||||
|
||||
// Placeholder color
|
||||
@ -306,7 +302,7 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
// Icon
|
||||
&__icon {
|
||||
position: absolute;
|
||||
width: px2rem(24px);
|
||||
@ -328,33 +324,41 @@ $md-toggle__search--checked:
|
||||
top: px2rem(6px);
|
||||
left: px2rem(10px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(10px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// // Set search icon on pseudo class, so it can be overridden for mobile
|
||||
// // and tablet when the search is rendered in an overlay
|
||||
// &::before {
|
||||
// content: "\E8B6"; // search
|
||||
// }
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: px2rem(12px);
|
||||
left: px2rem(16px);
|
||||
|
||||
// // Show back arrow instead of search icon
|
||||
// &[for="__search"]::before {
|
||||
// content: "\E5C4"; // arrow_back
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(16px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// // Adjust for RTL languages
|
||||
// [dir="rtl"] & {
|
||||
// content: "\E5C8"; // arrow_forward
|
||||
// }
|
||||
// }
|
||||
// TODO: directly include it template, then switch
|
||||
// Hide the magnifying glass (1st icon)
|
||||
svg:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
|
||||
// Hide the arrow (2nd icon)
|
||||
svg:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -368,7 +372,7 @@ $md-toggle__search--checked:
|
||||
opacity 150ms;
|
||||
opacity: 0;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(10px);
|
||||
@ -378,6 +382,12 @@ $md-toggle__search--checked:
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: px2rem(12px);
|
||||
right: px2rem(16px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
// Show reset button if search is active and input non-empty
|
||||
@ -461,7 +471,7 @@ $md-toggle__search--checked:
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
|
||||
@ -492,7 +502,7 @@ $md-toggle__search--checked:
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: initial;
|
||||
@ -548,7 +558,7 @@ $md-toggle__search--checked:
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: px2rem(16px);
|
||||
@ -558,18 +568,25 @@ $md-toggle__search--checked:
|
||||
// Document
|
||||
&--document {
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
@extend %md-icon, %md-icon__button;
|
||||
// Title
|
||||
.md-search-result__title {
|
||||
margin: px2rem(11px) 0;
|
||||
font-size: ms(0);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
&__icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: px2rem(2px);
|
||||
transition: opacity 250ms;
|
||||
color: $md-color-black--light;
|
||||
content: "\E880"; // find_in_page
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
left: initial;
|
||||
@ -581,16 +598,6 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
.md-search-result__title {
|
||||
margin: px2rem(11px) 0;
|
||||
font-size: ms(0);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
margin: 0.5em 0;
|
||||
|
||||
@ -67,32 +67,22 @@ $md-toggle__drawer--checked:
|
||||
background-color: $md-color-white;
|
||||
z-index: 3;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(-242px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Just hide drawer, if browser doesn't support 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Expanded drawer
|
||||
#{$md-toggle__drawer--checked} & {
|
||||
@include z-depth(8);
|
||||
|
||||
transform: translateX(px2rem(242px));
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(px2rem(-242px));
|
||||
}
|
||||
|
||||
// Just show drawer, if browser doesn't support 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide overflow for nested navigation
|
||||
@ -111,7 +101,7 @@ $md-toggle__drawer--checked:
|
||||
display: block;
|
||||
margin-left: calc(100% - #{px2rem(242px)});
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: calc(100% - #{px2rem(242px)});
|
||||
margin-left: initial;
|
||||
@ -127,7 +117,7 @@ $md-toggle__drawer--checked:
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem((1220 - 242) * 1px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem((1220 - 242) * 1px);
|
||||
margin-left: initial;
|
||||
@ -166,7 +156,7 @@ $md-toggle__drawer--checked:
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: initial;
|
||||
padding-left: px2rem(12px);
|
||||
@ -91,16 +91,12 @@
|
||||
height: px2rem(48px);
|
||||
vertical-align: middle;
|
||||
|
||||
// Align SVG, do not scale, as this will incur strange formatting bugs
|
||||
// in Internet Explorer and Edge
|
||||
// Align with margin only (as opposed to normal button alignment)
|
||||
svg {
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
margin-top: px2rem(12px);
|
||||
margin-left: px2rem(12px);
|
||||
fill: $md-color-white;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(12px);
|
||||
margin-left: initial;
|
||||
@ -112,7 +108,7 @@
|
||||
margin-left: px2rem(-40px);
|
||||
padding-left: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(-40px);
|
||||
margin-left: initial;
|
||||
@ -153,7 +149,7 @@
|
||||
&__fact {
|
||||
float: left;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
@ -175,60 +171,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Source file
|
||||
.md-source-file {
|
||||
display: inline-block;
|
||||
margin: 1em 0.5em 1em 0;
|
||||
padding-right: px2rem(5px);
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black--lightest;
|
||||
font-size: ms(-1);
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: px2rem(5px);
|
||||
padding: px2rem(5px);
|
||||
background-color: $md-color-black--lighter;
|
||||
color: $md-color-white;
|
||||
font-size: ms(0);
|
||||
content: "\E86F"; // code
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Some properties need to be set with higher specificity due to the default
|
||||
// styling of text links inside typesetted content
|
||||
html & {
|
||||
transition:
|
||||
background 400ms,
|
||||
color 400ms,
|
||||
box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Color needs even higher specifity because custom color palettes are set
|
||||
// using the body and override text links inside typesetted content
|
||||
html body .md-typeset & {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
// Hovered source file
|
||||
&:hover {
|
||||
@include z-depth-focus;
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
background-color: $md-color-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
}
|
||||
|
||||
// Hide site title
|
||||
.md-nav__title--site {
|
||||
.md-nav__title[for="__drawer"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -44,10 +44,6 @@
|
||||
/// )
|
||||
/// );
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @type Map
|
||||
///
|
||||
$break-devices: () !default;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -57,11 +53,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// Choose minimum and maximum device widths
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @param {Map} $devices Map of devices
|
||||
/// @return {List} Minimum and maximum width
|
||||
///
|
||||
@function break-select-min-max($devices) {
|
||||
$min: 1000000;
|
||||
$max: 0;
|
||||
@ -93,11 +84,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// Select minimum and maximum widths for a device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @param {String} $device Device
|
||||
/// @return {List} Minimum and maximum width
|
||||
///
|
||||
@function break-select-device($device) {
|
||||
$current: $break-devices;
|
||||
@for $n from 1 through length($device) {
|
||||
@ -120,10 +106,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// A minimum-maximum media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number|List} $breakpoint Number or number pair
|
||||
///
|
||||
@mixin break-at($breakpoint) {
|
||||
@if type-of($breakpoint) == number {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@ -147,10 +129,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// An orientation media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String} $breakpoint Orientation
|
||||
///
|
||||
@mixin break-at-orientation($breakpoint) {
|
||||
@if type-of($breakpoint) == string {
|
||||
@media only screen and (orientation: $breakpoint) {
|
||||
@ -164,10 +142,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// A maximum-aspect-ratio media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number} $breakpoint Ratio
|
||||
///
|
||||
@mixin break-at-ratio($breakpoint) {
|
||||
@if type-of($breakpoint) == number {
|
||||
@media only screen and (max-aspect-ratio: $breakpoint) {
|
||||
@ -181,10 +155,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// A minimum-maximum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
///
|
||||
@mixin break-at-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
@ -208,10 +178,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// A minimum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
///
|
||||
@mixin break-from-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
@ -230,10 +196,6 @@ $break-devices: () !default;
|
||||
///
|
||||
/// A maximum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
///
|
||||
@mixin break-to-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
|
||||
@ -27,13 +27,7 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Convert font size in px to em.
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number} $size Font size in px
|
||||
/// @param {Number} $base Base font size
|
||||
/// @return {Number} Font size in em
|
||||
/// Convert font size in px to em
|
||||
///
|
||||
@function px2em($size, $base: 16px) {
|
||||
@if unit($size) == px {
|
||||
@ -48,13 +42,7 @@
|
||||
}
|
||||
|
||||
///
|
||||
/// Convert font size in px to rem.
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number} $size Font size in px
|
||||
/// @param {Number} $base Base font size
|
||||
/// @return {Number} Font size in rem
|
||||
/// Convert font size in px to rem
|
||||
///
|
||||
@function px2rem($size, $base: 20px) {
|
||||
@if unit($size) == px {
|
||||
|
||||
@ -291,15 +291,40 @@
|
||||
<!-- Content -->
|
||||
{% block content %}
|
||||
|
||||
<!-- Edit button, if URL was defined -->
|
||||
<!-- Edit button -->
|
||||
{% if page.edit_url %}
|
||||
<a
|
||||
href="{{ page.edit_url }}"
|
||||
title="{{ lang.t('edit.link.title') }}"
|
||||
class="md-icon md-content__icon"
|
||||
><!-- edit --></a>
|
||||
class="md-content__button md-icon"
|
||||
>
|
||||
{% include ".icons/material/pencil.svg" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<!-- Link to source file -->
|
||||
{% block source %}
|
||||
{% if page and page.meta and page.meta.source %}
|
||||
{% set repo = config.repo_url %}
|
||||
{% if repo | last == "/" %}
|
||||
{% set repo = repo[:-1] %}
|
||||
{% endif %}
|
||||
{% set path = page.meta.path | default([""]) %}
|
||||
{% set file = page.meta.source %}
|
||||
{% set repo_icon = config.extra.repo_icon | default(
|
||||
"fontawesome/brands/git-alt"
|
||||
) %}
|
||||
<a
|
||||
href="{{ [repo, path, page.meta.source] | join('/') }}"
|
||||
title="{{ file }}"
|
||||
class="md-content__button md-icon"
|
||||
>
|
||||
{{ lang.t("meta.source") }}
|
||||
{% include ".icons/" ~ repo_icon ~ ".svg" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<!--
|
||||
Hack: check whether the content contains a h1 headline. If it
|
||||
doesn't, the page title (or respectively site name) is used
|
||||
@ -312,26 +337,6 @@
|
||||
<!-- Content -->
|
||||
{{ page.content }}
|
||||
|
||||
<!-- Source files -->
|
||||
{% block source %}
|
||||
{% if page and page.meta and page.meta.source %}
|
||||
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
|
||||
{% set repo = config.repo_url %}
|
||||
{% if repo | last == "/" %}
|
||||
{% set repo = repo[:-1] %}
|
||||
{% endif %}
|
||||
{% set path = page.meta.path | default([""]) %}
|
||||
{% set file = page.meta.source %}
|
||||
<a
|
||||
href="{{ [repo, path, file] | join('/') }}"
|
||||
title="{{ file }}"
|
||||
class="md-source-file"
|
||||
>
|
||||
{{ file }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Support for mkdocs-git-revision-date-localized-plugin -->
|
||||
{% if page and page.meta and (
|
||||
page.meta.git_revision_date_localized or
|
||||
|
||||
@ -35,23 +35,19 @@
|
||||
<a
|
||||
href="{{ page.previous_page.url | url }}"
|
||||
title="{{ page.previous_page.title | striptags }}"
|
||||
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
|
||||
class="md-footer-nav__link md-footer-nav__link--prev"
|
||||
rel="prev"
|
||||
>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-footer-nav__button">
|
||||
<div class="md-icon md-icon__button">
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
|
||||
>
|
||||
<span class="md-flex__ellipsis">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
{{ lang.t("footer.previous") }}
|
||||
</span>
|
||||
{{ page.previous_page.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -61,24 +57,20 @@
|
||||
<a
|
||||
href="{{ page.next_page.url | url }}"
|
||||
title="{{ page.next_page.title | striptags }}"
|
||||
class="md-flex md-footer-nav__link md-footer-nav__link--next"
|
||||
class="md-footer-nav__link md-footer-nav__link--next"
|
||||
rel="next"
|
||||
>
|
||||
<div
|
||||
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
|
||||
>
|
||||
<span class="md-flex__ellipsis">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
{{ lang.t("footer.next") }}
|
||||
</span>
|
||||
{{ page.next_page.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-footer-nav__button">
|
||||
</div>
|
||||
<div class="md-icon md-icon__button">
|
||||
{% include ".icons/material/arrow-right.svg" %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
@ -25,10 +25,8 @@
|
||||
|
||||
<!-- Top-level navigation -->
|
||||
<nav class="md-header-nav md-grid">
|
||||
<div class="md-flex">
|
||||
|
||||
<!-- Link to home -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<a
|
||||
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
||||
title="{{ config.site_name }}"
|
||||
@ -46,17 +44,16 @@
|
||||
/>
|
||||
{% endif %}
|
||||
</a>
|
||||
<label class="md-header-nav__button" for="__drawer">
|
||||
<label
|
||||
class="md-header-nav__button md-icon md-icon__button"
|
||||
for="__drawer"
|
||||
>
|
||||
{% include ".icons/material/menu.svg" %}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Header title -->
|
||||
<div class="md-flex__cell md-flex__cell--stretch">
|
||||
<div
|
||||
class="md-flex__ellipsis md-header-nav__title"
|
||||
data-md-component="header-title"
|
||||
>
|
||||
<div class="md-header-nav__title" data-md-component="header-title">
|
||||
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||
{% if config.site_name == page.title %}
|
||||
{{ config.site_name }}
|
||||
{% else %}
|
||||
@ -75,25 +72,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Button to open search dialogue -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
{% if "search" in config["plugins"] %}
|
||||
<label class="md-header-nav__button" for="__search">
|
||||
<label
|
||||
class="md-header-nav__button md-icon md-icon__button"
|
||||
for="__search"
|
||||
>
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
</label>
|
||||
|
||||
<!-- Search interface -->
|
||||
{% include "partials/search.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Repository containing source -->
|
||||
{% if config.repo_url %}
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-header-nav__source">
|
||||
{% include "partials/source.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
{% if nav_item.active %}
|
||||
<input
|
||||
class="md-toggle md-nav__toggle"
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
@ -41,7 +41,7 @@
|
||||
/>
|
||||
{% else %}
|
||||
<input
|
||||
class="md-toggle md-nav__toggle"
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
@ -51,9 +51,15 @@
|
||||
<!-- 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>
|
||||
</label>
|
||||
<nav class="md-nav" 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>
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
@ -76,7 +82,7 @@
|
||||
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
<input
|
||||
class="md-toggle md-nav__toggle"
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="toc"
|
||||
type="checkbox"
|
||||
id="__toc"
|
||||
@ -91,6 +97,9 @@
|
||||
{% 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>
|
||||
</label>
|
||||
{% endif %}
|
||||
<a
|
||||
|
||||
@ -24,14 +24,15 @@
|
||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||
|
||||
<!-- Site title -->
|
||||
<label class="md-nav__title md-nav__title--site" for="__drawer">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a
|
||||
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
||||
title="{{ config.site_name }}"
|
||||
aria-label="{{ config.site_name }}"
|
||||
class="md-nav__button md-logo"
|
||||
>
|
||||
{% if config.theme.logo.icon %}
|
||||
<i class="md-icon">{{ config.theme.logo.icon }}</i>
|
||||
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||
{% else %}
|
||||
<img
|
||||
src="{{ config.theme.logo | url }}"
|
||||
|
||||
@ -41,12 +41,13 @@
|
||||
data-md-state="active"
|
||||
required
|
||||
/>
|
||||
<label class="md-search__icon" for="__search">
|
||||
<label class="md-search__icon md-icon" for="__search">
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</label>
|
||||
<button
|
||||
type="reset"
|
||||
class="md-search__icon"
|
||||
class="md-search__icon md-icon"
|
||||
data-md-component="search-reset"
|
||||
tabindex="-1"
|
||||
>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
title="{{ lang.t('source.link.title') }}"
|
||||
class="md-source"
|
||||
>
|
||||
<div class="md-source__icon">
|
||||
<div class="md-source__icon md-icon">
|
||||
{% set repo_icon = config.extra.repo_icon | default(
|
||||
"fontawesome/brands/git-alt"
|
||||
) %}
|
||||
|
||||
@ -38,35 +38,16 @@
|
||||
|
||||
<!-- Render item list -->
|
||||
{% if toc_ | first is defined %}
|
||||
<label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
|
||||
<label class="md-nav__title" for="__toc">
|
||||
<span class="md-nav__icon md-icon">
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
</span>
|
||||
{{ lang.t("toc.title") }}
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
{% for toc_item in toc_ %}
|
||||
{% include "partials/toc-item.html" %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Source files -->
|
||||
{% if page.meta.source and page.meta.source | length > 0 %}
|
||||
<li class="md-nav__item">
|
||||
<a href="#__source" class="md-nav__link md-nav__link--active">
|
||||
{{ lang.t("meta.source") }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Set from config but allow override -->
|
||||
{% set disqus = config.extra.disqus %}
|
||||
{% if page and page.meta and page.meta.disqus is string %}
|
||||
{% set disqus = page.meta.disqus %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Disqus integration -->
|
||||
{% if not page.is_homepage and disqus %}
|
||||
<li class="md-nav__item">
|
||||
<a href="#__comments" class="md-nav__link md-nav__link--active">
|
||||
{{ lang.t("meta.comments") }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
@ -173,7 +173,7 @@ function config(args: Configuration): Configuration {
|
||||
entrypoints: false,
|
||||
excludeAssets: [
|
||||
/\.(icons)/,
|
||||
/\/(fonts|images|lunr)\//,
|
||||
/\/(images|lunr)\//,
|
||||
/\.(html|py|yml)$/
|
||||
],
|
||||
warningsFilter: [
|
||||
@ -217,7 +217,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
||||
plugins: [
|
||||
...base.plugins,
|
||||
|
||||
/* Copy FontAwesome SVGs to dot directory, so MkDocs ignores them */
|
||||
/* FontAwesome icons */
|
||||
new CopyPlugin([
|
||||
{ to: ".icons/fontawesome", from: "**/*.svg" },
|
||||
{ to: ".icons/fontawesome", from: "../LICENSE.txt" }
|
||||
@ -225,7 +225,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
||||
context: "node_modules/@fortawesome/fontawesome-free/svgs"
|
||||
}),
|
||||
|
||||
/* Copy Material icons SVGs to dot directory, so MkDocs ignores them */
|
||||
/* Material icons */
|
||||
new CopyPlugin([
|
||||
{
|
||||
to: ".icons/material/[name].svg",
|
||||
@ -237,7 +237,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
||||
context: "node_modules/material-design-icons-svg/paths"
|
||||
}),
|
||||
|
||||
/* Copy search stemmers and segmenters */
|
||||
/* Search stemmers and segmenters */
|
||||
new CopyPlugin([
|
||||
{ to: "assets/javascripts/lunr", from: "min/*.js" },
|
||||
{
|
||||
@ -249,13 +249,10 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
||||
context: "node_modules/lunr-languages"
|
||||
}),
|
||||
|
||||
/* Copy assets like fonts and images */
|
||||
/* Template files */
|
||||
new CopyPlugin([
|
||||
{ from: "assets/fonts/**/*.!(css)" },
|
||||
{ from: "assets/images/*.{ico,png,svg}" },
|
||||
{ from: "assets/images/*" },
|
||||
{ from: "**/*.{py,yml}" },
|
||||
|
||||
/* Copy and minify HTML */
|
||||
{
|
||||
from: "**/*.html",
|
||||
transform: content => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user