UNPKG

6.13 kBSCSSView Raw
1.str-chat__input-flat {
2 background: var(--white);
3 padding: var(--xs-p) var(--xl-p);
4 position: relative;
5 z-index: 1;
6 width: 100%;
7
8 &-quoted {
9 border-top: 1px solid var(--black10);
10
11 .quoted-message-preview {
12 display: flex;
13 flex-direction: column;
14 align-items: center;
15 margin-bottom: var(--xs-m);
16 width: 100%;
17 position: relative;
18
19 &-header {
20 font-size: var(--md-font);
21 margin-bottom: var(--xs-m);
22
23 .str-chat__square-button {
24 position: absolute;
25 right: 0;
26 top: 0;
27 margin: unset;
28 padding: var(--xs-p);
29 border-radius: var(--border-radius);
30 cursor: pointer;
31 }
32 }
33
34 &-content {
35 display: flex;
36 align-items: flex-end;
37 background: var(--grey-whisper);
38 border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
39 max-width: 60%;
40 padding: var(--xs-p) var(--sm-p);
41
42 &-inner {
43 display: flex;
44 text-align: start;
45 align-items: flex-end;
46 word-break: break-all;
47 word-wrap: break-word;
48
49 .str-chat__message-attachment {
50 margin: 0;
51
52 &--image {
53 width: 48px;
54 }
55
56 &--img,
57 &--card {
58 border-radius: var(--border-radius-md);
59 max-height: 48px;
60 max-width: 48px;
61 width: 100%;
62 }
63
64 &--file {
65 min-width: 33%;
66 }
67
68 &-file {
69 &--item {
70 background: var(--white);
71 border-radius: var(--border-radius-md);
72 border-left: none;
73 padding: 0 var(--xs-p);
74 }
75 }
76
77 &-card--image {
78 border: none;
79 border-radius: var(--border-radius-md);
80 }
81 }
82
83 :nth-child(2) {
84 margin-left: var(--xs-m);
85 }
86 }
87 }
88
89 .str-chat__message-attachment-card {
90 margin: 0;
91 min-height: unset;
92
93 .str-chat__message-attachment-card--content {
94 display: none;
95 }
96 }
97 }
98 }
99
100 &-has-attachments {
101 .str-chat__send-button {
102 display: block;
103 }
104 }
105
106 &-wrapper {
107 display: flex;
108 flex-wrap: wrap;
109 }
110
111 .str-chat__textarea {
112 flex: 1;
113
114 &.str-chat-angular__textarea {
115 position: relative;
116 }
117 }
118
119 .str-chat__textarea > textarea {
120 min-height: 56px;
121 background: var(--grey-whisper);
122 border-radius: var(--border-radius-md);
123 padding: 20px 69px;
124 font-size: var(--lg-font);
125 line-height: 17px;
126 border: none;
127 margin: 0;
128
129 &:focus {
130 border: none;
131 color: var(--black);
132 border-radius: var(--border-radius-md);
133 box-shadow: 0 0 0 3px var(--primary-color);
134 }
135 }
136
137 &-footer {
138 padding: var(--xs-p) var(--xl-p);
139 background: var(--white);
140 }
141
142 &-emojiselect {
143 position: absolute;
144 top: calc(100% - 45px);
145 left: 25px;
146 border: none;
147 cursor: pointer;
148 padding: 0;
149 background-color: transparent;
150
151 &.str-chat-angular__emojiselect {
152 max-width: 28px;
153 top: 50%;
154 transform: translateY(-50%);
155 cursor: initial;
156 }
157
158 svg {
159 fill: var(--black);
160 opacity: 0.5;
161
162 &:hover {
163 opacity: 1;
164 }
165 }
166 }
167
168 &-cooldown {
169 display: flex;
170 align-items: center;
171 justify-content: flex-end;
172 padding-left: var(--xs-p);
173
174 .str-chat__message-input-cooldown-text {
175 font-size: var(--xl-font);
176 font-weight: var(--font-weight-bold);
177 display: flex;
178 align-items: center;
179 justify-content: center;
180 width: 50px;
181 height: 50px;
182 background-color: var(--grey);
183 color: var(--white);
184 border-radius: var(--border-radius-round);
185 }
186 }
187
188 &--textarea-wrapper {
189 display: flex;
190 flex-wrap: wrap;
191 flex: 1 0;
192 position: relative;
193
194 .str-chat__fileupload-wrapper {
195 .str-chat__tooltip {
196 bottom: 45px;
197 right: 25px;
198 }
199 }
200
201 .str-chat__emojiselect-wrapper {
202 .str-chat__tooltip {
203 bottom: 50px;
204 left: 32px;
205 right: unset;
206
207 &::after {
208 left: 5px;
209 right: unset;
210 }
211 }
212 }
213 }
214
215 .str-chat__input--emojipicker {
216 left: 0;
217 right: auto;
218 }
219
220 .rfu-dropzone {
221 width: 100%;
222 }
223
224 .rfu-file-previewer {
225 width: 100%;
226 }
227
228 .rfu-file-upload-button {
229 position: absolute;
230 top: calc(100% - 40px);
231 right: 25px;
232
233 svg {
234 fill: var(--black);
235 opacity: 0.5;
236
237 &:hover {
238 opacity: 1;
239 }
240 }
241 }
242}
243
244.rfu-image-previewer,
245.rfu-image-previewer-angular-host {
246 flex: 1 1 100%;
247
248 &__image {
249 width: 60px !important;
250 height: 60px !important;
251
252 .rfu-thumbnail__wrapper {
253 width: 60px !important;
254 height: 60px !important;
255 border-radius: var(--border-radius-md);
256
257 .rfu-thumbnail__overlay,
258 .rfu-icon-button {
259 padding: 0;
260
261 svg {
262 opacity: 0.9;
263 height: 25px;
264 width: 25px;
265
266 path {
267 fill: var(--white-snow);
268 }
269 }
270 }
271 }
272 }
273
274 .rfu-thumbnail-placeholder {
275 width: 60px;
276 height: 60px;
277 border-radius: var(--border-radius-md);
278 }
279}
280
281.commerce.str-chat {
282 .str-chat__input-flat {
283 padding: 8px 24px;
284 background: transparent;
285 }
286}
287
288.dark.str-chat {
289 .str-chat__input-flat {
290 background: var(--white5);
291
292 textarea {
293 background: var(--white5);
294 border-radius: var(--border-radius-md);
295 color: var(--white);
296 }
297
298 &-emojiselect,
299 .rfu-file-upload-button {
300 svg {
301 fill: var(--white);
302 }
303 }
304
305 &-quoted .quoted-message-preview-content {
306 background: var(--black20);
307 }
308 }
309
310 &.commerce {
311 .str-chat__input-flat {
312 background: none;
313 }
314 }
315}
316
317@media screen and (max-width: 960px) {
318 .str-chat.messaging {
319 .str-chat__input-flat {
320 padding: var(--xs-p) var(--xs-p);
321 }
322 }
323}