vcomply-design-system 1.2.0 → 1.2.2
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,694 +1,1026 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
7
|
-
<link rel="preconnect" href="https://fonts.gstatic.com"
|
|
8
|
-
<link
|
|
9
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
|
8
|
+
<link
|
|
9
|
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
10
|
+
rel="stylesheet"
|
|
11
|
+
/>
|
|
10
12
|
<link rel="stylesheet" type="text/css" href="../utility/prism.css" />
|
|
11
13
|
<link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
|
|
12
14
|
<link rel="stylesheet/less" type="text/css" href="../less/index.less" />
|
|
13
15
|
<link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
|
|
14
|
-
<link
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<link
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<link
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
<link
|
|
17
|
+
rel="stylesheet/less"
|
|
18
|
+
type="text/css"
|
|
19
|
+
href="../less/button/button.less"
|
|
20
|
+
/>
|
|
21
|
+
<link
|
|
22
|
+
rel="stylesheet/less"
|
|
23
|
+
type="text/css"
|
|
24
|
+
href="../less/display/display.less"
|
|
25
|
+
/>
|
|
26
|
+
<link
|
|
27
|
+
rel="stylesheet/less"
|
|
28
|
+
type="text/css"
|
|
29
|
+
href="../less/padding/padding.less"
|
|
30
|
+
/>
|
|
31
|
+
<link
|
|
32
|
+
rel="stylesheet/less"
|
|
33
|
+
type="text/css"
|
|
34
|
+
href="../less/padding/padding-bottom.less"
|
|
35
|
+
/>
|
|
36
|
+
<link
|
|
37
|
+
rel="stylesheet/less"
|
|
38
|
+
type="text/css"
|
|
39
|
+
href="../less/padding/padding-top.less"
|
|
40
|
+
/>
|
|
41
|
+
<link
|
|
42
|
+
rel="stylesheet/less"
|
|
43
|
+
type="text/css"
|
|
44
|
+
href="../less/padding/padding-left.less"
|
|
45
|
+
/>
|
|
46
|
+
<link
|
|
47
|
+
rel="stylesheet/less"
|
|
48
|
+
type="text/css"
|
|
49
|
+
href="../less/padding/padding-right.less"
|
|
50
|
+
/>
|
|
51
|
+
<link
|
|
52
|
+
rel="stylesheet/less"
|
|
53
|
+
type="text/css"
|
|
54
|
+
href="../less/margin/margin.less"
|
|
55
|
+
/>
|
|
56
|
+
<link
|
|
57
|
+
rel="stylesheet/less"
|
|
58
|
+
type="text/css"
|
|
59
|
+
href="../less/margin/margin-top.less"
|
|
60
|
+
/>
|
|
61
|
+
<link
|
|
62
|
+
rel="stylesheet/less"
|
|
63
|
+
type="text/css"
|
|
64
|
+
href="../less/margin/margin-right.less"
|
|
65
|
+
/>
|
|
66
|
+
<link
|
|
67
|
+
rel="stylesheet/less"
|
|
68
|
+
type="text/css"
|
|
69
|
+
href="../less/margin/margin-bottom.less"
|
|
70
|
+
/>
|
|
71
|
+
<link
|
|
72
|
+
rel="stylesheet/less"
|
|
73
|
+
type="text/css"
|
|
74
|
+
href="../less/margin/margin-left.less"
|
|
75
|
+
/>
|
|
76
|
+
<link
|
|
77
|
+
rel="stylesheet/less"
|
|
78
|
+
type="text/css"
|
|
79
|
+
href="../less/alignment/alignment.less"
|
|
80
|
+
/>
|
|
81
|
+
<link
|
|
82
|
+
rel="stylesheet/less"
|
|
83
|
+
type="text/css"
|
|
84
|
+
href="../less/color/color.less"
|
|
85
|
+
/>
|
|
28
86
|
<link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
|
|
29
|
-
<link
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
87
|
+
<link
|
|
88
|
+
rel="stylesheet/less"
|
|
89
|
+
type="text/css"
|
|
90
|
+
href="../less/width/width.less"
|
|
91
|
+
/>
|
|
92
|
+
<link
|
|
93
|
+
rel="stylesheet/less"
|
|
94
|
+
type="text/css"
|
|
95
|
+
href="../less/left-menu/sub-menu.less"
|
|
96
|
+
/>
|
|
97
|
+
<link
|
|
98
|
+
rel="stylesheet/less"
|
|
99
|
+
type="text/css"
|
|
100
|
+
href="../less/badge/badge.less"
|
|
101
|
+
/>
|
|
102
|
+
</head>
|
|
103
|
+
<body>
|
|
34
104
|
<section>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
105
|
+
<div class="head vx-mb-5">
|
|
106
|
+
<h2 class="title vx-label-txt vx-m-0 vx-mb-4">Badge</h2>
|
|
107
|
+
<!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
|
|
38
108
|
Avatars are generally used to represent an entity, or a group of entity. It may consist of an image or short name if image is not available.
|
|
39
109
|
</p> -->
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
110
|
+
</div>
|
|
111
|
+
<div class="vx-d-flex vx-align-start">
|
|
112
|
+
<div class="page-container">
|
|
113
|
+
<div class="container" id="emphasisColorsLayout">
|
|
114
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">
|
|
115
|
+
Emphasis & Colors Badge
|
|
116
|
+
</h3>
|
|
45
117
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
118
|
+
<div class="preview-block">
|
|
119
|
+
<div class="action-buttons">
|
|
120
|
+
<button class="vx-btn md transparent">
|
|
121
|
+
<i class="icons"></i> Copy Code
|
|
122
|
+
</button>
|
|
123
|
+
<button class="vx-btn md transparent" data-tab="emphasisBold">
|
|
124
|
+
<i class="icons"></i
|
|
125
|
+
><i class="icons"></i> View Code
|
|
126
|
+
</button>
|
|
127
|
+
</div>
|
|
128
|
+
<!-- Bold Badge -->
|
|
129
|
+
<div
|
|
130
|
+
class="preview-container vx-bg-white vx-p-2 vx-d-flex vx-justify-between"
|
|
131
|
+
>
|
|
132
|
+
<div class="button-box vx-w-50 vx-mr-1 vx-pl-2 vx-pr-2">
|
|
133
|
+
<div
|
|
134
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
135
|
+
>
|
|
136
|
+
Bold Text Badge (Large)
|
|
137
|
+
</div>
|
|
138
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
139
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
140
|
+
|
|
141
|
+
<div class="vx-badge bold greenBadge">Badge</div>
|
|
142
|
+
|
|
143
|
+
<div class="vx-badge bold redBadge">Badge</div>
|
|
144
|
+
|
|
145
|
+
<div class="vx-badge bold orangeBadge">Badge</div>
|
|
146
|
+
|
|
147
|
+
<div class="vx-badge bold yellowBadge">Badge</div>
|
|
148
|
+
|
|
149
|
+
<div class="vx-badge bold grayBadge">Badge</div>
|
|
150
|
+
|
|
151
|
+
<div class="vx-badge bold blackBadge">Badge</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="button-box vx-w-50 vx-ml-1 vx-pl-2 vx-pr-2">
|
|
155
|
+
<div
|
|
156
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
157
|
+
>
|
|
158
|
+
Bold Text Badge (Small)
|
|
159
|
+
</div>
|
|
160
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
161
|
+
<div class="vx-badge bold smallBadge blueBadge">Badge</div>
|
|
162
|
+
|
|
163
|
+
<div class="vx-badge bold smallBadge greenBadge">Badge</div>
|
|
164
|
+
|
|
165
|
+
<div class="vx-badge bold smallBadge redBadge">Badge</div>
|
|
166
|
+
|
|
167
|
+
<div class="vx-badge bold smallBadge orangeBadge">
|
|
168
|
+
Badge
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class="vx-badge bold smallBadge yellowBadge">
|
|
172
|
+
Badge
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<div class="vx-badge bold smallBadge grayBadge">Badge</div>
|
|
176
|
+
|
|
177
|
+
<div class="vx-badge bold smallBadge blackBadge">Badge</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
<!-- Subtle Badge -->
|
|
182
|
+
<div
|
|
183
|
+
class="preview-container vx-bg-white vx-p-2 vx-d-flex vx-justify-between"
|
|
184
|
+
>
|
|
185
|
+
<div class="button-box vx-w-50 vx-mr-1 vx-pl-2 vx-pr-2">
|
|
186
|
+
<div
|
|
187
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
188
|
+
>
|
|
189
|
+
Subtle Text Badge (Large)
|
|
190
|
+
</div>
|
|
191
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
192
|
+
<div class="vx-badge subtle blueBadge">Badge</div>
|
|
193
|
+
|
|
194
|
+
<div class="vx-badge subtle greenBadge">Badge</div>
|
|
195
|
+
|
|
196
|
+
<div class="vx-badge subtle redBadge">Badge</div>
|
|
197
|
+
|
|
198
|
+
<div class="vx-badge subtle orangeBadge">Badge</div>
|
|
199
|
+
|
|
200
|
+
<div class="vx-badge subtle yellowBadge">Badge</div>
|
|
201
|
+
|
|
202
|
+
<div class="vx-badge subtle grayBadge">Badge</div>
|
|
203
|
+
|
|
204
|
+
<div class="vx-badge subtle blackBadge">Badge</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="button-box vx-w-50 vx-ml-1 vx-pl-2 vx-pr-2">
|
|
208
|
+
<div
|
|
209
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
210
|
+
>
|
|
211
|
+
Subtle Text Badge (Small)
|
|
212
|
+
</div>
|
|
213
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
214
|
+
<div class="vx-badge subtle smallBadge blueBadge">
|
|
215
|
+
Badge
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="vx-badge subtle smallBadge greenBadge">
|
|
219
|
+
Badge
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="vx-badge subtle smallBadge redBadge">Badge</div>
|
|
223
|
+
|
|
224
|
+
<div class="vx-badge subtle smallBadge orangeBadge">
|
|
225
|
+
Badge
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="vx-badge subtle smallBadge yellowBadge">
|
|
229
|
+
Badge
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="vx-badge subtle smallBadge grayBadge">
|
|
233
|
+
Badge
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="vx-badge subtle smallBadge blackBadge">
|
|
237
|
+
Badge
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<!-- Minimal Badge -->
|
|
243
|
+
<div
|
|
244
|
+
class="preview-container vx-bg-white vx-p-2 vx-d-flex vx-justify-between"
|
|
245
|
+
>
|
|
246
|
+
<div class="button-box vx-w-50 vx-mr-1 vx-pl-2 vx-pr-2">
|
|
247
|
+
<div
|
|
248
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
249
|
+
>
|
|
250
|
+
Minimal Text Badge (Large)
|
|
251
|
+
</div>
|
|
252
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
253
|
+
<div class="vx-badge minimal blueBadge">Badge</div>
|
|
254
|
+
|
|
255
|
+
<div class="vx-badge minimal greenBadge">Badge</div>
|
|
256
|
+
|
|
257
|
+
<div class="vx-badge minimal redBadge">Badge</div>
|
|
258
|
+
|
|
259
|
+
<div class="vx-badge minimal orangeBadge">Badge</div>
|
|
260
|
+
|
|
261
|
+
<div class="vx-badge minimal yellowBadge">Badge</div>
|
|
262
|
+
|
|
263
|
+
<div class="vx-badge minimal grayBadge">Badge</div>
|
|
264
|
+
|
|
265
|
+
<div class="vx-badge minimal blackBadge">Badge</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="button-box vx-w-50 vx-ml-1 vx-pl-2 vx-pr-2">
|
|
269
|
+
<div
|
|
270
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
271
|
+
>
|
|
272
|
+
Minimal Text Badge (Small)
|
|
273
|
+
</div>
|
|
274
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
275
|
+
<div class="vx-badge minimal smallBadge blueBadge">
|
|
276
|
+
Badge
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="vx-badge minimal smallBadge greenBadge">
|
|
280
|
+
Badge
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<div class="vx-badge minimal smallBadge redBadge">
|
|
284
|
+
Badge
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<div class="vx-badge minimal smallBadge orangeBadge">
|
|
288
|
+
Badge
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="vx-badge minimal smallBadge yellowBadge">
|
|
292
|
+
Badge
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<div class="vx-badge minimal smallBadge grayBadge">
|
|
296
|
+
Badge
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
<div class="vx-badge minimal smallBadge blackBadge">
|
|
300
|
+
Badge
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="code-view vx-mb-5" id="emphasisBold">
|
|
307
|
+
<div class="code-navigation">
|
|
308
|
+
<button class="active" data-tab="emphasisBoldhtml">HTML</button>
|
|
309
|
+
<button data-tab="emphasisBoldless">CSS</button>
|
|
310
|
+
</div>
|
|
311
|
+
<code class="language-markup active" id="emphasisBoldhtml">
|
|
312
|
+
<script type="prism-html-markup">
|
|
313
|
+
We are using the following class names to create badge:
|
|
314
|
+
|
|
315
|
+
Bold Badge:
|
|
316
|
+
Example for bold badge (Large size):
|
|
317
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
318
|
+
<div class="vx-badge bold greenBadge">Badge</div>
|
|
319
|
+
<div class="vx-badge bold redBadge">Badge</div>
|
|
320
|
+
<div class="vx-badge bold orangeBadge">Badge</div>
|
|
321
|
+
<div class="vx-badge bold yellowBadge">Badge</div>
|
|
322
|
+
<div class="vx-badge bold grayBadge">Badge</div>
|
|
323
|
+
<div class="vx-badge bold blackBadge">Badge</div>
|
|
324
|
+
|
|
325
|
+
Example for bold badge (Small size):
|
|
326
|
+
<div class="vx-badge bold smallBadge blueBadge">Badge</div>
|
|
327
|
+
<div class="vx-badge bold smallBadge greenBadge">Badge</div>
|
|
328
|
+
<div class="vx-badge bold smallBadge redBadge">Badge</div>
|
|
329
|
+
<div class="vx-badge bold smallBadge orangeBadge">Badge</div>
|
|
330
|
+
<div class="vx-badge bold smallBadge yellowBadge">Badge</div>
|
|
331
|
+
<div class="vx-badge bold smallBadge grayBadge">Badge</div>
|
|
332
|
+
<div class="vx-badge bold smallBadge blackBadge">Badge</div>
|
|
145
333
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
334
|
+
Subtle Badge:
|
|
335
|
+
Example for subtle badge (Large size):
|
|
336
|
+
<div class="vx-badge subtle blueBadge">Badge</div>
|
|
337
|
+
<div class="vx-badge subtle greenBadge">Badge</div>
|
|
338
|
+
<div class="vx-badge subtle redBadge">Badge</div>
|
|
339
|
+
<div class="vx-badge subtle orangeBadge">Badge</div>
|
|
340
|
+
<div class="vx-badge subtle yellowBadge">Badge</div>
|
|
341
|
+
<div class="vx-badge subtle grayBadge">Badge</div>
|
|
342
|
+
<div class="vx-badge subtle blackBadge">Badge</div>
|
|
155
343
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
344
|
+
Example for subtle badge (Small size):
|
|
345
|
+
<div class="vx-badge subtle smallBadge blueBadge">Badge</div>
|
|
346
|
+
<div class="vx-badge subtle smallBadge greenBadge">Badge</div>
|
|
347
|
+
<div class="vx-badge subtle smallBadge redBadge">Badge</div>
|
|
348
|
+
<div class="vx-badge subtle smallBadge orangeBadge">Badge</div>
|
|
349
|
+
<div class="vx-badge subtle smallBadge yellowBadge">Badge</div>
|
|
350
|
+
<div class="vx-badge subtle smallBadge grayBadge">Badge</div>
|
|
351
|
+
<div class="vx-badge subtle smallBadge blackBadge">Badge</div>
|
|
164
352
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
353
|
+
Minimal Badge:
|
|
354
|
+
Example for minimal badge (Large size):
|
|
355
|
+
<div class="vx-badge minimal blueBadge">Badge</div>
|
|
356
|
+
<div class="vx-badge minimal greenBadge">Badge</div>
|
|
357
|
+
<div class="vx-badge minimal redBadge">Badge</div>
|
|
358
|
+
<div class="vx-badge minimal orangeBadge">Badge</div>
|
|
359
|
+
<div class="vx-badge minimal yellowBadge">Badge</div>
|
|
360
|
+
<div class="vx-badge minimal grayBadge">Badge</div>
|
|
361
|
+
<div class="vx-badge minimal blackBadge">Badge</div>
|
|
174
362
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
363
|
+
Example for minimal badge (Small size):
|
|
364
|
+
<div class="vx-badge minimal smallBadge blueBadge">Badge</div>
|
|
365
|
+
<div class="vx-badge minimal smallBadge greenBadge">Badge</div>
|
|
366
|
+
<div class="vx-badge minimal smallBadge redBadge">Badge</div>
|
|
367
|
+
<div class="vx-badge minimal smallBadge orangeBadge">Badge</div>
|
|
368
|
+
<div class="vx-badge minimal smallBadge yellowBadge">Badge</div>
|
|
369
|
+
<div class="vx-badge minimal smallBadge grayBadge">Badge</div>
|
|
370
|
+
<div class="vx-badge minimal smallBadge blackBadge">Badge</div>
|
|
371
|
+
</script>
|
|
372
|
+
</code>
|
|
373
|
+
<code class="language-markup" id="emphasisBoldless">
|
|
374
|
+
<script type="prism-html-markup">
|
|
375
|
+
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
376
|
+
</script>
|
|
377
|
+
</code>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
183
380
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<div class="vx-badge minimal blueBadge">Badge</div>
|
|
187
|
-
<div class="vx-badge minimal greenBadge">Badge</div>
|
|
188
|
-
<div class="vx-badge minimal redBadge">Badge</div>
|
|
189
|
-
<div class="vx-badge minimal orangeBadge">Badge</div>
|
|
190
|
-
<div class="vx-badge minimal yellowBadge">Badge</div>
|
|
191
|
-
<div class="vx-badge minimal grayBadge">Badge</div>
|
|
192
|
-
<div class="vx-badge minimal blackBadge">Badge</div>
|
|
381
|
+
<div class="container" id="sizeLayout">
|
|
382
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Sizes Badge</h3>
|
|
193
383
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
384
|
+
<div class="preview-block">
|
|
385
|
+
<div class="action-buttons">
|
|
386
|
+
<button class="vx-btn md transparent">
|
|
387
|
+
<i class="icons"></i> Copy Code
|
|
388
|
+
</button>
|
|
389
|
+
<button class="vx-btn md transparent" data-tab="size">
|
|
390
|
+
<i class="icons"></i
|
|
391
|
+
><i class="icons"></i> View Code
|
|
392
|
+
</button>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
395
|
+
<div class="button-box vx-w-100 vx-pl-2 vx-pr-2">
|
|
396
|
+
<div
|
|
397
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
398
|
+
>
|
|
399
|
+
Bold
|
|
400
|
+
</div>
|
|
401
|
+
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
402
|
+
<div>
|
|
403
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
404
|
+
<div class="vx-badgeNum xxl bold">30</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<div>
|
|
408
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
409
|
+
<div class="vx-badgeNum xl bold">30</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
<div>
|
|
413
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
414
|
+
<div class="vx-badgeNum large bold">30</div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
<div>
|
|
418
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
419
|
+
<div class="vx-badgeNum medium bold">30</div>
|
|
420
|
+
</div>
|
|
421
|
+
|
|
422
|
+
<div>
|
|
423
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
424
|
+
<div class="vx-badgeNum small bold">30</div>
|
|
425
|
+
</div>
|
|
426
|
+
|
|
427
|
+
<div>
|
|
428
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
429
|
+
<div class="vx-badgeNum xs bold">4</div>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
<div
|
|
433
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
434
|
+
>
|
|
435
|
+
Subtle
|
|
436
|
+
</div>
|
|
437
|
+
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
438
|
+
<div>
|
|
439
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
440
|
+
<div class="vx-badgeNum xxl subtle">30</div>
|
|
441
|
+
</div>
|
|
442
|
+
|
|
443
|
+
<div>
|
|
444
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
445
|
+
<div class="vx-badgeNum xl subtle">30</div>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<div>
|
|
449
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
450
|
+
<div class="vx-badgeNum large subtle">30</div>
|
|
451
|
+
</div>
|
|
452
|
+
|
|
453
|
+
<div>
|
|
454
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
455
|
+
<div class="vx-badgeNum medium subtle">30</div>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div>
|
|
459
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
460
|
+
<div class="vx-badgeNum small subtle">30</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
<div>
|
|
464
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
465
|
+
<div class="vx-badgeNum xs subtle">4</div>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
<div
|
|
469
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
470
|
+
>
|
|
471
|
+
Minimal
|
|
472
|
+
</div>
|
|
473
|
+
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
474
|
+
<div>
|
|
475
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
476
|
+
<div class="vx-badgeNum xxl minimal">30</div>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
<div>
|
|
480
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
481
|
+
<div class="vx-badgeNum xl minimal">30</div>
|
|
209
482
|
</div>
|
|
483
|
+
|
|
484
|
+
<div>
|
|
485
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
486
|
+
<div class="vx-badgeNum large minimal">30</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
<div>
|
|
490
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
491
|
+
<div class="vx-badgeNum medium minimal">30</div>
|
|
492
|
+
</div>
|
|
493
|
+
|
|
494
|
+
<div>
|
|
495
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
496
|
+
<div class="vx-badgeNum small minimal">30</div>
|
|
497
|
+
</div>
|
|
498
|
+
|
|
499
|
+
<div>
|
|
500
|
+
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
501
|
+
<div class="vx-badgeNum xs minimal">4</div>
|
|
502
|
+
</div>
|
|
503
|
+
</div>
|
|
210
504
|
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
<div class="code-view vx-mb-5" id="size">
|
|
508
|
+
<div class="code-navigation">
|
|
509
|
+
<button class="active" data-tab="sizehtml">HTML</button>
|
|
510
|
+
<button data-tab="sizeless">CSS</button>
|
|
511
|
+
</div>
|
|
512
|
+
<code class="language-markup active" id="sizehtml">
|
|
513
|
+
<script type="prism-html-markup">
|
|
514
|
+
We are using the following class names to create numaric badge:
|
|
211
515
|
|
|
212
|
-
|
|
213
|
-
|
|
516
|
+
Example for bold badge:
|
|
517
|
+
<div class="vx-badgeNum xxl bold">30</div>
|
|
518
|
+
<div class="vx-badgeNum xl bold">30</div>
|
|
519
|
+
<div class="vx-badgeNum large bold">30</div>
|
|
520
|
+
<div class="vx-badgeNum medium bold">30</div>
|
|
521
|
+
<div class="vx-badgeNum small bold">30</div>
|
|
522
|
+
<div class="vx-badgeNum xs bold">4</div>
|
|
214
523
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
</button>
|
|
223
|
-
</div>
|
|
224
|
-
<div class="preview-container vx-bg-white vx-p-2">
|
|
225
|
-
<div class="button-box vx-w-100 vx-pl-2 vx-pr-2">
|
|
226
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">Bold</div>
|
|
227
|
-
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
228
|
-
<div>
|
|
229
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
230
|
-
<div class="vx-badgeNum xxl bold">30</div>
|
|
231
|
-
</div>
|
|
232
|
-
<div>
|
|
233
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
234
|
-
<div class="vx-badgeNum xl bold">30</div>
|
|
235
|
-
</div>
|
|
236
|
-
<div>
|
|
237
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
238
|
-
<div class="vx-badgeNum large bold">30</div>
|
|
239
|
-
</div>
|
|
240
|
-
<div>
|
|
241
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
242
|
-
<div class="vx-badgeNum medium bold">30</div>
|
|
243
|
-
</div>
|
|
244
|
-
<div>
|
|
245
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
246
|
-
<div class="vx-badgeNum small bold">30</div>
|
|
247
|
-
</div>
|
|
248
|
-
<div>
|
|
249
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
250
|
-
<div class="vx-badgeNum xs bold">4</div>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">Subtle</div>
|
|
254
|
-
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
255
|
-
<div>
|
|
256
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
257
|
-
<div class="vx-badgeNum xxl subtle">30</div>
|
|
258
|
-
</div>
|
|
259
|
-
<div>
|
|
260
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
261
|
-
<div class="vx-badgeNum xl subtle">30</div>
|
|
262
|
-
</div>
|
|
263
|
-
<div>
|
|
264
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
265
|
-
<div class="vx-badgeNum large subtle">30</div>
|
|
266
|
-
</div>
|
|
267
|
-
<div>
|
|
268
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
269
|
-
<div class="vx-badgeNum medium subtle">30</div>
|
|
270
|
-
</div>
|
|
271
|
-
<div>
|
|
272
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
273
|
-
<div class="vx-badgeNum small subtle">30</div>
|
|
274
|
-
</div>
|
|
275
|
-
<div>
|
|
276
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
277
|
-
<div class="vx-badgeNum xs subtle">4</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">Minimal</div>
|
|
281
|
-
<div class="vx-d-flex vx-justify-between vx-mb-3 vx-mr-5">
|
|
282
|
-
<div>
|
|
283
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">XX-Large(xxl)</div>
|
|
284
|
-
<div class="vx-badgeNum xxl minimal">30</div>
|
|
285
|
-
</div>
|
|
286
|
-
<div>
|
|
287
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Large(xl)</div>
|
|
288
|
-
<div class="vx-badgeNum xl minimal">30</div>
|
|
289
|
-
</div>
|
|
290
|
-
<div>
|
|
291
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Large(large)</div>
|
|
292
|
-
<div class="vx-badgeNum large minimal">30</div>
|
|
293
|
-
</div>
|
|
294
|
-
<div>
|
|
295
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Medium(medium)</div>
|
|
296
|
-
<div class="vx-badgeNum medium minimal">30</div>
|
|
297
|
-
</div>
|
|
298
|
-
<div>
|
|
299
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">Small(small)</div>
|
|
300
|
-
<div class="vx-badgeNum small minimal">30</div>
|
|
301
|
-
</div>
|
|
302
|
-
<div>
|
|
303
|
-
<div class="vx-fs-12 vx-lh-10 vx-m-0">X-Small(xs)</div>
|
|
304
|
-
<div class="vx-badgeNum xs minimal">4</div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
</div>
|
|
310
|
-
<div class="code-view vx-mb-5" id="size">
|
|
311
|
-
<div class="code-navigation">
|
|
312
|
-
<button class="active" data-tab="sizehtml">HTML</button>
|
|
313
|
-
<button data-tab="sizeless">CSS</button>
|
|
314
|
-
</div>
|
|
315
|
-
<code class="language-markup active" id="sizehtml">
|
|
316
|
-
<script type="prism-html-markup">
|
|
317
|
-
We are using the following class names to create numaric badge:
|
|
524
|
+
Example for subtle badge:
|
|
525
|
+
<div class="vx-badgeNum xxl subtle">30</div>
|
|
526
|
+
<div class="vx-badgeNum xl subtle">30</div>
|
|
527
|
+
<div class="vx-badgeNum large subtle">30</div>
|
|
528
|
+
<div class="vx-badgeNum medium subtle">30</div>
|
|
529
|
+
<div class="vx-badgeNum small subtle">30</div>
|
|
530
|
+
<div class="vx-badgeNum xs subtle">4</div>
|
|
318
531
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
532
|
+
Example for minimal badge:
|
|
533
|
+
<div class="vx-badgeNum xxl minimal">30</div>
|
|
534
|
+
<div class="vx-badgeNum xl minimal">30</div>
|
|
535
|
+
<div class="vx-badgeNum large minimal">30</div>
|
|
536
|
+
<div class="vx-badgeNum medium minimal">30</div>
|
|
537
|
+
<div class="vx-badgeNum small minimal">30</div>
|
|
538
|
+
<div class="vx-badgeNum xs minimal">4</div>
|
|
326
539
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
540
|
+
When we have to use pointerCursor class to make the badge clickable.
|
|
541
|
+
<div class="vx-badgeNum xxl minimal pointerCursor">30</div>
|
|
542
|
+
</script>
|
|
543
|
+
</code>
|
|
544
|
+
<code class="language-markup" id="sizeless">
|
|
545
|
+
<script type="prism-html-markup">
|
|
546
|
+
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
547
|
+
</script>
|
|
548
|
+
</code>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
334
551
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
<div class="vx-badgeNum xl minimal">30</div>
|
|
338
|
-
<div class="vx-badgeNum large minimal">30</div>
|
|
339
|
-
<div class="vx-badgeNum medium minimal">30</div>
|
|
340
|
-
<div class="vx-badgeNum small minimal">30</div>
|
|
341
|
-
<div class="vx-badgeNum xs minimal">4</div>
|
|
552
|
+
<div class="container" id="shapesLayout">
|
|
553
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Shapes Badge</h3>
|
|
342
554
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
555
|
+
<div class="preview-block">
|
|
556
|
+
<div class="action-buttons">
|
|
557
|
+
<button class="vx-btn md transparent">
|
|
558
|
+
<i class="icons"></i> Copy Code
|
|
559
|
+
</button>
|
|
560
|
+
<button class="vx-btn md transparent" data-tab="shapes">
|
|
561
|
+
<i class="icons"></i
|
|
562
|
+
><i class="icons"></i> View Code
|
|
563
|
+
</button>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
566
|
+
<div class="vx-d-flex vx-justify-around vx-mt-2 vx-mb-2">
|
|
567
|
+
<div class="vx-d-flex vx-align-center">
|
|
568
|
+
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Rectangle:</div>
|
|
569
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
570
|
+
</div>
|
|
571
|
+
<div class="vx-d-flex vx-align-center">
|
|
572
|
+
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Oval:</div>
|
|
573
|
+
<div class="vx-badgeNum xs bold oval">4</div>
|
|
574
|
+
|
|
575
|
+
<div class="vx-badgeNum xs bold greenBg oval">4</div>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="vx-d-flex vx-align-center">
|
|
578
|
+
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Circle:</div>
|
|
579
|
+
<div class="vx-badgeCircle greenCircleBadge"></div>
|
|
580
|
+
|
|
581
|
+
<div class="vx-badgeCircle redCircleBadge"></div>
|
|
582
|
+
|
|
583
|
+
<div class="vx-badgeCircle blueCircleBadge"></div>
|
|
584
|
+
|
|
585
|
+
<div
|
|
586
|
+
class="vx-badgeCircle greenCircleBadge smallCircleBadge"
|
|
587
|
+
></div>
|
|
588
|
+
|
|
589
|
+
<div
|
|
590
|
+
class="vx-badgeCircle redCircleBadge smallCircleBadge"
|
|
591
|
+
></div>
|
|
592
|
+
|
|
593
|
+
<div
|
|
594
|
+
class="vx-badgeCircle blueCircleBadge smallCircleBadge"
|
|
595
|
+
></div>
|
|
596
|
+
</div>
|
|
353
597
|
</div>
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
<div class="code-view vx-mb-5" id="shapes">
|
|
601
|
+
<div class="code-navigation">
|
|
602
|
+
<button class="active" data-tab="shapeshtml">HTML</button>
|
|
603
|
+
<button data-tab="shapesless">CSS</button>
|
|
604
|
+
</div>
|
|
605
|
+
<code class="language-markup active" id="shapeshtml">
|
|
606
|
+
<script type="prism-html-markup">
|
|
607
|
+
We are using the following class names to create badge:
|
|
354
608
|
|
|
355
|
-
|
|
356
|
-
|
|
609
|
+
Example for rectangle badge:
|
|
610
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
357
611
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
<i class="icons"></i> Copy Code
|
|
362
|
-
</button>
|
|
363
|
-
<button class="vx-btn md transparent" data-tab="shapes">
|
|
364
|
-
<i class="icons"></i><i class="icons"></i> View Code
|
|
365
|
-
</button>
|
|
366
|
-
</div>
|
|
367
|
-
<div class="preview-container vx-bg-white vx-p-2">
|
|
368
|
-
<div class="vx-d-flex vx-justify-around vx-mt-2 vx-mb-2">
|
|
369
|
-
<div class="vx-d-flex vx-align-center">
|
|
370
|
-
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Rectangle:</div>
|
|
371
|
-
<div class="vx-badge bold blueBadge">Badge</div>
|
|
372
|
-
</div>
|
|
373
|
-
<div class="vx-d-flex vx-align-center">
|
|
374
|
-
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Oval:</div>
|
|
375
|
-
<div class="vx-badgeNum xs bold oval">4</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="vx-d-flex vx-align-center">
|
|
378
|
-
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Circle:</div>
|
|
379
|
-
<div class="vx-badgeCircle greenCircleBadge"></div>
|
|
380
|
-
<div class="vx-badgeCircle redCircleBadge"></div>
|
|
381
|
-
<div class="vx-badgeCircle blueCircleBadge"></div>
|
|
382
|
-
<div class="vx-badgeCircle greenCircleBadge smallCircleBadge"></div>
|
|
383
|
-
<div class="vx-badgeCircle redCircleBadge smallCircleBadge"></div>
|
|
384
|
-
<div class="vx-badgeCircle blueCircleBadge smallCircleBadge"></div>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
</div>
|
|
388
|
-
</div>
|
|
389
|
-
<div class="code-view vx-mb-5" id="shapes">
|
|
390
|
-
<div class="code-navigation">
|
|
391
|
-
<button class="active" data-tab="shapeshtml">HTML</button>
|
|
392
|
-
<button data-tab="shapesless">CSS</button>
|
|
393
|
-
</div>
|
|
394
|
-
<code class="language-markup active" id="shapeshtml">
|
|
395
|
-
<script type="prism-html-markup">
|
|
396
|
-
We are using the following class names to create badge:
|
|
612
|
+
Example for oval badge:
|
|
613
|
+
<div class="vx-badgeNum xs bold oval">4</div>
|
|
614
|
+
<div class="vx-badgeNum xs bold greenBg oval">4</div>
|
|
397
615
|
|
|
398
|
-
|
|
399
|
-
|
|
616
|
+
Example for circle badge:
|
|
617
|
+
<div class="vx-badgeCircle greenCircleBadge"></div>
|
|
618
|
+
<div class="vx-badgeCircle blueCircleBadge"></div>
|
|
619
|
+
<div class="vx-badgeCircle greenCircleBadge smallCircleBadge"></div>
|
|
620
|
+
<div class="vx-badgeCircle blueCircleBadge smallCircleBadge"></div>
|
|
621
|
+
</script>
|
|
622
|
+
</code>
|
|
623
|
+
<code class="language-markup" id="shapesless">
|
|
624
|
+
<script type="prism-html-markup">
|
|
625
|
+
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
626
|
+
</script>
|
|
627
|
+
</code>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
400
630
|
|
|
401
|
-
|
|
402
|
-
|
|
631
|
+
<div class="container" id="textFormatLayout">
|
|
632
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">
|
|
633
|
+
Text Formatting Badge
|
|
634
|
+
</h3>
|
|
403
635
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
636
|
+
<div class="preview-block">
|
|
637
|
+
<div class="action-buttons">
|
|
638
|
+
<button class="vx-btn md transparent">
|
|
639
|
+
<i class="icons"></i> Copy Code
|
|
640
|
+
</button>
|
|
641
|
+
<button class="vx-btn md transparent" data-tab="textFormat">
|
|
642
|
+
<i class="icons"></i
|
|
643
|
+
><i class="icons"></i> View Code
|
|
644
|
+
</button>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
647
|
+
<div class="vx-d-flex vx-justify-center vx-mt-2 vx-mb-2">
|
|
648
|
+
<div class="vx-d-flex vx-align-center vx-mr-5 vx-pr-5">
|
|
649
|
+
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Default:</div>
|
|
650
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
651
|
+
</div>
|
|
652
|
+
<div class="vx-d-flex vx-align-center vx-ml-5 vx-pl-5">
|
|
653
|
+
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Title Case:</div>
|
|
654
|
+
<div class="vx-badge subtle blueBadge titleCaseBadge">
|
|
655
|
+
Badge
|
|
416
656
|
</div>
|
|
657
|
+
</div>
|
|
417
658
|
</div>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
<div class="code-view vx-mb-5" id="textFormat">
|
|
662
|
+
<div class="code-navigation">
|
|
663
|
+
<button class="active" data-tab="textFormathtml">HTML</button>
|
|
664
|
+
<button data-tab="textFormatless">CSS</button>
|
|
665
|
+
</div>
|
|
666
|
+
<code class="language-markup active" id="textFormathtml">
|
|
667
|
+
<script type="prism-html-markup">
|
|
668
|
+
We are using the following class names to create badge:
|
|
418
669
|
|
|
419
|
-
|
|
420
|
-
|
|
670
|
+
Example for default badge:
|
|
671
|
+
<div class="vx-badge bold blueBadge">Badge</div>
|
|
421
672
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
<div class="vx-d-flex vx-align-center vx-mr-5 vx-pr-5">
|
|
434
|
-
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Default:</div>
|
|
435
|
-
<div class="vx-badge bold blueBadge">Badge</div>
|
|
436
|
-
</div>
|
|
437
|
-
<div class="vx-d-flex vx-align-center vx-ml-5 vx-pl-5">
|
|
438
|
-
<div class="vx-fs-12 vx-lh-10 vx-mr-3">Title Case:</div>
|
|
439
|
-
<div class="vx-badge subtle blueBadge titleCaseBadge">Badge</div>
|
|
440
|
-
</div>
|
|
441
|
-
</div>
|
|
442
|
-
</div>
|
|
443
|
-
</div>
|
|
444
|
-
<div class="code-view vx-mb-5" id="textFormat">
|
|
445
|
-
<div class="code-navigation">
|
|
446
|
-
<button class="active" data-tab="textFormathtml">HTML</button>
|
|
447
|
-
<button data-tab="textFormatless">CSS</button>
|
|
448
|
-
</div>
|
|
449
|
-
<code class="language-markup active" id="textFormathtml">
|
|
450
|
-
<script type="prism-html-markup">
|
|
451
|
-
We are using the following class names to create badge:
|
|
673
|
+
Example for title case badge:
|
|
674
|
+
<div class="vx-badge subtle blueBadge titleCaseBadge">Badge</div>
|
|
675
|
+
</script>
|
|
676
|
+
</code>
|
|
677
|
+
<code class="language-markup" id="textFormatless">
|
|
678
|
+
<script type="prism-html-markup">
|
|
679
|
+
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
680
|
+
</script>
|
|
681
|
+
</code>
|
|
682
|
+
</div>
|
|
683
|
+
</div>
|
|
452
684
|
|
|
453
|
-
|
|
454
|
-
|
|
685
|
+
<div class="container" id="iconLayout">
|
|
686
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Icon Badge</h3>
|
|
455
687
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
688
|
+
<div class="preview-block">
|
|
689
|
+
<div class="action-buttons">
|
|
690
|
+
<button class="vx-btn md transparent">
|
|
691
|
+
<i class="icons"></i> Copy Code
|
|
692
|
+
</button>
|
|
693
|
+
<button class="vx-btn md transparent" data-tab="iconBadge">
|
|
694
|
+
<i class="icons"></i
|
|
695
|
+
><i class="icons"></i> View Code
|
|
696
|
+
</button>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
699
|
+
<div class="vx-iconBadge likeBadge">
|
|
700
|
+
<i class="icons"></i>8.2
|
|
466
701
|
</div>
|
|
702
|
+
|
|
703
|
+
<div class="vx-iconBadge dislikeBadge">
|
|
704
|
+
<i class="icons"></i>8.2
|
|
705
|
+
</div>
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
708
|
+
<div class="code-view vx-mb-5" id="iconBadge">
|
|
709
|
+
<div class="code-navigation">
|
|
710
|
+
<button class="active" data-tab="iconBadgehtml">HTML</button>
|
|
711
|
+
<button data-tab="iconBadgeless">CSS</button>
|
|
712
|
+
</div>
|
|
713
|
+
<code class="language-markup active" id="iconBadgehtml">
|
|
714
|
+
<script type="prism-html-markup">
|
|
715
|
+
We are using the following class names to create icon badge:
|
|
467
716
|
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
<div class="action-buttons">
|
|
473
|
-
<button class="vx-btn md transparent">
|
|
474
|
-
<i class="icons"></i> Copy Code
|
|
475
|
-
</button>
|
|
476
|
-
<button class="vx-btn md transparent" data-tab="iconBadge">
|
|
477
|
-
<i class="icons"></i><i class="icons"></i> View Code
|
|
478
|
-
</button>
|
|
479
|
-
</div>
|
|
480
|
-
<div class="preview-container vx-bg-white vx-p-2">
|
|
481
|
-
<div class="vx-iconBadge likeBadge">
|
|
482
|
-
<i class="icons"></i>8.2
|
|
483
|
-
</div>
|
|
484
|
-
<div class="vx-iconBadge dislikeBadge">
|
|
485
|
-
<i class="icons"></i>8.2
|
|
486
|
-
</div>
|
|
487
|
-
</div>
|
|
488
|
-
</div>
|
|
489
|
-
<div class="code-view vx-mb-5" id="iconBadge">
|
|
490
|
-
<div class="code-navigation">
|
|
491
|
-
<button class="active" data-tab="iconBadgehtml">HTML</button>
|
|
492
|
-
<button data-tab="iconBadgeless">CSS</button>
|
|
493
|
-
</div>
|
|
494
|
-
<code class="language-markup active" id="iconBadgehtml">
|
|
495
|
-
<script type="prism-html-markup">
|
|
496
|
-
We are using the following class names to create icon badge:
|
|
717
|
+
Example for like icon badge:
|
|
718
|
+
<div class="vx-iconBadge likeBadge">
|
|
719
|
+
<i class="icons"></i>8.2
|
|
720
|
+
</div>
|
|
497
721
|
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
722
|
+
Example for dislike icon badge:
|
|
723
|
+
<div class="vx-iconBadge dislikeBadge">
|
|
724
|
+
<i class="icons"></i>8.2
|
|
725
|
+
</div>
|
|
726
|
+
</script>
|
|
727
|
+
</code>
|
|
728
|
+
<code class="language-markup" id="iconBadgeless">
|
|
729
|
+
<script type="prism-html-markup">
|
|
730
|
+
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
731
|
+
</script>
|
|
732
|
+
</code>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
502
735
|
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
</script>
|
|
508
|
-
</code>
|
|
509
|
-
<code class="language-markup" id="iconBadgeless">
|
|
510
|
-
<script type="prism-html-markup">
|
|
511
|
-
@import "~vx-design-system/css-build/less/badge/badge.less"
|
|
512
|
-
</script>
|
|
513
|
-
</code>
|
|
514
|
-
</div>
|
|
515
|
-
</div>
|
|
736
|
+
<div class="container" id="StatusLayout">
|
|
737
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">
|
|
738
|
+
Status / Type Badge
|
|
739
|
+
</h3>
|
|
516
740
|
|
|
517
|
-
|
|
518
|
-
|
|
741
|
+
<div class="preview-block">
|
|
742
|
+
<div class="action-buttons">
|
|
743
|
+
<button class="vx-btn md transparent">
|
|
744
|
+
<i class="icons"></i> Copy Code
|
|
745
|
+
</button>
|
|
746
|
+
<button class="vx-btn md transparent">
|
|
747
|
+
<i class="icons"></i
|
|
748
|
+
><i class="icons"></i> View Code
|
|
749
|
+
</button>
|
|
750
|
+
</div>
|
|
519
751
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
<div class="vx-badge bold redBadge">Error</div>
|
|
549
|
-
<div class="vx-badge bold redBadge">Declined</div>
|
|
550
|
-
<div class="vx-badge bold redBadge">Inactive</div>
|
|
551
|
-
<div class="vx-badge bold redBadge">Non-Compliant</div>
|
|
552
|
-
</div>
|
|
553
|
-
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
554
|
-
<div class="vx-badge bold orangeBadge">Not Accepted</div>
|
|
555
|
-
</div>
|
|
556
|
-
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
557
|
-
<div class="vx-badge bold yellowBadge">Delayed</div>
|
|
558
|
-
<div class="vx-badge bold yellowBadge">Pending</div>
|
|
559
|
-
</div>
|
|
560
|
-
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
561
|
-
<div class="vx-badge bold grayBadge">On Hold</div>
|
|
562
|
-
</div>
|
|
563
|
-
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-2">
|
|
564
|
-
<div class="vx-badge bold blackBadge">None</div>
|
|
565
|
-
</div>
|
|
566
|
-
</div>
|
|
567
|
-
</div>
|
|
568
|
-
<div class="vx-w-50">
|
|
569
|
-
<div class="vx-fs-16 vx-lh-10">Type</div>
|
|
570
|
-
<div class="button-box vx-ml-1 vx-pl-2 vx-pr-2">
|
|
571
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">Program Type</div>
|
|
572
|
-
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
573
|
-
<div class="vx-badge bold smallBadge blueBadge">Standard</div>
|
|
574
|
-
<div class="vx-badge bold smallBadge greenBadge">Regulations</div>
|
|
575
|
-
<div class="vx-badge bold smallBadge yellowBadge">Internal Controls</div>
|
|
576
|
-
<div class="vx-badge bold smallBadge grayBadge">Others</div>
|
|
577
|
-
</div>
|
|
578
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">Risk</div>
|
|
579
|
-
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
580
|
-
<div class="vx-badge bold smallBadge blueBadge">Accepted</div>
|
|
581
|
-
<div class="vx-badge bold smallBadge greenBadge">Mitigated</div>
|
|
582
|
-
<div class="vx-badge bold smallBadge redBadge">Avoided</div>
|
|
583
|
-
<div class="vx-badge bold smallBadge yellowBadge">Transferred</div>
|
|
584
|
-
</div>
|
|
585
|
-
<div class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0">User Type</div>
|
|
586
|
-
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
587
|
-
<div class="vx-badge bold smallBadge redBadge">Ket Power User</div>
|
|
588
|
-
<div class="vx-badge bold smallBadge yellowBadge">Power User</div>
|
|
589
|
-
<div class="vx-badge bold smallBadge blueBadge">Light User</div>
|
|
590
|
-
</div>
|
|
591
|
-
</div>
|
|
592
|
-
</div>
|
|
593
|
-
</div>
|
|
752
|
+
<div
|
|
753
|
+
class="preview-container vx-bg-white vx-p-2 vx-d-flex vx-justify-between"
|
|
754
|
+
>
|
|
755
|
+
<div class="vx-w-50">
|
|
756
|
+
<div class="vx-fs-16 vx-lh-10">Status</div>
|
|
757
|
+
<div class="button-box vx-mr-1 vx-pl-2 vx-pr-2">
|
|
758
|
+
<div
|
|
759
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
760
|
+
>
|
|
761
|
+
Bold
|
|
762
|
+
</div>
|
|
763
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-1">
|
|
764
|
+
<div class="vx-badge bold blueBadge">Information</div>
|
|
765
|
+
|
|
766
|
+
<div class="vx-badge bold blueBadge">Draft</div>
|
|
767
|
+
|
|
768
|
+
<div class="vx-badge bold blueBadge">Transferred</div>
|
|
769
|
+
</div>
|
|
770
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
771
|
+
<div class="vx-badge bold greenBadge">
|
|
772
|
+
Lifecycle Completed
|
|
773
|
+
</div>
|
|
774
|
+
|
|
775
|
+
<div class="vx-badge bold greenBadge">Active</div>
|
|
776
|
+
|
|
777
|
+
<div class="vx-badge bold greenBadge">Compliant</div>
|
|
778
|
+
|
|
779
|
+
<div class="vx-badge bold greenBadge">Passed</div>
|
|
594
780
|
</div>
|
|
781
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
782
|
+
<div class="vx-badge bold redBadge">Failed</div>
|
|
783
|
+
|
|
784
|
+
<div class="vx-badge bold redBadge">Error</div>
|
|
785
|
+
|
|
786
|
+
<div class="vx-badge bold redBadge">Declined</div>
|
|
787
|
+
|
|
788
|
+
<div class="vx-badge bold redBadge">Inactive</div>
|
|
789
|
+
|
|
790
|
+
<div class="vx-badge bold redBadge">Non-Compliant</div>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
793
|
+
<div class="vx-badge bold orangeBadge">Not Accepted</div>
|
|
794
|
+
</div>
|
|
795
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
796
|
+
<div class="vx-badge bold yellowBadge">Delayed</div>
|
|
797
|
+
|
|
798
|
+
<div class="vx-badge bold yellowBadge">Pending</div>
|
|
799
|
+
</div>
|
|
800
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-1">
|
|
801
|
+
<div class="vx-badge bold grayBadge">On Hold</div>
|
|
802
|
+
</div>
|
|
803
|
+
<div class="vx-d-flex vx-align-center vx-pt-1 vx-pb-2">
|
|
804
|
+
<div class="vx-badge bold blackBadge">None</div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
595
807
|
</div>
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
<
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
808
|
+
<div class="vx-w-50">
|
|
809
|
+
<div class="vx-fs-16 vx-lh-10">Type</div>
|
|
810
|
+
<div class="button-box vx-ml-1 vx-pl-2 vx-pr-2">
|
|
811
|
+
<div
|
|
812
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
813
|
+
>
|
|
814
|
+
Program Type
|
|
815
|
+
</div>
|
|
816
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
817
|
+
<div class="vx-badge bold smallBadge blueBadge">
|
|
818
|
+
Standard
|
|
819
|
+
</div>
|
|
820
|
+
|
|
821
|
+
<div class="vx-badge bold smallBadge greenBadge">
|
|
822
|
+
Regulations
|
|
823
|
+
</div>
|
|
824
|
+
|
|
825
|
+
<div class="vx-badge bold smallBadge yellowBadge">
|
|
826
|
+
Internal Controls
|
|
827
|
+
</div>
|
|
828
|
+
|
|
829
|
+
<div class="vx-badge bold smallBadge grayBadge">
|
|
830
|
+
Others
|
|
831
|
+
</div>
|
|
832
|
+
</div>
|
|
833
|
+
<div
|
|
834
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
835
|
+
>
|
|
836
|
+
Risk
|
|
837
|
+
</div>
|
|
838
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
839
|
+
<div class="vx-badge bold smallBadge blueBadge">
|
|
840
|
+
Accepted
|
|
841
|
+
</div>
|
|
842
|
+
|
|
843
|
+
<div class="vx-badge bold smallBadge greenBadge">
|
|
844
|
+
Mitigated
|
|
845
|
+
</div>
|
|
846
|
+
|
|
847
|
+
<div class="vx-badge bold smallBadge redBadge">
|
|
848
|
+
Avoided
|
|
849
|
+
</div>
|
|
850
|
+
|
|
851
|
+
<div class="vx-badge bold smallBadge yellowBadge">
|
|
852
|
+
Transferred
|
|
853
|
+
</div>
|
|
854
|
+
</div>
|
|
855
|
+
<div
|
|
856
|
+
class="button-box-heading vx-fs-12 vx-fw-600 vx-lh-10 vx-m-0"
|
|
857
|
+
>
|
|
858
|
+
User Type
|
|
859
|
+
</div>
|
|
860
|
+
<div class="vx-d-flex vx-align-center vx-pt-2 vx-pb-2">
|
|
861
|
+
<div class="vx-badge bold smallBadge redBadge">
|
|
862
|
+
Ket Power User
|
|
863
|
+
</div>
|
|
864
|
+
|
|
865
|
+
<div class="vx-badge bold smallBadge yellowBadge">
|
|
866
|
+
Power User
|
|
867
|
+
</div>
|
|
868
|
+
|
|
869
|
+
<div class="vx-badge bold smallBadge blueBadge">
|
|
870
|
+
Light User
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
</div>
|
|
608
874
|
</div>
|
|
875
|
+
</div>
|
|
609
876
|
</div>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
<div class="page-quick-menu">
|
|
880
|
+
<div class="vx-sub-menu vx-p-0">
|
|
881
|
+
<h3
|
|
882
|
+
class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-m-0 vx-label-txt vx-d-flex vx-align-center vx-pr-3 vx-pl-3"
|
|
883
|
+
>
|
|
884
|
+
Contents
|
|
885
|
+
</h3>
|
|
886
|
+
<ul class="vx-p-0">
|
|
887
|
+
<li>
|
|
888
|
+
<a
|
|
889
|
+
href="#emphasisColorsLayout"
|
|
890
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active"
|
|
891
|
+
>Emphasis & Colors Badge</a
|
|
892
|
+
>
|
|
893
|
+
</li>
|
|
894
|
+
<li>
|
|
895
|
+
<a
|
|
896
|
+
href="#sizeLayout"
|
|
897
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
898
|
+
>Sizes Badge</a
|
|
899
|
+
>
|
|
900
|
+
</li>
|
|
901
|
+
<li>
|
|
902
|
+
<a
|
|
903
|
+
href="#shapesLayout"
|
|
904
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
905
|
+
>Shapes Badge</a
|
|
906
|
+
>
|
|
907
|
+
</li>
|
|
908
|
+
<li>
|
|
909
|
+
<a
|
|
910
|
+
href="#textFormatLayout"
|
|
911
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
912
|
+
>Text Formatting Badge</a
|
|
913
|
+
>
|
|
914
|
+
</li>
|
|
915
|
+
<li>
|
|
916
|
+
<a
|
|
917
|
+
href="#iconLayout"
|
|
918
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
919
|
+
>Icons</a
|
|
920
|
+
>
|
|
921
|
+
</li>
|
|
922
|
+
<li>
|
|
923
|
+
<a
|
|
924
|
+
href="#StatusLayout"
|
|
925
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
926
|
+
>Status / Type</a
|
|
927
|
+
>
|
|
928
|
+
</li>
|
|
929
|
+
</ul>
|
|
930
|
+
</div>
|
|
610
931
|
</div>
|
|
932
|
+
</div>
|
|
611
933
|
</section>
|
|
612
934
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
613
935
|
<script async src="../less.js"></script>
|
|
614
936
|
<script src="../utility/prism.js"></script>
|
|
615
937
|
<script>
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
var tab_id = $(this).attr('data-tab');
|
|
640
|
-
$('#shapesLayout .code-navigation button').removeClass('active');
|
|
641
|
-
$('#shapesLayout .language-markup').removeClass('active');
|
|
642
|
-
console.log(tab_id)
|
|
643
|
-
$("#" + tab_id).addClass('active');
|
|
644
|
-
$(this).addClass('active');
|
|
645
|
-
})
|
|
646
|
-
$('#textFormatLayout .code-navigation button').click(function () {
|
|
647
|
-
var tab_id = $(this).attr('data-tab');
|
|
648
|
-
$('#textFormatLayout .code-navigation button').removeClass('active');
|
|
649
|
-
$('#textFormatLayout .language-markup').removeClass('active');
|
|
650
|
-
console.log(tab_id)
|
|
651
|
-
$("#" + tab_id).addClass('active');
|
|
652
|
-
$(this).addClass('active');
|
|
653
|
-
})
|
|
654
|
-
$('#iconLayout .code-navigation button').click(function () {
|
|
655
|
-
var tab_id = $(this).attr('data-tab');
|
|
656
|
-
$('#iconLayout .code-navigation button').removeClass('active');
|
|
657
|
-
$('#iconLayout .language-markup').removeClass('active');
|
|
658
|
-
console.log(tab_id)
|
|
659
|
-
$("#" + tab_id).addClass('active');
|
|
660
|
-
$(this).addClass('active');
|
|
661
|
-
})
|
|
938
|
+
$(document).ready(function () {
|
|
939
|
+
$("button").click(function () {
|
|
940
|
+
var tab_id = $(this).attr("data-tab");
|
|
941
|
+
$(".code-view vx-mb-5").removeClass("active");
|
|
942
|
+
$("#" + tab_id).toggleClass("active");
|
|
943
|
+
});
|
|
944
|
+
$("#emphasisColorsLayout .code-navigation button").click(function () {
|
|
945
|
+
var tab_id = $(this).attr("data-tab");
|
|
946
|
+
$("#emphasisColorsLayout .code-navigation button").removeClass(
|
|
947
|
+
"active"
|
|
948
|
+
);
|
|
949
|
+
$("#emphasisColorsLayout .language-markup").removeClass("active");
|
|
950
|
+
console.log(tab_id);
|
|
951
|
+
$("#" + tab_id).addClass("active");
|
|
952
|
+
$(this).addClass("active");
|
|
953
|
+
});
|
|
954
|
+
$("#sizeLayout .code-navigation button").click(function () {
|
|
955
|
+
var tab_id = $(this).attr("data-tab");
|
|
956
|
+
$("#sizeLayout .code-navigation button").removeClass("active");
|
|
957
|
+
$("#sizeLayout .language-markup").removeClass("active");
|
|
958
|
+
console.log(tab_id);
|
|
959
|
+
$("#" + tab_id).addClass("active");
|
|
960
|
+
$(this).addClass("active");
|
|
662
961
|
});
|
|
663
|
-
$(
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
962
|
+
$("#shapesLayout .code-navigation button").click(function () {
|
|
963
|
+
var tab_id = $(this).attr("data-tab");
|
|
964
|
+
$("#shapesLayout .code-navigation button").removeClass("active");
|
|
965
|
+
$("#shapesLayout .language-markup").removeClass("active");
|
|
966
|
+
console.log(tab_id);
|
|
967
|
+
$("#" + tab_id).addClass("active");
|
|
968
|
+
$(this).addClass("active");
|
|
969
|
+
});
|
|
970
|
+
$("#textFormatLayout .code-navigation button").click(function () {
|
|
971
|
+
var tab_id = $(this).attr("data-tab");
|
|
972
|
+
$("#textFormatLayout .code-navigation button").removeClass("active");
|
|
973
|
+
$("#textFormatLayout .language-markup").removeClass("active");
|
|
974
|
+
console.log(tab_id);
|
|
975
|
+
$("#" + tab_id).addClass("active");
|
|
976
|
+
$(this).addClass("active");
|
|
977
|
+
});
|
|
978
|
+
$("#iconLayout .code-navigation button").click(function () {
|
|
979
|
+
var tab_id = $(this).attr("data-tab");
|
|
980
|
+
$("#iconLayout .code-navigation button").removeClass("active");
|
|
981
|
+
$("#iconLayout .language-markup").removeClass("active");
|
|
982
|
+
console.log(tab_id);
|
|
983
|
+
$("#" + tab_id).addClass("active");
|
|
984
|
+
$(this).addClass("active");
|
|
985
|
+
});
|
|
986
|
+
});
|
|
987
|
+
$('ul li a.vx-fs-3[href*="#"]')
|
|
988
|
+
.not('[href="#"]')
|
|
989
|
+
.not('[href="#0"]')
|
|
990
|
+
.click(function (event) {
|
|
991
|
+
if (
|
|
992
|
+
location.pathname.replace(/^\//, "") ==
|
|
993
|
+
this.pathname.replace(/^\//, "") &&
|
|
994
|
+
location.hostname == this.hostname
|
|
995
|
+
) {
|
|
996
|
+
$('ul li a.vx-fs-3[href*="#"]').removeClass("active");
|
|
997
|
+
$(this).addClass("active");
|
|
998
|
+
var target = $(this.hash);
|
|
999
|
+
console.log(target);
|
|
1000
|
+
target = target.length
|
|
1001
|
+
? target
|
|
1002
|
+
: $("[name=" + this.hash.slice(1) + "]");
|
|
1003
|
+
if (target.length) {
|
|
1004
|
+
event.preventDefault();
|
|
1005
|
+
$("html, body").animate(
|
|
1006
|
+
{
|
|
1007
|
+
scrollTop: target.offset().top - 110,
|
|
1008
|
+
},
|
|
1009
|
+
100,
|
|
1010
|
+
function () {
|
|
1011
|
+
var $target = $(target);
|
|
1012
|
+
$target.focus();
|
|
1013
|
+
if ($target.is(":focus")) {
|
|
1014
|
+
return false;
|
|
1015
|
+
} else {
|
|
1016
|
+
$target.attr("tabindex", "-1");
|
|
1017
|
+
$target.focus();
|
|
1018
|
+
}
|
|
690
1019
|
}
|
|
691
|
-
|
|
1020
|
+
);
|
|
1021
|
+
}
|
|
1022
|
+
}
|
|
1023
|
+
});
|
|
692
1024
|
</script>
|
|
693
|
-
</body>
|
|
694
|
-
</html>
|
|
1025
|
+
</body>
|
|
1026
|
+
</html>
|