Permalink
Browse files

feat(subnav): new subnav component

  • Loading branch information...
lara-aigmueller committed Jun 28, 2017
1 parent 67bc7fb commit 9e87b5b11d64d5ec216fecc579dfc1865e079090
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="-703 445 512 512" style="enable-background:new -703 445 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M-446.6,538c-89.7,0-162.7,73-162.7,162.7s73,162.7,162.7,162.7c89.7,0,162.7-73,162.7-162.7
S-356.8,538-446.6,538z M-446.6,843.1c-73.3,0-133.6-55.3-141.5-126.5H-392l-63.5,63.5l22.3,22.3l93.8-93.8v-15.8l-93.8-93.8
l-22.3,22.4l63.5,63.5h-196.1c7.9-71.2,68.2-126.5,141.5-126.5c78.6,0,142.4,63.8,142.4,142.4C-304.2,779.4-367.9,843.1-446.6,843.1
z"/>
</svg>
View
@@ -0,0 +1,14 @@
$nav-primary-background: $gray-860;
$nav-secondary-background: $gray-700;
$nav-primary-active: $gray-700;
$nav-secondary-active: $gray-620;
$nav-breakpoint: 980px !default;
$nav-height: 5.5rem;
$nav-line-height: 2.75rem;
$subnav-height: 2rem;
$nav-search-width: 200px !default;
$nav-search-results-width: 276px !default;
$nav-search-to-icon-breakpoint: 560px !default;
View
@@ -14,6 +14,7 @@
@import "pagination/pagination";
@import "list/list";
@import "navbar/navbar";
@import "subnav/subnav";
@import "header/header";
@import "footer/footer";
@import "media/media";
View
@@ -0,0 +1,11 @@
---
layout: components_icons.hbs
meta:
title: "Subnav"
description: "A subnav component for Dynatrace styled web entities with css and markup examples."
keywords: "subnav, menu, menubar, navigation, css component"
---
## Introduction
The Groundhog **subnav** usually holds links to child pages of the current page.
@@ -0,0 +1,27 @@
<div class="subnav">
<nav class="subnav__bar">
<ul class="subnav__list">
<li class="subnav__item">
<a class="subnav__link" href="#">Perform 2018</a>
</li>
<li class="subnav__item">
<a class="subnav__link" href="#">Speakers</a>
</li>
<li class="subnav__item is-current">
<a class="subnav__link" href="#">Schedule</a>
</li>
<li class="subnav__item">
<a class="subnav__link" href="#">Workshops</a>
</li>
<li class="subnav__item">
<a class="subnav__link" href="#">Locations</a>
</li>
<li class="subnav__item">
<a class="subnav__link" href="#">Partners</a>
</li>
<li class="subnav__item">
<a class="subnav__link" href="#">Tickets</a>
</li>
</ul>
</nav>
</div>
View
@@ -0,0 +1,77 @@
@import "../common/variables";
@import "../common/nav";
@import "../common/mixins";
.subnav {
overflow: hidden;
z-index: 8;
}
.subnav__bar {
display: block;
width: 100%;
background-color: $royalblue-700;
}
.subnav__list {
@include list-reset();
margin: 0;
}
.subnav__item {
margin: 0;
white-space: nowrap;
}
.subnav__item.is-current {
background-color: $royalblue-600;
}
.subnav__link,
.subnav__link:visited {
display: block;
color: #fff;
text-decoration: none;
outline: 0;
padding: 0.5rem 1.5rem;
}
.subnav__link:hover,
.subnav__link:focus {
color: #fff;
text-decoration: none;
background-color: $royalblue-500;
}
@media (min-width: $nav-breakpoint) {
.subnav {
height: $subnav-height;
}
.subnav__list {
display: flex;
}
.subnav__item.is-current {
background-color: transparent;
}
.subnav__item.is-current .subnav__link {
border-bottom: 4px solid $royalblue-300;
}
.subnav__link {
height: $subnav-height;
line-height: $subnav-height;
padding: 0 1.5rem;
}
.subnav__link:hover,
.subnav__link:focus {
background-color: transparent;
border-bottom: 2px solid $royalblue-300;
}
}

0 comments on commit 9e87b5b

Please sign in to comment.