opendev/gerrit
Code Issues Proposed changes

Polish up top-level dropdown menus

Browse Source 
Change-Id: Ib130fb07f0682ee80e4bf0d4a6a4eae2b6682251
This commit is contained in:
Andrew Bonventre
2016-08-17 16:22:54 -07:00
parent ea82d1c0fb
commit 0c5e3991d1
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
View File

@@ -45,34 +45,38 @@ limitations under the License.
.links { .links {
margin-left: 1em; margin-left: 1em;
} }
.links ul { .links .menuContainer {
display: none; display: none;
} }
.links > li { .links > li {
cursor: default; cursor: default;
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
padding: .4em 0; padding: .5em 0;
position: relative; position: relative;
} }
.links li:hover ul { .links li:hover .menuContainer,
.links li:active .menuContainer {
background-color: #fff; background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3); box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
display: block; display: block;
left: -.75em; left: -.5em;
padding: .5em 0;
position: absolute; position: absolute;
top: 2em; top: 2.45em;
z-index: 1000; z-index: 1000;
} }
.links li ul li a:link, .links li ul li a:link,
.links li ul li a:visited { .links li ul li a:visited {
color: #00e; color: #00e;
display: block; display: block;
padding: .5em .75em; padding: .3em 1em;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
} }
.links li ul li:hover a { .links li ul li:hover a,
.links li ul li:active a {
background-color: var(--selection-background-color); background-color: var(--selection-background-color);
} }
.linksTitle { .linksTitle {
@@ -87,7 +91,8 @@ limitations under the License.
height: 0; height: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: calc(50% - .1em); top: calc(50% - .05em);
transition: border-top-color 200ms;
width: 0; width: 0;
} }
.links li:hover .downArrow { .links li:hover .downArrow {
@@ -137,11 +142,13 @@ limitations under the License.
<span class="linksTitle"> <span class="linksTitle">
[[linkGroup.title]] <i class="downArrow"></i> [[linkGroup.title]] <i class="downArrow"></i>
</span> </span>
<div class="menuContainer">
<ul> <ul>
<template is="dom-repeat" items="[[linkGroup.links]]" as="link"> <template is="dom-repeat" items="[[linkGroup.links]]" as="link">
<li><a href$="[[link.url]]">[[link.name]]</a></li> <li><a href$="[[link.url]]">[[link.name]]</a></li>
</template> </template>
</ul> </ul>
</div>
</li> </li>
</template> </template>
</ul> </ul>