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 margin-left 20px 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 flexwrap() 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 &__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 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 &__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 fourthColor &:nth-last-child(1) border-bottom 0 &:nth-child(even) background-color grey-hover &:hover background-color fourthColor &__avatar margin-right 20px & > img width 50px height 50px &__info &__name font-size 20px &__role font-size 18px &__delete font-size 20px color darkGrey 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 fontColor cursor pointer &__form padding 15px flex-direction column height 100% width 100% background-color off-white &__close font-size 20px & > i 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 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