| // 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%; |
| } |