Commit 8e093400 authored by Peter Polman's avatar Peter Polman
Browse files

#2862384 by peterpolman: Added styles for book navigation, updated ChANGELOG...

#2862384 by peterpolman: Added styles for book navigation, updated ChANGELOG and added the component to the styleguide.
parent ec05933a
### v2.1.3 -- Apr 2017
* Changed wave-effect styles.
* Changed book navigation styles.
### v2.1.2 -- Mar 2017
* Replaced Bootstrap list-group component with custom list component
* Merge label component with badges and extend badge modifiers
......@@ -35,5 +39,5 @@ Complete overhaul of theme_hooks and clean up of templates
* Updated the way we override the bootstrap panel implementation for details and fieldsets. Updated corresponding template files
* Merged container templates
* Merged views templates
* Merged form templates
* Merged form templates
* Updated teaser templates
.book-menu .list-item {
.nav-book {
padding: 0;
}
.nav-book .menu-item {
list-style: none;
padding-top: 6px;
padding-bottom: 6px;
padding-top: 3px;
padding-bottom: 3px;
clear: both;
padding-left: 1.25rem;
position: relative;
}
.book-menu .list-item--active-trail > a {
text-decoration: underline;
.nav-book .menu-item:before {
content: '\25CB';
position: absolute;
left: 0;
}
.nav-book .menu-item.menu-item--collapsed:before {
content: '\25B8';
}
.nav-book .menu-item--expanded .menu {
padding-left: 0;
}
.nav-book .menu-item--expanded.menu-item--has-children:before {
content: '\25BE';
}
.navigation-book {
......@@ -13,10 +34,6 @@
font-size: 14px;
}
.navigation-book .book-menu {
padding-left: 66px;
}
.navigation-book a:hover {
text-decoration: underline;
}
......
......@@ -32,7 +32,7 @@
}
.card--stream {
margin: 0 0 1.25rem 1.25rem;
margin-left: 1.25rem;
}
.card--stream:before, .card--stream:after {
......
// Nav book
//
// Styles for table of contents as provided bij the social_book module. Menu items have triangle icons indicating wether there are menu items below this item or not.
// The highlighted path leads to the page title the user is currently viewing.
//
// markup: nav-book.twig
//
// Weight: 4
//
// Style guide: molecules.navigation.nav-book
@import 'settings';
.book-menu {
.nav-book {
padding: 0;
.list-item {
.menu-item {
list-style: none;
padding-top: 6px;
padding-bottom: 6px;
padding-top: 3px;
padding-bottom: 3px;
clear: both;
padding-left: 1.25rem;
position: relative;
&:before {
content: '\25CB';
position: absolute;
left: 0;
}
&.menu-item--collapsed:before {
content: '\25B8';
}
}
.list-item--active-trail > a {
text-decoration: underline;
.menu-item--expanded .menu {
padding-left: 0;
}
.menu-item--expanded.menu-item--has-children:before {
content: '\25BE';
}
}
......@@ -18,10 +49,6 @@
padding: 0.5em 0;
font-size: $font-size-small;
.book-menu {
padding-left: 66px;
}
a:hover {
text-decoration: underline;
}
......
<ul block="block-booknavigation-2" class="nav-book">
<li class="menu-item menu-item--collapsed">
<a href="#">Lorem ipsum dolor sit amet</a>
</li>
<li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
<a href="#">Lorem ipsum dolor sit amet sequitur sunt</a>
<ul class="menu">
<li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
<a href="#">Lorem ipsum dolor sit amet</a>
<ul class="menu">
<li class="menu-item menu-item--active-trail">
<a href="#">Lorem ipsum.</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#">Lorem ipsum dolor sit amet</a>
</li>
</ul>
......@@ -26,23 +26,26 @@
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ book_tree.book_links(items, attributes, 0) }}
<div class="card__block">
{{ book_tree.book_links(items, attributes, 0) }}
</div>
{% macro book_links(items, attributes, menu_level) %}
{% import _self as book_tree %}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('book-menu') }}>
<ul{{ attributes.addClass('nav-book') }}>
{% else %}
<ul class="menu">
{% endif %}
{% for item in items %}
{%
set classes = [
'list-item',
item.is_expanded ? 'list-item--expanded',
item.is_collapsed ? 'list-item--collapsed',
item.in_active_trail ? 'list-item--active-trail',
'menu-item',
item.below ? 'menu-item--has-children',
item.is_expanded ? 'menu-item--expanded',
item.is_collapsed ? 'menu-item--collapsed',
item.in_active_trail ? 'menu-item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment