Add active states to docs menu items

diff --git a/docs/assets/scss/_navigation.scss b/docs/assets/scss/_navigation.scss
index 1f11d1d63f96b7ebe3a5468aba60cea73cf1fe17..790fcee8638753e05869d3f74d8d7c1e3fbc3a60 100644 (file)
--- a/docs/assets/scss/_navigation.scss
+++ b/docs/assets/scss/_navigation.scss
@@ -24,6 +24,10 @@
       background: rgba(#000, 0.05);
     }
   }
+
+  .current a {
+    background: rgba(#000, 0.05);
+  }
 }
 
 .docs-menu-title {

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 01a7de61a6ee736c6f4126f132f29bdf578cc0e7..3a11e488ea9ab2e1b3a8a709292a6d6f035cd741 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -2,81 +2,81 @@
   <p class="docs-version-number" data-docs-version></p>
 
   <li class="docs-menu-title">Getting Started</li>
-  <li><a href="installation.html">Installation</a></li>
-  <li><a href="starter-projects.html">Starter Projects</a></li>
-  <li><a href="compatibility.html">Compatibility</a></li>
-  <li><a href="accessibility.html">Accessibility</a></li>
-  <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
+  <li{{#ifpage 'installation'}} class="current"{{/ifpage}}><a href="installation.html">Installation</a></li>
+  <li{{#ifpage 'starter-projects'}} class="current"{{/ifpage}}><a href="starter-projects.html">Starter Projects</a></li>
+  <li{{#ifpage 'compatibility'}} class="current"{{/ifpage}}><a href="compatibility.html">Compatibility</a></li>
+  <li{{#ifpage 'accessibility'}} class="current"{{/ifpage}}><a href="accessibility.html">Accessibility</a></li>
+  <li{{#ifpage 'kitchen-sink'}} class="current"{{/ifpage}}><a href="kitchen-sink.html">Kitchen Sink</a></li>
 
   <li class="docs-menu-title">General</li>
-  <li><a href="global.html">Global Styles</a></li>
-  <li><a href="rtl.html">Right-to-Left Support</a></li>
-  <li><a href="sass.html">Sass</a></li>
-  <li><a href="javascript.html">JavaScript</a></li>
-  <li><a href="javascript-utilities.html">JavaScript Utilities</a></li>
-  <li><a href="media-queries.html">Media Queries</a></li>
-  <li><a href="grid.html">Grid</a></li>
-  <li><a href="flex-grid.html">Flex Grid</a></li>
-  <li><a href="forms.html">Forms</a></li>
-  <li><a href="visibility.html">Visibility Classes</a></li>
-  <li><a href="float-classes.html">Float Classes</a></li>
+  <li{{#ifpage 'global'}} class="current"{{/ifpage}}><a href="global.html">Global Styles</a></li>
+  <li{{#ifpage 'rtl'}} class="current"{{/ifpage}}><a href="rtl.html">Right-to-Left Support</a></li>
+  <li{{#ifpage 'sass'}} class="current"{{/ifpage}}><a href="sass.html">Sass</a></li>
+  <li{{#ifpage 'javascript'}} class="current"{{/ifpage}}><a href="javascript.html">JavaScript</a></li>
+  <li{{#ifpage 'javascript-utilities'}} class="current"{{/ifpage}}><a href="javascript-utilities.html">JavaScript Utilities</a></li>
+  <li{{#ifpage 'media-queries'}} class="current"{{/ifpage}}><a href="media-queries.html">Media Queries</a></li>
+  <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">Grid</a></li>
+  <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid</a></li>
+  <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">Forms</a></li>
+  <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>
+  <li{{#ifpage 'float-classes'}} class="current"{{/ifpage}}><a href="float-classes.html">Float Classes</a></li>
 
   <li class="docs-menu-title">Typography</li>
-  <li><a href="typography-base.html">Base Styles</a></li>
-  <li><a href="typography-helpers.html">Helper Classes</a></li>
+  <li{{#ifpage 'typography-base'}} class="current"{{/ifpage}}><a href="typography-base.html">Base Styles</a></li>
+  <li{{#ifpage 'typography-helpers'}} class="current"{{/ifpage}}><a href="typography-helpers.html">Helper Classes</a></li>
 
   <li class="docs-menu-title">Controls</li>
-  <li><a href="button.html">Button</a></li>
-  <li><a href="button-group.html">Button Group</a></li>
-  <li><a href="close-button.html">Close Button</a></li>
-  <li><a href="slider.html">Slider</a></li>
-  <li><a href="switch.html">Switch</a></li>
+  <li{{#ifpage 'button'}} class="current"{{/ifpage}}><a href="button.html">Button</a></li>
+  <li{{#ifpage 'button-group'}} class="current"{{/ifpage}}><a href="button-group.html">Button Group</a></li>
+  <li{{#ifpage 'close-button'}} class="current"{{/ifpage}}><a href="close-button.html">Close Button</a></li>
+  <li{{#ifpage 'slider'}} class="current"{{/ifpage}}><a href="slider.html">Slider</a></li>
+  <li{{#ifpage 'switch'}} class="current"{{/ifpage}}><a href="switch.html">Switch</a></li>
 
   <li class="docs-menu-title">Navigation</li>
-  <li><a href="navigation.html">Overview</a></li>
-  <li><a href="menu.html">Menu</a></li>
-  <li><a href="dropdown-menu.html">Dropdown Menu</a></li>
-  <li><a href="drilldown-menu.html">Drilldown Menu</a></li>
-  <li><a href="accordion-menu.html">Accordion Menu</a></li>
-  <li><a href="top-bar.html">Top Bar</a></li>
-  <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
-  <li><a href="magellan.html">Magellan</a></li>
-  <li><a href="pagination.html">Pagination</a></li>
-  <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
+  <li{{#ifpage 'navigation'}} class="current"{{/ifpage}}><a href="navigation.html">Overview</a></li>
+  <li{{#ifpage 'menu'}} class="current"{{/ifpage}}><a href="menu.html">Menu</a></li>
+  <li{{#ifpage 'dropdown-menu'}} class="current"{{/ifpage}}><a href="dropdown-menu.html">Dropdown Menu</a></li>
+  <li{{#ifpage 'drilldown-menu'}} class="current"{{/ifpage}}><a href="drilldown-menu.html">Drilldown Menu</a></li>
+  <li{{#ifpage 'accordion-menu'}} class="current"{{/ifpage}}><a href="accordion-menu.html">Accordion Menu</a></li>
+  <li{{#ifpage 'top-bar'}} class="current"{{/ifpage}}><a href="top-bar.html">Top Bar</a></li>
+  <li{{#ifpage 'responsive-navigation'}} class="current"{{/ifpage}}><a href="responsive-navigation.html">Responsive Navigation</a></li>
+  <li{{#ifpage 'magellan'}} class="current"{{/ifpage}}><a href="magellan.html">Magellan</a></li>
+  <li{{#ifpage 'pagination'}} class="current"{{/ifpage}}><a href="pagination.html">Pagination</a></li>
+  <li{{#ifpage 'breadcrumbs'}} class="current"{{/ifpage}}><a href="breadcrumbs.html">Breadcrumbs</a></li>
 
   <li class="docs-menu-title">Containers</li>
-  <li><a href="accordion.html">Accordion</a></li>
-  <li><a href="callout.html">Callout</a></li>
-  <li><a href="dropdown.html">Dropdown</a></li>
-  <li><a href="media-object.html">Media Object</a></li>
-  <li><a href="off-canvas.html">Off-canvas</a></li>
-  <li><a href="reveal.html">Reveal <small>Modal</small></a></li>
-  <li><a href="table.html">Table</a></li>
-  <li><a href="tabs.html">Tabs</a></li>
+  <li{{#ifpage 'accordion'}} class="current"{{/ifpage}}><a href="accordion.html">Accordion</a></li>
+  <li{{#ifpage 'callout'}} class="current"{{/ifpage}}><a href="callout.html">Callout</a></li>
+  <li{{#ifpage 'dropdown'}} class="current"{{/ifpage}}><a href="dropdown.html">Dropdown</a></li>
+  <li{{#ifpage 'media-object'}} class="current"{{/ifpage}}><a href="media-object.html">Media Object</a></li>
+  <li{{#ifpage 'off-canvas'}} class="current"{{/ifpage}}><a href="off-canvas.html">Off-canvas</a></li>
+  <li{{#ifpage 'reveal'}} class="current"{{/ifpage}}><a href="reveal.html">Reveal <small>Modal</small></a></li>
+  <li{{#ifpage 'table'}} class="current"{{/ifpage}}><a href="table.html">Table</a></li>
+  <li{{#ifpage 'tabs'}} class="current"{{/ifpage}}><a href="tabs.html">Tabs</a></li>
 
   <li class="docs-menu-title">Media</li>
-  <li><a href="badge.html">Badge</a></li>
-  <li><a href="flex-video.html">Flex Video</a></li>
-  <li><a href="label.html">Label</a></li>
-  <li><a href="orbit.html">Orbit <small>Carousel</small></a></li>
-  <li><a href="progress-bar.html">Progress Bar</a></li>
-  <li><a href="thumbnail.html">Thumbnail</a></li>
-  <li><a href="tooltip.html">Tooltip</a></li>
+  <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
+  <li{{#ifpage 'flex-video'}} class="current"{{/ifpage}}><a href="flex-video.html">Flex Video</a></li>
+  <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
+  <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <small>Carousel</small></a></li>
+  <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
+  <li{{#ifpage 'thumbnail'}} class="current"{{/ifpage}}><a href="thumbnail.html">Thumbnail</a></li>
+  <li{{#ifpage 'tooltip'}} class="current"{{/ifpage}}><a href="tooltip.html">Tooltip</a></li>
 
   <li class="docs-menu-title">Plugins</li>
-  <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
-  <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
-  <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
-  <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
-  <li><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
+  <li{{#ifpage 'abide'}} class="current"{{/ifpage}}><a href="abide.html">Abide <small>Form Validation</small></a></li>
+  <li{{#ifpage 'equalizer'}} class="current"{{/ifpage}}><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
+  <li{{#ifpage 'interchange'}} class="current"{{/ifpage}}><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
+  <li{{#ifpage 'toggler'}} class="current"{{/ifpage}}><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
+  <li{{#ifpage 'sticky'}} class="current"{{/ifpage}}><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
 
   <li class="docs-menu-title">Sass</li>
-  <li><a href="sass-functions.html">Functions</a></li>
-  <li><a href="sass-mixins.html">Mixins</a></li>
+  <li{{#ifpage 'sass-functions'}} class="current"{{/ifpage}}><a href="sass-functions.html">Functions</a></li>
+  <li{{#ifpage 'sass-mixins'}} class="current"{{/ifpage}}><a href="sass-mixins.html">Mixins</a></li>
 
   <li class="docs-menu-title">Libraries</li>
-  <li><a href="motion-ui.html">Motion UI</a></li>
-  <li><a href="panini.html">Panini</a></li>
+  <li{{#ifpage 'motion-ui'}} class="current"{{/ifpage}}><a href="motion-ui.html">Motion UI</a></li>
+  <li{{#ifpage 'panini'}} class="current"{{/ifpage}}><a href="panini.html">Panini</a></li>
 
   <li class="docs-menu-title">Older Versions</li>
   <li><a href="http://foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>