/*
 * Copyright (c) 2015-2018 Red Hat, Inc.
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 * Contributors:
 *   Red Hat, Inc. - initial API and implementation
 */

$faces-shadow = rgba(255, 255, 255, 0.5)
$menu-font-size = 1em
$submenu-font-size = 10px
$circle-indicator-font-size = 0.7em

.navbar-top-logo
  margin 5px 10px 0
  height 54px
  width 95px

/* restore non-allcaps */
.admin-navbar-menu section a.md-button
  text-transform none

/* remove button margins */
.admin-navbar-menu md-list-item a.md-button
  margin 0

che-nav-bar
  width 100%

.left-sidebar-container
  display flex
  flex 1
  flex-flow row wrap
  justify-content space-around
  width 100%

.left-sidebar-container md-toolbar
  box-shadow none
  background-color $navbar-backgroud-color
  border-right 1px solid $navbar-border-right-color

.left-sidebar-menu
  width 100%

.left-sidebar-menu .navbar-subsection-item .navbar-item .navbar-icon,
.left-sidebar-menu .navbar-submenu-item .navbar-item .navbar-icon,
.navbar-submenu-content .navbar-icon
  width 20px
  min-width 20px
  font-size 14px
  line-height 24px
  text-align center
  margin 0 4px 0 7px

.left-sidebar-menu .navbar-subsection-item.md-no-proxy
  padding 0

.left-sidebar-menu md-list
  padding-top 5px

.admin-navbar-menu .navbar-subsection md-list
  padding-top 4px

.admin-navbar-menu .navbar-subsection .navbar-subsection-item
  min-height 0
  margin-top -4px

.admin-navbar-menu
  .navbar-section.navbar-section-title
    margin-top 9px
    margin-left 10px
    text-transform uppercase
    font-size 0.9em
    line-height 19px
    height 19px
    white-space nowrap

    .navbar-section-title-button
      min-height 19px
      height 19px
      margin 0 6px
      min-width 19px
      width 19px
      padding 0 5px
      line-height inherit
      color inherit
      border-radius 2px

  .navbar-section + md-list
    padding-top 0

/* text color */
.admin-navbar-menu .navbar-header,
.admin-navbar-menu .navbar-identity,
.admin-navbar-menu section a.md-button span,
.navbar-submenu-content a.md-button span
  color $navbar-menu-text-color

.admin-navbar-menu md-list-item a.md-button span.navbar-number
  color $navbar-menu-dark-text-color

.admin-navbar-menu .navbar-section.navbar-section-title
  color $navbar-section-title-color

.admin-navbar-menu section a.md-button .navbar-icon,
.navbar-submenu-content a.md-button .navbar-icon
  color $navbar-menu-icon-color

.admin-navbar-menu section a.md-button,
.navbar-submenu-content a.md-button
  height 36px

.admin-navbar-menu md-list-item a.md-button.che-navbar-selected .navbar-icon
  color $navbar-active-menu-icon-color
.admin-navbar-menu md-list-item a.md-button.che-navbar-selected span
  color $navbar-active-menu-text-color

/* background color */

.admin-navbar-menu md-list-item a.md-button.che-navbar-selected,
.admin-navbar-menu md-list-item a.md-button:hover,
.admin-navbar-menu md-menu a.md-button:hover
  background-color $navbar-active-menu-background-color

.admin-navbar-menu md-menu a.md-button.che-navbar-selected
  background-color inherit

/* layout */

.admin-navbar-menu .navbar-header
  margin-top 20px

.admin-navbar-menu .navbar-header
  margin-left 50px

.admin-navbar-menu .navbar-header span.navbar-title
  margin-left 5px

.admin-navbar-menu md-list-item a.md-button
  width fill-available
  padding 0
  height 26px
  min-height 24px
  border-radius 0

.admin-navbar-menu .navbar-account-section md-list
  padding 0

.admin-navbar-menu .navbar-account-section md-list-item a.md-button
  height inherit
  min-height inherit

.admin-navbar-menu .left-sidebar-menu md-list-item > a.md-button .navbar-item,
.admin-navbar-menu .left-sidebar-menu md-menu > a.md-button .navbar-item,
.navbar-submenu-content md-menu-item > a.md-button .navbar-item
  padding-left 0
  padding-right 5px

