vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Start on new interactive search

Browse source
This commit is contained in:
Joseph Schorr 2015-04-06 19:17:18 -04:00
parent 2ece1170a1
commit 951b0cbab8
7 changed files with 505 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

172
static/css/directives/ui/header-bar.css Normal file
View file

@ -0,0 +1,172 @@
nav.navbar {
border: 0px;
border-radius: 0px;
}
nav.navbar-default .navbar-nav>li>a {
letter-spacing: 0.5px;
color: #428bca;
font-size: 16px;
}
nav.navbar-default .navbar-nav>li>a.active {
color: #f04c5c;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
background: #eee;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
cursor: pointer;
background: rgba(255, 255, 255, 0.4) !important;
}
.header-bar-element .header-bar-content.search-visible {
box-shadow: 0px 1px 4px #ccc;
}
.header-bar-element .header-bar-content {
z-index: 4;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
background: white;
}
.header-bar-element .search-box {
position: absolute;
left: 0px;
right: 0px;
top: -50px;
z-index: 3;
height: 83px;
transition: top 0.7s cubic-bezier(.23,.88,.72,.98);
background: white;
box-shadow: 0px 1px 16px #444;
padding: 10px;
}
.header-bar-element .search-box.search-visible {
top: 50px;
}
.header-bar-element .search-box.results-visible {
box-shadow: 0px 1px 4px #ccc;
}
.header-bar-element .search-box .search-label {
display: inline-block;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
color: #ccc;
margin-right: 10px;
position: absolute;
top: 34px;
left: 14px;
}
.header-bar-element .search-box .search-box-wrapper {
position: absolute;
top: 0px;
left: 100px;
right: 10px;
padding: 10px;
}
.header-bar-element .search-box .search-box-wrapper input {
font-size: 28px;
width: 100%;
padding: 10px;
border: 0px;
}
.header-bar-element .search-results {
position: absolute;
left: 0px;
right: 0px;
top: -130px;
z-index: 2;
transition: top 0.7s cubic-bezier(.23,.88,.72,.98), height 0.5s ease-in-out;
background: white;
box-shadow: 0px 1px 16px #444;
padding-top: 20px;
}
.header-bar-element .search-results.loading, .header-bar-element .search-results.results {
top: 130px;
}
.header-bar-element .search-results.loading {
height: 50px;
}
.header-bar-element .search-results.no-results {
height: 150px;
}
.header-bar-element .search-results ul {
padding: 0px;
margin: 0px;
}
.header-bar-element .search-results li {
list-style: none;
padding: 6px;
margin-bottom: 4px;
padding-left: 20px;
position: relative;
}
.header-bar-element .search-results li .kind {
text-transform: uppercase;
font-size: 12px;
display: inline-block;
margin-right: 10px;
color: #aaa;
width: 80px;
text-align: right;
}
.header-bar-element .search-results .avatar {
margin-left: 6px;
margin-right: 2px;
}
.header-bar-element .search-results li.current {
background: rgb(223, 242, 255);
cursor: pointer;
}
.header-bar-element .search-results li i.fa {
margin-left: 6px;
margin-right: 4px;
}
.header-bar-element .search-results li .description {
overflow: hidden;
text-overflow: ellipsis;
max-height: 24px;
padding-left: 10px;
display: inline-block;
color: #aaa;
vertical-align: middle;
}
.header-bar-element .search-results li a {
color: black;
text-decoration: none !important;
}
.header-bar-element .search-results li .result-name {
vertical-align: middle;
}
.header-bar-element .search-results li .clarification {
font-size: 12px;
margin-left: 6px;
display: inline-block;
}