tracim_v2/frontend/src/css/Sidebar.styl

sidebar-width = 280px
sidebar-animate-speed = 0.5s

.sidebarSticky
  position sticky
  top 87px
  display flex
  flex-direction column
  justify-content space-between
  height 100%

leftside()
  height 100%
  font-size 18px
  background-color rgba(253, 253, 253, 0.3)

.sidebar
  position relative
  transition all sidebar-animate-speed
  width sidebar-width
  min-height 100%
  background-image url('../img/applat.png')
  background-repeat repeat
  z-index 5
  &.sidebarclose
    width 0
  &__expand
    position absolute
    top 0
    right -43px
    display flex
    justify-content center
    align-items center
    border-left-width 1px
    border-left-style solid
    border-bottom-right-radius 15px
    padding 8px 15px
    cursor pointer
    color white
    transition all sidebar-animate-speed
  &__btnnewworkspace
    margin 50px 0
    overflow hidden
    &__btn
      display block
      margin 0 auto
      padding 15px 30px
  &__navigation
    padding 0
    overflow hidden
    &__workspace
      padding-left 0
      list-style none
      &__item
        &__wrapper
          display flex
          align-items center
          border-bottom 1px solid
          width 100%
          height 100%
          cursor pointer
        &__number
          display flex
          leftside()
          padding 12px
          width 50px
          letter-spacing 2px
        &__name
          padding 10px
          font-size 20px
          color off-white
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        &__icon
          margin 0 10px 0 auto
          color white
        &__submenu
          margin 0
          padding 0
          width 100%
          overflow hidden
          & > li
            display block
          &__dropdown
            display flex
            align-items center
            border-bottom 1px solid
            cursor pointer
            &__showdropdown
              display flex
              justify-content space-between
              align-items center
              padding 0 10px
              width 100%
            .dropdown__icon
              padding 10px 15px
              min-width 50px
              leftside()
            .dropdown__title
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              // color off-white
            &.activeFilter
              .dropdown__icon
                background-color rgba(253, 253, 253, 0.8)
  &__footer
    &__text
      font-size 14px
      &__link
        & > a
          color off-white
          font-size 14px
          &:hover
            text-decoration underline
            color fourthColor

/***** MEDIA 992px and 1199px ******/

@media (min-width: min-lg) and (max-width: max-lg)

  .sidebar
    position fixed

/***** MEDIA 576px and 991px ******/

@media (min-width: min-sm) and (max-width: max-md)

  .sidebarSticky
    top 69px

  .sidebar
    position fixed

/***** MEDIA 576px and 767px *****/

@media (min-width: min-sm) and (max-width: max-sm)

  .sidebarpagecontainer
    padding-top 69px

/***** MEDIA  *****/

@media (max-width: 575px)

  .sidebarpagecontainer
    padding-top 69px

  .sidebarSticky
    top 69px

  .sidebar
    position fixed