tracim_v2/frontend/src/css/Dashboard.styl

flexwrap()
  display flex
  flex-wrap wrap

btnNotification()
  margin 20px 0
  border 1px solid thirdColor
  padding 10px 15px

hoverfocus()
  background-color thirdColor
  color white

bgandcolor()
  background-color transparent
  color thirdColor

label()
  font-weight 500
  font-size 18px
  color thirdColor

coloricon()
  .fa-gavel
    color responsable
  .fa-graduation-cap
    color gestionnaire
  .fa-pencil
    color contributeur
  .fa-eye
    color lecteur

.dashboard
  width 100%
  &__header
    flexwrap()
    align-items center
    justify-content space-between
    &__title
      width auto
      &__text
        margin 0
    &__advancedmode
      cursor pointer
  &__workspace-wrapper
    flexwrap()
  &__workspace
    margin-right 20px
    width calc(65% - 20px) //20px => margin-right
    &__title
      margin-bottom 20px
      font-size 40px
      font-weight 500
      color darkthirdColor
    &__detail
      margin-bottom 20px
      font-size 18px
  &__userstatut
    width 35%
    &__role
      margin 20px 0
      font-size 18px
      &__msg
        margin-right 15px
      &__definition
        display flex
        &__icon
          margin-right 15px
          color gestionnaire
    &__notification
      font-size 18px
      &__btn
        btnNotification()
        cursor pointer
      &__subscribe
        &__btn
          btnNotification()
        &__submenu
          padding 0
          &__item
            padding 10px
  &__calltoaction
    flexwrap()
    margin 100px 0
    &__button
      &:active
        box-shadow inset 0px 0px 5px 2px #656565
      &__text
        color white
        &__icon
          font-size 30px
        &__title
          font-size 18px
  &__workspaceInfo
    flexwrap()
  &__activity
    margin 0 35px 50px 0
    width 60%
    &__wrapper
      border 1px solid grey
      height 480px
      overflow-y scroll
    &__header
      display flex
      justify-content space-between
      align-items center
      margin-bottom 20px
      height 44px
      &__allread
        padding 10px 25px
        font-size 18px
        cursor pointer
    &__workspace
      display flex
      align-items center
      border-bottom 1px solid grey
      padding 15px
      cursor pointer
      &:hover
        background-color fourthColor
      &:nth-child(even)
        background-color grey-hover
        &:hover
          background-color fourthColor
      &__icon
        margin 0 25px
        font-size 25px
      &__name
        font-size 18px
        font-weight 500
        span
          font-weight 400
    &__more
      &__btn
        margin 15px
        padding 10px 25px
        cursor pointer
  &__moreinfo
    display flex
    justify-content space-between
    flexwrap wrap
    &__webdav
      margin 0 15px 40px 0
      &__btn
        width 300px
      &__information
        width 300px
    &__calendar
      margin-bottom 100px
      &__wrapperBtn
        margin-right 290px
      &__btn
        width 300px
      &__information
        width 300px

/**** MEDIAQUERIES *****/

/**** MEDIA 576px & 1199px ****/

// Regroup the common rules

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

  .dashboard
    &__workspace
      width auto
    &__userstatut
      width auto
    &__calltoaction
      justify-content center
    &__activity
      width 100%
    &__memberlist
      width 50%

/**** MEDIA 992px & 1199px ****/

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

  .dashboard
    margin-left 15px

/**** MEDIA 768px & 991px ****/

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

  .dashboard
    &__activity
      margin 25px 15px 25px 0

/**** MEDIA 576px & 767px ****/

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

  .dashboard
    &__activity
      margin 25px 15px 25px 0
    &__memberlist
      margin 50px 0
      width 90%
    &__moreinfo__webdav__information
      width 500px

/**** MEDIA 575px ****/

@media (max-width: max-xs)

  position()
    margin-left 10px
    width auto

  .dashboard
    margin-left 0
    &__title
      margin-left 10px
    &__workspace
      position()
    &__userstatut
     position()
    &__calltoaction
      justify-content center
      &__button
        margin 10px
    &__activity
      margin 25px 0
      width 100%
      &__header
        display block
        height auto
        margin 0 15px 20px 15px
        &__title
          margin-bottom 20px
    &__memberlist
      margin 50px 0
      width 100%
      &__title
        margin-left 10px
      &__wrapper
        height auto
      &__list
        height auto
        overflow-Y visible
        &__item:nth-last-child(1)
          border-bottom 1px solid grey
      &__btnadd
        border-top 0
    &__moreinfo
      &__webdav
        margin-left 10px
        &__information
          width 350px