Expand on nav_list styles

- Consolidate SCSS partials
This commit is contained in:
Michael Rose 2016-03-25 14:50:59 -04:00
parent 9b964a90e3
commit 0d8a76857f
8 changed files with 98 additions and 65 deletions

View file

@ -23,7 +23,7 @@ main:
docs: docs:
- title: Getting Started - title: Getting Started
children: children:
- title: "Quick Start Guide" - title: "Quick-Start Guide"
path: quick-start-guide path: quick-start-guide
- title: "Installation" - title: "Installation"
path: installation path: installation

View file

@ -1,20 +1,20 @@
{% include base_path %} {% include base_path %}
{% assign navigation = site.data.navigation[page.sidebar.nav] %} {% assign navigation = site.data.navigation[page.sidebar.nav] %}
<nav> <nav class="nav__list">
<ul> <ul>
{% for nav in navigation %} {% for nav in navigation %}
<li>{{ nav.title }} <li><span class="nav__sub-title">{{ nav.title }}</span>
{% if nav.children != null %} {% if nav.children != null %}
<ul> <ul>
{% for child in nav.children %} {% for child in nav.children %}
{% assign nav_url = child.path | prepend: "/" | prepend: page.sidebar.nav | prepend: "/" | append: "/" | prepend: base_path %} {% assign nav_url = child.path | prepend: "/" | prepend: page.sidebar.nav | prepend: "/" | append: "/" | prepend: base_path %}
{% if nav_url contains page.url %} {% if nav_url contains page.url %}
{% assign c = "current" %} {% assign active = "active" %}
{% else %} {% else %}
{% assign c = "" %} {% assign active = "" %}
{% endif %} {% endif %}
<li><a href="{{ nav_url }}" class="{{ c }}">{{ child.title }}</a></li> <li><a href="{{ nav_url }}" class="{{ active }}">{{ child.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}

View file

@ -16,7 +16,7 @@
{% if s.text %}{{ s.text | markdownify }}{% endif %} {% if s.text %}{{ s.text | markdownify }}{% endif %}
{% endfor %} {% endfor %}
{% if page.sidebar.nav %} {% if page.sidebar.nav %}
{% include nav_list.html items=page.sidebar.nav %} {% include nav_list items=page.sidebar.nav %}
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>

View file

@ -1,6 +1,6 @@
<aside class="sidebar__right"> <aside class="sidebar__right">
<nav class="toc" markdown="1"> <nav class="toc" markdown="1">
<header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header> <header><h4 class="nav__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
* Auto generated table of contents * Auto generated table of contents
{:toc .toc__menu} {:toc .toc__menu}
</nav> </nav>

View file

@ -212,4 +212,93 @@
} }
} }
} }
}
/*
Navigation list
========================================================================== */
.nav__list {
a {
display: block;
padding: 2px 0;
&:hover {
text-decoration: underline;
}
}
.active {
color: $primary-color;
font-weight: bold;
}
}
.nav__title {
margin: 0;
padding: 10px 20px;
font-family: $sans-serif-narrow;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid $border-color;
}
.nav__sub-title {
display: block;
margin: 10px 0;
padding: 10px 0;
font-family: $sans-serif-narrow;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid $border-color;
}
/*
Table of contents navigation
========================================================================== */
.toc {
padding: 0 0 1em;
font-family: $sans-serif-narrow;
color: $gray;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
}
.toc__menu {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
a {
display: block;
padding: 10px 20px;
color: $gray;
font-size: 11px;
font-weight: bold;
line-height: 1.5;
border-bottom: 1px solid $border-color;
&:hover {
color: #000;
background: $lighter-gray;
}
}
li ul > li a {
font-weight: normal;
}
// hide sub sub links on small screens
li > ul li {
display: none;
@include breakpoint($medium) {
display: block;
}
}
} }

View file

@ -1,55 +0,0 @@
/* ==========================================================================
TABLE OF CONTENTS
========================================================================== */
.toc {
padding: 0 0 1em;
font-family: $sans-serif-narrow;
color: $gray;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
}
.toc__title {
margin: 0;
padding: 10px 20px;
font-family: $sans-serif-narrow;
font-size: 16px;
border-bottom: 1px solid $border-color;
}
.toc__menu {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
a {
display: block;
padding: 10px 20px;
color: $gray;
font-size: 11px;
font-weight: bold;
line-height: 1.5;
border-bottom: 1px solid $border-color;
&:hover {
color: #000;
background: $lighter-gray;
}
}
li ul > li a {
font-weight: normal;
}
// hide sub sub links on small screens
li > ul li {
display: none;
@include breakpoint($medium) {
display: block;
}
}
}

View file

@ -21,7 +21,6 @@
@import "notices"; @import "notices";
@import "masthead"; @import "masthead";
@import "navigation"; @import "navigation";
@import "toc"; // table of contents
@import "footer"; @import "footer";
@import "syntax"; @import "syntax";

File diff suppressed because one or more lines are too long