OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Finishing touches on drawer

Browse Source
This commit is contained in:
squidfunk 2016-12-28 16:20:52 +01:00
parent b3fcd629a3
commit f4c5344116
11 changed files with 79 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-de7f9d2ca0.css
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -36,7 +36,7 @@
{% include "partials/fonts.html" %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-de7f9d2ca0.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-39bc0c8cde.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
{% endif %}

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

@ -9,7 +9,9 @@
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible">
<label class="md-nav__title" for="{{ path }}"></label>
<label class="md-nav__title" for="{{ path }}">
{{ nav_item.title}}
</label>
<ul class="md-nav__list">
{% for nav_item in nav_item.children %}
{% set temp = path %}

21
material/partials/nav.html
View File

@ -1,14 +1,23 @@
<nav class="md-nav md-nav--primary">
<label class="md-nav__title" for="drawer">{{ config.site_name }}</label>
<label class="md-nav__title md-nav__title--site" for="drawer">
<i class="md-icon md-nav__icon">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
{% else %}
school
{% endif %}
</i>
{{ config.site_name }}
</label>
{% if config.repo_url %}
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "nav-" + loop.index | string %}
{% include "partials/nav-item.html" %}
{% endfor %}
</ul>
{% if config.repo_url %}
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
</nav>

2
material/partials/source.html
View File

@ -11,7 +11,7 @@
<a href="{{ config.repo_url }}" title="Go to repository" class="md-source" data-md-source="{{ repo_type }}">
{% if repo_type %}
<svg class="md-source__icon">
<use href="#{{ repo_type }}" x="12" y="12" width="24" height="24"></use>
<use xlink:href="#{{ repo_type }}" x="12" y="12" width="24" height="24"></use>
</svg>
{% endif %}
<div class="md-source__repository">

2
mkdocs.yml
View File

@ -19,7 +19,7 @@
# IN THE SOFTWARE.
# Project information
site_name: Material
site_name: Material for MkDocs
site_description: A material design theme for MkDocs
site_author: Martin Donath
site_url: http://squidfunk.github.io/mkdocs-material/

42
src/assets/stylesheets/layout/_nav.scss
View File

@ -50,6 +50,11 @@
display: none;
content: "arrow_back";
}
// Hide icon by default
.md-nav__icon {
display: none;
}
}
// List of items
@ -79,6 +84,11 @@
}
}
// Icon
&__icon {
@extend %md-icon, %md-icon__button;
}
// Link inside item
&__link {
display: block;
@ -159,7 +169,6 @@
.md-nav__toggle ~ .md-nav {
@include z-depth(4);
left: 0.4rem;
background-color: $md-color-white;
}
@ -167,8 +176,8 @@
// inside the drawer is always styled accordingly
html & .md-nav__title {
position: relative;
min-height: 5.6rem;
padding: 0.4rem 1.6rem;
height: 11.2rem;
padding: 6.0rem 1.6rem 0.4rem;
background-color: $md-color-black--lightest;
color: $md-color-black--light;
font-weight: 400;
@ -187,10 +196,33 @@
color: $md-color-black--light;
}
// Remove border for first ist item
// Remove border for first list item
~ .md-nav__list > .md-nav__item:first-child {
border-top: 0;
}
// Site title in main navigation
&--site {
position: relative;
background-color: $md-color-primary;
color: $md-color-white;
// Site logo
.md-nav__icon {
display: block;
position: absolute;
top: 0.4rem;
left: 0.4rem;
width: 6.4rem;
height: 6.4rem;
font-size: 4.8rem;
}
// Hide back arrow icon
&::before {
display: none;
}
}
}
// List of items
@ -331,7 +363,7 @@
&__source {
display: block;
padding: 0.4rem;
background-color: $md-color-black;
background-color: darken($md-color-primary, 10%);
color: $md-color-white;
}
}

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

@ -38,7 +38,9 @@
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible">
<label class="md-nav__title" for="{{ path }}"></label>
<label class="md-nav__title" for="{{ path }}">
{{ nav_item.title}}
</label>
<ul class="md-nav__list">
<!-- Render nested item list -->

22
src/partials/nav.html
View File

@ -22,16 +22,26 @@
<!-- Main navigation -->
<nav class="md-nav md-nav--primary">
<label class="md-nav__title" for="drawer">{{ config.site_name }}</label>
<label class="md-nav__title md-nav__title--site" for="drawer">
<i class="md-icon md-nav__icon">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}"
width="24" height="24" />
{% else %}
school
{% endif %}
</i>
{{ config.site_name }}
</label>
{% if config.repo_url %}
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "nav-" + loop.index | string %}
{% include "partials/nav-item.html" %}
{% endfor %}
</ul>
{% if config.repo_url %}
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
</nav>

2
src/partials/source.html
View File

@ -40,7 +40,7 @@
data-md-source="{{ repo_type }}">
{% if repo_type %}
<svg class="md-source__icon">
<use href="#{{ repo_type }}" x="12" y="12"
<use xlink:href="#{{ repo_type }}" x="12" y="12"
width="24" height="24"></use>
</svg>
{% endif %}