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

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2018 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-2017 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 docs/COPYRIGHT.rdoc for more details.
//++

$hamburger-right: -3px
$hamburger-width: 50px

// search bar has a min-width of 160px and should adapt to every screen size
$search-input-width: calc(160px + 3vw)
$search-input-width-expanded: calc(160px + 13vw)
$search-input-height: 30px

%top-menu-hover-styles
  @include varprop(background, header-item-bg-hover-color)
  @include varprop(color, header-item-font-hover-color)
  @include varprop(border-bottom-width, header-border-bottom-width)
  @include varprop(border-bottom-color, header-border-bottom-color)
  border-bottom-style: solid

%top-menu-link-styles
  display: block
  height: $header-height
  line-height: $header-height
  zoom: 1
  @include varprop(color, header-item-font-color)
  @include varprop(font-size, header-item-font-size)
  text-decoration: none
  padding: 0 15px
  &:hover
    @extend %top-menu-hover-styles

#logo
  width: 230px
  @include varprop(height, header-height)
  position: absolute
  left: calc(50% - 230px / 2)

  .home-link
    margin-top: 15px
    display: block
    background: $header-home-link-bg
    background-size: 140px
    height: 42px
    text-indent: -9999em

#top-menu
  @include varprop(background-color, header-bg-color)
  height: $header-height
  padding: 0
  z-index: 22
  border-bottom-style: solid
  @include varprop(border-bottom-width, header-border-bottom-width)
  @include varprop(border-bottom-color, header-border-bottom-color)
  .menu_root
    margin: 0
    padding: 0
    float: left
    height: $header-height
    border-top: 0
    flex: 1 1 auto
  li.drop-down,
  li.help-menu--overridden-link,
  .accessibility-mode & #account-nav-left li
    float: left
    list-style-type: none
    white-space: nowrap
    position: relative
    z-index: 5
    padding: 0
    > a
      @extend %top-menu-link-styles

      &:hover .icon-help:before
        @include varprop(border-color, header-item-font-hover-color)

    > ul
      min-width: 270px
      padding: 6px 0
      border: 1px solid $header-drop-down-border-color
      border-top: 0
      background-color: $header-drop-down-bg-color
      max-height: calc(100vh - #{$header-height})
      overflow-y: auto
      overflow-x: hidden

      @include styled-scroll-bar-vertical

      li
        float: none
    > ul.drop-down--projects
      width: 400px
      left: 0px

  li.drop-down.open
    .button--dropdown-indicator:before
      @include icon-mixin-pulldown-up

  li.last-child > ul,
  .drop-down--help,
  .drop-down--modules
    left: auto
    right: 0

  .drop-down--projects
    > li
      &:nth-last-child(2)
        margin-bottom: 6px

  .drop-down--help
    .form--separator
      margin-bottom: 10px
      &+ li
        margin-bottom: 5px
    .drop-down--help-headline
      padding-left: 10px
      font-size: 12px
      color: $gray-dark
      text-transform: uppercase

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

    a
      display: inline
      padding: 0
      font-weight: normal
    table td
      padding: 3px

  .skip-navigation-link:focus
    top: 40px
    left: 260px
    @include varprop(color, font-color-on-primary)


.top-menu-search--wrapper
  float: left

.top-menu-search
  display: flex
  align-items: center
  position: relative
  height: $header-height
  line-height: $header-height
  margin: 0 15px

  .top-menu-search--back-button
    display: none
  
  .top-menu-search--button
    position: absolute
    right: 2px
    @include varprop(font-size, header-item-font-size)
    @include varprop(color, header-item-font-color)
    &:hover
      text-decoration: none
    &.-input-focused
      color: $header-search-field-font-color

  .top-menu-search--loading
    top: $header-height - 11px  // display directly under ng-input field
    height: 46px                // ng-option height + 1px border
    z-index: 1051

  #global-search-input
    width: $search-input-width
    font-size: 0.9rem
    -webkit-transition: width 0.2s ease-in-out
    transition: width 0.2s ease-in-out
    &::-ms-clear
      margin-right: 5px
      width: 20px

    .ng-select-container
      background: transparent
      @include varprop(border-color, header-item-font-color)

    .ng-arrow-wrapper
      display: none

    .ng-clear-wrapper
      @include varprop(color, header-item-font-color)
      top: 1px
      width: 30px
      right: 25px
      text-align: center

    .ng-input
      top: 0
      input
        @include varprop(color, header-item-font-color)
        height: $search-input-height
        cursor: text

    .ng-placeholder
      @include varprop(color, header-item-font-color)

    &.-expanded
      width: $search-input-width-expanded
      background: white
      border-radius: 4px
      color: $header-search-field-font-color

      .ng-placeholder,
      .ng-clear-wrapper,
      input
        @include varprop(color, header-search-field-font-color)

      .scroll-host
        @include styled-scroll-bar-vertical
        max-height: 80vh
        height: auto

        .ng-option
          border-bottom: 1px solid #EAEAEA
          white-space: normal
          padding: 5px 10px
          &:last-child
            border-bottom: none
          &.ng-option-marked
            @include varprop(background-color, drop-down-hover-bg-color)
            @include varprop(color, header-drop-down-item-font-hover-color)
          &.ng-option-disabled
            display: none
          &.ng-option-selected
            @include varprop(background-color, drop-down-selected-bg-color)
            @include varprop(color, header-drop-down-item-font-hover-color)

.global-search--wp-id
  color: $gray-dark
  font-size: 13px
  white-space: nowrap

.global-search--option-wrapper
  padding: 5px 5px
  line-height: 25px
  min-height: 35px  // line-height + padding
  word-break: break-word

.global-search--project-scope
  position: absolute
  right: 7px
  border: 1px solid $button--border-color
  font-size: 13px
  background: $button--background-color
  border-radius: 2px
  padding: 0 4px
  color: $body-font-color

#quick-search
  float: right

#top-menu-items
  padding-top: 0
  display: flex
  align-items: center
  .top-menu-items-right
    display: flex

#header
  .chzn-container .chzn-results .highlighted
    background-color:  #24b3e7

.account-nav
  display: block
  li
    a
      @include text-shortener
      display: block
      padding: 0 9px 0

#account-nav-left
  .drop-down
    // Half viewport width minus half logo.
    max-width: calc((100vW/2) - 115px - #{$hamburger-width + $hamburger-right})
    .nosidebar &
      max-width: calc((100vW/2) - 115px)
  #projects-menu
    font-weight: bold
    padding-left: 6px
    .nosidebar &
      padding-left: 15px

    .button--dropdown-text
      @include text-shortener
      // Half viewport width minus half logo minus margins.
      max-width: calc((100vW/2) - 115px - 50px - #{$hamburger-width + $hamburger-right})
      .nosidebar &
        max-width: calc((100vW/2) - 115px - 50px)

    &:after
      position: absolute
      right: 15px
      top: calc(50% - 10px / 2)

#top-menu #account-nav-left .menu-drop-down-container
  overflow: hidden

#account-nav-right
  display: flex
  .drop-down.last-child
    .avatar
      // To accommodate the padding of the help icon which exists because of the circle
      margin-top: -5px
    .avatar-default
      border: 1px solid
      @include varprop(border-color, header-item-font-color)

  .icon-help:before
    border-width: 2px
    border-style: solid
    @include varprop(border-color, header-item-font-color)
    border-radius: 50%
    width: 26px
    height: 26px
    display: inline-block

  .icon-user
    font-size: 18px
  [class*="icon-"]:before
    padding: 0.25rem


#main-menu-toggle
  display: block
  width: $hamburger-width
  height: $header-height-mobile
  float: left
  text-align: center
  margin-right: $hamburger-right
  > a
    @extend %top-menu-link-styles

  .nosidebar &
    display: none

@media only screen and (max-width: 18.75rem)
  #logo
    max-width: 170px

@media only screen and (max-width: 1210px)
  #logo
    display: none