Topbar

<!-- Default -->
<header class="topbar" role="banner">
    <nav class="dashnav">
        <ul>
            <li class="sidebar-trigger"><a href="?sidebar=show"><svg width="30" height="30" class="icon icon-o-birdhouse"><use xlink:href="/assets/svg/core.svg#o-birdhouse" /></svg></a></li>
            <li><a href="/"><svg width="32" height="32" class="icon icon-o-dashboard"><use xlink:href="/assets/svg/core.svg#o-dashboard" /></svg></a></li>
            <li><a href="/"><svg width="32" height="32" class="icon icon-o-world"><use xlink:href="/assets/svg/core.svg#o-world" /></svg></a></li>
        </ul>
    </nav>

    <nav class="utilnav">
        <ul>
            <li><a href="/"><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> <span>Search</span></a></li>
            <li><a href="/" class="selected"><svg width="16" height="16" class="icon icon-gear"><use xlink:href="/assets/svg/core.svg#gear" /></svg> <span>Settings</span></a></li>
            <li><a href="/"><svg width="16" height="16" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> <span>My Account</span></a></li>
            <li><a href="/"><svg width="16" height="16" class="icon icon-question"><use xlink:href="/assets/svg/core.svg#question" /></svg> <span>Help</span></a></li>
            <li><a href="/" class="button logout ">Log out</a></li>
        </ul>
    </nav>
</header>

<!-- Dark -->
<header class="topbar" role="banner">
    <nav class="dashnav">
        <ul>
            <li class="sidebar-trigger"><a href="?sidebar=show"><svg width="30" height="30" class="icon icon-o-birdhouse"><use xlink:href="/assets/svg/core.svg#o-birdhouse" /></svg></a></li>
            <li><a href="/"><svg width="32" height="32" class="icon icon-o-dashboard"><use xlink:href="/assets/svg/core.svg#o-dashboard" /></svg></a></li>
            <li><a href="/"><svg width="32" height="32" class="icon icon-o-world"><use xlink:href="/assets/svg/core.svg#o-world" /></svg></a></li>
        </ul>
    </nav>

    <nav class="utilnav">
        <ul>
            <li><a href="/"><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> <span>Search</span></a></li>
            <li><a href="/" class="selected"><svg width="16" height="16" class="icon icon-gear"><use xlink:href="/assets/svg/core.svg#gear" /></svg> <span>Settings</span></a></li>
            <li><a href="/"><svg width="16" height="16" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> <span>My Account</span></a></li>
            <li><a href="/"><svg width="16" height="16" class="icon icon-question"><use xlink:href="/assets/svg/core.svg#question" /></svg> <span>Help</span></a></li>
            <li><a href="/" class="button logout user_theme_dark">Log out</a></li>
        </ul>
    </nav>
</header>

<header class="topbar" role="banner">
	<nav class="dashnav">
		<ul>
			<li class="sidebar-trigger"><a href="?sidebar=show">{{ icon 'core/o-birdhouse' 30 }}</a></li>
			<li><a href="/">{{ icon 'core/o-dashboard' 32 }}</a></li>
			<li><a href="/">{{ icon 'core/o-world' 32 }}</a></li>
		</ul>
	</nav>

	<nav class="utilnav">
		<ul>
			<li><a href="/">{{ icon 'core/search' }} <span>Search</span></a></li>
			<li><a href="/" class="selected">{{ icon 'core/gear' }} <span>Settings</span></a></li>
			<li><a href="/">{{ icon 'core/user' }} <span>My Account</span></a></li>
			<li><a href="/">{{ icon 'core/question' }} <span>Help</span></a></li>
			<li><a href="/" class="button logout {{classname}}">Log out</a></li>
		</ul>
	</nav>
</header>
/* Default: No context defined */