.admin-navbar-menu .left-sidebar-menu md-list-item > a.md-button .navbar-item.navbar-item-no-icon,
.admin-navbar-menu .left-sidebar-menu md-menu > a.md-button .navbar-item.navbar-item-no-icon,
.navbar-submenu-content md-menu-item > a.md-button .navbar-item.navbar-item-no-icon
  padding-left 36px

.admin-navbar-menu md-list-item a.md-button .navbar-item
  line-height 24px

.admin-navbar-menu md-list-item a.md-button .navbar-item span
  overflow: hidden
  text-overflow ellipsis

.admin-navbar-menu md-list-item a.md-button span.navbar-number
  font-weight 600

.admin-navbar-menu section md-list,
.admin-navbar-menu .navbar-identity
  width fill-available

.admin-navbar-menu .navbar-identity
  height 100%

.admin-navbar-menu .navbar-subsection md-list-item a.md-button .navbar-item .navbar-icon
  line-height inherit
  width 13px
  margin-right 2px

.left-sidebar-menu .navbar-subsection-item
  height 26px
  min-height 26px

.left-sidebar-menu.navbar-account-section .navbar-subsection-item
  height 31px
  min-height 31px

/* hover, focus */
/* remove underline on focus */
.admin-navbar-menu section a.md-button:focus
  text-decoration none

/* uselessly long selector to pump up specificity */
.admin-navbar-menu section.navbar-subsection md-list md-item.navbar-subsection-item md-list-item a.md-button.che-navbar-selected,
.admin-navbar-menu section.navbar-subsection md-list md-item.navbar-subsection-item md-list-item a.md-button:hover,
.navbar-submenu-content md-menu-item a.md-button:hover
  background-color $navbar-active-menu-background-color

.admin-navbar-menu a:hover, .admin-navbar-menu a.che-navbar-selected
  color inherit

/* effect */
.admin-navbar-menu .che-navbar-selected:before
  content ""
  left 0
  top 0
  bottom 0
  position absolute
  border-left solid 2px $navbar-active-menu-mark-color

/* animations */
.admin-navbar-menu .animation.ng-enter
  -webkit-transition: 0.3s
  -moz-transition: 0.3s
  transition: 0.3s
  opacity: 0

.admin-navbar-menu .animation.ng-enter-stagger
  transition-delay 2.2s

.admin-navbar-menu .animation.ng-enter.ng-enter-active
  opacity 1

.admin-navbar-menu .animation.ng-leave md-list-item,
.admin-navbar-menu .animation.ng-leave
  -webkit-transition: 0.3s linear all
  -moz-transition: 0.3s linear all
  transition 0.3s linear all
  opacity 1

.admin-navbar-menu .animation.ng-leave-stagger md-list-item,
.admin-navbar-menu .animation.ng-leave-stagger
  transition-delay 0.2s

.admin-navbar-menu .animation.ng-leave.ng-leave-active
  opacity 0

.admin-navbar-menu .animation.ng-leave md-list-item
  margin-top -32px

/* user avatar */
.admin-navbar-menu .navbar-identity .developers-face
  che-developers-face()

/* fonts sizes */
.admin-navbar-menu .navbar-header,
.admin-navbar-menu section.left-sidebar-menu a.md-button,
.admin-navbar-menu .navbar-identity,
.navbar-submenu-content span
  font-size $menu-font-size

.navbar-identity
  outline 0

.admin-navbar-menu section a.md-button
  font-size $submenu-font-size

.admin-navbar-menu .workspace-status-indicator span
  font-size $circle-indicator-font-size

/* remove focus effect on fold/unfold button */
.admin-navbar-menu .navbar-identity i.material-design:focus
  outline none

.navbar-submenu-item,
.navbar-submenu-item md-button
  width inherit

.navbar-submenu-item a.md-button
  width fill-available
  padding 0
  margin 0

.navbar-submenu-content
  padding 0
  width 304px
  border 1px solid
  background-color $menu-bg-color

.navbar-submenu-content a.md-button
  padding 0 !important

.navbar-submenu-content md-menu-item .md-button:focus
  background-color inherit

.admin-navbar-menu md-divider
  margin-top 8px
  margin-bottom 8px

.navbar-iframe-button-left-border
  position absolute
  top 9px
  right 0
  width 0
  height 16px
  border-right 1px solid $navbar-ide-iframe-button-border-color
  z-index 10

.navbar-primary
  color $primary-color !important
