openproject/app/assets/stylesheets/layout/top_menu.css.sass

/*-- copyright
 * OpenProject is a project management system.
 * Copyright (C) 2012-2013 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.  ++*/

@mixin header-fonts($color)
  color: $color
  font-size: 14px
  font-family: 'LatoRegular', 'Lucida Grande', Helvetica, Arial, sans-serif
  font-weight: normal

@mixin header-pulldown-fonts($color)
  color: $color
  font-size: 13px
  font-family: 'LatoRegular', 'Lucida Grande', Helvetica, Arial, sans-serif
  font-weight: normal

#logo
  float: left
  width: 270px
  height: 55px
  background-color: #06799F
  .home-link-image
    width: 150px
  .home-link
    margin-top: 13px
    display: block
    padding-left: 20px

#top-menu
  background-color: #3493B3
  height: 55px
  padding: 0px
  z-index: 21
  position: relative
  a,span,div,li,ul
  #search
    margin: 7px 25px 0 0
    float: left
  .search_field
    position: relative
    border: 0
    border-radius: 25px
    -webkit-border-radius: 25px
    background: #FFFFFF url(image-path('magnifier.png')) no-repeat 94% center
    top: 6px
    width: 140px
    outline: 0px
    padding: 7px 30px 7px 10px
    font-family: 'LatoRegular', 'Lucida Grande', Helvetica, Arial, sans-serif
    color: #000000
  ::-webkit-input-placeholder
    color: #000000
  :-moz-placeholder
    color: #000000
  ul
    margin: 0
    padding: 0
    float: left
    height: 55px
    border-top: 0
    position: relative
  li
    float: left
    list-style-type: none
    white-space: nowrap
    position: relative
    z-index: 5
    padding: 0
    > a
      height: 55px
      line-height: 55px
      zoom: 1
      @include header-fonts(#fff)
      text-decoration: none
      padding: 0 18px 0 10px
    > a:hover
      background: #06799F
    > ul
      top: 55px
      display: none
      position: absolute
      height: auto
      min-width: 270px
      left: -1px
      z-index: 20
      border: 2px solid #E0E0E0
      border-top: 0px
      background-color: #FFFFFF
      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: -1px
  li.drop-down select
    width: 100%
  li.drop-down > a
    padding-right: 35px
    background: url(image-path('top_menu_arrow_grey_white_sprite.png')) 95% -35px no-repeat
  li.drop-down > a:hover
    background: #06799F url(image-path('top_menu_arrow_grey_white_sprite.png')) 95% -35px no-repeat
  li.drop-down.open > a
    background: #06799F url(image-path('top_menu_arrow_grey_white_sprite.png')) 95% -35px no-repeat
  li.drop-down li > a
    color: #555555
    padding: 0 15px
  li.drop-down li > a:hover
    background: #06799F
    color: #FFFFFF
  #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: 10px
    @include header-pulldown-fonts(#555555)
  #nav-login-content input[type=text]
    height: 16px
    width: 150px
    border: 1px solid #CCCCCC
    padding: 5px
  #nav-login-content input[type=password]
    height: 16px
    width: 150px
    border: 1px solid #CCCCCC
    padding: 5px
  #nav-login-content input[type=submit]
    background: #06799F
    border-radius: 20px
    color: #FFFFFF
    padding: 6px 13px
    border: none
    cursor: pointer
  #nav-login-content  div a
    display: inline
    color: #06799F
    padding: 0
    font-family: 'LatoRegular', 'Lucida Grande', Helvetica, Arial, sans-serif
    font-weight: normal
  #nav-login-content table td
    padding: 3px
  #optional_login_fields
    white-space: nowrap
    margin: 5px 0 0 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
  margin: 0 0 0 -2px
  border: 2px solid #E0E0E0
  border-top: 0
  @include header-pulldown-fonts(#555555)
  li
    padding: 0 10px

.select2-search
  background: #E0E0E0
  margin: 0px 0 10px 0

.select2-search input
  background: #FFFFFF 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: #06799F !important
  border-radius: 0 !important
  font-family: 'LatoBold', 'Lucida Grande', Helvetica, Arial, sans-serif !important
  font-weight: normal !important