Skip to content

Commit 9195c7d

Browse files
antoine92190antoine92190
committed
(refacto) add css custom prefix
1 parent f5fe787 commit 9195c7d

File tree

11 files changed

+436
-408
lines changed

11 files changed

+436
-408
lines changed

‎src/ChatWindow/ChatWindow.vue

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="card-window" :style="[{ height }, cssVars]">
3-
<div class="chat-container">
2+
<div class="vac-card-window" :style="[{ height }, cssVars]">
3+
<div class="vac-chat-container">
44
<rooms-list
55
v-if="!singleRoom"
66
:currentUserId="currentUserId"
@@ -291,15 +291,7 @@ export default {
291291
<style lang="scss">
292292
@import '../styles/index.scss';
293293
294-
* {
295-
font-family: inherit;
296-
}
297-
298-
a {
299-
color: #0d579c;
300-
}
301-
302-
.card-window {
294+
.vac-card-window {
303295
width: 100%;
304296
display: block;
305297
max-width: 100%;
@@ -311,20 +303,28 @@ a {
311303
border: var(--chat-container-border);
312304
border-radius: var(--chat-container-border-radius);
313305
box-shadow: var(--chat-container-box-shadow);
314-
}
315306
316-
.chat-container {
317-
height: 100%;
318-
display: flex;
307+
* {
308+
font-family: inherit;
309+
}
319310
320-
input {
321-
min-width: 10px;
311+
a {
312+
color: #0d579c;
322313
}
323314
324-
textarea,
325-
input[type='text'],
326-
input[type='search'] {
327-
-webkit-appearance: none;
315+
.vac-chat-container {
316+
height: 100%;
317+
display: flex;
318+
319+
input {
320+
min-width: 10px;
321+
}
322+
323+
textarea,
324+
input[type='text'],
325+
input[type='search'] {
326+
-webkit-appearance: none;
327+
}
328328
}
329329
}
330330
</style>

‎src/ChatWindow/EmojiPicker.vue

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div class="wrapper">
2+
<div class="vac-wrapper">
33
<emoji-picker @emoji="append" :search="search">
44
<div
5-
class="svg-button"
6-
:class="{ 'button-reaction': emojiReaction }"
5+
class="vac-svg-button"
6+
:class="{ 'vac-button-reaction': emojiReaction }"
77
slot="emoji-invoker"
88
slot-scope="{ events: { click: clickEvent } }"
99
@click.stop="clickEvent"
@@ -18,24 +18,24 @@
1818
slot-scope="{ emojis, insert }"
1919
v-if="emojiOpened"
2020
>
21-
<transition name="slide-up" appear>
21+
<transition name="vac-slide-up" appear>
2222
<div
23-
class="emoji-picker"
24-
:class="{ 'picker-reaction': emojiReaction }"
23+
class="vac-emoji-picker"
24+
:class="{ 'vac-picker-reaction': emojiReaction }"
2525
:style="{
2626
height: `${emojiPickerHeight}px`,
2727
top: positionTop ? emojiPickerHeight : `${emojiPickerTop}px`,
2828
right: emojiPickerRight,
2929
display: emojiPickerTop || !emojiReaction ? 'initial' : 'none'
3030
}"
3131
>
32-
<div class="emoji-picker__search">
32+
<div class="vac-emoji-picker__search">
3333
<input type="text" v-model="search" />
3434
</div>
3535
<div>
3636
<div v-for="(emojiGroup, category) in emojis" :key="category">
3737
<h5 v-if="category !== 'Frequently used'">{{ category }}</h5>
38-
<div class="emojis" v-if="category !== 'Frequently used'">
38+
<div class="vac-emojis" v-if="category !== 'Frequently used'">
3939
<span
4040
v-for="(emoji, emojiName) in emojiGroup"
4141
:key="emojiName"
@@ -125,12 +125,12 @@ export default {
125125
</script>
126126

127127
<style lang="scss" scoped>
128-
.wrapper {
128+
.vac-wrapper {
129129
position: relative;
130130
display: flex;
131131
}
132132
133-
.emoji-picker {
133+
.vac-emoji-picker {
134134
position: absolute;
135135
z-index: 9999;
136136
bottom: 32px;
@@ -145,17 +145,17 @@ export default {
145145
0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.1);
146146
}
147147
148-
.picker-reaction {
148+
.vac-picker-reaction {
149149
position: fixed;
150150
top: initial;
151151
right: initial;
152152
}
153153
154-
.emoji-picker__search {
154+
.vac-emoji-picker__search {
155155
display: flex;
156156
}
157157
158-
.emoji-picker__search > input {
158+
.vac-emoji-picker__search > input {
159159
flex: 1;
160160
border-radius: 10rem;
161161
border: var(--chat-border-style);
@@ -165,37 +165,37 @@ export default {
165165
color: var(--chat-color);
166166
}
167167
168-
.emoji-picker h5 {
168+
.vac-emoji-picker h5 {
169169
margin: 15px 0 8px;
170170
color: #b1b1b1;
171171
text-transform: uppercase;
172172
font-size: 0.8rem;
173173
cursor: default;
174174
}
175175
176-
.emoji-picker .emojis {
176+
.vac-emoji-picker .vac-emojis {
177177
display: flex;
178178
flex-wrap: wrap;
179179
justify-content: space-between;
180180
}
181181
182-
.emoji-picker .emojis:after {
182+
.vac-emoji-picker .vac-emojis:after {
183183
content: '';
184184
flex: auto;
185185
}
186186
187-
.emoji-picker .emojis span {
187+
.vac-emoji-picker .vac-emojis span {
188188
padding: 0.2rem;
189189
cursor: pointer;
190190
border-radius: 5px;
191191
}
192192
193-
.emoji-picker .emojis span:hover {
193+
.vac-emoji-picker .vac-emojis span:hover {
194194
background: var(--chat-sidemenu-bg-color-hover);
195195
cursor: pointer;
196196
}
197197
198-
.button-reaction svg {
198+
.vac-button-reaction svg {
199199
height: 19px;
200200
width: 19px;
201201
}

‎src/ChatWindow/FormatMessage.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<template>
2-
<div :class="{ 'text-ellipsis': singleLine }">
3-
<div :class="{ 'text-ellipsis': singleLine }" v-if="textFormatting">
2+
<div :class="{ 'vac-text-ellipsis': singleLine }">
3+
<div :class="{ 'vac-text-ellipsis': singleLine }" v-if="textFormatting">
44
<template v-for="(message, i) in linkifiedMessage">
55
<component
66
:is="checkType(message, 'url') ? 'a' : 'span'"
77
:key="i"
88
:class="{
9-
'text-ellipsis': singleLine,
10-
'text-deleted': deleted,
11-
'text-bold': checkType(message, 'bold'),
12-
'text-italic': checkType(message, 'italic'),
13-
'text-strike': checkType(message, 'strike'),
14-
'text-underline': checkType(message, 'underline'),
15-
'text-inline-code':
9+
'vac-text-ellipsis': singleLine,
10+
'vac-text-deleted': deleted,
11+
'vac-text-bold': checkType(message, 'bold'),
12+
'vac-text-italic': checkType(message, 'italic'),
13+
'vac-text-strike': checkType(message, 'strike'),
14+
'vac-text-underline': checkType(message, 'underline'),
15+
'vac-text-inline-code':
1616
!singleLine && checkType(message, 'inline-code'),
17-
'text-multiline-code':
17+
'vac-text-multiline-code':
1818
!singleLine && checkType(message, 'multiline-code')
1919
}"
2020
:href="message.href"
2121
target="_blank"
2222
>
2323
<slot name="deleted-icon" v-bind="{ deleted }">
24-
<svg-icon v-if="deleted" name="deleted" class="icon-deleted" />
24+
<svg-icon v-if="deleted" name="deleted" class="vac-icon-deleted" />
2525
</slot>
2626
{{ message.value }}
2727
</component>
@@ -63,19 +63,19 @@ export default {
6363
</script>
6464

6565
<style>
66-
.text-deleted {
66+
.vac-text-deleted {
6767
font-style: italic;
6868
}
6969
70-
.icon-deleted {
70+
.vac-icon-deleted {
7171
height: 14px;
7272
width: 14px;
7373
vertical-align: middle;
7474
margin: -3px 1px 0 0;
7575
fill: var(--chat-room-color-message);
7676
}
7777
78-
.text-ellipsis {
78+
.vac-text-ellipsis {
7979
width: 100%;
8080
white-space: nowrap;
8181
overflow: hidden;

‎src/ChatWindow/Loader.vue

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<template>
2-
<transition name="fade-spinner" appear>
2+
<transition name="vac-fade-spinner" appear>
33
<div
4-
:class="{ 'container-center': !infinite, 'container-top': infinite }"
4+
:class="{
5+
'vac-container-center': !infinite,
6+
'vac-container-top': infinite
7+
}"
58
v-if="show"
69
>
7-
<div id="circle"></div>
10+
<div id="vac-circle"></div>
811
</div>
912
</transition>
1013
</template>
@@ -17,24 +20,24 @@ export default {
1720
</script>
1821

1922
<style lang="scss" scoped>
20-
.container-center {
23+
.vac-container-center {
2124
position: absolute;
2225
left: 50%;
2326
top: 50%;
2427
transform: translate(-50%, -50%);
2528
z-index: 9;
2629
}
2730
28-
.container-top {
31+
.vac-container-top {
2932
padding: 21px;
3033
31-
#circle {
34+
#vac-circle {
3235
height: 20px;
3336
width: 20px;
3437
}
3538
}
3639
37-
#circle {
40+
#vac-circle {
3841
margin: auto;
3942
height: 28px;
4043
width: 28px;
@@ -43,27 +46,27 @@ export default {
4346
border-right: 3px var(--chat-color-spinner) solid;
4447
border-bottom: 3px var(--chat-color-spinner) solid;
4548
border-radius: 50%;
46-
-webkit-animation: spin 1s infinite linear;
47-
animation: spin 1s infinite linear;
49+
-webkit-animation: vac-spin 1s infinite linear;
50+
animation: vac-spin 1s infinite linear;
4851
}
4952
5053
@media only screen and (max-width: 768px) {
51-
#circle {
54+
#vac-circle {
5255
height: 24px;
5356
width: 24px;
5457
}
5558
56-
.container-top {
59+
.vac-container-top {
5760
padding: 18px;
5861
59-
#circle {
62+
#vac-circle {
6063
height: 16px;
6164
width: 16px;
6265
}
6366
}
6467
}
6568
66-
@-webkit-keyframes spin {
69+
@-webkit-keyframes vac-spin {
6770
from {
6871
-webkit-transform: rotate(0deg);
6972
transform: rotate(0deg);
@@ -73,7 +76,7 @@ export default {
7376
transform: rotate(359deg);
7477
}
7578
}
76-
@keyframes spin {
79+
@keyframes vac-spin {
7780
from {
7881
-webkit-transform: rotate(0deg);
7982
transform: rotate(0deg);

0 commit comments

Comments
 (0)