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/no-data.html ADDED
@@ -0,0 +1,277 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>No Data</title>
9
+ <link rel="preconnect" href="https://fonts.gstatic.com">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
11
+ rel="stylesheet">
12
+
13
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
14
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/no-data/no-data.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.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-right.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
32
+ </head>
33
+
34
+ <body>
35
+ <section>
36
+ <div class="head vx-mb-5">
37
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">No Data</h2>
38
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">No Data component is used to indicate
39
+ a page/list where no data exists.</p>
40
+ </div>
41
+ <div class="vx-d-flex vx-align-start">
42
+ <div class="page-container">
43
+ <div class="container" id="besicNodataView">
44
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic No data</h3>
45
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">No Data component is used to
46
+ indicate a page/list where no data exists.
47
+ </p>
48
+ <div class="preview-block">
49
+ <div class="action-buttons">
50
+ <button class="vx-btn md transparent">
51
+ <i class="icons">&#xe9b6;</i> Copy Code
52
+ </button>
53
+ <button class="vx-btn md transparent" data-tab="besicNoData">
54
+ <i class="icons rotate">&#xea95;</i> View Code
55
+ </button>
56
+ </div>
57
+ <div class="preview-container">
58
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
59
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
60
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
61
+ <p class="text">No data to display</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div class="code-view vx-mb-5" id="besicNoData">
67
+ <div class="code-navigation">
68
+ <button class="active">HTML</button>
69
+ <button>CSS</button>
70
+ </div>
71
+ <code class="language-markup">
72
+ <script type="prism-html-markup">
73
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
74
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
75
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
76
+ <p class="text">No data to display</p>
77
+ </div>
78
+ </div>
79
+ </script>
80
+ </code>
81
+ </div>
82
+ </div>
83
+ <div class="container" id="nodataWithNormalButtonView">
84
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">No data with normal button</h3>
85
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">At some places no data
86
+ components contains some button to initiate data creation action.
87
+ </p>
88
+ <div class="preview-block">
89
+ <div class="action-buttons">
90
+ <button class="vx-btn md transparent">
91
+ <i class="icons">&#xe9b6;</i> Copy Code
92
+ </button>
93
+ <button class="vx-btn md transparent" data-tab="normalButtonNoData">
94
+ <i class="icons rotate">&#xea95;</i> View Code
95
+ </button>
96
+ </div>
97
+ <div class="preview-container">
98
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
99
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
100
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
101
+ <p class="text">No data to display</p>
102
+ <div class="button-row vx-d-flex vx-justify-center vx-align-center">
103
+ <button class="vx-btn md primary">Click Button</button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <div class="code-view vx-mb-5" id="normalButtonNoData">
110
+ <div class="code-navigation">
111
+ <button class="active">HTML</button>
112
+ <button>CSS</button>
113
+ </div>
114
+ <code class="language-markup">
115
+ <script type="prism-html-markup">
116
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
117
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
118
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
119
+ <p class="text">No data to display</p>
120
+ <div class="button-row vx-d-flex vx-justify-center vx-align-center">
121
+ <button class="vx-btn md primary">Click Button</button>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </script>
126
+ </code>
127
+ </div>
128
+ </div>
129
+ <div class="container" id="nodataWithSmallButtonView">
130
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">No data with small button</h3>
131
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">At some places no data
132
+ components contains some small button to initiate data creation or reload action.
133
+ </p>
134
+ <div class="preview-block">
135
+ <div class="action-buttons">
136
+ <button class="vx-btn md transparent">
137
+ <i class="icons">&#xe9b6;</i> Copy Code
138
+ </button>
139
+ <button class="vx-btn md transparent" data-tab="smallButtonNoData">
140
+ <i class="icons rotate">&#xea95;</i> View Code
141
+ </button>
142
+ </div>
143
+ <div class="preview-container">
144
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
145
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
146
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
147
+ <p class="text">No data to display</p>
148
+ <div class="button-row vx-d-flex vx-justify-center vx-align-center">
149
+ <button class="vx-btn sm primary small"><i class="icons">&#xe92f;</i> Click
150
+ Button</button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div class="code-view vx-mb-5" id="smallButtonNoData">
157
+ <div class="code-navigation">
158
+ <button class="active">HTML</button>
159
+ <button>CSS</button>
160
+ </div>
161
+ <code class="language-markup">
162
+ <script type="prism-html-markup">
163
+ <div class="vx-no-data-wrapper vx-d-flex vx-justify-center vx-align-center vx-p-3">
164
+ <div class="vx-no-data-container vx-text-center vx-d-inline-block">
165
+ <img class="image vx-d-inline-block" src="../images/no-data.svg">
166
+ <p class="text">No data to display</p>
167
+ <div class="button-row vx-d-flex vx-justify-center vx-align-center">
168
+ <button class="vx-btn sm primary small"><i class="icons">&#xe92f;</i> Click Button</button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </script>
173
+ </code>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="page-quick-menu">
178
+ <div class="vx-sub-menu vx-p-0">
179
+ <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>
180
+ <ul class="vx-p-0">
181
+ <li><a href="#besicNodataView" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Besic No data</a></li>
182
+ <li><a href="#nodataWithNormalButtonView" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">No data with normal button</a></li>
183
+ <li><a href="#nodataWithSmallButtonView" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">No data with small button</a></li>
184
+ </ul>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
191
+ <script async src="../less.js"></script>
192
+ <script src="../utility/prism.js"></script>
193
+ <script>
194
+ function copyToClipboard1() {
195
+ var copyText = document.getElementById("mainMenu1");
196
+ copyText.select();
197
+ copyText.setSelectionRange(0, 999999999999999999999)
198
+ document.execCommand('copy');
199
+ alert("Copied the text");
200
+ }
201
+ function copyToClipboard2() {
202
+ var copyText = document.getElementById("mainMenu2");
203
+ copyText.select();
204
+ copyText.setSelectionRange(0, 999999999999999999999)
205
+ document.execCommand("copy");
206
+ alert("Copied the text");
207
+ }
208
+ function copyToClipboard3() {
209
+ var copyText = document.getElementById("mainMenu3");
210
+ copyText.select();
211
+ copyText.setSelectionRange(0, 999999999999999999999)
212
+ document.execCommand("copy");
213
+ alert("Copied the text");
214
+ }
215
+ function copyToClipboard4() {
216
+ var copyText = document.getElementById("mainMenu4");
217
+ copyText.select();
218
+ copyText.setSelectionRange(0, 999999999999999999999)
219
+ document.execCommand("copy");
220
+ alert("Copied the text");
221
+ }
222
+ function copyToClipboard5() {
223
+ var copyText = document.getElementById("mainMenu5");
224
+ copyText.select();
225
+ copyText.setSelectionRange(0, 999999999999999999999)
226
+ document.execCommand("copy");
227
+ alert("Copied the text");
228
+ }
229
+
230
+
231
+ </script>
232
+
233
+ <script>
234
+ $(document).ready(function () {
235
+ $('button').click(function () {
236
+ var tab_id = $(this).attr('data-tab');
237
+ // $('preview-block button').removeClass('active');
238
+ $('.code-view vx-mb-5').removeClass('active');
239
+ // $(this).addClass('active');
240
+ $("#" + tab_id).toggleClass('active');
241
+ })
242
+ });
243
+ $('ul li a.vx-fs-3[href*="#"]')
244
+ .not('[href="#"]')
245
+ .not('[href="#0"]')
246
+ .click(function (event) {
247
+ if (
248
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
249
+ &&
250
+ location.hostname == this.hostname
251
+ ) {
252
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
253
+ $(this).addClass('active');
254
+ var target = $(this.hash);
255
+ console.log(target);
256
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
257
+ if (target.length) {
258
+ event.preventDefault();
259
+ $('html, body').animate({
260
+ scrollTop: target.offset().top - 110
261
+ }, 100, function () {
262
+ var $target = $(target);
263
+ $target.focus();
264
+ if ($target.is(":focus")) {
265
+ return false;
266
+ } else {
267
+ $target.attr('tabindex', '-1');
268
+ $target.focus();
269
+ };
270
+ });
271
+ }
272
+ }
273
+ });
274
+ </script>
275
+ </body>
276
+
277
+ </html>