tracim_v2/src/css/File.styl

// @Côme - this file is deprecated as its associated jsx file is deprecated
.wsFileFile
  width 1200px
  height calc(100% - 85px)
  &__header
    background-color fileColor
    &__editionmode
      display none
    .fa-file-image-o
      color white
  &__option
    &__menu
      display flex
      &__addversion
        padding 8px 15px
        border 1px solid fileColor
        border-radius 5px
        background-color transparent
        color fileColor
        cursor pointer
        & > i
          margin-left 10px
        &:hover
          background-color fileColor
          border none
          color white
  &__contentpage
    display flex
    height 100%
    &__preview
      position relative
      margin 10px
      border-radius 10px
      width 60%
      height calc(100% - 150px) // margin + height of header and option
      background-color off-white
      &__sidebar
        display flex
        position absolute
        top 0
        right 0
        height 100%
        &__button
          display flex
          flex-direction column
          align-items center
          width 50px
          height 100%
          background-color grey
          cursor pointer
          &:hover
            background-color fileColor
          &__icon
            justify-content flex-start
            font-size 30px
            color white
          &__title
            margin-top 45px
            color white
            transform rotate(-90deg)
        &__property
          width 0
          overflow-X hidden
          background-color off-white
          transition width 0.5s
          &__detail
            padding 20px
            width 410px
            &__size
              margin-bottom 20px
            &__description
              &__editiondesc
                display none
                margin 20px 0
                textarea
                  width 100%
                  height 250px
                &__validate
                  margin 30px auto
                  width 150px
            &__btndesc
              display block
              margin 15px 0
              width 200px
      &__dloption
        display flex
        justify-content center
        padding-top 10px
        &__icon
          margin-right 20px
          font-size 20px
          cursor pointer
          &:hover , &:focus
            color fileColor
      &__slider
        display flex
        align-items center
        width calc(100% - 50px) // 50px => width of sidebar
        height calc(100% - 40px) // 40px => height of dloption
        &__fileimg
          display flex
          flex-direction column
          justify-content center
          padding 30px
          width 100%
          height 100%
          & > img
            max-height 100%
            max-width 100%
        &__icon
          margin 0 5px
          font-size 20px
          cursor pointer
    &__wrapper
      width 40%
      height calc(100% - 150px) // margin + height of header and option
      overflow-Y auto
      .timeline
        &__messagelist
          min-height 300px
          &__version
            &__btn
              background-color fileColor
              &:hover , &:focus
                background-color lightFileColor
        &__texteditor
          &__simpletext
            &__input
              &:focus
                color fileColor
                border-color fileColor
          &__submit
            &__btn
              border-color fileColor
              background-color fileColor
              color white
              &:hover , &:focus
                border-color fileColor
                background-color fileColor

/***** SENDER RECEIVER *****/

.received
  .wsFileFile__contentpage__messagelist__item__content
      background-color fileColor

/***** ACTIVE SIDEBAR *****/

.activesidebar
  .wsFileFile__contentpage__preview
    &__sidebar
      border-radius 0 10px 10px 0
      &__button
        background-color fileColor
      &__property
        width 450px
        overflow-Y auto
        color fileColor

.activeEditionTitle
  .wsFileFile__header
    &__editionmode
      display block
    &__title
      display none

.activeEditionDesc
  .wsFileFile__contentpage__preview__sidebar__property__detail
    &__description
      &__editiondesc
        display block
    &__btndesc
      display none

/****** MEDIA QUERIES ********/

// Regroup the common css rules mediaqueries into a single media to lighten the code

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

  .wsFileFile
    overflow-Y auto
    &__contentpage
      display block
      &__preview
        display flex
        flex-direction column
        width calc(100% - 30px) // 30px => margin
      &__wrapper
        width calc(100% - 30px) // 30px => margin
        .timeline
          &__texteditor
            &__simpletext
              display inline-flex
              width 60%
            &__submit
              display inline-flex
              margin 10px 0
              &__btn
                display flex
                margin-left 35px
                &__icon
                  margin-left 15px

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

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

//   .wsFileFile
//     width 900px
//     overflow-Y auto

// /******************************/

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

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

//   .wsFileFile
//     width 100%

// /******************************/

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

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

//   .wsFileFile
//     top 69px
//     width 100%
//     height calc(100% - 69px) // 69px => top rules
//     overflow-Y scroll

// /******************************/

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

// @media (max-width: max-xs)

//   .activesidebar
//     .wsFileFile__contentpage__preview
//       &__sidebar
//         &__property
//           width 300px

//   .wsFileFile
//     top 69px
//     width 100%
//     height calc(100% - 69px) // 69px => top rules
//     overflow-Y scroll
//     &__option__menu__addversion
//         padding 8px 5px
//         & > i
//           display none
//     &__contentpage
//       display block
//       &__preview
//         display flex
//         flex-direction column
//         width calc(100% - 30px) // 30px => margin
//       &__wrapper
//         width calc(100% - 30px) // 30px => margin
//         .timeline
//           &__texteditor
//             &__simpletext
//               display inline-flex
//               width 60%
//               margin-right 0
//             &__submit
//               display inline-flex
//               margin 10px 0
//               &__btn
//                 display flex
//                 margin-left 10px
//                 &__icon
//                   margin-left 15px