tracim_v2/src/css/Dashboard.styl

flexwrap()
  display flex
  flex-wrap wrap

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

hoverfocus()
  background-color blue
  color white

bgandcolor()
  background-color transparent
  color blue

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

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

.dashboard
  margin-left 20px
  &__header
    flexwrap()
    align-items center
    justify-content space-between
    &__title
      width auto
      &__text
        margin 0
    &__advancedmode
      cursor pointer
  &__wkswrapper
    flexwrap()
  &__workspace
    margin-right 20px
    width calc(65% - 20px) //20px => margin-right
    &__title
      margin-bottom 20px
      font-size 40px
      font-weight 500
      color darkBlue
    &__detail
      margin-bottom 20px
      font-size 18px
  &__userstatut
    width 35%
    &__role
      flexwrap()
      margin 20px 0
      font-size 18px
      &__text
        margin-right 15px
      &__rank
        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
        &__icon
          font-size 30px
          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o, .fa-video-camera
              color white
        &__title
          font-size 18px
          color white
    .thread
      background-color threadColor
    .writefile
      background-color writefile
    .importfile
      background-color importfile
    .visioconf
      background-color grey-hover
    .calendar
      background-color calendar
    .explore
      background-color explore
  &__wksinfo
    flexwrap()
    margin-top 150px
  &__activity
    margin 0 35px 50px 0
    width 60%
    &__header
      display flex
      justify-content space-between
      align-items center
      margin-bottom 20px
      height 44px
      &__allread
        padding 10px 25px
        font-size 18px
        cursor pointer
    &__wrapper
      border 1px solid grey
      height 480px
    &__workspace
      display flex
      align-items center
      border-bottom 1px solid grey
      padding 15px
      cursor pointer
      &:hover
        background-color folder-hover
      &:nth-child(even)
        background-color grey-hover
        &:hover
          background-color folder-hover
      &__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
  &__memberlist
    margin 0 0 50px 0
    width 35%
    &__title
      margin-bottom 20px
      padding 6px
      height 45px
    &__wrapper
      position relative
      border 1px solid grey
      height 480px
    &__list
      margin 0
      padding 0
      list-style none
      height 400px
      overflow-Y scroll
      &__item
        display flex
        border-bottom 1px solid grey
        padding 10px 15px
        &:hover
          background-color folder-hover
        &:nth-last-child(1)
          border-bottom 0
        &:nth-child(even)
          background-color grey-hover
          &:hover
            background-color folder-hover
        &__avatar
          margin-right 20px
          width 50px
          height 50px
        &__info
          &__name
            font-size 20px
          &__role
            font-size 18px
        &__delete
          font-size 20px
          color blue
          cursor pointer
    &__btnadd
      border-top 1px solid grey
      padding 15px
      &__button
        display flex
        align-items center
        &__avatar
          display flex
          justify-content center
          align-items center
          margin-right 20px
          border 2px dashed grey
          border-radius 50%
          width 50px
          height 50px
          cursor pointer
          &__icon
            color grey
            font-size 25px
        &__text
          font-size 18px
          color blue
          cursor pointer
    &__form
      padding 15px
      flex-direction column
      height 100%
      width 100%
      background-color off-white
      &__close
        font-size 20px
        cursor pointer
      &__member
        &__name
          .name__label
            margin 30px 0 20px 0
            label()
          .name__input
            margin-bottom 20px
            border 1px solid grey
            border-radius 10px
            padding 10px
            width 300px
        &__create
          display flex
          align-items center
          margin 15px 0
      &__role
        margin-bottom 15px
        coloricon()
        &__text
          margin 15px 0
          label()
        &__list
          display flex
          align-items center
          flex-wrap wrap
          margin 0
          padding 0
          list-style none
          &__item
            display flex
            align-items center
            margin 10px 25px 10px 0
            .item
              &__text
                display flex
      &__submitbtn
        display flex
        justify-content flex-end
        & > button
          padding 8px 30px
          cursor pointer
  &__moreinfo
    display flex
    justify-content space-between
    flexwrap wrap
    &__webdav
      margin-bottom 40px
      &__btn
        width 300px
      &__information
        width 550px
    &__calendar
      margin-bottom 100px
      &__wrapperBtn
        margin-right 300px
      &__btn
        width 300px
      &__information
        width 550px

/**** 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