Skip to content

Commit 35e5e0c

Browse files
boomboshaboombosha
committed
feat(blocks): add CSS variables types for components | fixes #13506 Б.6.2
1 parent f729e99 commit 35e5e0c

42 files changed

Lines changed: 2286 additions & 290 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/blocks/ChatItem/styles/ChatItem.scss‎

Lines changed: 100 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.chat-item {
22

33
&__container {
4-
grid-row: 1;
5-
grid-column: 1 / 2;
6-
display: flex;
7-
position: relative;
4+
grid-row: var(--chotto-chatitem-container-grid-row, 1);
5+
grid-column: var(--chotto-chatitem-container-grid-column, 1 / 2);
6+
display: var(--chotto-chatitem-container-display, flex);
7+
position: var(--chotto-chatitem-container-position, relative);
88
padding: var(--chotto-chatitem-padding-container);
9-
cursor: pointer;
9+
cursor: var(--chotto-chatitem-container-cursor, pointer);
1010

1111
&::after {
12-
content: '';
13-
position: absolute;
14-
bottom: 0;
12+
content: var(--chotto-chatitem-divider-content, '');
13+
position: var(--chotto-chatitem-divider-position, absolute);
14+
bottom: var(--chotto-chatitem-divider-bottom, 0);
1515
transform: translateX(var(--chotto-chatitem-divider-translate-x, 15%));
1616
width: var(--chotto-chatitem-divider-width, 416px);
1717
height: var(--chotto-chatitem-divider-height, 1px);
@@ -25,7 +25,7 @@
2525

2626

2727
&__selected {
28-
cursor: pointer;
28+
cursor: var(--chotto-chatitem-selected-cursor, pointer);
2929
border-radius: var(--chotto-chatitem-border-radius);
3030
background: var(--chotto-theme-item-background-color-focus);
3131

@@ -35,26 +35,26 @@
3535
}
3636

3737
&__avatar-container {
38-
position: relative;
39-
display: flex;
40-
justify-content: center;
41-
align-items: center;
42-
align-self: center;
43-
object-fit: cover;
38+
position: var(--chotto-chatitem-avatar-container-position, relative);
39+
display: var(--chotto-chatitem-avatar-container-display, flex);
40+
justify-content: var(--chotto-chatitem-avatar-container-justify, center);
41+
align-items: var(--chotto-chatitem-avatar-container-align, center);
42+
align-self: var(--chotto-chatitem-avatar-container-align-self, center);
43+
object-fit: var(--chotto-chatitem-avatar-container-object-fit, cover);
4444
margin-right: var(--chotto-chatitem-avatar-margin-right, 15px);
4545
/* background-color: var(--chotto-avatar-background-color); */
46-
min-width: 50px;
47-
min-height: 50px;
48-
border-radius: 50%;
46+
min-width: var(--chotto-chatitem-avatar-min-width, 50px);
47+
min-height: var(--chotto-chatitem-avatar-min-height, 50px);
48+
border-radius: var(--chotto-chatitem-avatar-border-radius, 50%);
4949

5050
span {
51-
font-size: 21px;
51+
font-size: var(--chotto-chatitem-avatar-text-font-size, 21px);
5252
color: var(--neutral-500);
5353
}
5454

5555
img {
56-
border-radius: 50%;
57-
object-fit: cover;
56+
border-radius: var(--chotto-chatitem-avatar-img-border-radius, 50%);
57+
object-fit: var(--chotto-chatitem-avatar-img-object-fit, cover);
5858
}
5959
}
6060

@@ -64,64 +64,64 @@
6464
}
6565

6666
&__status-user {
67-
position: absolute;
68-
bottom: 0;
67+
position: var(--chotto-chatitem-status-user-position, absolute);
68+
bottom: var(--chotto-chatitem-status-user-bottom, 0);
6969
right: var(--chotto-chatitem-status-user-right, 5px);
70-
display: block;
70+
display: var(--chotto-chatitem-status-user-display, block);
7171
width: var(--chotto-chatitem-status-user-size, 10px);
7272
height: var(--chotto-chatitem-status-user-size, 10px);
73-
border-radius: 50%;
74-
background-color: transparent;
75-
z-index: 1;
73+
border-radius: var(--chotto-chatitem-status-user-border-radius, 50%);
74+
background-color: var(--chotto-chatitem-status-user-bg, transparent);
75+
z-index: var(--chotto-chatitem-status-user-z-index, 1);
7676
}
7777

7878
&__info-container {
79-
flex-grow: 1;
80-
align-self: flex-start;
79+
flex-grow: var(--chotto-chatitem-info-container-flex-grow, 1);
80+
align-self: var(--chotto-chatitem-info-container-align-self, flex-start);
8181
margin-right: var(--chotto-chatitem-info-margin-right, 15px);
82-
overflow: hidden;
82+
overflow: var(--chotto-chatitem-info-container-overflow, hidden);
8383
}
8484

8585
&__name {
8686
margin-top: var(--chotto-chatitem-name-margin-top, 0);
8787
margin-bottom: var(--chotto-chatitem-name-margin-bottom, 8px);
8888
font-size: var(--chotto-theme-title-font-size);
8989
font-weight: var(--chotto-theme-title-font-weight);
90-
overflow: hidden;
91-
text-overflow: ellipsis;
92-
display: -webkit-box;
93-
-webkit-line-clamp: 1;
94-
line-clamp: 1;
95-
-webkit-box-orient: vertical;
90+
overflow: var(--chotto-chatitem-name-overflow, hidden);
91+
text-overflow: var(--chotto-chatitem-name-text-overflow, ellipsis);
92+
display: var(--chotto-chatitem-name-display, -webkit-box);
93+
-webkit-line-clamp: var(--chotto-chatitem-name-line-clamp, 1);
94+
line-clamp: var(--chotto-chatitem-name-line-clamp, 1);
95+
-webkit-box-orient: var(--chotto-chatitem-name-box-orient, vertical);
9696
}
9797

9898
&__last-message {
9999
font-size: var(--chotto-theme-text-font-size);
100100
color: var(--chotto-theme-secondary-text-color);
101-
overflow: hidden;
102-
text-overflow: ellipsis;
103-
display: -webkit-box;
104-
-webkit-line-clamp: 1;
105-
line-clamp: 1;
106-
-webkit-box-orient: vertical;
101+
overflow: var(--chotto-chatitem-last-message-overflow, hidden);
102+
text-overflow: var(--chotto-chatitem-last-message-text-overflow, ellipsis);
103+
display: var(--chotto-chatitem-last-message-display, -webkit-box);
104+
-webkit-line-clamp: var(--chotto-chatitem-last-message-line-clamp, 1);
105+
line-clamp: var(--chotto-chatitem-last-message-line-clamp, 1);
106+
-webkit-box-orient: var(--chotto-chatitem-last-message-box-orient, vertical);
107107

108108
}
109109

110110
&__details-container {
111-
position: relative;
112-
display: flex;
113-
flex-direction: column;
114-
justify-content: space-between;
115-
align-items: end;
111+
position: var(--chotto-chatitem-details-container-position, relative);
112+
display: var(--chotto-chatitem-details-container-display, flex);
113+
flex-direction: var(--chotto-chatitem-details-container-flex-direction, column);
114+
justify-content: var(--chotto-chatitem-details-container-justify, space-between);
115+
align-items: var(--chotto-chatitem-details-container-align, end);
116116

117117
span {
118118
color: var(--chotto-theme-button-color-active);
119119
}
120120
}
121121

122122
&__actions-trigger{
123-
display: block;
124-
cursor: pointer;
123+
display: var(--chotto-chatitem-actions-trigger-display, block);
124+
cursor: var(--chotto-chatitem-actions-trigger-cursor, pointer);
125125
font-size: var(--chotto-theme-button-icon-size);
126126
color: var(--chotto-theme-button-color-active);
127127
}
@@ -131,35 +131,35 @@
131131
}
132132

133133
&__menu-button {
134-
order: 0;
135-
width: 100%;
136-
border: none;
137-
background-color: transparent;
138-
cursor: pointer;
139-
padding: 0;
134+
order: var(--chotto-chatitem-menu-button-order, 0);
135+
width: var(--chotto-chatitem-menu-button-width, 100%);
136+
border: var(--chotto-chatitem-menu-button-border, none);
137+
background-color: var(--chotto-chatitem-menu-button-bg, transparent);
138+
cursor: var(--chotto-chatitem-menu-button-cursor, pointer);
139+
padding: var(--chotto-chatitem-menu-button-padding, 0);
140140

141141
span {
142-
display: block;
143-
width: fit-content;
144-
margin-left: auto;
142+
display: var(--chotto-chatitem-menu-button-span-display, block);
143+
width: var(--chotto-chatitem-menu-button-span-width, fit-content);
144+
margin-left: var(--chotto-chatitem-menu-button-span-margin-left, auto);
145145
font-size: var(--chotto-chatitem-menu-button-font-size, 18px);
146-
transition: 0.2s;
146+
transition: var(--chotto-chatitem-menu-button-transition, 0.2s);
147147
}
148148

149149
&:hover span {
150150
color: var(--chotto-theme-button-color-hover);
151-
transition: 0.2s;
151+
transition: var(--chotto-chatitem-menu-button-hover-transition, 0.2s);
152152
}
153153
}
154154

155155
&__unread {
156-
order: 1;
157-
display: flex;
158-
justify-content: center;
159-
align-items: center;
156+
order: var(--chotto-chatitem-unread-order, 1);
157+
display: var(--chotto-chatitem-unread-display, flex);
158+
justify-content: var(--chotto-chatitem-unread-justify, center);
159+
align-items: var(--chotto-chatitem-unread-align, center);
160160
border-radius: var(--chotto-unread-border-radius, 50%);
161-
margin-left: auto;
162-
margin-top: auto;
161+
margin-left: var(--chotto-chatitem-unread-margin-left, auto);
162+
margin-top: var(--chotto-chatitem-unread-margin-top, auto);
163163
min-width: var(--chotto-unread-min-width, 25px);
164164
min-height: var(--chotto-unread-min-height, 25px);
165165
max-height: var(--chotto-chatitem-unread-max-height, 20px);
@@ -173,24 +173,24 @@
173173
&__time {
174174
font-size: var(--chotto-theme-additional-text-font-size);
175175
color: var(--chotto-theme-secondary-text-color);
176-
white-space: nowrap;
176+
white-space: var(--chotto-chatitem-time-white-space, nowrap);
177177
}
178178

179179
&__context-menu {
180-
position: absolute;
180+
position: var(--chotto-chatitem-context-menu-position, absolute);
181181
top: var(--chotto-chatitem-context-menu-top, 40%);
182-
right: 0;
182+
right: var(--chotto-chatitem-context-menu-right, 0);
183183
}
184184

185185
&__status-chat-container {
186-
display: flex;
187-
align-items: center;
186+
display: var(--chotto-chatitem-status-chat-container-display, flex);
187+
align-items: var(--chotto-chatitem-status-chat-container-align, center);
188188
column-gap: var(--chotto-chatitem-status-gap, 4px);
189-
margin-top: auto;
189+
margin-top: var(--chotto-chatitem-status-chat-container-margin-top, auto);
190190
}
191191

192192
&__status-message {
193-
display: flex;
193+
display: var(--chotto-chatitem-status-message-display, flex);
194194

195195
span {
196196
color: var(--chotto-theme-status-color-received);
@@ -199,60 +199,60 @@
199199
}
200200

201201
&__dialog-buttons{
202-
display: flex;
203-
margin-left: 8px;
202+
display: var(--chotto-chatitem-dialog-buttons-display, flex);
203+
margin-left: var(--chotto-chatitem-dialog-buttons-margin-left, 8px);
204204
}
205205
}
206206

207207
.dialog{
208208
&__container {
209-
display: flex;
210-
flex-direction: column;
211-
position: relative;
212-
cursor: pointer;
209+
display: var(--chotto-chatitem-dialog-container-display, flex);
210+
flex-direction: var(--chotto-chatitem-dialog-container-flex-direction, column);
211+
position: var(--chotto-chatitem-dialog-container-position, relative);
212+
cursor: var(--chotto-chatitem-dialog-container-cursor, pointer);
213213
gap: var(--chotto-chatitem-dialog-gap, 5px);
214214
padding: var(--chotto-chatitem-dialog-padding);
215215
}
216216

217217
&__icon{
218-
margin: auto;
218+
margin: var(--chotto-chatitem-dialog-icon-margin, auto);
219219
}
220220

221221
&__item{
222-
display: flex;
222+
display: var(--chotto-chatitem-dialog-item-display, flex);
223223
padding: var(--chotto-chatitem-dialog-item-padding, 3px);
224224
}
225225

226226
&__selected {
227-
cursor: pointer;
227+
cursor: var(--chotto-chatitem-dialog-selected-cursor, pointer);
228228
border-radius: var(--chotto-chatitem-border-radius);
229229
background: var(--chotto-theme-item-background-color-focus);
230230
}
231231

232232
&__text-container {
233-
display: flex;
234-
justify-content: space-between;
233+
display: var(--chotto-chatitem-dialog-text-container-display, flex);
234+
justify-content: var(--chotto-chatitem-dialog-text-container-justify, space-between);
235235
font-size: var(--chotto-theme-text-font-size);
236236
color: var(--chotto-theme-primary-text-color);
237-
overflow: hidden;
238-
text-overflow: ellipsis;
239-
width: 100%;
237+
overflow: var(--chotto-chatitem-dialog-text-container-overflow, hidden);
238+
text-overflow: var(--chotto-chatitem-dialog-text-container-text-overflow, ellipsis);
239+
width: var(--chotto-chatitem-dialog-text-container-width, 100%);
240240
padding: var(--chotto-chatitem-text-container-padding, 0 5px);
241-
margin: auto;
241+
margin: var(--chotto-chatitem-dialog-text-container-margin, auto);
242242
}
243243

244244
&__name{
245-
display: -webkit-box;
246-
-webkit-line-clamp: 1;
247-
line-clamp: 1;
248-
-webkit-box-orient: vertical;
245+
display: var(--chotto-chatitem-dialog-name-display, -webkit-box);
246+
-webkit-line-clamp: var(--chotto-chatitem-dialog-name-line-clamp, 1);
247+
line-clamp: var(--chotto-chatitem-dialog-name-line-clamp, 1);
248+
-webkit-box-orient: var(--chotto-chatitem-dialog-name-box-orient, vertical);
249249
}
250250

251251
&__time{
252-
display: -webkit-box;
253-
-webkit-line-clamp: 1;
254-
line-clamp: 1;
255-
-webkit-box-orient: vertical;
252+
display: var(--chotto-chatitem-dialog-time-display, -webkit-box);
253+
-webkit-line-clamp: var(--chotto-chatitem-dialog-time-line-clamp, 1);
254+
line-clamp: var(--chotto-chatitem-dialog-time-line-clamp, 1);
255+
-webkit-box-orient: var(--chotto-chatitem-dialog-time-box-orient, vertical);
256256
color: var(--chotto-theme-secondary-text-color);
257257
font-size: var(--chotto-theme-additional-text-font-size)
258258
}
@@ -273,20 +273,20 @@
273273

274274
.text-enter-active,
275275
.text-leave-active {
276-
transition: opacity 0.2s ease;
276+
transition: var(--chotto-chatitem-text-transition, opacity 0.2s ease);
277277
}
278278

279279
.text-enter-from,
280280
.text-leave-to {
281-
opacity: 0;
281+
opacity: var(--chotto-chatitem-text-opacity, 0);
282282
}
283283

284284
.menu-leave-active {
285-
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
285+
transition: var(--chotto-chatitem-menu-leave-transition, all 0.2s cubic-bezier(1, 0.5, 0.8, 1));
286286
}
287287

288288
.menu-enter-from,
289289
.menu-leave-to {
290290
transform: translateY(var(--chotto-chatitem-menu-enter-translate-y, 20px));
291-
opacity: 0;
291+
opacity: var(--chotto-chatitem-menu-opacity, 0);
292292
}

0 commit comments

Comments
 (0)