UNPKG

4.62 kBSCSSView Raw
1%scrollable {
2 overflow-x: hidden;
3 overflow-y: auto;
4}
5
6// conditionally showing the loading indicator displaces items when prepending.
7// a simple workaround is to make the loading indicator an overlay.
8%loading-indicator-container {
9 display: flex;
10 padding-top: var(--xs-p);
11 justify-content: center;
12 width: 100%;
13 position: absolute;
14}
15
16.str-chat-angular__message-list-host {
17 @extend %scrollable;
18}
19
20.str-chat__list.str-chat__list--thread {
21 .str-chat__reverse-infinite-scroll {
22 padding-top: 0;
23 }
24}
25
26.str-chat__list {
27 @extend %scrollable;
28 position: relative;
29 flex: 1;
30 -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
31 padding: 0;
32
33 &__loading {
34 @extend %loading-indicator-container;
35 }
36
37 .str-chat__reverse-infinite-scroll {
38 padding-top: 72px;
39 }
40
41 &-wrapper {
42 flex: 1;
43 position: relative;
44 display: flex;
45 flex-direction: column;
46 }
47
48 &--thread {
49 padding: var(--sm-p) 0 0 0;
50 }
51
52 &__center {
53 width: 100%;
54 display: flex;
55 justify-content: center;
56 }
57}
58
59.str-chat__ul {
60 display: block;
61 list-style-type: none;
62 padding: 0;
63 margin: 0;
64}
65
66.str-chat__custom-notification {
67 border-radius: var(--border-radius-sm);
68 font-size: var(--sm-font);
69 padding: var(--xs-p);
70 font-family: var(--second-font);
71 text-align: center;
72 margin-top: var(--xs-m);
73
74 &.notification-success {
75 background: var(--faded-green);
76 border: 1px solid var(--green);
77 color: var(--green);
78 }
79
80 &.notification-error {
81 background: var(--faded-red);
82 border: 1px solid var(--red);
83 color: var(--red);
84 }
85
86 &.notification-info {
87 background: var(--faded-blue);
88 border: 1px solid var(--blue);
89 color: var(--blue);
90 }
91}
92
93.str-chat__connection-issue {
94 background: var(--faded-red);
95 border: 1px solid var(--red);
96 color: var(--red);
97 border-radius: var(--border-radius-sm);
98 font-size: var(--sm-font);
99 padding: var(--xs-p);
100 font-family: var(--second-font);
101 text-align: center;
102}
103
104.str-chat__list-notifications,
105.str-chat__jump-to-latest-message {
106 padding: 0 var(--xl-p);
107 display: flex;
108 position: relative;
109 flex-direction: column;
110 justify-content: center;
111}
112
113.messaging {
114 &.str-chat {
115 .str-chat {
116 &__list.str-chat__list--thread {
117 .str-chat__reverse-infinite-scroll {
118 padding-top: 0;
119 }
120 }
121
122 &__list {
123 padding: 0 var(--xl-p) 0;
124 background: var(--white);
125
126 .str-chat__reverse-infinite-scroll {
127 padding-top: 56px;
128 }
129
130 &-notifications {
131 background: var(--white);
132 }
133 }
134 }
135
136 @media screen and (max-width: 960px) {
137 .str-chat {
138 &__list.str-chat__list--thread {
139 .str-chat__reverse-infinite-scroll {
140 padding-top: 0;
141 }
142 }
143
144 &__list {
145 padding: 0 var(--xs-p) 0;
146
147 .str-chat__reverse-infinite-scroll {
148 padding-top: 56px;
149 }
150
151 &-notifications,
152 .str-chat__jump-to-latest-message {
153 padding: 0 var(--xs-p);
154 }
155 }
156 }
157 }
158
159 &.dark {
160 .str-chat__list {
161 background: var(--white5);
162
163 &-notifications {
164 background: var(--white5);
165 }
166 }
167 }
168 }
169}
170
171.livestream {
172 &.str-chat {
173 .str-chat {
174 &__list.str-chat__list--thread {
175 .str-chat__reverse-infinite-scroll {
176 padding-top: 0;
177 }
178 }
179
180 &__list {
181 padding: 0 var(--xs-p);
182
183 .str-chat__reverse-infinite-scroll {
184 padding-top: 56px;
185 }
186 }
187 }
188 }
189}
190
191.commerce {
192 &.str-chat {
193 .str-chat {
194 &__list.str-chat__list--thread {
195 .str-chat__reverse-infinite-scroll {
196 padding-top: 0;
197 }
198 }
199
200 &__list {
201 padding: 0 var(--md-p) 0;
202
203 .str-chat__reverse-infinite-scroll {
204 padding-top: 72px;
205 }
206
207 &-notifications {
208 padding-left: var(--md-p);
209 padding-right: var(--md-p);
210 }
211 }
212 }
213 }
214}
215
216.str-chat__virtual-list {
217 position: relative;
218 flex: 1;
219 overflow-x: hidden;
220 overflow-y: auto;
221 -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
222 background: var(--white);
223 margin: 0;
224 width: 100%;
225 height: 100%;
226
227 &__loading {
228 @extend %loading-indicator-container;
229 }
230
231 p {
232 margin: 0 !important; // always use padding, margin mess up the height calculations
233
234 a {
235 white-space: pre-line;
236 overflow: hidden;
237 word-wrap: break-word;
238 }
239 }
240}
241
242.dark .str-chat__virtual-list {
243 background: var(--white5);
244}