openproject/app/assets/stylesheets/layout/_top_menu.sass

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++

@import global/all
@import fonts/openproject_icon_font

#logo
  float: left
  width: $main_menu_width - $main_menu_border_width
  height: $header_height
  background-color: $header_logo_bg_color
  .home-link
    margin-top: 13px
    display: block
    background: $header_home_link_bg
    background-size: 150px
    height: 42px
    text-indent: -9999em

#top-menu
  background-color: $header_bg_color
  height: $header_height
  width: 100%
  padding: 0px
  z-index: 21
  position: relative
  border-bottom: $header_border_bottom_width solid $header_border_bottom_color

  %absolute-layout-mode &
    position: absolute

  #search
    margin: 7px 25px 0 0
    float: left
  .search_field
    position: relative
    border: $header_search_field_border
    border-radius: 25px
    -webkit-border-radius: 25px
    top: 6px
    width: 140px
    outline: 0px
    padding: 7px 30px 7px 10px
    font-family: $font_family_normal
    color: $header_search_field_font_color
  ::-webkit-input-placeholder
    color: $header_search_field_font_color
  :-moz-placeholder
    color: $header_search_field_font_color
  span#magnifier
    @include icon-common
    position: relative
    top: 10px
    right: 27px
    &:after
      display: inline-block
      content: "\e0a1"
      -webkit-transform: scaleX(-1)
      -moz-transform: scaleX(-1)
      -o-transform: scaleX(-1)
      -ms-transform: scaleX(-1)
      transform: scaleX(-1)
  ul
    margin: 0
    padding: 0
    float: left
    height: $header_height
    border-top: 0
    position: relative
  li
    float: left
    list-style-type: none
    white-space: nowrap
    position: relative
    z-index: 5
    padding: 0
    > a
      height: $header_height
      line-height: $header_height
      zoom: 1
      @include header-fonts($header_item_font_color)
      text-decoration: none
      padding: 0 10px 0 10px
    > a:hover
      background: $header_item_bg_hover_color
      color: $header_item_font_hover_color
    > ul
      top: $header_height + $header_border_bottom_width
      display: none
      position: absolute
      height: auto
      min-width: 270px
      left: -1px
      z-index: 20
      border: 2px solid $header_drop_down_border_color
      border-top: 0
      background-color: $header_drop_down_bg_color
      li  a
        height: 30px
        line-height: 30px
      li
        float: none
        white-space: nowrap
  li.open > a
    position: relative
    top: 0px
    z-index: 21
  li.last-child > ul
    left: auto
    right: 0

  li.drop-down
    select
      width: 100%

    > a
      &:after
        @include icon-common
        padding: 0 2px 0 9px
        content: "\e0d2"
    &:hover
      background-color: $header_item_bg_hover_color
    &.open > a
      background-color: $header_item_bg_hover_color
      color: $header_item_font_hover_color
      &:after
        @include icon-common
        padding: 0 2px 0 9px
        content: "\e0d4"

    li
      > a
        color: $header_drop_down_item_font_color
        padding: 0 15px
        &:hover
          background: $header_item_bg_hover_color
          color: $header_drop_down_item_font_hover_color

  #loggedas
    float: right
    margin-right: 0.5em
    color: #fff
  #nav-login-content
    position: relative
    position-top: 44px
    float: right
    background: #FFFFFF
    border: 0px solid #194E60
    border-top: 0
    line-height: 19px
    padding: 15px 10px 15px 15px
    @include header-fonts(#555555, 13px)

    input[type=text]
      height: 16px
      width: 175px
      border: 1px solid #CCCCCC
      padding: 5px
      @include default-transition
      &:hover
        border: 1px solid #888888
    input[type=password]
      height: 16px
      width: 175px
      border: 1px solid #CCCCCC
      padding: 5px
      @include default-transition
      &:hover
        border: 1px solid #888888
    input[type=submit]
      height: 28px
    a
      display: inline
      padding: 0
      font-family: $font_family_normal
      font-weight: normal
    table td
      padding: 3px

#quick-search
  float: right

#top-menu-items
  padding-top: 0px
  .top-menu-items-right
    float: right
#top-menu.open
  z-index: 5

#select2-drop.project-search-results
  margin: 0 0 0 -2px
  border: 2px solid $header_drop_down_border_color
  border-top: 0
  @include header-fonts($header_drop_down_projects_search_font_color, 13px)
  li
    padding: 0 10px

  .select2-search
    background: $header_drop_down_projects_search_bg_color
    margin: 0px 0 10px 0

  .select2-search input
    background: $header_drop_down_projects_search_input_bg_color url(image-path('magnifier.png')) no-repeat 94% center
    margin: 10px 10px
    padding: 9px 7px 9px 10px
    border: none
    border-radius: 25px
    -webkit-border-radius: 25px
    width: 92%

  .select2-results
    margin: 0
    padding: 0

    .select2-highlighted
      background: $header_item_bg_hover_color !important
      border-radius: 0 !important
      font-family: $font_family_normal
      font-weight: bold !important
      color: $header_drop_down_item_font_hover_color

#header
  height: $header_height
  min-width: 1100px
  .chzn-container .chzn-results .highlighted
    background-color:  #24b3e7

.account-nav
  display: block
  li
    a
      display: block
      padding: 0px 9px 0px
    > ul > li
      max-width: 350px