blob: d9da2be53289e52195e7ef5468ff8cdbf0a8c015 [file] [log] [blame]
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
@import "bootstrap/mixins.less";
.hide-tray {
display: none;
}
.show-tray {
display: block !important; //nasty hack until we convert all trays to React
}
.tray {
.bottom-left-shadow-border;
display: none;
position: absolute;
right: 5px;
top: 55px;
z-index: 11;
background-color: #333;
color: #fff;
margin: 0;
.add-on {
font-size: 16px;
background: none;
padding: 0px;
margin: 10px 0;
border: none;
display: block;
text-align: left;
color: #fff;
text-shadow: none;
height: auto;
line-height: 1em;
}
input[type="text"],
textarea {
.border-radius(5px);
background-color: #666;
padding: 8px;
border: none;
color: #eee;
font-size: 13px;
}
input[type="text"]:focus,
textarea:focus,
input[type="text"]:hover,
textarea:hover {
border: 2px solid @white;
}
input[type="text"], textarea {
box-shadow: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(255,255,255,0.1);
padding: 8px;
border: 2px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.8);
font-size: 13px;
}
input:-webkit-input-placeholder,
form input:-moz-placeholder,
input:-ms-input-placeholder {
color: rgba(255,255,255,0.4);
}
}
.tray:before {
content: '';
position: absolute;
top: -25px;
border-color: transparent transparent #333 transparent;
border-style: solid;
border-width: 15px;
width: 0;
height: 0;
}
.lookahead-tray-link {
cursor: pointer;
position: relative; /* ensures :after elements are also hidden when overflowed */
}
.lookahead-tray-link:after {
content: "\f144";
font-family: "fauxtonicon";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-size: 8px;
color: #777;
margin: 8px;
display: inline-block;
position:absolute;
.rotate(90deg);
}
.lookahead-tray-link.js-enabled:after {
color: @orange;
}
#breadcrumbs .breadcrumb li.lookahead-tray-link.js-enabled {
color: @linkColor;
}
.lookahead-tray.tray {
width: 298px;
padding: 0px;
right: 16px;
border: none;
&:before {
left: 132px;
}
input {
margin: 10px;
padding-right: 30px;
font-size: 16px;
width: 244px;
}
.search-btn {
background: transparent;
margin-left: -38px;
margin-right: 20px;
border: 0px;
padding: 0px;
color: #cccccc;
}
.dropdown-menu {
position: relative;
border: 0px;
background-color: #333333;
/* unfortunate, but the typeahead plugin adds these values inline */
left: 0px !important;
top: 0px !important;
width: 298px;
text-overflow: ellipsis;
overflow: hidden;
& > li {
overflow: hidden;
text-overflow: ellipsis;
& > a {
text-overflow: ellipsis;
padding: 10px 20px;
font-size: 16px;
overflow: hidden;
}
strong {
color: @white;
}
}
}
.fonticon-cancel {
display: inline-block;
width: 20px;
height: 20px;
font-size: 12px;
color: #cccccc;
cursor: pointer;
}
}
#header-lookahead .dropdown-menu li.active {
width: 100%;
}