vcomply-design-system 1.1.6 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,367 +1,368 @@
1
- @import url('../mixin/mixin.less');
2
- @import url('../color/color.less');
1
+ @import url("../mixin/mixin.less");
2
+ @import url("../color/color.less");
3
3
 
4
4
  .vx-badge {
5
- border-radius: .125rem;
6
- display: table-cell;
7
- font-weight: 500;
8
- text-transform: uppercase;
5
+ border-radius: 0.125rem;
6
+ display: table-cell;
7
+ font-weight: 500;
8
+ text-transform: uppercase;
9
9
 
10
- &.bold {
11
- color: @neutral-0;
12
- font-size: 11px;
13
- line-height: 1.25rem;
14
- padding: 0 .25rem;
15
-
16
- &.blueBadge {
17
- background: @blue-50;
18
- }
19
-
20
- &.greenBadge {
21
- background: @green-50;
22
- }
23
-
24
- &.redBadge {
25
- background: @red-50;
26
- }
27
-
28
- &.orangeBadge {
29
- background: @orange-50;
30
- }
31
-
32
- &.yellowBadge {
33
- background: @yellow-50;
34
- }
35
-
36
- &.grayBadge {
37
- background: @gray-50;
38
- }
39
-
40
- &.blackBadge {
41
- background: @gray-80;
42
- }
43
-
44
- &.smallBadge {
45
- color: @neutral-0;
46
- font-size: 9px;
47
- line-height: .75rem;
48
- padding: 0 .125rem;
49
-
50
- &.blueBadge {
51
- background: @blue-40;
52
- }
53
-
54
- &.greenBadge {
55
- background: @green-40;
56
- }
57
-
58
- &.redBadge {
59
- background: @red-40;
60
- }
61
-
62
- &.orangeBadge {
63
- background: @orange-40;
64
- }
65
-
66
- &.yellowBadge {
67
- background: @yellow-40;
68
- }
69
- }
70
-
71
- &.titleCaseBadge {
72
- text-transform: capitalize;
73
- }
10
+ &.bold {
11
+ color: @neutral-0;
12
+ font-size: 11px;
13
+ line-height: 1.25rem;
14
+ padding: 0 0.25rem;
15
+
16
+ &.blueBadge {
17
+ background: @blue-50;
74
18
  }
75
19
 
76
- &.subtle {
77
- font-size: 11px;
78
- line-height: 1.25rem;
79
- padding: 0 .25rem;
80
-
81
- &.blueBadge {
82
- background: @blue-10;
83
- color: @blue-50;
84
- }
85
-
86
- &.greenBadge {
87
- background: @green-10;
88
- color: @green-50;
89
- }
90
-
91
- &.redBadge {
92
- background: @red-10;
93
- color: @red-50;
94
- }
95
-
96
- &.orangeBadge {
97
- background: @orange-10;
98
- color: @orange-50;
99
- }
100
-
101
- &.yellowBadge {
102
- background: @yellow-10;
103
- color: @yellow-50;
104
- }
105
-
106
- &.grayBadge {
107
- background: @gray-20;
108
- color: @gray-60;
109
- }
110
-
111
- &.blackBadge {
112
- background: @gray-40;
113
- color: @gray-80;
114
- }
115
-
116
- &.smallBadge {
117
- font-size: 9px;
118
- line-height: .75rem;
119
- padding: 0 .125rem;
120
-
121
- &.blueBadge {
122
- color: @blue-70;
123
- }
124
-
125
- &.greenBadge {
126
- color: @green-70;
127
- }
128
-
129
- &.redBadge {
130
- color: @red-70;
131
- }
132
-
133
- &.orangeBadge {
134
- color: @orange-70;
135
- }
136
-
137
- &.yellowBadge {
138
- color: @yellow-70;
139
- }
140
-
141
- &.grayBadge {
142
- color: @gray-70;
143
- }
144
- }
145
-
146
- &.titleCaseBadge {
147
- text-transform: capitalize;
148
- }
20
+ &.greenBadge {
21
+ background: @green-50;
149
22
  }
150
23
 
151
- &.minimal {
152
- font-size: 11px;
153
- line-height: 1.25rem;
154
- padding: 0 .25rem;
155
-
156
- &.blueBadge {
157
- color: @blue-50;
158
- }
159
-
160
- &.greenBadge {
161
- color: @green-50;
162
- }
163
-
164
- &.redBadge {
165
- color: @red-50;
166
- }
167
-
168
- &.orangeBadge {
169
- color: @orange-50;
170
- }
171
-
172
- &.yellowBadge {
173
- color: @yellow-50;
174
- }
175
-
176
- &.grayBadge {
177
- color: @gray-60;
178
- }
179
-
180
- &.blackBadge {
181
- color: @gray-80;
182
- }
183
-
184
- &.smallBadge {
185
- font-size: 9px;
186
- line-height: .75rem;
187
- padding: 0 .125rem;
188
-
189
- &.blueBadge {
190
- color: @blue-70;
191
- }
192
-
193
- &.greenBadge {
194
- color: @green-70;
195
- }
196
-
197
- &.redBadge {
198
- color: @red-70;
199
- }
200
-
201
- &.orangeBadge {
202
- color: @orange-70;
203
- }
204
-
205
- &.yellowBadge {
206
- color: @yellow-70;
207
- }
208
-
209
- &.grayBadge {
210
- color: @gray-70;
211
- }
212
-
213
- &.blackBadge {
214
- color: @gray-100;
215
- }
216
- }
217
-
218
- &.titleCaseBadge {
219
- text-transform: capitalize;
220
- }
24
+ &.redBadge {
25
+ background: @red-50;
221
26
  }
222
- }
223
27
 
224
- .vx-badgeNum {
225
- border-radius: .125rem;
226
- border: 1px solid @gray-40;
227
- display: flex;
228
- align-items: center;
229
- justify-content: center;
230
- padding: 0 .25rem;
28
+ &.orangeBadge {
29
+ background: @orange-50;
30
+ }
231
31
 
232
- &.bold {
233
- background: @blue-60;
234
- border-color: @blue-60;
235
- color: @neutral-0;
32
+ &.yellowBadge {
33
+ background: @yellow-50;
236
34
  }
237
35
 
238
- &.subtle {
239
- background: @gray-30;
240
- border-color: @gray-30;
241
- color: @neutral-100;
36
+ &.grayBadge {
37
+ background: @gray-50;
242
38
  }
243
39
 
244
- &.minimal {
245
- background: @neutral-0;
246
- border-color: @gray-40;
247
- color: @blue-60;
40
+ &.blackBadge {
41
+ background: @gray-80;
248
42
  }
249
43
 
250
- &.xxl {
251
- font-size: 16px;
252
- width: 3.25rem;
253
- height: 3.25rem;
44
+ &.smallBadge {
45
+ color: @neutral-0;
46
+ font-size: 9px;
47
+ line-height: 0.75rem;
48
+ padding: 0 0.125rem;
49
+
50
+ &.blueBadge {
51
+ background: @blue-40;
52
+ }
53
+
54
+ &.greenBadge {
55
+ background: @green-40;
56
+ }
57
+
58
+ &.redBadge {
59
+ background: @red-40;
60
+ }
61
+
62
+ &.orangeBadge {
63
+ background: @orange-40;
64
+ }
65
+
66
+ &.yellowBadge {
67
+ background: @yellow-40;
68
+ }
254
69
  }
255
70
 
256
- &.xl {
257
- font-size: 11px;
258
- width: 2.375rem;
259
- height: 2rem;
71
+ &.titleCaseBadge {
72
+ text-transform: capitalize;
260
73
  }
74
+ }
261
75
 
262
- &.large {
263
- font-size: 11px;
264
- width: 1.875rem;
265
- height: 1.75rem;
76
+ &.subtle {
77
+ font-size: 11px;
78
+ line-height: 1.25rem;
79
+ padding: 0 0.25rem;
80
+
81
+ &.blueBadge {
82
+ background: @blue-10;
83
+ color: @blue-50;
266
84
  }
267
85
 
268
- &.medium {
269
- font-size: 11px;
270
- width: 1.625rem;
271
- height: 1.5rem;
86
+ &.greenBadge {
87
+ background: @green-10;
88
+ color: @green-50;
272
89
  }
273
90
 
274
- &.small {
275
- font-size: 11px;
276
- width: 1.625rem;
277
- height: 1.25rem;
91
+ &.redBadge {
92
+ background: @red-10;
93
+ color: @red-50;
278
94
  }
279
95
 
280
- &.xs {
281
- border-radius: 1.25rem;
282
- font-size: 9px;
283
- width: fit-content;
284
- min-width: 1.125rem;
285
- height: 1rem;
286
-
287
- &.bold {
288
- background: @blue-60;
289
- border: .125rem solid @neutral-0;
290
- color: @neutral-0;
291
-
292
- &.oval {
293
- border: none;
294
- }
295
- }
296
-
297
- &.subtle {
298
- background: @gray-30;
299
- border-color: @gray-30;
300
- color: @neutral-100;
301
- }
96
+ &.orangeBadge {
97
+ background: @orange-10;
98
+ color: @orange-50;
302
99
  }
303
- }
304
100
 
305
- .vx-badgeCircle {
306
- border-radius: 50px;
307
- border: 1px solid @neutral-0;
308
- width: .625rem;
309
- height: .625rem;
101
+ &.yellowBadge {
102
+ background: @yellow-10;
103
+ color: @yellow-50;
104
+ }
310
105
 
311
- &.greenCircleBadge {
312
- background: @green-60;
106
+ &.grayBadge {
107
+ background: @gray-20;
108
+ color: @gray-60;
313
109
  }
314
110
 
315
- &.blueCircleBadge {
316
- background: @blue-60;
111
+ &.blackBadge {
112
+ background: @gray-40;
113
+ color: @gray-80;
317
114
  }
318
115
 
319
- &.redCircleBadge {
320
- background: @red-60;
116
+ &.smallBadge {
117
+ font-size: 9px;
118
+ line-height: 0.75rem;
119
+ padding: 0 0.125rem;
120
+
121
+ &.blueBadge {
122
+ color: @blue-70;
123
+ }
124
+
125
+ &.greenBadge {
126
+ color: @green-70;
127
+ }
128
+
129
+ &.redBadge {
130
+ color: @red-70;
131
+ }
132
+
133
+ &.orangeBadge {
134
+ color: @orange-70;
135
+ }
136
+
137
+ &.yellowBadge {
138
+ color: @yellow-70;
139
+ }
140
+
141
+ &.grayBadge {
142
+ color: @gray-70;
143
+ }
321
144
  }
322
145
 
323
- &.smallCircleBadge {
324
- border: none;
325
- width: .25rem;
326
- height: .25rem;
146
+ &.titleCaseBadge {
147
+ text-transform: capitalize;
148
+ }
149
+ }
150
+
151
+ &.minimal {
152
+ font-size: 11px;
153
+ line-height: 1.25rem;
154
+ padding: 0 0.25rem;
155
+
156
+ &.blueBadge {
157
+ color: @blue-50;
158
+ }
159
+
160
+ &.greenBadge {
161
+ color: @green-50;
162
+ }
163
+
164
+ &.redBadge {
165
+ color: @red-50;
166
+ }
167
+
168
+ &.orangeBadge {
169
+ color: @orange-50;
170
+ }
171
+
172
+ &.yellowBadge {
173
+ color: @yellow-50;
174
+ }
175
+
176
+ &.grayBadge {
177
+ color: @gray-60;
178
+ }
179
+
180
+ &.blackBadge {
181
+ color: @gray-80;
182
+ }
183
+
184
+ &.smallBadge {
185
+ font-size: 9px;
186
+ line-height: 0.75rem;
187
+ padding: 0 0.125rem;
188
+
189
+ &.blueBadge {
190
+ color: @blue-70;
191
+ }
192
+
193
+ &.greenBadge {
194
+ color: @green-70;
195
+ }
196
+
197
+ &.redBadge {
198
+ color: @red-70;
199
+ }
200
+
201
+ &.orangeBadge {
202
+ color: @orange-70;
203
+ }
204
+
205
+ &.yellowBadge {
206
+ color: @yellow-70;
207
+ }
208
+
209
+ &.grayBadge {
210
+ color: @gray-70;
211
+ }
212
+
213
+ &.blackBadge {
214
+ color: @gray-100;
215
+ }
327
216
  }
217
+
218
+ &.titleCaseBadge {
219
+ text-transform: capitalize;
220
+ }
221
+ }
328
222
  }
329
223
 
330
- .vx-iconBadge {
331
- background: @gray-20;
332
- border-radius: .125rem;
333
- color: @gray-60;
224
+ .vx-badgeNum {
225
+ border-radius: 0.125rem;
226
+ border: 1px solid @gray-40;
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ padding: 0 0.25rem;
231
+
232
+ &.bold {
233
+ background: @blue-60;
234
+ border-color: @blue-60;
235
+ color: @neutral-0;
236
+ }
237
+
238
+ &.subtle {
239
+ background: @gray-30;
240
+ border-color: @gray-30;
241
+ color: @neutral-100;
242
+ }
243
+
244
+ &.minimal {
245
+ background: @neutral-0;
246
+ border-color: @gray-40;
247
+ color: @blue-60;
248
+ }
249
+
250
+ &.xxl {
251
+ font-size: 16px;
252
+ width: 3.25rem;
253
+ height: 3.25rem;
254
+ }
255
+
256
+ &.xl {
334
257
  font-size: 11px;
335
- font-weight: 500;
336
- display: inline-flex;
337
- align-items: center;
338
- justify-content: center;
258
+ width: 2.375rem;
259
+ height: 2rem;
260
+ }
261
+
262
+ &.large {
263
+ font-size: 11px;
264
+ width: 1.875rem;
265
+ height: 1.75rem;
266
+ }
267
+
268
+ &.medium {
269
+ font-size: 11px;
270
+ width: 1.625rem;
339
271
  height: 1.5rem;
340
- min-width: 2.75rem;
341
- padding: 0 .375rem;
272
+ }
342
273
 
343
- i {
344
- font-size: 12px;
345
- margin-right: .25rem;
274
+ &.small {
275
+ font-size: 11px;
276
+ width: 1.625rem;
277
+ height: 1.25rem;
278
+ }
279
+
280
+ &.xs {
281
+ border-radius: 1.25rem;
282
+ font-size: 9px;
283
+ font-weight: 500;
284
+ width: fit-content;
285
+ min-width: 1.125rem;
286
+ height: 1rem;
287
+
288
+ &.bold {
289
+ background: @blue-60;
290
+ border: 0.125rem solid @neutral-0;
291
+ color: @neutral-0;
292
+
293
+ &.oval {
294
+ border: none;
295
+ }
296
+ }
297
+
298
+ &.subtle {
299
+ background: @gray-30;
300
+ border-color: @gray-30;
301
+ color: @neutral-100;
346
302
  }
303
+ }
304
+ }
305
+
306
+ .vx-badgeCircle {
307
+ border-radius: 50px;
308
+ border: 1px solid @neutral-0;
309
+ width: 0.625rem;
310
+ height: 0.625rem;
311
+
312
+ &.greenCircleBadge {
313
+ background: @green-60;
314
+ }
315
+
316
+ &.blueCircleBadge {
317
+ background: @blue-60;
318
+ }
319
+
320
+ &.redCircleBadge {
321
+ background: @red-60;
322
+ }
323
+
324
+ &.smallCircleBadge {
325
+ border: none;
326
+ width: 0.25rem;
327
+ height: 0.25rem;
328
+ }
329
+ }
347
330
 
348
- &.likeBadge {
349
- i {
350
- color: @green-60;
351
- -webkit-transform: scaleX(-1);
352
- transform: scaleX(-1);
353
- }
331
+ .vx-iconBadge {
332
+ background: @gray-20;
333
+ border-radius: 0.125rem;
334
+ color: @gray-60;
335
+ font-size: 11px;
336
+ font-weight: 500;
337
+ display: inline-flex;
338
+ align-items: center;
339
+ justify-content: center;
340
+ height: 1.5rem;
341
+ min-width: 2.75rem;
342
+ padding: 0 0.375rem;
343
+
344
+ i {
345
+ font-size: 12px;
346
+ margin-right: 0.25rem;
347
+ }
348
+
349
+ &.likeBadge {
350
+ i {
351
+ color: @green-60;
352
+ -webkit-transform: scaleX(-1);
353
+ transform: scaleX(-1);
354
354
  }
355
+ }
355
356
 
356
- &.dislikeBadge {
357
- i {
358
- color: @red-60;
359
- -webkit-transform: scaleX(-1);
360
- transform: scaleX(-1);
361
- }
357
+ &.dislikeBadge {
358
+ i {
359
+ color: @red-60;
360
+ -webkit-transform: scaleX(-1);
361
+ transform: scaleX(-1);
362
362
  }
363
+ }
363
364
  }
364
365
 
365
366
  .pointerCursor {
366
- cursor: pointer;
367
- }
367
+ cursor: pointer;
368
+ }