|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Chats
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .chatbox {
|
|
|
8 color: #444;
|
|
|
9 small {
|
|
|
10 color: #444;
|
|
|
11 }
|
|
|
12
|
|
|
13 > [class*="col"] {
|
|
|
14 height: 100%;
|
|
|
15 display: flex;
|
|
|
16 flex-direction: column;
|
|
|
17 }
|
|
|
18 }
|
|
|
19
|
|
|
20 .chatbox-body {
|
|
|
21 flex: 1;
|
|
|
22 }
|
|
|
23
|
|
|
24 .chatbox-header {
|
|
|
25 @extend %border-bottom;
|
|
|
26 height: rem(110);
|
|
|
27 display: flex;
|
|
|
28 align-items: center;
|
|
|
29 }
|
|
|
30
|
|
|
31 .chatbox-user-list {
|
|
|
32 .user-name {
|
|
|
33 line-height: 1;
|
|
|
34 }
|
|
|
35 small {
|
|
|
36 font-size: em(10);
|
|
|
37 }
|
|
|
38 .icon-box header a {
|
|
|
39 border: 1px solid rgba($content-color, .2);
|
|
|
40 }
|
|
|
41 .user-list-single {
|
|
|
42 padding: 0 ($spacer * 1);
|
|
|
43 position: relative;
|
|
|
44 margin-bottom: ($spacer * 1.5);
|
|
|
45 }
|
|
|
46 }
|
|
|
47
|
|
|
48 .chatbox-messages {
|
|
|
49 padding: $spacer;
|
|
|
50 .message {
|
|
|
51 margin-bottom: $spacer;
|
|
|
52 flex-flow: row-reverse;
|
|
|
53 align-items: flex-start;
|
|
|
54 figure {
|
|
|
55 margin-left: $spacer;
|
|
|
56 }
|
|
|
57 .media-body {
|
|
|
58 display: flex;
|
|
|
59 flex-direction: column;
|
|
|
60 align-items: flex-end;
|
|
|
61 }
|
|
|
62 p {
|
|
|
63 max-width: 50%;
|
|
|
64 margin-bottom: .5em;
|
|
|
65 padding: .5em 1em;
|
|
|
66 background: $color-scheme;
|
|
|
67 color: #fff;
|
|
|
68 border-radius: 3px;
|
|
|
69 position: relative;
|
|
|
70 &:first-child {
|
|
|
71 margin-top: .5em;
|
|
|
72 &::after,
|
|
|
73 &::before {
|
|
|
74 content: '';
|
|
|
75 @include position(absolute, 50% -7px null null);
|
|
|
76 @include size(0);
|
|
|
77 display: block;
|
|
|
78 border-style: solid;
|
|
|
79 border-width: 5px 0 5px 7px;
|
|
|
80 border-color: transparent transparent transparent $color-scheme;
|
|
|
81 transform: translateY(-50%);
|
|
|
82 border-radius: 0;
|
|
|
83 border-top-left-radius: 3px;
|
|
|
84 border-bottom-left-radius: 3px;
|
|
|
85 }
|
|
|
86 }
|
|
|
87 }
|
|
|
88 &.reply {
|
|
|
89 flex-flow: row;
|
|
|
90 align-items: flex-start;
|
|
|
91 .media-body {
|
|
|
92 align-items: flex-start;
|
|
|
93 }
|
|
|
94 figure {
|
|
|
95 margin-left: auto;
|
|
|
96 margin-right: $spacer;
|
|
|
97 }
|
|
|
98 p {
|
|
|
99 color: $content-color;
|
|
|
100 background: #fff;
|
|
|
101 border: 1px solid $theme-border-color;
|
|
|
102 border-radius: 3px;
|
|
|
103 &:first-child {
|
|
|
104 border-top-right-radius: 3px;
|
|
|
105 border-bottom-right-radius: 3px;
|
|
|
106 &::before {
|
|
|
107 @include position(null, null auto null -8px);
|
|
|
108 border-width: 5px 7px 5px 0;
|
|
|
109 border-color: transparent $theme-border-color transparent transparent;
|
|
|
110 }
|
|
|
111 &::after {
|
|
|
112 @include position(null, null auto null -7px);
|
|
|
113 border-width: 5px 7px 5px 0;
|
|
|
114 border-color: transparent #fff transparent transparent;
|
|
|
115 }
|
|
|
116 }
|
|
|
117 }
|
|
|
118 }
|
|
|
119 }
|
|
|
120
|
|
|
121 body.rtl & {
|
|
|
122 .message {
|
|
|
123 figure {
|
|
|
124 margin-left: 0;
|
|
|
125 margin-right: $spacer;
|
|
|
126 }
|
|
|
127 p {
|
|
|
128 &:first-child {
|
|
|
129 border-radius: 0;
|
|
|
130 border-top-right-radius: 3px;
|
|
|
131 border-bottom-right-radius: 3px;
|
|
|
132 &::before,
|
|
|
133 &::after {
|
|
|
134 right: auto;
|
|
|
135 left: -7px;
|
|
|
136 border-width: 5px 7px 5px 0;
|
|
|
137 border-color: transparent $color-scheme transparent transparent;
|
|
|
138 }
|
|
|
139 }
|
|
|
140 }
|
|
|
141 &.reply {
|
|
|
142 p {
|
|
|
143 &:first-child {
|
|
|
144 border-radius: 0;
|
|
|
145 border-top-left-radius: 3px;
|
|
|
146 border-bottom-left-radius: 3px;
|
|
|
147 &::before,
|
|
|
148 &::after {
|
|
|
149 left: auto;
|
|
|
150 right: -7px;
|
|
|
151 border-width: 5px 0 5px 7px;
|
|
|
152 border-color: transparent transparent transparent $theme-border-color;
|
|
|
153 }
|
|
|
154
|
|
|
155 &::after {
|
|
|
156 right: -6px;
|
|
|
157 border-color: transparent transparent transparent #fff;
|
|
|
158 }
|
|
|
159 }
|
|
|
160 }
|
|
|
161
|
|
|
162 figure {
|
|
|
163 margin-right: 0;
|
|
|
164 margin-left: $spacer;
|
|
|
165 }
|
|
|
166 }
|
|
|
167 }
|
|
|
168 }
|
|
|
169 }
|
