vcomply-design-system 1.2.2 → 1.2.3
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.
- package/css-build/less/color/color.less +593 -405
- package/css-build/pages/color-palette.html +1006 -766
- package/package.json +1 -1
|
@@ -1,794 +1,1034 @@
|
|
|
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
|
-
|
|
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-bottom.less"
|
|
60
|
+
/>
|
|
61
|
+
<link
|
|
62
|
+
rel="stylesheet/less"
|
|
63
|
+
type="text/css"
|
|
64
|
+
href="../less/margin/margin-left.less"
|
|
65
|
+
/>
|
|
66
|
+
<link
|
|
67
|
+
rel="stylesheet/less"
|
|
68
|
+
type="text/css"
|
|
69
|
+
href="../less/margin/margin-top.less"
|
|
70
|
+
/>
|
|
71
|
+
<link
|
|
72
|
+
rel="stylesheet/less"
|
|
73
|
+
type="text/css"
|
|
74
|
+
href="../less/alignment/alignment.less"
|
|
75
|
+
/>
|
|
76
|
+
<link
|
|
77
|
+
rel="stylesheet/less"
|
|
78
|
+
type="text/css"
|
|
79
|
+
href="../less/color/color.less"
|
|
80
|
+
/>
|
|
27
81
|
<link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
|
|
28
|
-
<link
|
|
29
|
-
|
|
30
|
-
|
|
82
|
+
<link
|
|
83
|
+
rel="stylesheet/less"
|
|
84
|
+
type="text/css"
|
|
85
|
+
href="../less/left-menu/sub-menu.less"
|
|
86
|
+
/>
|
|
87
|
+
</head>
|
|
88
|
+
<body>
|
|
31
89
|
<section>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
90
|
+
<div class="head vx-mb-5">
|
|
91
|
+
<h2 class="title vx-label-txt vx-m-0 vx-mb-4">Color Palette</h2>
|
|
92
|
+
<!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
|
|
35
93
|
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.
|
|
36
94
|
</p> -->
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
<div class="code-view vx-mb-5" id="blueColor">
|
|
88
|
-
<div class="code-navigation">
|
|
89
|
-
<button class="active" data-tab="blueColorhtml">HTML</button>
|
|
90
|
-
<button data-tab="blueColorless">CSS</button>
|
|
91
|
-
</div>
|
|
92
|
-
<code class="language-markup active" id="blueColorhtml">
|
|
93
|
-
<script type="prism-html-markup">
|
|
94
|
-
class name with color code:
|
|
95
|
-
|
|
96
|
-
vx-blue-10 : #F4F8FF;
|
|
97
|
-
vx-blue-20 : #E2ECFF;
|
|
98
|
-
vx-blue-30 : #BCD0F6;
|
|
99
|
-
vx-blue-40 : #7AA7F7;
|
|
100
|
-
vx-blue-50 : #4681EF;
|
|
101
|
-
vx-blue-60 : #1E5DD3;
|
|
102
|
-
vx-blue-70 : #1146A8;
|
|
103
|
-
vx-blue-80 : #042E7D;
|
|
104
|
-
vx-blue-90 : #0D2556;
|
|
105
|
-
vx-blue-100 : #161B2F;
|
|
106
|
-
|
|
107
|
-
Example:
|
|
108
|
-
If we are using vx-blue-60 color code in our project then we can use it like this:
|
|
109
|
-
<div class="vx-blue-60"></div>
|
|
110
|
-
</script>
|
|
111
|
-
</code>
|
|
112
|
-
<code class="language-markup" id="blueColorless">
|
|
113
|
-
<script type="prism-html-markup">
|
|
114
|
-
@import "~vx-design-system/css-build/less/color/color.less"
|
|
115
|
-
|
|
116
|
-
css element name with color code:
|
|
117
|
-
|
|
118
|
-
@blue-10 : #F4F8FF;
|
|
119
|
-
@blue-20 : #E2ECFF;
|
|
120
|
-
@blue-30 : #BCD0F6;
|
|
121
|
-
@blue-40 : #7AA7F7;
|
|
122
|
-
@blue-50 : #4681EF;
|
|
123
|
-
@blue-60 : #1E5DD3;
|
|
124
|
-
@blue-70 : #1146A8;
|
|
125
|
-
@blue-80 : #042E7D;
|
|
126
|
-
@blue-90 : #0D2556;
|
|
127
|
-
@blue-100 : #161B2F;
|
|
128
|
-
|
|
129
|
-
Example:
|
|
130
|
-
If we are using direct color code in the less file in our project then
|
|
131
|
-
we can use it like this:
|
|
132
|
-
color: @blue-60;
|
|
133
|
-
</script>
|
|
134
|
-
</code>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
<div class="container" id="greenColorLayout">
|
|
138
|
-
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Green Color</h3>
|
|
139
|
-
|
|
140
|
-
<div class="preview-block">
|
|
141
|
-
<div class="action-buttons">
|
|
142
|
-
<button class="vx-btn md transparent">
|
|
143
|
-
<i class="icons"></i> Copy Code
|
|
144
|
-
</button>
|
|
145
|
-
<button class="vx-btn md transparent" data-tab="greenColor">
|
|
146
|
-
<i class="icons"></i><i class="icons"></i> View Code
|
|
147
|
-
</button>
|
|
148
|
-
</div>
|
|
149
|
-
<div class="preview-container vx-bg-white vx-p-2">
|
|
150
|
-
<div class="vx-color-group">
|
|
151
|
-
<div class="vx-color-palette bg green-10">
|
|
152
|
-
<input type="text" value="@green-10">
|
|
153
|
-
</div>
|
|
154
|
-
<div class="vx-color-palette bg green-20">
|
|
155
|
-
<input type="text" value="@green-20">
|
|
156
|
-
</div>
|
|
157
|
-
<div class="vx-color-palette bg green-30">
|
|
158
|
-
<input type="text" value="@green-30">
|
|
159
|
-
</div>
|
|
160
|
-
<div class="vx-color-palette bg green-40">
|
|
161
|
-
<input type="text" value="@green-40">
|
|
162
|
-
</div>
|
|
163
|
-
<div class="vx-color-palette bg green-50">
|
|
164
|
-
<input type="text" value="@green-50">
|
|
165
|
-
</div>
|
|
166
|
-
<div class="vx-color-palette bg green-60">
|
|
167
|
-
<input type="text" value="@green-60">
|
|
168
|
-
</div>
|
|
169
|
-
<div class="vx-color-palette bg green-70">
|
|
170
|
-
<input type="text" value="@green-70">
|
|
171
|
-
</div>
|
|
172
|
-
<div class="vx-color-palette bg green-80">
|
|
173
|
-
<input type="text" value="@green-80">
|
|
174
|
-
</div>
|
|
175
|
-
<div class="vx-color-palette bg green-90">
|
|
176
|
-
<input type="text" value="@green-90">
|
|
177
|
-
</div>
|
|
178
|
-
<div class="vx-color-palette bg green-100">
|
|
179
|
-
<input type="text" value="@green-100">
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|
|
184
|
-
<div class="code-view vx-mb-5" id="greenColor">
|
|
185
|
-
<div class="code-navigation">
|
|
186
|
-
<button class="active" data-tab="greenColorhtml">HTML</button>
|
|
187
|
-
<button data-tab="greenColorless">CSS</button>
|
|
188
|
-
</div>
|
|
189
|
-
<code class="language-markup active" id="greenColorhtml">
|
|
190
|
-
<script type="prism-html-markup">
|
|
191
|
-
class name with color code:
|
|
192
|
-
|
|
193
|
-
vx-green-10 : #DDF4E0;
|
|
194
|
-
vx-green-20 : #CAEBCF;
|
|
195
|
-
vx-green-30 : #B7E2BD;
|
|
196
|
-
vx-green-40 : #97D2A0;
|
|
197
|
-
vx-green-50 : #66BF72;
|
|
198
|
-
vx-green-60 : #34AA44;
|
|
199
|
-
vx-green-70 : #1C802A;
|
|
200
|
-
vx-green-80 : #04550F;
|
|
201
|
-
vx-green-90 : #023C0A;
|
|
202
|
-
vx-green-100 : #021D05;
|
|
203
|
-
|
|
204
|
-
Example:
|
|
205
|
-
If we are using vx-green-60 color code in our project then we can use it like this:
|
|
206
|
-
<div class="vx-green-60"></div>
|
|
207
|
-
</script>
|
|
208
|
-
</code>
|
|
209
|
-
<code class="language-markup" id="greenColorless">
|
|
210
|
-
<script type="prism-html-markup">
|
|
211
|
-
@import "~vx-design-system/css-build/less/color/color.less"
|
|
212
|
-
|
|
213
|
-
css element name with color code:
|
|
214
|
-
|
|
215
|
-
@green-10 : #DDF4E0;
|
|
216
|
-
@green-20 : #CAEBCF;
|
|
217
|
-
@green-30 : #B7E2BD;
|
|
218
|
-
@green-40 : #97D2A0;
|
|
219
|
-
@green-50 : #66BF72;
|
|
220
|
-
@green-60 : #34AA44;
|
|
221
|
-
@green-70 : #1C802A;
|
|
222
|
-
@green-80 : #04550F;
|
|
223
|
-
@green-90 : #023C0A;
|
|
224
|
-
@green-100 : #021D05;
|
|
225
|
-
|
|
226
|
-
Example:
|
|
227
|
-
If we are using direct color code in the less file in our project then
|
|
228
|
-
we can use it like this:
|
|
229
|
-
color: @green-60;
|
|
230
|
-
</script>
|
|
231
|
-
</code>
|
|
232
|
-
</div>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="vx-d-flex vx-align-start">
|
|
97
|
+
<div class="page-container">
|
|
98
|
+
<div class="container" id="blueColorLayout">
|
|
99
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Blue Color</h3>
|
|
100
|
+
|
|
101
|
+
<div class="preview-block">
|
|
102
|
+
<div class="action-buttons">
|
|
103
|
+
<button class="vx-btn md transparent">
|
|
104
|
+
<i class="icons"></i> Copy Code
|
|
105
|
+
</button>
|
|
106
|
+
<button class="vx-btn md transparent" data-tab="blueColor">
|
|
107
|
+
<i class="icons"></i
|
|
108
|
+
><i class="icons"></i> View Code
|
|
109
|
+
</button>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
112
|
+
<div class="vx-color-group">
|
|
113
|
+
<div class="vx-color-palette bg blue-10">
|
|
114
|
+
<input type="text" value="@blue-10" />
|
|
115
|
+
</div>
|
|
116
|
+
<div class="vx-color-palette bg blue-20">
|
|
117
|
+
<input type="text" value="@blue-20" />
|
|
118
|
+
</div>
|
|
119
|
+
<div class="vx-color-palette bg blue-30">
|
|
120
|
+
<input type="text" value="@blue-30" />
|
|
121
|
+
</div>
|
|
122
|
+
<div class="vx-color-palette bg blue-40">
|
|
123
|
+
<input type="text" value="@blue-40" />
|
|
124
|
+
</div>
|
|
125
|
+
<div class="vx-color-palette bg blue-50">
|
|
126
|
+
<input type="text" value="@blue-50" />
|
|
127
|
+
</div>
|
|
128
|
+
<div class="vx-color-palette bg blue-60">
|
|
129
|
+
<input type="text" value="@blue-60" />
|
|
130
|
+
</div>
|
|
131
|
+
<div class="vx-color-palette bg blue-70">
|
|
132
|
+
<input type="text" value="@blue-70" />
|
|
133
|
+
</div>
|
|
134
|
+
<div class="vx-color-palette bg blue-80">
|
|
135
|
+
<input type="text" value="@blue-80" />
|
|
136
|
+
</div>
|
|
137
|
+
<div class="vx-color-palette bg blue-90">
|
|
138
|
+
<input type="text" value="@blue-90" />
|
|
139
|
+
</div>
|
|
140
|
+
<div class="vx-color-palette bg blue-100">
|
|
141
|
+
<input type="text" value="@blue-100" />
|
|
142
|
+
</div>
|
|
233
143
|
</div>
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="code-view vx-mb-5" id="blueColor">
|
|
147
|
+
<div class="code-navigation">
|
|
148
|
+
<button class="active" data-tab="blueColorhtml">HTML</button>
|
|
149
|
+
<button data-tab="blueColorless">CSS</button>
|
|
150
|
+
</div>
|
|
151
|
+
<code class="language-markup active" id="blueColorhtml">
|
|
152
|
+
<script type="prism-html-markup">
|
|
153
|
+
class name with color code:
|
|
154
|
+
|
|
155
|
+
vx-blue-10 : #F4F8FF;
|
|
156
|
+
vx-blue-20 : #E2ECFF;
|
|
157
|
+
vx-blue-30 : #BCD0F6;
|
|
158
|
+
vx-blue-40 : #7AA7F7;
|
|
159
|
+
vx-blue-50 : #4681EF;
|
|
160
|
+
vx-blue-60 : #1E5DD3;
|
|
161
|
+
vx-blue-70 : #1146A8;
|
|
162
|
+
vx-blue-80 : #042E7D;
|
|
163
|
+
vx-blue-90 : #0D2556;
|
|
164
|
+
vx-blue-100 : #161B2F;
|
|
165
|
+
|
|
166
|
+
Example:
|
|
167
|
+
If we are using vx-blue-60 text color code in our project then we can use it like this:
|
|
168
|
+
<div class="vx-blue-60"></div>
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
class name with background color code:
|
|
172
|
+
|
|
173
|
+
vx-bg-blue-10 : #F4F8FF;
|
|
174
|
+
vx-bg-blue-20 : #E2ECFF;
|
|
175
|
+
vx-bg-blue-30 : #BCD0F6;
|
|
176
|
+
vx-bg-blue-40 : #7AA7F7;
|
|
177
|
+
vx-bg-blue-50 : #4681EF;
|
|
178
|
+
vx-bg-blue-60 : #1E5DD3;
|
|
179
|
+
vx-bg-blue-70 : #1146A8;
|
|
180
|
+
vx-bg-blue-80 : #042E7D;
|
|
181
|
+
vx-bg-blue-90 : #0D2556;
|
|
182
|
+
vx-bg-blue-100 : #161B2F;
|
|
183
|
+
|
|
184
|
+
Example:
|
|
185
|
+
If we are using vx-bg-blue-60 background color code in our project then we can use it like this:
|
|
186
|
+
<div class="vx-bg-blue-60"></div>
|
|
187
|
+
</script>
|
|
188
|
+
</code>
|
|
189
|
+
<code class="language-markup" id="blueColorless">
|
|
190
|
+
<script type="prism-html-markup">
|
|
191
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
192
|
+
|
|
193
|
+
css element name with color code:
|
|
194
|
+
|
|
195
|
+
@blue-10 : #F4F8FF;
|
|
196
|
+
@blue-20 : #E2ECFF;
|
|
197
|
+
@blue-30 : #BCD0F6;
|
|
198
|
+
@blue-40 : #7AA7F7;
|
|
199
|
+
@blue-50 : #4681EF;
|
|
200
|
+
@blue-60 : #1E5DD3;
|
|
201
|
+
@blue-70 : #1146A8;
|
|
202
|
+
@blue-80 : #042E7D;
|
|
203
|
+
@blue-90 : #0D2556;
|
|
204
|
+
@blue-100 : #161B2F;
|
|
205
|
+
|
|
206
|
+
Example:
|
|
207
|
+
If we are using direct color code in the less file in our project then
|
|
208
|
+
we can use it like this:
|
|
209
|
+
color: @blue-60;
|
|
210
|
+
</script>
|
|
211
|
+
</code>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="container" id="greenColorLayout">
|
|
215
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Green Color</h3>
|
|
216
|
+
|
|
217
|
+
<div class="preview-block">
|
|
218
|
+
<div class="action-buttons">
|
|
219
|
+
<button class="vx-btn md transparent">
|
|
220
|
+
<i class="icons"></i> Copy Code
|
|
221
|
+
</button>
|
|
222
|
+
<button class="vx-btn md transparent" data-tab="greenColor">
|
|
223
|
+
<i class="icons"></i
|
|
224
|
+
><i class="icons"></i> View Code
|
|
225
|
+
</button>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
228
|
+
<div class="vx-color-group">
|
|
229
|
+
<div class="vx-color-palette bg green-10">
|
|
230
|
+
<input type="text" value="@green-10" />
|
|
231
|
+
</div>
|
|
232
|
+
<div class="vx-color-palette bg green-20">
|
|
233
|
+
<input type="text" value="@green-20" />
|
|
234
|
+
</div>
|
|
235
|
+
<div class="vx-color-palette bg green-30">
|
|
236
|
+
<input type="text" value="@green-30" />
|
|
237
|
+
</div>
|
|
238
|
+
<div class="vx-color-palette bg green-40">
|
|
239
|
+
<input type="text" value="@green-40" />
|
|
240
|
+
</div>
|
|
241
|
+
<div class="vx-color-palette bg green-50">
|
|
242
|
+
<input type="text" value="@green-50" />
|
|
243
|
+
</div>
|
|
244
|
+
<div class="vx-color-palette bg green-60">
|
|
245
|
+
<input type="text" value="@green-60" />
|
|
246
|
+
</div>
|
|
247
|
+
<div class="vx-color-palette bg green-70">
|
|
248
|
+
<input type="text" value="@green-70" />
|
|
249
|
+
</div>
|
|
250
|
+
<div class="vx-color-palette bg green-80">
|
|
251
|
+
<input type="text" value="@green-80" />
|
|
252
|
+
</div>
|
|
253
|
+
<div class="vx-color-palette bg green-90">
|
|
254
|
+
<input type="text" value="@green-90" />
|
|
255
|
+
</div>
|
|
256
|
+
<div class="vx-color-palette bg green-100">
|
|
257
|
+
<input type="text" value="@green-100" />
|
|
258
|
+
</div>
|
|
330
259
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="code-view vx-mb-5" id="greenColor">
|
|
263
|
+
<div class="code-navigation">
|
|
264
|
+
<button class="active" data-tab="greenColorhtml">HTML</button>
|
|
265
|
+
<button data-tab="greenColorless">CSS</button>
|
|
266
|
+
</div>
|
|
267
|
+
<code class="language-markup active" id="greenColorhtml">
|
|
268
|
+
<script type="prism-html-markup">
|
|
269
|
+
class name with color code:
|
|
270
|
+
|
|
271
|
+
vx-green-10 : #DDF4E0;
|
|
272
|
+
vx-green-20 : #CAEBCF;
|
|
273
|
+
vx-green-30 : #B7E2BD;
|
|
274
|
+
vx-green-40 : #97D2A0;
|
|
275
|
+
vx-green-50 : #66BF72;
|
|
276
|
+
vx-green-60 : #34AA44;
|
|
277
|
+
vx-green-70 : #1C802A;
|
|
278
|
+
vx-green-80 : #04550F;
|
|
279
|
+
vx-green-90 : #023C0A;
|
|
280
|
+
vx-green-100 : #021D05;
|
|
281
|
+
|
|
282
|
+
Example:
|
|
283
|
+
If we are using vx-green-60 text color code in our project then we can use it like this:
|
|
284
|
+
<div class="vx-green-60"></div>
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
class name with background color code:
|
|
288
|
+
|
|
289
|
+
vx-bg-green-10 : #DDF4E0;
|
|
290
|
+
vx-bg-green-20 : #CAEBCF;
|
|
291
|
+
vx-bg-green-30 : #B7E2BD;
|
|
292
|
+
vx-bg-green-40 : #97D2A0;
|
|
293
|
+
vx-bg-green-50 : #66BF72;
|
|
294
|
+
vx-bg-green-60 : #34AA44;
|
|
295
|
+
vx-bg-green-70 : #1C802A;
|
|
296
|
+
vx-bg-green-80 : #04550F;
|
|
297
|
+
vx-bg-green-90 : #023C0A;
|
|
298
|
+
vx-bg-green-100 : #021D05;
|
|
299
|
+
|
|
300
|
+
Example:
|
|
301
|
+
If we are using vx-bg-green-60 background color code in our project then we can use it like this:
|
|
302
|
+
<div class="vx-bg-green-60"></div>
|
|
303
|
+
</script>
|
|
304
|
+
</code>
|
|
305
|
+
<code class="language-markup" id="greenColorless">
|
|
306
|
+
<script type="prism-html-markup">
|
|
307
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
308
|
+
|
|
309
|
+
css element name with color code:
|
|
310
|
+
|
|
311
|
+
@green-10 : #DDF4E0;
|
|
312
|
+
@green-20 : #CAEBCF;
|
|
313
|
+
@green-30 : #B7E2BD;
|
|
314
|
+
@green-40 : #97D2A0;
|
|
315
|
+
@green-50 : #66BF72;
|
|
316
|
+
@green-60 : #34AA44;
|
|
317
|
+
@green-70 : #1C802A;
|
|
318
|
+
@green-80 : #04550F;
|
|
319
|
+
@green-90 : #023C0A;
|
|
320
|
+
@green-100 : #021D05;
|
|
321
|
+
|
|
322
|
+
Example:
|
|
323
|
+
If we are using direct color code in the less file in our project then
|
|
324
|
+
we can use it like this:
|
|
325
|
+
color: @green-60;
|
|
326
|
+
</script>
|
|
327
|
+
</code>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="container" id="redColorLayout">
|
|
331
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Red Color</h3>
|
|
332
|
+
|
|
333
|
+
<div class="preview-block">
|
|
334
|
+
<div class="action-buttons">
|
|
335
|
+
<button class="vx-btn md transparent">
|
|
336
|
+
<i class="icons"></i> Copy Code
|
|
337
|
+
</button>
|
|
338
|
+
<button class="vx-btn md transparent" data-tab="redColor">
|
|
339
|
+
<i class="icons"></i
|
|
340
|
+
><i class="icons"></i> View Code
|
|
341
|
+
</button>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
344
|
+
<div class="vx-color-group">
|
|
345
|
+
<div class="vx-color-palette bg red-10">
|
|
346
|
+
<input type="text" value="@red-10" />
|
|
347
|
+
</div>
|
|
348
|
+
<div class="vx-color-palette bg red-20">
|
|
349
|
+
<input type="text" value="@red-20" />
|
|
350
|
+
</div>
|
|
351
|
+
<div class="vx-color-palette bg red-30">
|
|
352
|
+
<input type="text" value="@red-30" />
|
|
353
|
+
</div>
|
|
354
|
+
<div class="vx-color-palette bg red-40">
|
|
355
|
+
<input type="text" value="@red-40" />
|
|
356
|
+
</div>
|
|
357
|
+
<div class="vx-color-palette bg red-50">
|
|
358
|
+
<input type="text" value="@red-50" />
|
|
359
|
+
</div>
|
|
360
|
+
<div class="vx-color-palette bg red-60">
|
|
361
|
+
<input type="text" value="@red-60" />
|
|
362
|
+
</div>
|
|
363
|
+
<div class="vx-color-palette bg red-70">
|
|
364
|
+
<input type="text" value="@red-70" />
|
|
365
|
+
</div>
|
|
366
|
+
<div class="vx-color-palette bg red-80">
|
|
367
|
+
<input type="text" value="@red-80" />
|
|
368
|
+
</div>
|
|
369
|
+
<div class="vx-color-palette bg red-90">
|
|
370
|
+
<input type="text" value="@red-90" />
|
|
371
|
+
</div>
|
|
372
|
+
<div class="vx-color-palette bg red-100">
|
|
373
|
+
<input type="text" value="@red-100" />
|
|
374
|
+
</div>
|
|
427
375
|
</div>
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="code-view vx-mb-5" id="redColor">
|
|
379
|
+
<div class="code-navigation">
|
|
380
|
+
<button class="active" data-tab="redColorhtml">HTML</button>
|
|
381
|
+
<button data-tab="redColorless">CSS</button>
|
|
382
|
+
</div>
|
|
383
|
+
<code class="language-markup active" id="redColorhtml">
|
|
384
|
+
<script type="prism-html-markup">
|
|
385
|
+
class name with color code:
|
|
386
|
+
|
|
387
|
+
vx-red-10 : #FFEEEB;
|
|
388
|
+
vx-red-20 : #FDD9D1;
|
|
389
|
+
vx-red-30 : #FAC3B7;
|
|
390
|
+
vx-red-40 : #E38B7A;
|
|
391
|
+
vx-red-50 : #D5624B;
|
|
392
|
+
vx-red-60 : #C7381B;
|
|
393
|
+
vx-red-70 : #A82A1D;
|
|
394
|
+
vx-red-80 : #781C17;
|
|
395
|
+
vx-red-90 : #470E10;
|
|
396
|
+
vx-red-100 : #2F090A;
|
|
397
|
+
|
|
398
|
+
Example:
|
|
399
|
+
If we are using vx-red-60 text color code in our project then we can use it like this:
|
|
400
|
+
<div class="vx-red-60"></div>
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
class name with background color code:
|
|
404
|
+
|
|
405
|
+
vx-bg-red-10 : #FFEEEB;
|
|
406
|
+
vx-bg-red-20 : #CAEBCF;
|
|
407
|
+
vx-bg-red-30 : #FAC3B7;
|
|
408
|
+
vx-bg-red-40 : #E38B7A;
|
|
409
|
+
vx-bg-red-50 : #D5624B;
|
|
410
|
+
vx-bg-red-60 : #C7381B;
|
|
411
|
+
vx-bg-red-70 : #A82A1D;
|
|
412
|
+
vx-bg-red-80 : #781C17;
|
|
413
|
+
vx-bg-red-90 : #470E10;
|
|
414
|
+
vx-bg-red-100 : #2F090A;
|
|
415
|
+
|
|
416
|
+
Example:
|
|
417
|
+
If we are using vx-bg-red-60 background color code in our project then we can use it like this:
|
|
418
|
+
<div class="vx-bg-red-60"></div>
|
|
419
|
+
</script>
|
|
420
|
+
</code>
|
|
421
|
+
<code class="language-markup" id="redColorless">
|
|
422
|
+
<script type="prism-html-markup">
|
|
423
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
424
|
+
|
|
425
|
+
css element name with color code:
|
|
426
|
+
|
|
427
|
+
@red-10 : #FFEEEB;
|
|
428
|
+
@red-20 : #FDD9D1;
|
|
429
|
+
@red-30 : #FAC3B7;
|
|
430
|
+
@red-40 : #E38B7A;
|
|
431
|
+
@red-50 : #D5624B;
|
|
432
|
+
@red-60 : #C7381B;
|
|
433
|
+
@red-70 : #A82A1D;
|
|
434
|
+
@red-80 : #781C17;
|
|
435
|
+
@red-90 : #470E10;
|
|
436
|
+
@red-100 : #2F090A;
|
|
437
|
+
|
|
438
|
+
Example:
|
|
439
|
+
If we are using direct color code in the less file in our project then
|
|
440
|
+
we can use it like this:
|
|
441
|
+
color: @red-60;
|
|
442
|
+
</script>
|
|
443
|
+
</code>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="container" id="orangeColorLayout">
|
|
447
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Orange Color</h3>
|
|
448
|
+
|
|
449
|
+
<div class="preview-block">
|
|
450
|
+
<div class="action-buttons">
|
|
451
|
+
<button class="vx-btn md transparent">
|
|
452
|
+
<i class="icons"></i> Copy Code
|
|
453
|
+
</button>
|
|
454
|
+
<button class="vx-btn md transparent" data-tab="orangeColor">
|
|
455
|
+
<i class="icons"></i
|
|
456
|
+
><i class="icons"></i> View Code
|
|
457
|
+
</button>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
460
|
+
<div class="vx-color-group">
|
|
461
|
+
<div class="vx-color-palette bg orange-10">
|
|
462
|
+
<input type="text" value="@orange-10" />
|
|
463
|
+
</div>
|
|
464
|
+
<div class="vx-color-palette bg orange-20">
|
|
465
|
+
<input type="text" value="@orange-20" />
|
|
466
|
+
</div>
|
|
467
|
+
<div class="vx-color-palette bg orange-30">
|
|
468
|
+
<input type="text" value="@orange-30" />
|
|
469
|
+
</div>
|
|
470
|
+
<div class="vx-color-palette bg orange-40">
|
|
471
|
+
<input type="text" value="@orange-40" />
|
|
472
|
+
</div>
|
|
473
|
+
<div class="vx-color-palette bg orange-50">
|
|
474
|
+
<input type="text" value="@orange-50" />
|
|
475
|
+
</div>
|
|
476
|
+
<div class="vx-color-palette bg orange-60">
|
|
477
|
+
<input type="text" value="@orange-60" />
|
|
478
|
+
</div>
|
|
479
|
+
<div class="vx-color-palette bg orange-70">
|
|
480
|
+
<input type="text" value="@orange-70" />
|
|
481
|
+
</div>
|
|
482
|
+
<div class="vx-color-palette bg orange-80">
|
|
483
|
+
<input type="text" value="@orange-80" />
|
|
484
|
+
</div>
|
|
485
|
+
<div class="vx-color-palette bg orange-90">
|
|
486
|
+
<input type="text" value="@orange-90" />
|
|
487
|
+
</div>
|
|
488
|
+
<div class="vx-color-palette bg orange-100">
|
|
489
|
+
<input type="text" value="@orange-100" />
|
|
490
|
+
</div>
|
|
524
491
|
</div>
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="code-view vx-mb-5" id="orangeColor">
|
|
495
|
+
<div class="code-navigation">
|
|
496
|
+
<button class="active" data-tab="orangeColorhtml">HTML</button>
|
|
497
|
+
<button data-tab="orangeColorless">CSS</button>
|
|
498
|
+
</div>
|
|
499
|
+
<code class="language-markup active" id="orangeColorhtml">
|
|
500
|
+
<script type="prism-html-markup">
|
|
501
|
+
class name with color code:
|
|
502
|
+
|
|
503
|
+
vx-orange-10 : #FDF1E8;
|
|
504
|
+
vx-orange-20 : #FBE3D0;
|
|
505
|
+
vx-orange-30 : #F7C8A1;
|
|
506
|
+
vx-orange-40 : #F2AC73;
|
|
507
|
+
vx-orange-50 : #EE9044;
|
|
508
|
+
vx-orange-60 : #E87315;
|
|
509
|
+
vx-orange-70 : #BB5D11;
|
|
510
|
+
vx-orange-80 : #8C460D;
|
|
511
|
+
vx-orange-90 : #5E2F08;
|
|
512
|
+
vx-orange-100 : #2F1704;
|
|
513
|
+
|
|
514
|
+
Example:
|
|
515
|
+
If we are using vx-orange-60 text color code in our project then we can use it like this:
|
|
516
|
+
<div class="vx-orange-60"></div>
|
|
517
|
+
|
|
518
|
+
|
|
519
|
+
class name with background color code:
|
|
520
|
+
|
|
521
|
+
vx-bg-orange-10 : #FDF1E8;
|
|
522
|
+
vx-bg-orange-20 : #FBE3D0;
|
|
523
|
+
vx-bg-orange-30 : #F7C8A1;
|
|
524
|
+
vx-bg-orange-40 : #F2AC73;
|
|
525
|
+
vx-bg-orange-50 : #EE9044;
|
|
526
|
+
vx-bg-orange-60 : #E87315;
|
|
527
|
+
vx-bg-orange-70 : #1C802A;
|
|
528
|
+
vx-bg-orange-80 : #04550F;
|
|
529
|
+
vx-bg-orange-90 : #023C0A;
|
|
530
|
+
vx-bg-orange-100 : #021D05;
|
|
531
|
+
|
|
532
|
+
Example:
|
|
533
|
+
If we are using vx-bg-orange-60 background color code in our project then we can use it like this:
|
|
534
|
+
<div class="vx-bg-orange-60"></div>
|
|
535
|
+
</script>
|
|
536
|
+
</code>
|
|
537
|
+
<code class="language-markup" id="orangeColorless">
|
|
538
|
+
<script type="prism-html-markup">
|
|
539
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
540
|
+
|
|
541
|
+
css element name with color code:
|
|
542
|
+
|
|
543
|
+
@orange-10 : #FDF1E8;
|
|
544
|
+
@orange-20 : #FBE3D0;
|
|
545
|
+
@orange-30 : #F7C8A1;
|
|
546
|
+
@orange-40 : #F2AC73;
|
|
547
|
+
@orange-50 : #EE9044;
|
|
548
|
+
@orange-60 : #E87315;
|
|
549
|
+
@orange-70 : #BB5D11;
|
|
550
|
+
@orange-80 : #8C460D;
|
|
551
|
+
@orange-90 : #5E2F08;
|
|
552
|
+
@orange-100 : #2F1704;
|
|
553
|
+
|
|
554
|
+
Example:
|
|
555
|
+
If we are using direct color code in the less file in our project then
|
|
556
|
+
we can use it like this:
|
|
557
|
+
color: @orange-60;
|
|
558
|
+
</script>
|
|
559
|
+
</code>
|
|
560
|
+
</div>
|
|
561
|
+
</div>
|
|
562
|
+
<div class="container" id="yellowColorLayout">
|
|
563
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Yellow Color</h3>
|
|
564
|
+
|
|
565
|
+
<div class="preview-block">
|
|
566
|
+
<div class="action-buttons">
|
|
567
|
+
<button class="vx-btn md transparent">
|
|
568
|
+
<i class="icons"></i> Copy Code
|
|
569
|
+
</button>
|
|
570
|
+
<button class="vx-btn md transparent" data-tab="yellowColor">
|
|
571
|
+
<i class="icons"></i
|
|
572
|
+
><i class="icons"></i> View Code
|
|
573
|
+
</button>
|
|
574
|
+
</div>
|
|
575
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
576
|
+
<div class="vx-color-group">
|
|
577
|
+
<div class="vx-color-palette bg yellow-10">
|
|
578
|
+
<input type="text" value="@yellow-10" />
|
|
579
|
+
</div>
|
|
580
|
+
<div class="vx-color-palette bg yellow-20">
|
|
581
|
+
<input type="text" value="@yellow-20" />
|
|
582
|
+
</div>
|
|
583
|
+
<div class="vx-color-palette bg yellow-30">
|
|
584
|
+
<input type="text" value="@yellow-30" />
|
|
585
|
+
</div>
|
|
586
|
+
<div class="vx-color-palette bg yellow-40">
|
|
587
|
+
<input type="text" value="@yellow-40" />
|
|
588
|
+
</div>
|
|
589
|
+
<div class="vx-color-palette bg yellow-50">
|
|
590
|
+
<input type="text" value="@yellow-50" />
|
|
591
|
+
</div>
|
|
592
|
+
<div class="vx-color-palette bg yellow-60">
|
|
593
|
+
<input type="text" value="@yellow-60" />
|
|
594
|
+
</div>
|
|
595
|
+
<div class="vx-color-palette bg yellow-70">
|
|
596
|
+
<input type="text" value="@yellow-70" />
|
|
597
|
+
</div>
|
|
598
|
+
<div class="vx-color-palette bg yellow-80">
|
|
599
|
+
<input type="text" value="@yellow-80" />
|
|
600
|
+
</div>
|
|
601
|
+
<div class="vx-color-palette bg yellow-90">
|
|
602
|
+
<input type="text" value="@yellow-90" />
|
|
603
|
+
</div>
|
|
604
|
+
<div class="vx-color-palette bg yellow-100">
|
|
605
|
+
<input type="text" value="@yellow-100" />
|
|
606
|
+
</div>
|
|
621
607
|
</div>
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="code-view vx-mb-5" id="yellowColor">
|
|
611
|
+
<div class="code-navigation">
|
|
612
|
+
<button class="active" data-tab="yellowColorhtml">HTML</button>
|
|
613
|
+
<button data-tab="yellowColorless">CSS</button>
|
|
614
|
+
</div>
|
|
615
|
+
<code class="language-markup active" id="yellowColorhtml">
|
|
616
|
+
<script type="prism-html-markup">
|
|
617
|
+
class name with color code:
|
|
618
|
+
|
|
619
|
+
vx-yellow-10 : #FEF8E7;
|
|
620
|
+
vx-yellow-20 : #FCF2CF;
|
|
621
|
+
vx-yellow-30 : #FAE6A3;
|
|
622
|
+
vx-yellow-40 : #F7D873;
|
|
623
|
+
vx-yellow-50 : #F5CC48;
|
|
624
|
+
vx-yellow-60 : #F2BF19;
|
|
625
|
+
vx-yellow-70 : #CB9E0B;
|
|
626
|
+
vx-yellow-80 : #967508;
|
|
627
|
+
vx-yellow-90 : #654F06;
|
|
628
|
+
vx-yellow-100 : #302603;
|
|
629
|
+
|
|
630
|
+
Example:
|
|
631
|
+
If we are using vx-yellow-60 text color code in our project then we can use it like this:
|
|
632
|
+
<div class="vx-yellow-60"></div>
|
|
633
|
+
|
|
634
|
+
|
|
635
|
+
class name with background color code:
|
|
636
|
+
|
|
637
|
+
vx-bg-yellow-10 : #FEF8E7;
|
|
638
|
+
vx-bg-yellow-20 : #FCF2CF;
|
|
639
|
+
vx-bg-yellow-30 : #FAE6A3;
|
|
640
|
+
vx-bg-yellow-40 : #F7D873;
|
|
641
|
+
vx-bg-yellow-50 : #F5CC48;
|
|
642
|
+
vx-bg-yellow-60 : #F2BF19;
|
|
643
|
+
vx-bg-yellow-70 : #CB9E0B;
|
|
644
|
+
vx-bg-yellow-80 : #967508;
|
|
645
|
+
vx-bg-yellow-90 : #654F06;
|
|
646
|
+
vx-bg-yellow-100 : #302603;
|
|
647
|
+
|
|
648
|
+
Example:
|
|
649
|
+
If we are using vx-bg-yellow-60 background color code in our project then we can use it like this:
|
|
650
|
+
<div class="vx-bg-yellow-60"></div>
|
|
651
|
+
</script>
|
|
652
|
+
</code>
|
|
653
|
+
<code class="language-markup" id="yellowColorless">
|
|
654
|
+
<script type="prism-html-markup">
|
|
655
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
656
|
+
|
|
657
|
+
css element name with color code:
|
|
658
|
+
|
|
659
|
+
@yellow-10 : #FEF8E7;
|
|
660
|
+
@yellow-20 : #FCF2CF;
|
|
661
|
+
@yellow-30 : #FAE6A3;
|
|
662
|
+
@yellow-40 : #F7D873;
|
|
663
|
+
@yellow-50 : #F5CC48;
|
|
664
|
+
@yellow-60 : #F2BF19;
|
|
665
|
+
@yellow-70 : #CB9E0B;
|
|
666
|
+
@yellow-80 : #967508;
|
|
667
|
+
@yellow-90 : #654F06;
|
|
668
|
+
@yellow-100 : #302603;
|
|
669
|
+
|
|
670
|
+
Example:
|
|
671
|
+
If we are using direct color code in the less file in our project then
|
|
672
|
+
we can use it like this:
|
|
673
|
+
color: @yellow-60;
|
|
674
|
+
</script>
|
|
675
|
+
</code>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="container" id="grayColorLayout">
|
|
679
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Gray Color</h3>
|
|
680
|
+
|
|
681
|
+
<div class="preview-block">
|
|
682
|
+
<div class="action-buttons">
|
|
683
|
+
<button class="vx-btn md transparent">
|
|
684
|
+
<i class="icons"></i> Copy Code
|
|
685
|
+
</button>
|
|
686
|
+
<button class="vx-btn md transparent" data-tab="grayColor">
|
|
687
|
+
<i class="icons"></i
|
|
688
|
+
><i class="icons"></i> View Code
|
|
689
|
+
</button>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
692
|
+
<div class="vx-color-group">
|
|
693
|
+
<div class="vx-color-palette bg gray-10">
|
|
694
|
+
<input type="text" value="@gray-10" />
|
|
695
|
+
</div>
|
|
696
|
+
<div class="vx-color-palette bg gray-20">
|
|
697
|
+
<input type="text" value="@gray-20" />
|
|
698
|
+
</div>
|
|
699
|
+
<div class="vx-color-palette bg gray-30">
|
|
700
|
+
<input type="text" value="@gray-30" />
|
|
701
|
+
</div>
|
|
702
|
+
<div class="vx-color-palette bg gray-40">
|
|
703
|
+
<input type="text" value="@gray-40" />
|
|
704
|
+
</div>
|
|
705
|
+
<div class="vx-color-palette bg gray-50">
|
|
706
|
+
<input type="text" value="@gray-50" />
|
|
707
|
+
</div>
|
|
708
|
+
<div class="vx-color-palette bg gray-60">
|
|
709
|
+
<input type="text" value="@gray-60" />
|
|
710
|
+
</div>
|
|
711
|
+
<div class="vx-color-palette bg gray-70">
|
|
712
|
+
<input type="text" value="@gray-70" />
|
|
713
|
+
</div>
|
|
714
|
+
<div class="vx-color-palette bg gray-80">
|
|
715
|
+
<input type="text" value="@gray-80" />
|
|
716
|
+
</div>
|
|
717
|
+
<div class="vx-color-palette bg gray-90">
|
|
718
|
+
<input type="text" value="@gray-90" />
|
|
719
|
+
</div>
|
|
720
|
+
<div class="vx-color-palette bg gray-100">
|
|
721
|
+
<input type="text" value="@gray-100" />
|
|
722
|
+
</div>
|
|
678
723
|
</div>
|
|
724
|
+
</div>
|
|
725
|
+
</div>
|
|
726
|
+
<div class="code-view vx-mb-5" id="grayColor">
|
|
727
|
+
<div class="code-navigation">
|
|
728
|
+
<button class="active" data-tab="grayColorhtml">HTML</button>
|
|
729
|
+
<button data-tab="grayColorless">CSS</button>
|
|
730
|
+
</div>
|
|
731
|
+
<code class="language-markup active" id="grayColorhtml">
|
|
732
|
+
<script type="prism-html-markup">
|
|
733
|
+
class name with color code:
|
|
734
|
+
|
|
735
|
+
vx-gray-10 : #F9F9FA;
|
|
736
|
+
vx-gray-20 : #F2F2F5;
|
|
737
|
+
vx-gray-30 : #E3E3E9;
|
|
738
|
+
vx-gray-40 : #CDCED6;
|
|
739
|
+
vx-gray-50 : #A9AAB6;
|
|
740
|
+
vx-gray-60 : #787A8C;
|
|
741
|
+
vx-gray-70 : #565A6F;
|
|
742
|
+
vx-gray-80 : #343952;
|
|
743
|
+
vx-gray-90 : #282E48;
|
|
744
|
+
vx-gray-100 : #242940;
|
|
745
|
+
|
|
746
|
+
Example:
|
|
747
|
+
If we are using vx-gray-60 text color code in our project then we can use it like this:
|
|
748
|
+
<div class="vx-gray-60"></div>
|
|
749
|
+
|
|
750
|
+
|
|
751
|
+
class name with background color code:
|
|
752
|
+
|
|
753
|
+
vx-bg-gray-10 : #F9F9FA;
|
|
754
|
+
vx-bg-gray-20 : #F2F2F5;
|
|
755
|
+
vx-bg-gray-30 : #E3E3E9;
|
|
756
|
+
vx-bg-gray-40 : #CDCED6;
|
|
757
|
+
vx-bg-gray-50 : #A9AAB6;
|
|
758
|
+
vx-bg-gray-60 : #787A8C;
|
|
759
|
+
vx-bg-gray-70 : #565A6F;
|
|
760
|
+
vx-bg-gray-80 : #343952;
|
|
761
|
+
vx-bg-gray-90 : #282E48;
|
|
762
|
+
vx-bg-gray-100 : #242940;
|
|
763
|
+
|
|
764
|
+
Example:
|
|
765
|
+
If we are using vx-bg-gray-60 background color code in our project then we can use it like this:
|
|
766
|
+
<div class="vx-bg-gray-60"></div>
|
|
767
|
+
</script>
|
|
768
|
+
</code>
|
|
769
|
+
<code class="language-markup" id="grayColorless">
|
|
770
|
+
<script type="prism-html-markup">
|
|
771
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
772
|
+
|
|
773
|
+
css element name with color code:
|
|
774
|
+
|
|
775
|
+
@gray-10 : #F9F9FA;
|
|
776
|
+
@gray-20 : #F2F2F5;
|
|
777
|
+
@gray-30 : #E3E3E9;
|
|
778
|
+
@gray-40 : #CDCED6;
|
|
779
|
+
@gray-50 : #A9AAB6;
|
|
780
|
+
@gray-60 : #787A8C;
|
|
781
|
+
@gray-70 : #565A6F;
|
|
782
|
+
@gray-80 : #343952;
|
|
783
|
+
@gray-90 : #282E48;
|
|
784
|
+
@gray-100 : #242940;
|
|
785
|
+
|
|
786
|
+
Example:
|
|
787
|
+
If we are using direct color code in the less file in our project then
|
|
788
|
+
we can use it like this:
|
|
789
|
+
color: @gray-60;
|
|
790
|
+
</script>
|
|
791
|
+
</code>
|
|
679
792
|
</div>
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
793
|
+
</div>
|
|
794
|
+
<div class="container" id="neutralColorLayout">
|
|
795
|
+
<h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">
|
|
796
|
+
Neutral Color
|
|
797
|
+
</h3>
|
|
798
|
+
|
|
799
|
+
<div class="preview-block">
|
|
800
|
+
<div class="action-buttons">
|
|
801
|
+
<button class="vx-btn md transparent">
|
|
802
|
+
<i class="icons"></i> Copy Code
|
|
803
|
+
</button>
|
|
804
|
+
<button class="vx-btn md transparent" data-tab="neutralColor">
|
|
805
|
+
<i class="icons"></i
|
|
806
|
+
><i class="icons"></i> View Code
|
|
807
|
+
</button>
|
|
808
|
+
</div>
|
|
809
|
+
<div class="preview-container vx-bg-white vx-p-2">
|
|
810
|
+
<div class="vx-color-group">
|
|
811
|
+
<div class="vx-color-palette bg neutral-100">
|
|
812
|
+
<input type="text" value="@neutral-100 (black)" />
|
|
813
|
+
</div>
|
|
814
|
+
<div class="vx-color-palette bg neutral-0">
|
|
815
|
+
<input type="text" value="@neutral-0 (white)" />
|
|
816
|
+
</div>
|
|
692
817
|
</div>
|
|
818
|
+
</div>
|
|
693
819
|
</div>
|
|
820
|
+
<div class="code-view vx-mb-5" id="neutralColor">
|
|
821
|
+
<div class="code-navigation">
|
|
822
|
+
<button class="active" data-tab="neutralColorhtml">HTML</button>
|
|
823
|
+
<button data-tab="neutralColorless">CSS</button>
|
|
824
|
+
</div>
|
|
825
|
+
<code class="language-markup active" id="neutralColorhtml">
|
|
826
|
+
<script type="prism-html-markup">
|
|
827
|
+
class name with color code:
|
|
828
|
+
|
|
829
|
+
vx-neutral-100 : #000000;
|
|
830
|
+
vx-neutral-0 : #FFFFFF;
|
|
831
|
+
|
|
832
|
+
Example:
|
|
833
|
+
If we are using vx-neutral-100 text color code in our project then we can use it like this:
|
|
834
|
+
<div class="vx-neutral-100"></div>
|
|
835
|
+
|
|
836
|
+
class name with background color code:
|
|
837
|
+
|
|
838
|
+
vx-bg-neutral-100 : #000000;
|
|
839
|
+
vx-bg-neutral-0 : #FFFFFF;
|
|
840
|
+
|
|
841
|
+
Example:
|
|
842
|
+
If we are using vx-bg-neutral-100 background color code in our project then we can use it like this:
|
|
843
|
+
<div class="vx-bg-neutral-100"></div>
|
|
844
|
+
</script>
|
|
845
|
+
</code>
|
|
846
|
+
<code class="language-markup" id="neutralColorless">
|
|
847
|
+
<script type="prism-html-markup">
|
|
848
|
+
@import "~vx-design-system/css-build/less/color/color.less"
|
|
849
|
+
|
|
850
|
+
css element name with color code:
|
|
851
|
+
|
|
852
|
+
@neutral-100 : #000000;
|
|
853
|
+
@neutral-0 : #FFFFFF;
|
|
854
|
+
|
|
855
|
+
Example:
|
|
856
|
+
If we are using direct color code in the less file in our project then
|
|
857
|
+
we can use it like this:
|
|
858
|
+
color: @neutral-100;
|
|
859
|
+
</script>
|
|
860
|
+
</code>
|
|
861
|
+
</div>
|
|
862
|
+
</div>
|
|
863
|
+
</div>
|
|
864
|
+
<div class="page-quick-menu">
|
|
865
|
+
<div class="vx-sub-menu vx-p-0">
|
|
866
|
+
<h3
|
|
867
|
+
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"
|
|
868
|
+
>
|
|
869
|
+
Contents
|
|
870
|
+
</h3>
|
|
871
|
+
<ul class="vx-p-0">
|
|
872
|
+
<li>
|
|
873
|
+
<a
|
|
874
|
+
href="#blueColorLayout"
|
|
875
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active"
|
|
876
|
+
>Blue Color</a
|
|
877
|
+
>
|
|
878
|
+
</li>
|
|
879
|
+
<li>
|
|
880
|
+
<a
|
|
881
|
+
href="#greenColorLayout"
|
|
882
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
883
|
+
>Green Color</a
|
|
884
|
+
>
|
|
885
|
+
</li>
|
|
886
|
+
<li>
|
|
887
|
+
<a
|
|
888
|
+
href="#redColorLayout"
|
|
889
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
890
|
+
>Red Color</a
|
|
891
|
+
>
|
|
892
|
+
</li>
|
|
893
|
+
<li>
|
|
894
|
+
<a
|
|
895
|
+
href="#orangeColorLayout"
|
|
896
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
897
|
+
>Orange Color</a
|
|
898
|
+
>
|
|
899
|
+
</li>
|
|
900
|
+
<li>
|
|
901
|
+
<a
|
|
902
|
+
href="#yellowColorLayout"
|
|
903
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
904
|
+
>Yellow Color</a
|
|
905
|
+
>
|
|
906
|
+
</li>
|
|
907
|
+
<li>
|
|
908
|
+
<a
|
|
909
|
+
href="#grayColorLayout"
|
|
910
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
911
|
+
>Gray Color</a
|
|
912
|
+
>
|
|
913
|
+
</li>
|
|
914
|
+
<li>
|
|
915
|
+
<a
|
|
916
|
+
href="#neutralColorLayout"
|
|
917
|
+
class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
|
|
918
|
+
>Neutral Color</a
|
|
919
|
+
>
|
|
920
|
+
</li>
|
|
921
|
+
</ul>
|
|
922
|
+
</div>
|
|
694
923
|
</div>
|
|
924
|
+
</div>
|
|
695
925
|
</section>
|
|
696
926
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
697
927
|
<script async src="../less.js"></script>
|
|
698
928
|
<script src="../utility/prism.js"></script>
|
|
699
929
|
<script>
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
})
|
|
730
|
-
$('#orangeColorLayout .code-navigation button').click(function () {
|
|
731
|
-
var tab_id = $(this).attr('data-tab');
|
|
732
|
-
$('#orangeColorLayout .code-navigation button').removeClass('active');
|
|
733
|
-
$('#orangeColorLayout .language-markup').removeClass('active');
|
|
734
|
-
console.log(tab_id)
|
|
735
|
-
$("#" + tab_id).addClass('active');
|
|
736
|
-
$(this).addClass('active');
|
|
737
|
-
})
|
|
738
|
-
$('#yellowColorLayout .code-navigation button').click(function () {
|
|
739
|
-
var tab_id = $(this).attr('data-tab');
|
|
740
|
-
$('#yellowColorLayout .code-navigation button').removeClass('active');
|
|
741
|
-
$('#yellowColorLayout .language-markup').removeClass('active');
|
|
742
|
-
console.log(tab_id)
|
|
743
|
-
$("#" + tab_id).addClass('active');
|
|
744
|
-
$(this).addClass('active');
|
|
745
|
-
})
|
|
746
|
-
$('#grayColorLayout .code-navigation button').click(function () {
|
|
747
|
-
var tab_id = $(this).attr('data-tab');
|
|
748
|
-
$('#grayColorLayout .code-navigation button').removeClass('active');
|
|
749
|
-
$('#grayColorLayout .language-markup').removeClass('active');
|
|
750
|
-
console.log(tab_id)
|
|
751
|
-
$("#" + tab_id).addClass('active');
|
|
752
|
-
$(this).addClass('active');
|
|
753
|
-
})
|
|
754
|
-
$('#neutralColorLayout .code-navigation button').click(function () {
|
|
755
|
-
var tab_id = $(this).attr('data-tab');
|
|
756
|
-
$('#neutralColorLayout .code-navigation button').removeClass('active');
|
|
757
|
-
$('#neutralColorLayout .language-markup').removeClass('active');
|
|
758
|
-
console.log(tab_id)
|
|
759
|
-
$("#" + tab_id).addClass('active');
|
|
760
|
-
$(this).addClass('active');
|
|
761
|
-
})
|
|
930
|
+
$(document).ready(function () {
|
|
931
|
+
$("button").click(function () {
|
|
932
|
+
var tab_id = $(this).attr("data-tab");
|
|
933
|
+
$(".code-view vx-mb-5").removeClass("active");
|
|
934
|
+
$("#" + tab_id).toggleClass("active");
|
|
935
|
+
});
|
|
936
|
+
$("#blueColorLayout .code-navigation button").click(function () {
|
|
937
|
+
var tab_id = $(this).attr("data-tab");
|
|
938
|
+
$("#blueColorLayout .code-navigation button").removeClass("active");
|
|
939
|
+
$("#blueColorLayout .language-markup").removeClass("active");
|
|
940
|
+
console.log(tab_id);
|
|
941
|
+
$("#" + tab_id).addClass("active");
|
|
942
|
+
$(this).addClass("active");
|
|
943
|
+
});
|
|
944
|
+
$("#greenColorLayout .code-navigation button").click(function () {
|
|
945
|
+
var tab_id = $(this).attr("data-tab");
|
|
946
|
+
$("#greenColorLayout .code-navigation button").removeClass("active");
|
|
947
|
+
$("#greenColorLayout .language-markup").removeClass("active");
|
|
948
|
+
console.log(tab_id);
|
|
949
|
+
$("#" + tab_id).addClass("active");
|
|
950
|
+
$(this).addClass("active");
|
|
951
|
+
});
|
|
952
|
+
$("#redColorLayout .code-navigation button").click(function () {
|
|
953
|
+
var tab_id = $(this).attr("data-tab");
|
|
954
|
+
$("#redColorLayout .code-navigation button").removeClass("active");
|
|
955
|
+
$("#redColorLayout .language-markup").removeClass("active");
|
|
956
|
+
console.log(tab_id);
|
|
957
|
+
$("#" + tab_id).addClass("active");
|
|
958
|
+
$(this).addClass("active");
|
|
762
959
|
});
|
|
763
|
-
$(
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
960
|
+
$("#orangeColorLayout .code-navigation button").click(function () {
|
|
961
|
+
var tab_id = $(this).attr("data-tab");
|
|
962
|
+
$("#orangeColorLayout .code-navigation button").removeClass("active");
|
|
963
|
+
$("#orangeColorLayout .language-markup").removeClass("active");
|
|
964
|
+
console.log(tab_id);
|
|
965
|
+
$("#" + tab_id).addClass("active");
|
|
966
|
+
$(this).addClass("active");
|
|
967
|
+
});
|
|
968
|
+
$("#yellowColorLayout .code-navigation button").click(function () {
|
|
969
|
+
var tab_id = $(this).attr("data-tab");
|
|
970
|
+
$("#yellowColorLayout .code-navigation button").removeClass("active");
|
|
971
|
+
$("#yellowColorLayout .language-markup").removeClass("active");
|
|
972
|
+
console.log(tab_id);
|
|
973
|
+
$("#" + tab_id).addClass("active");
|
|
974
|
+
$(this).addClass("active");
|
|
975
|
+
});
|
|
976
|
+
$("#grayColorLayout .code-navigation button").click(function () {
|
|
977
|
+
var tab_id = $(this).attr("data-tab");
|
|
978
|
+
$("#grayColorLayout .code-navigation button").removeClass("active");
|
|
979
|
+
$("#grayColorLayout .language-markup").removeClass("active");
|
|
980
|
+
console.log(tab_id);
|
|
981
|
+
$("#" + tab_id).addClass("active");
|
|
982
|
+
$(this).addClass("active");
|
|
983
|
+
});
|
|
984
|
+
$("#neutralColorLayout .code-navigation button").click(function () {
|
|
985
|
+
var tab_id = $(this).attr("data-tab");
|
|
986
|
+
$("#neutralColorLayout .code-navigation button").removeClass(
|
|
987
|
+
"active"
|
|
988
|
+
);
|
|
989
|
+
$("#neutralColorLayout .language-markup").removeClass("active");
|
|
990
|
+
console.log(tab_id);
|
|
991
|
+
$("#" + tab_id).addClass("active");
|
|
992
|
+
$(this).addClass("active");
|
|
993
|
+
});
|
|
994
|
+
});
|
|
995
|
+
$('ul li a.vx-fs-3[href*="#"]')
|
|
996
|
+
.not('[href="#"]')
|
|
997
|
+
.not('[href="#0"]')
|
|
998
|
+
.click(function (event) {
|
|
999
|
+
if (
|
|
1000
|
+
location.pathname.replace(/^\//, "") ==
|
|
1001
|
+
this.pathname.replace(/^\//, "") &&
|
|
1002
|
+
location.hostname == this.hostname
|
|
1003
|
+
) {
|
|
1004
|
+
$('ul li a.vx-fs-3[href*="#"]').removeClass("active");
|
|
1005
|
+
$(this).addClass("active");
|
|
1006
|
+
var target = $(this.hash);
|
|
1007
|
+
console.log(target);
|
|
1008
|
+
target = target.length
|
|
1009
|
+
? target
|
|
1010
|
+
: $("[name=" + this.hash.slice(1) + "]");
|
|
1011
|
+
if (target.length) {
|
|
1012
|
+
event.preventDefault();
|
|
1013
|
+
$("html, body").animate(
|
|
1014
|
+
{
|
|
1015
|
+
scrollTop: target.offset().top - 110,
|
|
1016
|
+
},
|
|
1017
|
+
100,
|
|
1018
|
+
function () {
|
|
1019
|
+
var $target = $(target);
|
|
1020
|
+
$target.focus();
|
|
1021
|
+
if ($target.is(":focus")) {
|
|
1022
|
+
return false;
|
|
1023
|
+
} else {
|
|
1024
|
+
$target.attr("tabindex", "-1");
|
|
1025
|
+
$target.focus();
|
|
1026
|
+
}
|
|
790
1027
|
}
|
|
791
|
-
|
|
1028
|
+
);
|
|
1029
|
+
}
|
|
1030
|
+
}
|
|
1031
|
+
});
|
|
792
1032
|
</script>
|
|
793
|
-
</body>
|
|
794
|
-
</html>
|
|
1033
|
+
</body>
|
|
1034
|
+
</html>
|