vcomply-design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/README.md +22 -0
  2. package/css-build/css/alignment/alignment.css +33 -0
  3. package/css-build/css/animate/animate-fade-in-left.css +28 -0
  4. package/css-build/css/animate/animate-fade-in-right.css +28 -0
  5. package/css-build/css/animate/animate-fade-in.css +20 -0
  6. package/css-build/css/animate/animate-fade-out.css +20 -0
  7. package/css-build/css/animate/animate-slide-down.css +26 -0
  8. package/css-build/css/animate/animate-slide-left.css +26 -0
  9. package/css-build/css/animate/animate-slide-right.css +26 -0
  10. package/css-build/css/animate/animate-slide-up.css +26 -0
  11. package/css-build/css/animate/animation.css +58 -0
  12. package/css-build/css/animate/index.css +258 -0
  13. package/css-build/css/avatars/avatars.css +83 -0
  14. package/css-build/css/button/button.css +237 -0
  15. package/css-build/css/color/color.css +152 -0
  16. package/css-build/css/dialog/dialog.css +421 -0
  17. package/css-build/css/display/display.css +24 -0
  18. package/css-build/css/forms/check-box.css +97 -0
  19. package/css-build/css/forms/forms.css +336 -0
  20. package/css-build/css/forms/index.css +862 -0
  21. package/css-build/css/forms/radio.css +116 -0
  22. package/css-build/css/forms/range-slider.css +203 -0
  23. package/css-build/css/forms/switch.css +124 -0
  24. package/css-build/css/header/header.css +344 -0
  25. package/css-build/css/icons/icons.css +53 -0
  26. package/css-build/css/index.css +548 -0
  27. package/css-build/css/index2.css +313 -0
  28. package/css-build/css/layout/layout.css +19 -0
  29. package/css-build/css/left-menu/main-menu.css +98 -0
  30. package/css-build/css/left-menu/sub-menu.css +323 -0
  31. package/css-build/css/list/list.css +3 -0
  32. package/css-build/css/loader/v-loader.css +183 -0
  33. package/css-build/css/margin/index.css +112 -0
  34. package/css-build/css/margin/margin-bottom.css +25 -0
  35. package/css-build/css/margin/margin-left.css +25 -0
  36. package/css-build/css/margin/margin-right.css +40 -0
  37. package/css-build/css/margin/margin-top.css +25 -0
  38. package/css-build/css/margin/margin.css +25 -0
  39. package/css-build/css/mixin/mixin.css +7 -0
  40. package/css-build/css/mixin.css +0 -0
  41. package/css-build/css/no-data/no-data.css +36 -0
  42. package/css-build/css/padding/index.css +97 -0
  43. package/css-build/css/padding/padding-bottom.css +25 -0
  44. package/css-build/css/padding/padding-left.css +25 -0
  45. package/css-build/css/padding/padding-right.css +25 -0
  46. package/css-build/css/padding/padding-top.css +25 -0
  47. package/css-build/css/padding/padding.css +25 -0
  48. package/css-build/css/pagination/pagination.css +131 -0
  49. package/css-build/css/panel/panel.css +76 -0
  50. package/css-build/css/popover/popover.css +237 -0
  51. package/css-build/css/quick-links/quick-links.css +84 -0
  52. package/css-build/css/smiley/smiley.css +353 -0
  53. package/css-build/css/snack-bar/snack-bar.css +77 -0
  54. package/css-build/css/table/table.css +191 -0
  55. package/css-build/css/table-card/table-card.css +242 -0
  56. package/css-build/css/text/text.css +157 -0
  57. package/css-build/css/user-panel/user-panel.css +115 -0
  58. package/css-build/css/vx.css +4254 -0
  59. package/css-build/css/width/width.css +43 -0
  60. package/css-build/fonts/icon.eot +0 -0
  61. package/css-build/fonts/icon.svg +583 -0
  62. package/css-build/fonts/icon.ttf +0 -0
  63. package/css-build/fonts/icon.woff +0 -0
  64. package/css-build/images/1.jpg +0 -0
  65. package/css-build/images/2.jpg +0 -0
  66. package/css-build/images/3.jpg +0 -0
  67. package/css-build/images/4.jpg +0 -0
  68. package/css-build/images/example/graph-sec-menu.JPG +0 -0
  69. package/css-build/images/example/layout.svg +388 -0
  70. package/css-build/images/example/menu-icon-m.svg +56 -0
  71. package/css-build/images/example/primary-menu.svg +66 -0
  72. package/css-build/images/example/vcomply-icon-m.svg +43 -0
  73. package/css-build/images/favicon.ico +0 -0
  74. package/css-build/images/grid.JPG +0 -0
  75. package/css-build/images/no-data.svg +268 -0
  76. package/css-build/images/open-arrow-left.svg +3 -0
  77. package/css-build/images/plus-create-icon.svg +23 -0
  78. package/css-build/images/plus-incident-icon.svg +44 -0
  79. package/css-build/images/plus-risk-icon.svg +45 -0
  80. package/css-build/images/v-icon.svg +1 -0
  81. package/css-build/index.html +188 -0
  82. package/css-build/js/table.js +72 -0
  83. package/css-build/js/toolbar.js +48 -0
  84. package/css-build/less/alignment/alignment.less +43 -0
  85. package/css-build/less/animate/animate-fade-in-left.less +32 -0
  86. package/css-build/less/animate/animate-fade-in-right.less +32 -0
  87. package/css-build/less/animate/animate-fade-in.less +24 -0
  88. package/css-build/less/animate/animate-fade-out.less +24 -0
  89. package/css-build/less/animate/animate-slide-down.less +30 -0
  90. package/css-build/less/animate/animate-slide-left.less +30 -0
  91. package/css-build/less/animate/animate-slide-right.less +30 -0
  92. package/css-build/less/animate/animate-slide-up.less +30 -0
  93. package/css-build/less/animate/animation.less +58 -0
  94. package/css-build/less/animate/index.less +9 -0
  95. package/css-build/less/avatars/avatars.less +96 -0
  96. package/css-build/less/button/button.less +201 -0
  97. package/css-build/less/color/color.less +209 -0
  98. package/css-build/less/dialog/dialog.less +502 -0
  99. package/css-build/less/display/display.less +31 -0
  100. package/css-build/less/forms/check-box.less +117 -0
  101. package/css-build/less/forms/forms.less +386 -0
  102. package/css-build/less/forms/index.less +5 -0
  103. package/css-build/less/forms/radio.less +139 -0
  104. package/css-build/less/forms/range-slider.less +69 -0
  105. package/css-build/less/forms/switch.less +166 -0
  106. package/css-build/less/header/header.less +236 -0
  107. package/css-build/less/icons/icons.less +50 -0
  108. package/css-build/less/index.less +74 -0
  109. package/css-build/less/index2.less +396 -0
  110. package/css-build/less/layout/layout.less +16 -0
  111. package/css-build/less/left-menu/main-menu.less +123 -0
  112. package/css-build/less/left-menu/sub-menu.less +326 -0
  113. package/css-build/less/list/list.less +5 -0
  114. package/css-build/less/loader/v-loader.less +219 -0
  115. package/css-build/less/margin/index.less +5 -0
  116. package/css-build/less/margin/margin-bottom.less +25 -0
  117. package/css-build/less/margin/margin-left.less +25 -0
  118. package/css-build/less/margin/margin-right.less +40 -0
  119. package/css-build/less/margin/margin-top.less +25 -0
  120. package/css-build/less/margin/margin.less +25 -0
  121. package/css-build/less/mixin/mixin.less +27 -0
  122. package/css-build/less/mixin.less +1 -0
  123. package/css-build/less/no-data/no-data.less +52 -0
  124. package/css-build/less/padding/index.less +5 -0
  125. package/css-build/less/padding/padding-bottom.less +25 -0
  126. package/css-build/less/padding/padding-left.less +20 -0
  127. package/css-build/less/padding/padding-right.less +20 -0
  128. package/css-build/less/padding/padding-top.less +25 -0
  129. package/css-build/less/padding/padding.less +25 -0
  130. package/css-build/less/pagination/pagination.less +144 -0
  131. package/css-build/less/panel/panel.less +116 -0
  132. package/css-build/less/popover/popover.less +273 -0
  133. package/css-build/less/quick-links/quick-links.less +90 -0
  134. package/css-build/less/smiley/smiley.less +422 -0
  135. package/css-build/less/snack-bar/snack-bar.less +86 -0
  136. package/css-build/less/table/table.less +293 -0
  137. package/css-build/less/table-card/table-card.less +116 -0
  138. package/css-build/less/text/text.less +179 -0
  139. package/css-build/less/user-panel/user-panel.less +123 -0
  140. package/css-build/less/vx.less +28 -0
  141. package/css-build/less/width/width.less +37 -0
  142. package/css-build/less.js +11 -0
  143. package/css-build/pages/alignment.html +102 -0
  144. package/css-build/pages/avatars.html +555 -0
  145. package/css-build/pages/button.html +993 -0
  146. package/css-build/pages/checkbox.html +560 -0
  147. package/css-build/pages/color-palette.html +358 -0
  148. package/css-build/pages/common-layout.html +125 -0
  149. package/css-build/pages/dialog.html +738 -0
  150. package/css-build/pages/display.html +67 -0
  151. package/css-build/pages/font-family.html +281 -0
  152. package/css-build/pages/header.html +590 -0
  153. package/css-build/pages/icons.html +3715 -0
  154. package/css-build/pages/mein-menu-active.html +67 -0
  155. package/css-build/pages/mein-menu-sub-menu.html +110 -0
  156. package/css-build/pages/mein-menu-tooltip.html +70 -0
  157. package/css-build/pages/mein-menu.html +321 -0
  158. package/css-build/pages/no-data.html +277 -0
  159. package/css-build/pages/panel.html +423 -0
  160. package/css-build/pages/popover.html +666 -0
  161. package/css-build/pages/radio.html +418 -0
  162. package/css-build/pages/range-slider.html +279 -0
  163. package/css-build/pages/select-box.html +933 -0
  164. package/css-build/pages/smiley.html +355 -0
  165. package/css-build/pages/sub-menu.html +396 -0
  166. package/css-build/pages/switch.html +349 -0
  167. package/css-build/pages/tab-menu.html +301 -0
  168. package/css-build/pages/table-card.html +510 -0
  169. package/css-build/pages/table.html +2218 -0
  170. package/css-build/pages/text-box.html +325 -0
  171. package/css-build/pages/text.html +106 -0
  172. package/css-build/pages/v-loader.html +163 -0
  173. package/css-build/sw/pwabuilder-sw-register.js +14 -0
  174. package/css-build/sw/pwabuilder-sw.js +47 -0
  175. package/css-build/utility/code-prev.css +19 -0
  176. package/css-build/utility/prism.css +130 -0
  177. package/css-build/utility/prism.js +8 -0
  178. package/index.js +66 -0
  179. package/nodemon.json +4 -0
  180. package/package.json +24 -0