/* Dark */
{
  "classname": "user_theme_dark"
}

  • Content:
    $topbar-dark-opacity: 0.5;
    $topbar-dark-opacity-hover: 0.8;
    $topbar-dark-opacity-selected: 1;
    
    $topbar-light-opacity: 0.4;
    $topbar-light-opacity-hover: 0.5;
    $topbar-light-opacity-selected: 1;
    
    .topbar {
    	padding: 0;
    	@include container(100%);
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    	font-weight: 300;
    	background-image: none;
    	position: relative; // for the zindex
    	z-index: 2; // to appear on top of sidebar shadow
    }
    
    @include media(">bp-m") {
    	.topbar {
    		background-image: url(../svg/burd.svg);
    		background-position: 50% 45%;
    		background-repeat: no-repeat;
    		background-size: 28px;
    	}
    
    	.topbar.runway {
    		background-image: url(../svg/pilotbadge_wh.svg);
    		background-position: 50% 45%;
    		background-repeat: no-repeat;
    		background-size: 48px;
    	}
    
    	.topbar.runway.user_theme_dark {
    		background-image: url(../svg/pilotbadge.svg);
    	}
    
    	.topbar.nobrand, 
    	.topbar.runway.nobrand,
    	.topbar.runway.user_theme_dark.nobrand {
    		background-image: none;
    	}
    }
    
    .topbar.nobrand, 
    .logincont .topbar {
    	background-image: none;
    }
    
    .topbar svg {
    	fill: rgba(0, 0, 0, $topbar-light-opacity);
    	vertical-align: middle;
    }
    
    .topbar a:hover svg,
    .topbar a:focus svg {
    	fill: rgba(0, 0, 0, $topbar-light-opacity-hover);
    }
    
    .topbar .selected svg,
    .topbar .selected:hover svg {
    	fill: rgba(0, 0, 0, $topbar-light-opacity-selected);
    }
    
    .topbar.user_theme_dark {
    	background-color: rgb(54,54,54);
    	color: rgba(255, 255, 255, $topbar-dark-opacity);
    	border-bottom: 0;
    }
    
    .topbar.user_theme_dark svg {
    	fill: rgba(255, 255, 255, $topbar-dark-opacity);
    }
    
    .topbar.user_theme_dark a:hover svg,
    .topbar.user_theme_dark a:focus svg {
    	fill: rgba(255, 255, 255, $topbar-dark-opacity-hover);
    }
    
    .topbar.user_theme_dark .selected svg,
    .topbar.user_theme_dark .selected:hover svg {
    	fill: rgba(255, 255, 255, $topbar-dark-opacity-selected);
    }
    
    
    
    .topbar ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    .topbar li {
    	display: inline-block;
    	vertical-align: middle;
    	@include font-scale(s, helvetica);
    }
    
    .topbar a {
    	text-decoration: none;
    	color: rgba(0, 0, 0, $topbar-light-opacity);
    }
    
    .topbar a:hover {
    	color: rgba(0, 0, 0, $topbar-light-opacity-hover);
    }
    
    .topbar a:focus {
    	color: rgba(0, 0, 0, $topbar-light-opacity-hover);
    	outline: 0;
    }
    
    .topbar a:focus span {
    	border-bottom: 1px solid rgba(0, 0, 0, $topbar-light-opacity-hover);
    }
    
    .topbar a.selected {
    	color: rgba(0, 0, 0, $topbar-light-opacity-selected);
    }
    
    .topbar.user_theme_dark a {
    	color: rgba(255, 255, 255, $topbar-dark-opacity);
    }
    
    .topbar.user_theme_dark a:hover {
    	color: rgba(255, 255, 255, $topbar-dark-opacity-hover);
    }
    
    .topbar.user_theme_dark a:focus {
    	color: rgba(255, 255, 255, $topbar-dark-opacity-hover);
    	outline: 0;
    }
    
    .topbar.user_theme_dark a:focus span {
    	border-bottom: 1px solid rgba(255, 255, 255, $topbar-dark-opacity-hover);
    }
    
    .topbar.user_theme_dark a.selected {
    	color: rgba(255, 255, 255, $topbar-dark-opacity-selected);
    }
    
    
    
    .dashnav {
    	padding: 0 0 0 $main-gutter;
    }
    
    .dashnav li {
    	margin-right: 15px;
    }
    
    .dashnav li:last-child {
    	margin-right: 0;
    }
    
    .utilnav {
    	padding: 0 $main-gutter 0 0;
    }
    
    .utilnav a span {
    	display: none;
    }
    
    .utilnav a {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	padding: 17px 10px 17px 0;
    }
    
    .utilnav a:focus {
    	padding-bottom: 16px;
    }
    
    .utilnav svg {
    	margin: 0 5px 0 0;
    }
    
    .utilnav a:focus svg {
    	margin-top: -1px;
    }
    
    .utilnav .logout,
    .utilnav a.logout:focus {
    	background-color: rgba(0, 0, 0, $topbar-light-opacity-hover);
    	border-radius: 10px;
    	min-width: 30px;
    	color: #fff;
    	padding: .3em .7em;
    }
    
    .utilnav .logout:hover {
    	background-color: rgba(0, 0, 0, $topbar-light-opacity-selected);
    	color: #fff;
    }
    
    .user_theme_dark .utilnav .logout {
    	background-color: rgba(0, 0, 0, $topbar-dark-opacity);
    }
    
    .utilnav .logout:hover {
    	background-color: rgba(0, 0, 0, $topbar-dark-opacity-hover);
    }
    
    .dashnav {
    	@include span(4 of 12);
    }
    
    .utilnav {
    	@include span(8 of 12);
    	text-align: right;
    }
    
    .dashnav svg {
    	width: 20px;
    	height: 20px;
    }
    
    @include media(">bp-s") {
    
    	.dashnav {
    		@include span(3 of 12);
    	}
    
    	.dashnav svg {
    		width: 32px;
    		height: 32px;
    	}
    
    	.utilnav {
    		@include span(9 of 12);
    		text-align: right;
    	}
    	
    
    	.utilnav a span {
    		display: inline;
    	}
    }
  • URL: /components/raw/topbar/topbar.scss
  • Filesystem Path: src/components/30-layout/02-molecules/01-topbar/topbar.scss
  • Size: 4.3 KB

There are no notes for this item.