vcomply-design-system 1.1.3 → 1.1.6

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.
Files changed (9) hide show
  1. package/css-build/css/banner/banner.css +153 -240
  2. package/css-build/css/breadcrumb/breadcrumb.css +69 -0
  3. package/css-build/css/button/button.css +510 -22
  4. package/css-build/css/card/card.css +129 -0
  5. package/css-build/css/chip/chip.css +76 -0
  6. package/css-build/less/avatars/avatars.less +260 -257
  7. package/css-build/less/breadcrumb/breadcrumb.less +69 -69
  8. package/css-build/pages/avatars.html +1279 -981
  9. package/package.json +1 -1
package/css-build/css/banner/banner.css CHANGED
@@ -5,292 +5,205 @@ a,
5
5
  button {
6
6
  cursor: pointer;
7
7
  }
8
- .vx-badge {
9
- border-radius: 0.125rem;
10
- display: table-cell;
11
- font-weight: 500;
12
- text-transform: uppercase;
13
- }
14
- .vx-badge.bold {
15
- color: #fff;
16
- font-size: 11px;
17
- line-height: 1.25rem;
18
- padding: 0 0.25rem;
19
- }
20
- .vx-badge.bold.blueBadge {
21
- background: #4681ef;
22
- }
23
- .vx-badge.bold.greenBadge {
24
- background: #66bf72;
25
- }
26
- .vx-badge.bold.redBadge {
27
- background: #d5624b;
28
- }
29
- .vx-badge.bold.orangeBadge {
30
- background: #ee9044;
31
- }
32
- .vx-badge.bold.yellowBadge {
33
- background: #f5cc48;
34
- }
35
- .vx-badge.bold.grayBadge {
36
- background: #a9aab6;
37
- }
38
- .vx-badge.bold.blackBadge {
39
- background: #343952;
40
- }
41
- .vx-badge.bold.smallBadge {
42
- color: #fff;
43
- font-size: 9px;
44
- line-height: 0.75rem;
45
- padding: 0 0.125rem;
46
- }
47
- .vx-badge.bold.smallBadge.blueBadge {
48
- background: #7aa7f7;
49
- }
50
- .vx-badge.bold.smallBadge.greenBadge {
51
- background: #97d2a0;
52
- }
53
- .vx-badge.bold.smallBadge.redBadge {
54
- background: #e38b7a;
55
- }
56
- .vx-badge.bold.smallBadge.orangeBadge {
57
- background: #f2ac73;
8
+ .info-banner {
9
+ background: #fcf2cf;
10
+ border-radius: 0.25rem;
11
+ border: 1px solid #f7d873;
12
+ box-shadow: 0px 8px 16px #e2ecff;
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: space-between;
16
+ min-height: 2.5rem;
17
+ padding: 0 0.5rem 0 1rem;
58
18
  }
59
- .vx-badge.bold.smallBadge.yellowBadge {
60
- background: #f7d873;
19
+ .info-banner.warning {
20
+ background: #fdd9d1;
21
+ border-color: #e38b7a;
61
22
  }
62
- .vx-badge.bold.titleCaseBadge {
63
- text-transform: capitalize;
23
+ .info-banner.warning .content i {
24
+ color: #a82a1d;
64
25
  }
65
- .vx-badge.subtle {
26
+ .info-banner .content {
27
+ color: #000;
66
28
  font-size: 11px;
67
- line-height: 1.25rem;
68
- padding: 0 0.25rem;
69
- }
70
- .vx-badge.subtle.blueBadge {
71
- background: #f4f8ff;
72
- color: #4681ef;
73
- }
74
- .vx-badge.subtle.greenBadge {
75
- background: #ddf4e0;
76
- color: #66bf72;
77
- }
78
- .vx-badge.subtle.redBadge {
79
- background: #ffeeeb;
80
- color: #d5624b;
81
- }
82
- .vx-badge.subtle.orangeBadge {
83
- background: #fdf1e8;
84
- color: #ee9044;
85
- }
86
- .vx-badge.subtle.yellowBadge {
87
- background: #fef8e7;
88
- color: #f5cc48;
29
+ display: flex;
30
+ align-items: center;
31
+ line-height: 1rem;
89
32
  }
90
- .vx-badge.subtle.grayBadge {
91
- background: #f2f2f5;
92
- color: #787a8c;
33
+ .info-banner .content i {
34
+ color: #cb9e0b;
35
+ font-size: 16px;
36
+ margin-right: 0.5rem;
93
37
  }
94
- .vx-badge.subtle.blackBadge {
95
- background: #cdced6;
38
+ .info-banner .content a {
96
39
  color: #343952;
40
+ font-weight: 600;
41
+ margin: 0 0.25rem;
42
+ text-decoration: underline;
97
43
  }
98
- .vx-badge.subtle.smallBadge {
99
- font-size: 9px;
100
- line-height: 0.75rem;
101
- padding: 0 0.125rem;
102
- }
103
- .vx-badge.subtle.smallBadge.blueBadge {
104
- color: #1146a8;
105
- }
106
- .vx-badge.subtle.smallBadge.greenBadge {
107
- color: #1c802a;
108
- }
109
- .vx-badge.subtle.smallBadge.redBadge {
110
- color: #a82a1d;
111
- }
112
- .vx-badge.subtle.smallBadge.orangeBadge {
113
- color: #bb5d11;
114
- }
115
- .vx-badge.subtle.smallBadge.yellowBadge {
116
- color: #cb9e0b;
44
+ .info-banner .actionArea {
45
+ display: flex;
46
+ align-items: center;
117
47
  }
118
- .vx-badge.subtle.smallBadge.grayBadge {
48
+ .info-banner .actionArea button.bannerCross-btn {
49
+ background: transparent;
50
+ border-radius: 0.25rem;
51
+ border: none;
119
52
  color: #565a6f;
53
+ font-size: 12px;
54
+ font-weight: 400;
55
+ height: 12px;
56
+ padding: 0;
57
+ margin: 0;
58
+ width: 1.5rem;
59
+ height: 1.5rem;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
120
63
  }
121
- .vx-badge.subtle.titleCaseBadge {
122
- text-transform: capitalize;
64
+ .info-banner .actionArea button:hover {
65
+ background: #e3e3e9;
123
66
  }
124
- .vx-badge.minimal {
67
+ .info-banner .actionArea .infoAction {
68
+ color: #000;
125
69
  font-size: 11px;
126
- line-height: 1.25rem;
127
- padding: 0 0.25rem;
128
- }
129
- .vx-badge.minimal.blueBadge {
130
- color: #4681ef;
70
+ display: flex;
71
+ align-items: center;
72
+ margin-right: 1.25rem;
131
73
  }
132
- .vx-badge.minimal.greenBadge {
133
- color: #66bf72;
74
+ .info-banner .actionArea .infoAction span {
75
+ color: #343952;
76
+ font-weight: 600;
77
+ letter-spacing: 4px;
78
+ margin: 0 0.25rem;
134
79
  }
135
- .vx-badge.minimal.redBadge {
136
- color: #d5624b;
80
+ .info-banner .actionArea .infoAction button {
81
+ background: transparent;
82
+ border-radius: 0.25rem;
83
+ border: none;
84
+ color: #000;
85
+ font-size: 8px;
86
+ font-weight: 400;
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ padding: 0;
91
+ margin: 0;
92
+ width: 1.5rem;
93
+ height: 1.5rem;
137
94
  }
138
- .vx-badge.minimal.orangeBadge {
139
- color: #ee9044;
95
+ .info-banner .actionArea .infoAction button:first-of-type {
96
+ margin-right: 0.25rem;
140
97
  }
141
- .vx-badge.minimal.yellowBadge {
142
- color: #f5cc48;
98
+ .info-banner .actionArea .infoAction button:hover {
99
+ background: #e3e3e9;
143
100
  }
144
- .vx-badge.minimal.grayBadge {
101
+ .info-banner .actionArea .infoAction button.disabled-btn {
145
102
  color: #a9aab6;
103
+ pointer-events: none;
146
104
  }
147
- .vx-badge.minimal.blackBadge {
148
- color: #343952;
149
- }
150
- .vx-badge.minimal.smallBadge {
151
- font-size: 9px;
152
- line-height: 0.75rem;
153
- padding: 0 0.125rem;
154
- }
155
- .vx-badge.minimal.smallBadge.blueBadge {
156
- color: #1146a8;
105
+ .top-banner {
106
+ background: #343952;
107
+ font-size: 13px;
108
+ display: flex;
109
+ align-items: center;
110
+ height: 2.25rem;
111
+ padding: 0 1rem;
112
+ position: relative;
157
113
  }
158
- .vx-badge.minimal.smallBadge.greenBadge {
159
- color: #1c802a;
114
+ .top-banner.dismissible {
115
+ padding-right: 0.5rem;
160
116
  }
161
- .vx-badge.minimal.smallBadge.redBadge {
162
- color: #a82a1d;
117
+ .top-banner .content {
118
+ display: flex;
119
+ align-items: center;
120
+ line-height: 1rem;
163
121
  }
164
- .vx-badge.minimal.smallBadge.orangeBadge {
165
- color: #bb5d11;
122
+ .top-banner i {
123
+ font-size: 12px;
124
+ margin-right: 0.5rem;
166
125
  }
167
- .vx-badge.minimal.smallBadge.yellowBadge {
168
- color: #cb9e0b;
126
+ .top-banner.default {
127
+ color: #f2bf19;
128
+ justify-content: center;
169
129
  }
170
- .vx-badge.minimal.smallBadge.grayBadge {
171
- color: #565a6f;
130
+ .top-banner.warning {
131
+ color: #e38b7a;
132
+ justify-content: center;
172
133
  }
173
- .vx-badge.minimal.smallBadge.blackBadge {
174
- color: #242940;
134
+ .top-banner.warning a {
135
+ color: #fac3b7;
136
+ margin-left: 0.5rem;
175
137
  }
176
- .vx-badge.minimal.titleCaseBadge {
177
- text-transform: capitalize;
138
+ .top-banner .actionArea {
139
+ display: flex;
140
+ align-items: center;
141
+ position: absolute;
142
+ top: 0.375rem;
143
+ right: 0.5rem;
178
144
  }
179
- .vx-badgeNum {
180
- border-radius: 0.125rem;
181
- border: 1px solid #cdced6;
145
+ .top-banner .actionArea button.bannerCross-btn {
146
+ background: transparent;
147
+ border-radius: 0.25rem;
148
+ border: none;
149
+ color: #565a6f;
150
+ font-size: 12px;
151
+ font-weight: 400;
152
+ height: 12px;
153
+ padding: 0;
154
+ margin: 0;
155
+ width: 1.5rem;
156
+ height: 1.5rem;
182
157
  display: flex;
183
158
  align-items: center;
184
159
  justify-content: center;
185
- padding: 0 0.25rem;
186
160
  }
187
- .vx-badgeNum.bold {
188
- background: #1e5dd3;
189
- border-color: #1e5dd3;
190
- color: #fff;
161
+ .top-banner .actionArea button.bannerCross-btn i {
162
+ color: #cdced6;
163
+ margin: 0;
191
164
  }
192
- .vx-badgeNum.subtle {
193
- background: #e3e3e9;
194
- border-color: #e3e3e9;
195
- color: #000;
196
- }
197
- .vx-badgeNum.minimal {
198
- background: #fff;
199
- border-color: #cdced6;
200
- color: #1e5dd3;
201
- }
202
- .vx-badgeNum.xxl {
203
- font-size: 16px;
204
- width: 3.25rem;
205
- height: 3.25rem;
165
+ .top-banner .actionArea button:hover {
166
+ background: #565a6f;
206
167
  }
207
- .vx-badgeNum.xl {
168
+ .top-banner .actionArea .infoAction {
169
+ color: #cdced6;
208
170
  font-size: 11px;
209
- width: 2.375rem;
210
- height: 2rem;
211
- }
212
- .vx-badgeNum.large {
213
- font-size: 11px;
214
- width: 1.875rem;
215
- height: 1.75rem;
216
- }
217
- .vx-badgeNum.medium {
218
- font-size: 11px;
219
- width: 1.625rem;
220
- height: 1.5rem;
171
+ display: flex;
172
+ align-items: center;
173
+ margin-right: 1.25rem;
221
174
  }
222
- .vx-badgeNum.small {
223
- font-size: 11px;
224
- width: 1.625rem;
225
- height: 1.25rem;
226
- }
227
- .vx-badgeNum.xs {
228
- border-radius: 1.25rem;
229
- font-size: 9px;
230
- width: fit-content;
231
- min-width: 1.125rem;
232
- height: 1rem;
233
- }
234
- .vx-badgeNum.xs.bold {
235
- background: #1e5dd3;
236
- border: 0.125rem solid #fff;
175
+ .top-banner .actionArea .infoAction span {
237
176
  color: #fff;
177
+ font-weight: 600;
178
+ letter-spacing: 4px;
179
+ margin: 0 0.25rem;
238
180
  }
239
- .vx-badgeNum.xs.bold.oval {
181
+ .top-banner .actionArea .infoAction button {
182
+ background: transparent;
183
+ border-radius: 0.25rem;
240
184
  border: none;
241
- }
242
- .vx-badgeNum.xs.subtle {
243
- background: #e3e3e9;
244
- border-color: #e3e3e9;
245
185
  color: #000;
246
- }
247
- .vx-badgeCircle {
248
- border-radius: 50px;
249
- border: 1px solid #fff;
250
- width: 0.625rem;
251
- height: 0.625rem;
252
- }
253
- .vx-badgeCircle.greenCircleBadge {
254
- background: #34aa44;
255
- }
256
- .vx-badgeCircle.blueCircleBadge {
257
- background: #1e5dd3;
258
- }
259
- .vx-badgeCircle.redCircleBadge {
260
- background: #c7381b;
261
- }
262
- .vx-badgeCircle.smallCircleBadge {
263
- border: none;
264
- width: 0.25rem;
265
- height: 0.25rem;
266
- }
267
- .vx-iconBadge {
268
- background: #f2f2f5;
269
- border-radius: 0.125rem;
270
- color: #787a8c;
271
- font-size: 11px;
272
- font-weight: 500;
273
- display: inline-flex;
186
+ font-size: 8px;
187
+ font-weight: 400;
188
+ display: flex;
274
189
  align-items: center;
275
190
  justify-content: center;
191
+ padding: 0;
192
+ margin: 0;
193
+ width: 1.5rem;
276
194
  height: 1.5rem;
277
- min-width: 2.75rem;
278
- padding: 0 0.375rem;
279
195
  }
280
- .vx-iconBadge i {
281
- font-size: 12px;
196
+ .top-banner .actionArea .infoAction button:first-of-type {
282
197
  margin-right: 0.25rem;
283
198
  }
284
- .vx-iconBadge.likeBadge i {
285
- color: #34aa44;
286
- -webkit-transform: scaleX(-1);
287
- transform: scaleX(-1);
199
+ .top-banner .actionArea .infoAction button:hover {
200
+ background: #565a6f;
288
201
  }
289
- .vx-iconBadge.dislikeBadge i {
290
- color: #c7381b;
291
- -webkit-transform: scaleX(-1);
292
- transform: scaleX(-1);
202
+ .top-banner .actionArea .infoAction button i {
203
+ font-size: 8px;
204
+ margin: 0;
293
205
  }
294
- .pointerCursor {
295
- cursor: pointer;
206
+ .top-banner .actionArea .infoAction button.disabled-btn {
207
+ color: #a9aab6;
208
+ pointer-events: none;
296
209
  }
package/css-build/css/breadcrumb/breadcrumb.css ADDED
@@ -0,0 +1,69 @@
1
+ body {
2
+ font-size: 16px;
3
+ }
4
+ a,
5
+ button {
6
+ cursor: pointer;
7
+ }
8
+ .pageBreadcrumb ul {
9
+ list-style: none;
10
+ padding: 0;
11
+ margin: 0;
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ }
15
+ .pageBreadcrumb ul li {
16
+ position: relative;
17
+ padding-left: 1rem;
18
+ }
19
+ .pageBreadcrumb ul li:first-of-type {
20
+ padding-left: 0;
21
+ }
22
+ .pageBreadcrumb ul li:first-of-type a::before {
23
+ display: none;
24
+ }
25
+ .pageBreadcrumb ul li:last-of-type a {
26
+ color: #787a8c;
27
+ pointer-events: none;
28
+ }
29
+ .pageBreadcrumb ul li a {
30
+ color: #1e5dd3;
31
+ font-size: 11px;
32
+ font-weight: 500;
33
+ line-height: 1rem;
34
+ display: flex;
35
+ align-items: center;
36
+ position: relative;
37
+ text-decoration: none;
38
+ text-transform: uppercase;
39
+ }
40
+ .pageBreadcrumb ul li a::before {
41
+ content: "";
42
+ position: absolute;
43
+ left: -10px;
44
+ top: 5px;
45
+ width: 0.25rem;
46
+ height: 0.25rem;
47
+ border-top: 1px solid #565a6f;
48
+ border-left: 1px solid #565a6f;
49
+ transform: rotate(135deg);
50
+ }
51
+ .pageBreadcrumb ul li a i {
52
+ font-size: 8px;
53
+ margin-right: 0.25rem;
54
+ }
55
+ .pageBreadcrumb ul li.moreBreadcrumb a {
56
+ background: transparent;
57
+ border-radius: 0;
58
+ border: none;
59
+ color: #565a6f;
60
+ width: 1rem;
61
+ height: 1rem;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: end;
65
+ }
66
+ .pageBreadcrumb ul li.moreBreadcrumb a i {
67
+ font-size: 12px;
68
+ margin: 0;
69
+ }