package/css-build/pages/color-palette.html ADDED
@@ -0,0 +1,358 @@
1
+ <!DOCTYPE html>
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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
9
+ rel="stylesheet">
10
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
11
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
29
+ </head>
30
+ <body>
31
+ <section>
32
+ <div class="head vx-mb-5">
33
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Color Palette</h2>
34
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
35
+ 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
+ </p> -->
37
+ </div>
38
+ <div class="vx-d-flex vx-align-start">
39
+ <div class="page-container">
40
+ <div class="container" id="blueColorLayout">
41
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Blue Color</h3>
42
+
43
+ <div class="preview-block">
44
+ <div class="action-buttons">
45
+ <button class="vx-btn md transparent">
46
+ <i class="icons">&#xe9b6;</i> Copy Code
47
+ </button>
48
+ <button class="vx-btn md transparent" data-tab="blueColor">
49
+ <i class="icons rotate">&#xea95;</i> View Code
50
+ </button>
51
+ </div>
52
+ <div class="preview-container vx-bg-white vx-p-5">
53
+ <div class="vx-color-group vx-pl-5">
54
+ <div class="vx-color-palette bg blue-1">
55
+ <input type="text" value="@blue1">
56
+ </div>
57
+ <div class="vx-color-palette bg blue-2">
58
+ <input type="text" value="@blue2">
59
+ </div>
60
+ <div class="vx-color-palette bg blue-3">
61
+ <input type="text" value="@blue3">
62
+ </div>
63
+ <div class="vx-color-palette bg blue-4">
64
+ <input type="text" value="@blue4">
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <div class="code-view vx-mb-5" id="blueColor">
70
+ <div class="code-navigation">
71
+ <button class="active">HTML</button>
72
+ <button>CSS</button>
73
+ </div>
74
+ <code class="language-markup">
75
+ <script type="prism-html-markup">
76
+ @blue1 : #1e5dd3;
77
+ @blue2 : #4681ef;
78
+ @blue3 : #7aa6f7;
79
+ @blue4 : #d4e2fc;
80
+ </script>
81
+ </code>
82
+ </div>
83
+ </div>
84
+ <div class="container" id="greenColorLayout">
85
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Green Color</h3>
86
+
87
+ <div class="preview-block">
88
+ <div class="action-buttons">
89
+ <button class="vx-btn md transparent">
90
+ <i class="icons">&#xe9b6;</i> Copy Code
91
+ </button>
92
+ <button class="vx-btn md transparent" data-tab="greenColor">
93
+ <i class="icons rotate">&#xea95;</i> View Code
94
+ </button>
95
+ </div>
96
+ <div class="preview-container vx-bg-white vx-p-5">
97
+ <div class="vx-color-group vx-pl-5">
98
+ <div class="vx-color-palette bg green-1">
99
+ <input type="text" value="@green1">
100
+ </div>
101
+ <div class="vx-color-palette bg green-2">
102
+ <input type="text" value="@green2">
103
+ </div>
104
+ <div class="vx-color-palette bg green-3">
105
+ <input type="text" value="@green3">
106
+ </div>
107
+ <div class="vx-color-palette bg green-4">
108
+ <input type="text" value="@green4">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="code-view vx-mb-5" id="greenColor">
114
+ <div class="code-navigation">
115
+ <button class="active">HTML</button>
116
+ <button>CSS</button>
117
+ </div>
118
+ <code class="language-markup">
119
+ <script type="prism-html-markup">
120
+ @green1 : #34aa44;
121
+ @green2 : #66bf72;
122
+ @green3 : #97d2a0;
123
+ @green4 : #d6f2da;
124
+ </script>
125
+ </code>
126
+ </div>
127
+ </div>
128
+ <div class="container" id="redColorLayout">
129
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Red Color</h3>
130
+
131
+ <div class="preview-block">
132
+ <div class="action-buttons">
133
+ <button class="vx-btn md transparent">
134
+ <i class="icons">&#xe9b6;</i> Copy Code
135
+ </button>
136
+ <button class="vx-btn md transparent" data-tab="redColor">
137
+ <i class="icons rotate">&#xea95;</i> View Code
138
+ </button>
139
+ </div>
140
+ <div class="preview-container vx-bg-white vx-p-5">
141
+ <div class="vx-color-group vx-pl-5">
142
+ <div class="vx-color-palette bg red-1">
143
+ <input type="text" value="@red1">
144
+ </div>
145
+ <div class="vx-color-palette bg red-2">
146
+ <input type="text" value="@red2">
147
+ </div>
148
+ <div class="vx-color-palette bg red-3">
149
+ <input type="text" value="@red3">
150
+ </div>
151
+ <div class="vx-color-palette bg red-4">
152
+ <input type="text" value="@red4">
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <div class="code-view vx-mb-5" id="redColor">
158
+ <div class="code-navigation">
159
+ <button class="active">HTML</button>
160
+ <button>CSS</button>
161
+ </div>
162
+ <code class="language-markup">
163
+ <script type="prism-html-markup">
164
+ @red1 : #d93b41;
165
+ @red2 : #e75151;
166
+ @red3 : #f77272;
167
+ @red4 : #ffeaea;
168
+ </script>
169
+ </code>
170
+ </div>
171
+ </div>
172
+ <div class="container" id="orangeColorLayout">
173
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Orange Color</h3>
174
+
175
+ <div class="preview-block">
176
+ <div class="action-buttons">
177
+ <button class="vx-btn md transparent">
178
+ <i class="icons">&#xe9b6;</i> Copy Code
179
+ </button>
180
+ <button class="vx-btn md transparent" data-tab="orangeColor">
181
+ <i class="icons rotate">&#xea95;</i> View Code
182
+ </button>
183
+ </div>
184
+ <div class="preview-container vx-bg-white vx-p-5">
185
+ <div class="vx-color-group vx-pl-5">
186
+ <div class="vx-color-palette bg orange-1">
187
+ <input type="text" value="@orange1">
188
+ </div>
189
+ <div class="vx-color-palette bg orange-2">
190
+ <input type="text" value="@orange2">
191
+ </div>
192
+ <div class="vx-color-palette bg orange-3">
193
+ <input type="text" value="@orange3">
194
+ </div>
195
+ <div class="vx-color-palette bg orange-4">
196
+ <input type="text" value="@orange4">
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div class="code-view vx-mb-5" id="orangeColor">
202
+ <div class="code-navigation">
203
+ <button class="active">HTML</button>
204
+ <button>CSS</button>
205
+ </div>
206
+ <code class="language-markup">
207
+ <script type="prism-html-markup">
208
+ @orange1 : #f6882f;
209
+ @orange2 : #f5a05b;
210
+ @orange3 : #f9b883;
211
+ @orange4 : #fbe1cc;
212
+ </script>
213
+ </code>
214
+ </div>
215
+ </div>
216
+ <div class="container" id="yellowColorLayout">
217
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Yellow Color</h3>
218
+
219
+ <div class="preview-block">
220
+ <div class="action-buttons">
221
+ <button class="vx-btn md transparent">
222
+ <i class="icons">&#xe9b6;</i> Copy Code
223
+ </button>
224
+ <button class="vx-btn md transparent" data-tab="yellowColor">
225
+ <i class="icons rotate">&#xea95;</i> View Code
226
+ </button>
227
+ </div>
228
+ <div class="preview-container vx-bg-white vx-p-5">
229
+ <div class="vx-color-group vx-pl-5">
230
+ <div class="vx-color-palette bg yellow-1">
231
+ <input type="text" value="@yellow1">
232
+ </div>
233
+ <div class="vx-color-palette bg yellow-2">
234
+ <input type="text" value="@yellow2">
235
+ </div>
236
+ <div class="vx-color-palette bg yellow-3">
237
+ <input type="text" value="@yellow3">
238
+ </div>
239
+ <div class="vx-color-palette bg yellow-4">
240
+ <input type="text" value="@yellow4">
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="code-view vx-mb-5" id="yellowColor">
246
+ <div class="code-navigation">
247
+ <button class="active">HTML</button>
248
+ <button>CSS</button>
249
+ </div>
250
+ <code class="language-markup">
251
+ <script type="prism-html-markup">
252
+ @yellow1 : #f0b819;
253
+ @yellow2 : #f4c84a;
254
+ @yellow3 : #fadd8a;
255
+ @yellow4 : #fff4d6;
256
+ </script>
257
+ </code>
258
+ </div>
259
+ </div>
260
+ <div class="container" id="darkColorLayout">
261
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Dark Color</h3>
262
+
263
+ <div class="preview-block">
264
+ <div class="action-buttons">
265
+ <button class="vx-btn md transparent">
266
+ <i class="icons">&#xe9b6;</i> Copy Code
267
+ </button>
268
+ <button class="vx-btn md transparent" data-tab="darkColor">
269
+ <i class="icons rotate">&#xea95;</i> View Code
270
+ </button>
271
+ </div>
272
+ <div class="preview-container vx-bg-white vx-p-5">
273
+ <div class="vx-color-group vx-pl-5">
274
+ <div class="vx-color-palette bg dark-1">
275
+ <input type="text" value="@dark1">
276
+ </div>
277
+ <div class="vx-color-palette bg dark-2">
278
+ <input type="text" value="@dark2">
279
+ </div>
280
+ <div class="vx-color-palette bg dark-3">
281
+ <input type="text" value="@dark3">
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="code-view vx-mb-5" id="darkColor">
287
+ <div class="code-navigation">
288
+ <button class="active">HTML</button>
289
+ <button>CSS</button>
290
+ </div>
291
+ <code class="language-markup">
292
+ <script type="prism-html-markup">
293
+ @dark1 : #000000;
294
+ @dark2 : #161b2f;
295
+ @dark3 : #747576;
296
+ </script>
297
+ </code>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="page-quick-menu">
302
+ <div class="vx-sub-menu vx-p-0">
303
+ <h3 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">Contents</h3>
304
+ <ul class="vx-p-0">
305
+ <li><a href="#blueColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Blue Color</a></li>
306
+ <li><a href="#greenColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Green Color</a></li>
307
+ <li><a href="#redColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Red Color</a></li>
308
+ <li><a href="#orangeColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Orange Color</a></li>
309
+ <li><a href="#yellowColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Yellow Color</a></li>
310
+ <li><a href="#darkColorLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Dark Color</a></li>
311
+ </ul>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </section>
316
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
317
+ <script async src="../less.js"></script>
318
+ <script src="../utility/prism.js"></script>
319
+ <script>
320
+ $(document).ready(function () {
321
+ $('button').click(function () {
322
+ var tab_id = $(this).attr('data-tab');
323
+ $('.code-view vx-mb-5').removeClass('active');
324
+ $("#" + tab_id).toggleClass('active');
325
+ })
326
+ });
327
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
328
+ .click(function (event) {
329
+ if (
330
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
331
+ &&
332
+ location.hostname == this.hostname
333
+ ) {
334
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
335
+ $(this).addClass('active');
336
+ var target = $(this.hash);
337
+ console.log(target);
338
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
339
+ if (target.length) {
340
+ event.preventDefault();
341
+ $('html, body').animate({
342
+ scrollTop: target.offset().top - 110
343
+ }, 100, function () {
344
+ var $target = $(target);
345
+ $target.focus();
346
+ if ($target.is(":focus")) {
347
+ return false;
348
+ } else {
349
+ $target.attr('tabindex', '-1');
350
+ $target.focus();
351
+ };
352
+ });
353
+ }
354
+ }
355
+ });
356
+ </script>
357
+ </body>
358
+ </html>
package/css-build/pages/common-layout.html ADDED
@@ -0,0 +1,125 @@
1
+ <!DOCTYPE html>
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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
9
+ rel="stylesheet">
10
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
11
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/icons/icons.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/layout/layout.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
31
+ </head>
32
+ <body>
33
+ <section>
34
+ <div class="head vx-mb-5">
35
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Common Layout</h2>
36
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Tab Menu will display.</p> -->
37
+ </div>
38
+ <div class="container">
39
+ <div class="devide vx-d-flex">
40
+ <div class="vx-w-30 vx-pl-5 vx-pr-5">
41
+ <img src="../images/grid.JPG" alt="" style="max-width: 100%;">
42
+ </div>
43
+ <div class="vx-w-100 vx-pl-5 vx-pr-5">
44
+ <!-- <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">VComply Logo</h3> -->
45
+ <img src="../images/example/layout.svg" class="vx-mb-5" alt="" style="max-width: 100%;">
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="vx-d-flex vx-align-start">
50
+ <div class="page-container vx-w-100">
51
+ <div class="container">
52
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">HTML layout</h3>
53
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Besic Layout structure.</p>
54
+ <div class="preview-block">
55
+ <div class="action-buttons">
56
+ <button class="vx-btn md transparent">
57
+ <i class="icons">&#xe9b6;</i> Copy Code
58
+ </button>
59
+ <button class="vx-btn md transparent" data-tab="layoutStructure">
60
+ <i class="icons rotate">&#xea95;</i> View Code
61
+ </button>
62
+ </div>
63
+ <div class="preview-container">
64
+ <div class="vx-layout vx-d-flex vx-justify-between">
65
+ <div class="vx-layout-left vx-dark-border vx-bg-white" style="height: 100vh; border: 1px solid;"></div>
66
+ <div class="vx-layout-right vx-dark-border vx-bg-white" style="height: 100vh; border: 1px solid;">
67
+ <div class="vx-layout-header">
68
+ <div class="vx-layout-header-top vx-dark-border" style="height: 44px; border: 1px solid;"></div>
69
+ <div class="vx-layout-header-bottom vx-dark-border" style="height: 100px; border: 1px solid;"></div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="code-view vx-mb-5" id="layoutStructure">
76
+ <div class="code-navigation">
77
+ <button class="active" data-tab="datahtml">HTML</button>
78
+ <button data-tab="less">LESS</button>
79
+ </div>
80
+ <code class="language-markup active" id="datahtml">
81
+ <script type="prism-html-markup">
82
+ <div class="vx-layout vx-d-flex vx-justify-between">
83
+ <div class="vx-layout-left"></div>
84
+ <div class="vx-layout-right">
85
+ <div class="vx-layout-header">
86
+ <div class="vx-layout-header-top"></div>
87
+ <div class="vx-layout-header-bottom"></div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </script>
92
+ </code>
93
+ <code class="language-markup" id="less">
94
+ <script type="prism-html-markup">
95
+ @import "~vx-design-system/css-build/less/layout/layout.less"
96
+ </script>
97
+ </code>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ </section>
104
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
105
+ <script src="../less.js"></script>
106
+ <script src="../utility/prism.js"></script>
107
+ <script>
108
+ $(document).ready(function () {
109
+ $('button').click(function () {
110
+ var tab_id = $(this).attr('data-tab');
111
+ $('.code-view vx-mb-5').removeClass('active');
112
+ $("#" + tab_id).toggleClass('active');
113
+ })
114
+ $('.code-navigation button').click(function () {
115
+ var tab_id = $(this).attr('data-tab');
116
+ $('.code-navigation button').removeClass('active');
117
+ $('.language-markup').removeClass('active');
118
+ console.log(tab_id)
119
+ $("#" + tab_id).addClass('active');
120
+ $(this).addClass('active');
121
+ })
122
+ })
123
+ </script>
124
+ </body>
125
+ </html>