123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- .timeline
- display flex
- flex-direction column
- margin 10px
- border-radius 10px
- height 100%
- &__header
- border-radius 10px 10px 0 0
- padding 15px
- text-align center
- font-size 20px
- color darkGrey
- background-color grey-hover
- &__messagelist
- flex 1 1 0
- margin-bottom 0
- padding-left 0
- border-bottom 1px solid grey
- background-color off-white
- overflow-Y auto
- list-style none
- &__item
- padding 0 25px 20px 35px
- &__avatar
- position relative
- top 43px
- left -25px
- width 45px
- height 45px
- &__createhour
- margin-left 30px
- opacity 0.7
- font-size 14px
- &__content
- border 1px solid grey
- border-radius 5px
- padding 15px
- background-color off-white
- font-size 15px
- z-index -1
- &__version
- display flex
- justify-content space-between
- margin-top 40px
- padding 10px 15px
- width 100%
- background-color lightGrey
- &__btn
- padding 5px 25px
- border-radius 5px
- width 145px
- color white
- font-size 17px
- & > i
- margin-right 10px
- color darkGrey
- font-size 22px
- &__date
- color fontColor
- font-size 17px
- margin auto 0
- &__texteditor
- padding 2px
- &__simpletext
- display none
- width 70%
- margin-right 35px
- &__icon
- cursor pointer
- &__wysiwyg
- display block
- & > textarea
- width 100%
- height 130px
- &__submit
- margin 10px 0
- &__btn
- display flex
- cursor pointer
- &:hover , &:focus
- box-shadow shadow-all-btn
- &__icon
- margin-left 10px
-
- .sended
- .timeline__messagelist__item__content
- margin-right 25%
-
- .received
- .timeline__messagelist__item
- &__avatar
- left 93%
- &__createhour
- text-align right
- margin-right 50px
- &__content
- margin-left 25%
- color white
-
- /**** MEDIA 992px & 1199px ****/
-
- @media (min-width: min-lg) and (max-width: max-lg)
-
- .timeline__messagelist__item
- margin-right 55px
-
- .received
- .timeline__messagelist__item
- &__avatar
- left 96%
-
- /**** MEDIA 768px & 991px ****/
-
- @media (min-width: min-md) and (max-width: max-md)
-
- .timeline__messagelist__item
- margin-right 55px
-
- .received
- .timeline__messagelist__item
- &__avatar
- left 96%
-
- /**** MEDIA 576px & 767px ****/
-
- @media (min-width: min-sm) and (max-width: max-sm)
-
- .timeline__messagelist__item
- margin-right 35px
-
- .received
- .timeline__messagelist__item
- &__avatar
- left 94%
-
- /**** MEDIA 575px ****/
-
- @media (max-width: max-xs)
-
- .received
- .timeline__messagelist__item
- &__avatar
- left 90%
|