tracim_v2/src/css/Header.styl

.header
  position fixed
  width 100%
  border-bottom 1px solid grey
  z-index 5
  &__logo
    &__img
      width 150px
  &__breadcrumb
    width 630px
  &__menu
    justify-content flex-end
    &__list
      display none
      margin-left 50px
      .list__item
        padding-right 30px
        &__link
          color blue
          font-size 16px
          &:hover
            color darkBlue
    &__rightside
      display flex
      margin-top 15px
      list-style none
      &__itemsearch
        margin-right 8%
        width 55%
        &__search
          width 100%
          .search__addonsearch
            background-color transparent
            cursor pointer
            &:hover
              background-color thirdColor
              color mainColor
      .btnnavbar
        border 1px solid grey
        background-color transparent
        cursor pointer
      &__itemlanguage
        &__languagedropdown
          .languagedropdown
            &__btnlanguage
              margin-right 25px
              color darkGrey
              &:focus
                box-shadow shadow-all-side-blue
                border-radius 5px
                background-color transparent
              &__imgselected
                margin-right 10px
                width 20px
                height 15px
            &__subdropdown
              padding 0
              min-width 0
              .subdropdown
                &__link
                  cursor pointer
                &__flag
                  width 25px
                  height 18px
      &__itemquestion
        &__btnquestion
          margin-right 30px
          .btnquestion__icon
            color darkGrey
      &__itemprofil
        .profilgroup
          margin-right 30px
          &__name
            border 0
            padding 0 5px
            background-color transparent
            cursor pointer
            &:hover
              background-color lightGrey
            &:focus
              box-shadow shadow-all-side-blue
              background-color lightGrey
            &::after //bootstrap overrides
              vertical-align middle
              color darkGrey
            &__imgprofil
              display inline-block
              margin-right 10px
              width 40px
              height 40px
            &__text
              display inline-block
              vertical-align middle
              margin-right 10px
              color darkGrey
          &__sub
            color darkGrey
            cursor pointer
            &:focus
              box-shadow none
          &__setting
            padding 0
            left inherit
            right 0
            cursor pointer
            .setting__link
              padding 10px
              color fontColor
      &__itemnotification
        &__timeline
          margin-right 30px
          .timeline
            &__btnnotif
              color darkGrey
              &::after
                margin-left 15px
            &__subdropdown
              padding 0
              left inherit
              right 0
              cursor pointer
              &__text
                padding 10px;


@media (min-width: min-lg) and (max-width: max-lg)
  .header
    &__menu
      &__rightside
        width 100%

@media (min-width: min-md) and (max-width: max-md)
  .header
    &__logo__img
      margin-left 0
    &__menu
      &__rightside
        width 100%

@media (min-width: min-sm) and (max-width: max-sm)
  .header
    &__logo__img
      margin-left 0
    &__menu
      &__rightside
        padding-left 0
        width 100%
        &__itemquestion
          display none

@media (max-width: max-xs)
  .header
    &__logo__img
      margin-left 0
    &__menu
      &__rightside
        flex-wrap wrap
        padding-left 0
        width 418px
        &__itemquestion
          display none
        &__itemprofil
          &__profilgroup
            margin-top 20px
          .profilgroup__setting
            left 0