tracim_v2/src/css/index.styl

@import "../../node_modules/tracim_lib/src/css/Variable.styl"

btncolor()
  background-color htmlColor
  box-shadow 0 0 1px 2px htmlColor
  color off-white

btnState()
  background-color darkHtmlColor
  color off-white

.html-documents
  width 1155px
  &__header
    background-color htmlColor
    &__editionmode
      display none
    &__icon
      .fa-file-text-o
        color white
  .newversionbtn
    border-color htmlColor
    color fontColor
    &:hover, &:focus, &:visited, &:active
      btnState()
      border-color darkHtmlColor
      box-shadow none
  .optionicon
    &:hover, &:focus, &:active
      color htmlColor
  .selectStatus
    .dropdown-item
      &:hover, &:focus, &:active, &visited, &:focus-within
        background-color htmlColor
        color off-white
  &__editionmode
    &__cancel
      border-color htmlColor
      color htmlColor
      &:hover, &:focus, &:active, &:visited, &focus-within
        border-color htmlColor
        btncolor()
    &__submit
      border-color htmlColor
      color htmlColor
      &:hover, &:focus, &:active, &:visited, &focus-within
        border-color htmlColor
        btncolor()
  &__contentpage
    &__textnote
      margin 10px
      border-radius 10px
      padding 25px
      height 100%
      background-color off-white
      &__latestversion
        text-align right
        opacity 0.7
      &__text
        font-size 14px
      &__edition
        display none
    &__messagelist
      // min-height 300px
      &__item
        &__avatar
          background-color htmlColor
        &__content
          color darkGrey
      &__version
        margin-top 40px
        background-color grey-hover
        &__btn
          padding 5px 25px
          border-radius 5px
          width 145px
          color white
          font-size 17px
          background-color htmlColor
          & > i
            margin-right 10px
            color darkGrey
            font-size 22px
          &:hover, &:focus
            btnState()
        &__date
          color fontColor
          font-size 17px
    &__texteditor
      &__advancedtext
        &__btn
          color fontColor
          border-color htmlColor
          &:hover ,&:focus, &:visited, &:active
            btnState()
            border-color darkHtmlColor
            box-shadow none
      &__submit
        &__btn
          background-color htmlColor
          color white
          &:hover, &:focus, &:visited, &:active
            background-color darkHtmlColor

.messagelistOpen
  .page__contentpage__messagelist
    flex 0
    min-height 0

.received
  .page__contentpage__messagelist__item__content
    background-color htmlColor

@media (min-width: max-xs) and (max-width: max-lg)
  .page
    &__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
          width 60%
        &__submit
          display inline-flex
          margin 10px 0
          &__btn
            display flex
            margin-left 35px
            &__icon
              margin-left 15px

@media (min-width: min-lg) and (max-width: max-lg)
  .page
    width 692px
    &__contentpage__texteditor__simpletext
      margin-left 15px

@media (min-width: min-md) and (max-width: max-md)
  .page
    width 768px
    &__contentpage__texteditor__simpletext
      margin-left 25px

@media (min-width: min-sm) and (max-width: max-sm)
  .page
    top 69px
    width 576px
    height calc(100% - 69px)
    &__contentpage__texteditor__simpletext
      margin-left 10px

@media (max-width: max-xs)
  .page
    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