tracim_v2/src/css/PageText.styl

.wsFileText
  width 1200px
  height calc(100% - 85px)
  overflow-Y auto
  &__header
    background-color orange
  &__contentpage
    display flex
    overflow-Y auto
    &__textnote
      margin 10px
      border-radius 10px
      padding 25px
      width 55%
      height 100%
      background-color off-white
      &__latestversion
        text-align right
        opacity 0.7
      &__title
        margin 10px 0
        font-size 30px
        color orange
      &__data
        flex-grow 1
        flex-shrink 1
        flex-basis 0
    &__wrapper
      margin 10px
      border-radius 10px
      width 45%
      height 100%
      background-color off-white
    &__header
      border-top-left-radius 10px
      border-top-right-radius 10px
      padding 10px 0
      text-align center
      font-size 20px
      color dark-grey
      background-color hover-grey
    &__messagelist
      min-height 300px
      &__item
        &__content
          color dark-grey
      &__version
        margin-top 40px
        background-color hover-grey
        &__btn
          padding 5px 25px
          border-radius 5px
          width 145px
          color white
          font-size 17px
          background-color orange
          & > i
            margin-right 10px
            color dark-grey
            font-size 22px
          &:hover
            background-color dark-orange
          &:focus
            background-color dark-orange
        &__date
          color orange
          font-size 17px
    &__texteditor
      &__simpletext
        &__input
          &:focus
            color orange
            border-color orange
      &__submit
        &__btn
          border-color orange
          background-color orange
          color white
          &:hover
            border-color orange
            background-color orange
          &:focus
            border-color orange
            background-color orange

/***** CLASS MESSAGELISTSIZE *****/

.messagelistOpen
  .wsFileText__contentpage__messagelist
    flex 0
    min-height 0

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

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

.received
  .wsFileText__contentpage__messagelist__item__content
      background-color orange

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

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

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

  .wsFileText
    &__contentpage
      display block
      overflow-Y scroll
      &__textnote
        margin-right 10px
        padding 10px 20px
        width auto
        overflow-Y hidden
        &__latestversion
          padding-top 10px
      &__wrapper
        width auto
      &__texteditor
        &__simpletext
          display inline-flex
          display ms-inline-flex
          width 60%
        &__submit
          display inline-flex
          display ms-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)

  .wsFileText
    width 692px
    &__contentpage__texteditor__simpletext
      margin-left 15px

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

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

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

  .wsFileText
    width 768px
    &__contentpage__texteditor__simpletext
      margin-left 25px

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

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

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

  .wsFileText
      top 69px
      width 576px
      height calc(100% - 69px)
      &__contentpage__texteditor__simpletext
        margin-left 10px

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

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

@media (max-width: max-xs)

  .wsFileText
    top 70px
    height calc(100% - 70px)
    width 100%
    box-shadow none
    &__contentpage
      display block
      overflow-Y scroll
      &__textnote
        margin-right 10px
        width auto
        overflow-Y hidden
        font-size 15px
      &__wrapper
        width auto
      &__messagelist
        &__item
          padding 0 35px 20px 30px
        &__version
          &__btn
            font-size 17px
            vertical-align middle
          &__dateversion
            font-size 15px
      &__texteditor
        &__simpletext
          margin 10px 0
          display flex
          width 95%
          margin-left 10px
        &__submit
          &__btn
            display flex
            margin 0 auto
            &__icon
              margin-left 10px