Phraseanet/resources/www/_shared/styles/_main-menu.scss

// @import 'variables';
$mainMenuHeight: 41px;
$mainMenuLineHeight: 36px !default;
$mainMenuBackgroundColor: #ffe000 !default;
$mainMenuLinkColor: #000000 !default;
$mainMenuLinkHoverColor: #f2f0e9 !default;
$mainMenuLinkActiveColor: #FFFFFF !default;
$mainMenuLinkBackgroundHoverColor: transparent !default;
$mainMenuLinkHoverColor: #000000 !default;
$mainMenuMarginBottom: 0 !default;
$mainMenuBottomBorder: none !default;


#mainMenu {
  height: $mainMenuHeight;
  line-height: $mainMenuLineHeight;
  vertical-align: middle;
  background-color: $mainMenuBackgroundColor;
  border-bottom: $mainMenuBottomBorder;
  margin-bottom: $mainMenuMarginBottom;
  z-index: 100;
  box-sizing: border-box;
  .arrow-up {
    display: none;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid #d8d8d8;
  }
  .mobilemenu {
    display: none;
  }
  .desktopmenu {
    display: inline-block;
  }
  .inline {
    display: inline-block !important;
  }
  .show-menu {
    i {
      font-size: 26px;
      vertical-align: middle;
      color: $mainMenuLinkActiveColor;
    }
    img {
      display: none;
      margin-top: 5px;
    }
  }
  ol {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none outside none;
  }
  #nav_notification_container {
    display: inline-block;
  }
  #nav_customlink_container {
    display: inline-block;
  }
  #mainLogo {
    margin:0 5px;
    vertical-align: middle;
    @media screen and (max-width: 1064px) {
      max-width: 100px;
    }
  }
  li {
    display: inline-block;
    float: left;
    line-height: $mainMenuLineHeight;
    padding: 0;
    position: relative;
    vertical-align: top;
    height: $mainMenuHeight; //
    a {
      text-decoration: none;
      display: inline-block;
      color: $mainMenuLinkColor;
      > span {
        font-size: $xmediumFontSize;
        font-weight: normal;
        border-top: 3px solid transparent;
        display: block;
        padding: 0 5px;
        height: $mainMenuHeight - 3;
        &.selected {
          border-top: 3px solid $mainMenuLinkActiveColor;
        }
      }
      &:hover {
        background-color: $mainMenuLinkBackgroundHoverColor;
        color: $mainMenuLinkHoverColor;
      }
    }
  }
  /*li , li span {//
    height: $mainMenuLineHeight;
    line-height: $mainMenuLineHeight;
  }
    */
  .title {
    font-size: 18px;
    color: #F7F7F7;
    margin: 0 5px;
    height: $mainMenuHeight;
    display: block;
    vertical-align: middle;
  }
  #notification_box a {
    margin-left: 0;
  }
  .account a {
    text-decoration: underline;
  }
  .right {
    li {
      // border-left: 1px solid $mainMenuRightListBorderLeft;
      a {
        > span {
          padding: 0 15px;
        }
      }

      &.user {
        a {
          background: url('#{$iconsPath}icon_user.png') 15px 7px no-repeat;
          padding-left: 41px;
        }
      }
    }
  }
}

@media screen and (max-width: 1064px) {
  #rightFrame {
    #idFrameT {
      top: 100px;
    }
  }
  .searchFormWrapper {
    .controls-row {
      .input-append {
        float: none !important;
      }
      .control-group {
        float: none !important;
      }
    }
  }
  #mainMenu {
    .show-menu {
      cursor: pointer;
      img {
        display: inline-block;
      }
    }
    .mobilemenu {
      display: block;
    }
    .desktopmenu {
      display: none;
    }
    #nav_menu_container, #nav_customlink_container, #nav_account_container {
      position: absolute;
      z-index: 1000;
      .nav_menu {
        z-index: 1000;
        position: absolute;
        border-radius: 5px;
        background-color: #d8d8d8;
        width: 100%;
        .bullet-type {
          padding: 0;
        }
        .bullet-type:before {
          content: "• ";
        }
        li.menu-bar-item {
          left: 10px;
          width: 151px;
          clear: both;
          border-bottom: 1px solid #b7b7b7;
          z-index: 1000;
        }
        li.menu-bar-item a {
          width: 100%;
          > img {
            float: left;
            margin-top: 11px;
            margin-right: 11px;
            display: block;
          }
          > span {
            text-align: left;
            font-size: 14px;
            font-family: Roboto;
            font-weight: 500;
            font-style: normal;
            font-stretch: normal;
            letter-spacing: normal;
            color: #4a4a4a;
            &.selected {
              border-top: 3px solid transparent;
            }
          }
        }
        li.menu-bar-item:last-child {
          border-bottom: none;
        }
      }
    }
    #nav_menu_container {
      left: 5px;
      width: 172px;
      .nav_menu {
        top: 9px;
      }
      .arrow-up {
        left: 5px;
        display: block;
        position: absolute;
      }
    }
    #nav_customlink_container {
      display: none;
      position: relative;
      left: 4px;
      width: auto;
      .nav-wrapper-box {
        position: absolute;
        background: #d8d8d8;
        border-radius: 5px;
        padding-right: 10px;
        padding-left: 10px;
        top: 9px;
        .nav_menu {
          position: relative;
          li.menu-bar-item {
           /* width: 100%;
            left: 0;*/
          }
          li.menu-bar-item a {
            > span {
              padding: 0;
              display: inline-block;
              max-width: 140px;
              overflow: hidden;
            }
          }
        }
      }
      .arrow-up {
        left: 5px;
        display: block;
        position: absolute;
      }
    }
    #nav_account_container {
      display: none;
      position: relative;
      right: 10px;
      width: auto;
      .nav-wrapper-box {
        position: absolute;
        right: -4px;
        background: #d8d8d8;
        border-radius: 5px;
        padding-right: 10px;
        padding-left: 10px;
        top: 9px;
        width: 200px;
        .nav_menu {
          position: relative;
          li.menu-bar-item {
            width: 100%;
            left: 0;
          }
          li.menu-bar-item a {
            > span {
              padding: 0;
              display: inline-block;
              max-width: 170px;
              overflow: hidden;
            }
          }
        }
      }
      .arrow-up {
        right: 6px;
        display: block;
        position: absolute;
      }
    }
    #nav_notification_container {
      float: right;
      margin-right: 120px;
    }
  }
}