Add new global nav header

Fixes #1151
This commit is contained in:
Joseph Schorr 2016-01-20 18:03:21 -05:00
parent 3fdadb51b7
commit 8318546447
8 changed files with 233 additions and 18 deletions

View file

@ -1,3 +1,52 @@
/* Global Brand Bar */
.co-m-global-nav {
background: white;
height: 30px;
line-height: 36px;
position: relative;
z-index: 90;
}
.co-m-global-nav svg {
width: auto !important;
}
.co-m-global-nav .co-m-global-nav-left {
text-align: left;
padding-left: 28px;
}
.co-m-global-nav .co-m-global-nav-right {
text-align: right;
font-size: 16px;
line-height: 30px;
padding-right: 25px;
}
.co-m-global-nav .co-m-global-nav-item {
padding: 0 20px 0 15px;
border-right: 1px solid #eee;
display: inline-block;
height: 16px;
line-height: 16px;
}
.co-m-global-nav .co-m-global-nav-item:first-of-type {
padding-left: 0;
}
.co-m-global-nav .co-m-global-nav-item:last-of-type {
padding-right: 0;
border-right: 0;
}
/* Tweaks for small screens */
@media screen and (max-width: 767px) {
.co-m-global-nav {
display: none; /* hide the whole thing */
}
}
a:active {
outline: none !important;
}

View file

@ -29,6 +29,21 @@ nav.navbar-default .navbar-nav>li>a.active {
background: rgba(255, 255, 255, 0.4) !important;
}
#quay-logo {
margin-left: 10px;
margin-top: 6px;
height: 30px;
width: 100px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: inline-block;
}
#quay-logo.hosted-logo {
width: 150px;
}
.header-bar-element .header-bar-content.search-visible {
box-shadow: 0px 1px 4px #ccc;
}
@ -42,11 +57,29 @@ nav.navbar-default .navbar-nav>li>a.active {
background: white;
}
.header-bar-element.dark .header-bar-content {
background-color: rgba(11, 57, 90, 0.9);
box-shadow: none !important;
color: white;
}
.header-bar-element.dark .navbar-nav>li>a {
color: white;
}
.header-bar-element.dark .navbar-nav>li>a:hover,
.header-bar-element.dark .navbar-default .navbar-nav>li>a:focus,
.header-bar-element.dark .navbar-nav>li>a.active {
background-color: rgba(0,0,0,.25);
text-shadow:1px 1px 12px rgba(0,0,0,0.60); /* Increase opacity and spread */
color: white !important;
}
.header-bar-element .search-box {
position: absolute;
left: 0px;
right: 0px;
top: -50px;
top: -60px;
z-index: 4;
height: 56px;
transition: top 0.3s cubic-bezier(.23,.88,.72,.98);
@ -203,6 +236,14 @@ nav.navbar-default .navbar-nav>li>a.active {
margin-right: 20px;
}
.header-bar-element.dark .user-tools .user-tool {
color: white;
}
.header-bar-element.dark .user-tools .caret {
color: white;
}
.user-tools.with-menu {
margin-right: 6px;
}
@ -224,6 +265,11 @@ nav.navbar-default .navbar-nav>li>a.active {
color: #333;
}
.header-bar-element.dark .user-tools i.user-tool:hover {
cursor: pointer;
color: #78CDF1;
}
.user-tools .new-menu {
background: transparent !important;
}

View file

@ -82,21 +82,6 @@
border-bottom-left-radius: 0px;
}
#quay-logo {
margin-left: 10px;
margin-top: 1px;
height: 36px;
width: 100px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: inline-block;
}
#quay-logo.hosted-logo {
width: 150px;
}
#padding-container {
padding: 20px;
padding-top: 20px;