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/text-box.html ADDED
@@ -0,0 +1,325 @@
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
+ <link rel="preconnect" href="https://fonts.gstatic.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" 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/text/text.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.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-bottom.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/forms.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
31
+ </head>
32
+
33
+ <body>
34
+ <section>
35
+ <div class="head vx-mb-5">
36
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Text Field</h2>
37
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
38
+ Inputs enable the user to input text information.
39
+ Use inputs in a form as a way to allow the user to enter a value associated with a key, such as entering
40
+ their name in a field labeled name.
41
+ </p>
42
+ </div>
43
+ <div class="vx-d-flex vx-align-start">
44
+ <div class="page-container">
45
+ <div class="container" id="simpleTextBox">
46
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Default text box</h3>
47
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
48
+ This is a simple textbox.
49
+ </p>
50
+ <div class="preview-block">
51
+ <div class="action-buttons">
52
+ <button class="vx-btn md transparent">
53
+ <i class="icons">&#xe9b6;</i> Copy Code
54
+ </button>
55
+ <button class="vx-btn md transparent" data-tab="defaultTextbox">
56
+ <i class="icons rotate">&#xea95;</i> View Code
57
+ </button>
58
+ </div>
59
+ <div class="preview-container">
60
+ <div class="vx-form-group vx-p-5">
61
+ <input type="text" placeholder="Please Enter Form 1 value">
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div class="code-view vx-mb-5" id="defaultTextbox">
66
+ <div class="code-navigation">
67
+ <button class="active">HTML</button>
68
+ <button>CSS</button>
69
+ </div>
70
+ <code class="language-markup">
71
+ <script type="prism-html-markup">
72
+ <div class="vx-form-group">
73
+ <input type="text" placeholder="Please Enter Form value">
74
+ </div>
75
+ </script>
76
+ </code>
77
+ </div>
78
+ </div>
79
+ <div class="container" id="smallTextBox">
80
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small text box</h3>
81
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
82
+ This is a simple textbox.
83
+ </p>
84
+ <div class="preview-block">
85
+ <div class="action-buttons">
86
+ <button class="vx-btn md transparent">
87
+ <i class="icons">&#xe9b6;</i> Copy Code
88
+ </button>
89
+ <button class="vx-btn md transparent" data-tab="defSmallTextBox">
90
+ <i class="icons rotate">&#xea95;</i> View Code
91
+ </button>
92
+ </div>
93
+ <div class="preview-container">
94
+ <div class="vx-form-group sm vx-p-5">
95
+ <input type="text" placeholder="Please Enter Form value">
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <div class="code-view vx-mb-5" id="defSmallTextBox">
100
+ <div class="code-navigation">
101
+ <button class="active">HTML</button>
102
+ <button>CSS</button>
103
+ </div>
104
+ <code class="language-markup">
105
+ <script type="prism-html-markup">
106
+ <div class="vx-form-group sm">
107
+ <input type="text" placeholder="Please Enter Form value">
108
+ </div>
109
+ </script>
110
+ </code>
111
+ </div>
112
+ </div>
113
+ <div class="container" id="largeTextBox">
114
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Large text box</h3>
115
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
116
+ This is a simple textbox.
117
+ </p>
118
+ <div class="preview-block">
119
+ <div class="action-buttons">
120
+ <button class="vx-btn md transparent">
121
+ <i class="icons">&#xe9b6;</i> Copy Code
122
+ </button>
123
+ <button class="vx-btn md transparent" data-tab="defLargeTextBox">
124
+ <i class="icons rotate">&#xea95;</i> View Code
125
+ </button>
126
+ </div>
127
+ <div class="preview-container">
128
+ <div class="vx-form-group lg vx-p-5">
129
+ <input type="text" placeholder="Please Enter Form value">
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <div class="code-view vx-mb-5" id="defLargeTextBox">
134
+ <div class="code-navigation">
135
+ <button class="active">HTML</button>
136
+ <button>CSS</button>
137
+ </div>
138
+ <code class="language-markup">
139
+ <script type="prism-html-markup">
140
+ <div class="vx-form-group sm">
141
+ <input type="text" placeholder="Please Enter Form value">
142
+ </div>
143
+ </script>
144
+ </code>
145
+ </div>
146
+ </div>
147
+ <div class="container" id="simpleTextBoxLabel">
148
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Text box with label</h3>
149
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
150
+ This is a simple textbox.
151
+ </p>
152
+ <div class="preview-block">
153
+ <div class="action-buttons">
154
+ <button class="vx-btn md transparent">
155
+ <i class="icons">&#xe9b6;</i> Copy Code
156
+ </button>
157
+ <button class="vx-btn md transparent" data-tab="textBoxLabel">
158
+ <i class="icons rotate">&#xea95;</i> View Code
159
+ </button>
160
+ </div>
161
+ <div class="preview-container">
162
+ <div class="vx-form-group vx-p-5">
163
+ <label class="vx-control-panel">Form Label</label>
164
+ <input type="text" placeholder="Please Enter Form value">
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <div class="code-view vx-mb-5" id="textBoxLabel">
169
+ <div class="code-navigation">
170
+ <button class="active">HTML</button>
171
+ <button>CSS</button>
172
+ </div>
173
+ <code class="language-markup">
174
+ <script type="prism-html-markup">
175
+ <div class="vx-form-group">
176
+ <label class="vx-control-panel">Form Label</label>
177
+ <input type="text" placeholder="Please Enter Form value">
178
+ </div>
179
+ </script>
180
+ </code>
181
+ </div>
182
+ </div>
183
+ <div class="container" id="simpleTextBoxError">
184
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Text box with error</h3>
185
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
186
+ This is a simple textbox.
187
+ </p>
188
+ <div class="preview-block">
189
+ <div class="action-buttons">
190
+ <button class="vx-btn md transparent">
191
+ <i class="icons">&#xe9b6;</i> Copy Code
192
+ </button>
193
+ <button class="vx-btn md transparent" data-tab="textBoxWithError">
194
+ <i class="icons rotate">&#xea95;</i> View Code
195
+ </button>
196
+ </div>
197
+ <div class="preview-container">
198
+ <div class="vx-form-group vx-p-5">
199
+ <label class="vx-control-panel">Form Label</label>
200
+ <input type="text" class="error" placeholder="Please Enter Form value">
201
+ <span class="vx-txt-error">Enter a value for this input box.</span>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="code-view vx-mb-5" id="textBoxWithError">
206
+ <div class="code-navigation">
207
+ <button class="active">HTML</button>
208
+ <button>CSS</button>
209
+ </div>
210
+ <code class="language-markup">
211
+ <script type="prism-html-markup">
212
+ <div class="vx-form-group">
213
+ <label class="vx-control-panel">Form Label</label>
214
+ <input type="text" class="error" placeholder="Please Enter Form value">
215
+ <span class="vx-txt-error">Enter a value for this input box.</span>
216
+ </div>
217
+ </script>
218
+ </code>
219
+ </div>
220
+ </div>
221
+ <div class="container" id="disabledTextBoxLabel">
222
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Disabled Text box with label</h3>
223
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
224
+ This is a simple textbox.
225
+ </p>
226
+ <div class="preview-block">
227
+ <div class="action-buttons">
228
+ <button class="vx-btn md transparent">
229
+ <i class="icons">&#xe9b6;</i> Copy Code
230
+ </button>
231
+ <button class="vx-btn md transparent" data-tab="disabledTextBox">
232
+ <i class="icons rotate">&#xea95;</i> View Code
233
+ </button>
234
+ </div>
235
+ <div class="preview-container">
236
+ <div class="vx-form-group vx-p-5">
237
+ <label class="vx-control-panel">Form Label</label>
238
+ <input type="text" placeholder="Please Enter Form value" disabled>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="code-view vx-mb-5" id="disabledTextBox">
243
+ <div class="code-navigation">
244
+ <button class="active">HTML</button>
245
+ <button>CSS</button>
246
+ </div>
247
+ <code class="language-markup">
248
+ <script type="prism-html-markup">
249
+ <div class="vx-form-group">
250
+ <label class="vx-control-panel">Form Label</label>
251
+ <input type="text" placeholder="Please Enter Form value">
252
+ </div>
253
+ </script>
254
+ </code>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ <div class="page-quick-menu">
259
+ <div class="vx-sub-menu vx-p-0">
260
+ <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>
261
+ <ul class="vx-p-0">
262
+ <li>
263
+ <a href="#simpleTextBox" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Default text box</a>
264
+ </li>
265
+ <li>
266
+ <a href="#smallTextBox" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small text box</a>
267
+ </li>
268
+ <li>
269
+ <a href="#largeTextBox" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Large text box</a>
270
+ </li>
271
+ <li>
272
+ <a href="#simpleTextBoxLabel" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Text box with label</a>
273
+ </li>
274
+ <li>
275
+ <a href="#simpleTextBoxError" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Text box with error</a>
276
+ </li>
277
+ </ul>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
283
+ <script async src="../less.js"></script>
284
+ <script src="../utility/prism.js"></script>
285
+ <script>
286
+ $(document).ready(function () {
287
+ $('button').click(function () {
288
+ var tab_id = $(this).attr('data-tab');
289
+ $('.code-view vx-mb-5').removeClass('active');
290
+ $("#" + tab_id).toggleClass('active');
291
+ })
292
+ });
293
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
294
+ .click(function (event) {
295
+ if (
296
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
297
+ &&
298
+ location.hostname == this.hostname
299
+ ) {
300
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
301
+ $(this).addClass('active');
302
+ var target = $(this.hash);
303
+ console.log(target);
304
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
305
+ if (target.length) {
306
+ event.preventDefault();
307
+ $('html, body').animate({
308
+ scrollTop: target.offset().top - 110
309
+ }, 100, function () {
310
+ var $target = $(target);
311
+ $target.focus();
312
+ if ($target.is(":focus")) {
313
+ return false;
314
+ } else {
315
+ $target.attr('tabindex', '-1');
316
+ $target.focus();
317
+ };
318
+ });
319
+ }
320
+ }
321
+ });
322
+ </script>
323
+ </body>
324
+
325
+ </html>
package/css-build/pages/text.html ADDED
@@ -0,0 +1,106 @@
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
+ <link rel="preconnect" href="https://fonts.gstatic.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
10
+ rel="stylesheet">
11
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
12
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.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/margin/margin-right.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
30
+ </head>
31
+
32
+ <body>
33
+ <section>
34
+ <div class="head vx-mb-5">
35
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Typography</h2>
36
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Text style shuld used</p>
37
+ </div>
38
+ <div class="vx-d-flex vx-align-start">
39
+ <div class="page-container vx-w-100">
40
+ <div class="container">
41
+ <div class="preview-block">
42
+ <div class="action-buttons">
43
+ <button class="vx-btn md transparent">
44
+ <i class="icons">&#xe9b6;</i> Copy Code
45
+ </button>
46
+ <button class="vx-btn md transparent" data-tab="textCodeView">
47
+ <i class="icons rotate">&#xea95;</i> View Code
48
+ </button>
49
+ </div>
50
+ <div class="preview-container">
51
+ <h1 class="vx-title-text vx-fs-title vx-tt-capitalize vx-mt-4 vx-mb-4">Page Title</h1>
52
+ <h2 class="vx-sub-heading-text vx-fs-sub-title vx-tt-capitalize vx-mt-4 vx-mb-4">Panel Title
53
+ </h2>
54
+ <h3 class="vx-sub-sub-heading-text vx-fs-sub-sub-title vx-tt-capitalize vx-mt-4 vx-mb-4">Sub
55
+ sub heading</h3>
56
+ <h4 class="vx-label-text vx-fs-sub-label-text vx-tt-uppercase vx-fw-500 vx-mt-4 vx-mb-4">
57
+ Label heading</h4>
58
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-mt-4 vx-mb-4">Paragraph text</p>
59
+ <p class="vx-paragraph-text vx-fs-small-paragraph vx-fw-400 vx-mt-4 vx-mb-4">Small parahraph
60
+ </p>
61
+ <label class="vx-table-card-text vx-fs-table-card vx-tt-uppercase vx-mt-4 vx-mb-4">Table
62
+ card text</label>
63
+ <p class="vx-table-heading-text vx-fs-table-heading vx-tt-uppercase vx-mt-4 vx-mb-4">Table
64
+ heading text</p>
65
+ <p class="vx-table-text vx-fs-table-text vx-mt-4 vx-mb-4">Table text</p>
66
+ </div>
67
+ </div>
68
+ <div class="code-view vx-mb-5" id="textCodeView">
69
+ <div class="code-navigation">
70
+ <button class="active">HTML</button>
71
+ <button>CSS</button>
72
+ </div>
73
+ <code class="language-markup">
74
+ <script type="prism-html-markup">
75
+ <h1 class="vx-title-text vx-fs-title vx-tt-capitalize vx-m-0">Page Title</h1>
76
+ <h2 class="vx-sub-heading-text vx-fs-sub-title vx-tt-capitalize vx-m-0">Panel Title</h2>
77
+ <h3 class="vx-sub-sub-heading-text vx-fs-sub-sub-title vx-tt-capitalize vx-m-0">Sub sub heading</h3>
78
+ <h4 class="vx-label-text vx-fs-sub-label-text vx-tt-uppercase vx-fw-500 vx-m-0">Label heading</h4>
79
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0">Paragraph text</p>
80
+ <p class="vx-paragraph-text vx-fs-small-paragraph vx-fw-400 vx-m-0">Small parahraph</p>
81
+ <label class="vx-table-card-text vx-fs-table-card vx-tt-uppercase vx-m-0">Table card text</label>
82
+ <p class="vx-table-heading-text vx-fs-table-heading vx-tt-uppercase vx-m-0">Table heading text</p>
83
+ <p class="vx-table-text vx-fs-table-text vx-m-0">Table text</p>
84
+ </script>
85
+ </code>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
93
+ <script async src="../less.js"></script>
94
+ <script src="../utility/prism.js"></script>
95
+ <script>
96
+ $(document).ready(function () {
97
+ $('button').click(function () {
98
+ var tab_id = $(this).attr('data-tab');
99
+ $('.code-view vx-mb-5').removeClass('active');
100
+ $("#" + tab_id).toggleClass('active');
101
+ })
102
+ });
103
+ </script>
104
+ </body>
105
+
106
+ </html>
package/css-build/pages/v-loader.html ADDED
@@ -0,0 +1,163 @@
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
+ <link rel="preconnect" href="https://fonts.gstatic.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
10
+ rel="stylesheet">
11
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
12
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.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/alignment/alignment.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/icons/icons.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/loader/v-loader.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
32
+
33
+ </head>
34
+
35
+ <body>
36
+ <section>
37
+ <div class="head vx-mb-5">
38
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">V-Loader</h2>
39
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Where data is taking time to load</p>
40
+ </div>
41
+ <div class="vx-d-flex vx-align-start">
42
+ <div class="page-container vx-w-100">
43
+ <div class="container" id="normal-tabView">
44
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Tab menu</h3>
45
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Add a text to describe the box
46
+ size, space, animation color about the design.
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="loaderView">
54
+ <i class="icons rotate">&#xea95;</i> View Code
55
+ </button>
56
+ </div>
57
+ <div class="preview-container" style="height: 80vh;">
58
+ <div class="vx-v-loader vx-p-5" style="height: 100%;">
59
+ <div class="vx-v-loader-container">
60
+ <div class="vx-v-loader-colored-blocks">
61
+ <div class="vx-v-loader-colored-blocks-rotater">
62
+ <div class="vx-v-loader-colored-block"></div>
63
+ <div class="vx-v-loader-colored-block"></div>
64
+ <div class="vx-v-loader-colored-block"></div>
65
+ <div class="vx-v-loader-colored-block"></div>
66
+ <div class="vx-v-loader-colored-block"></div>
67
+ <div class="vx-v-loader-colored-block"></div>
68
+ </div>
69
+ <div class="vx-v-loader-colored-blocks-inner"></div>
70
+ </div>
71
+ <div class="vx-v-loader-inner">
72
+ <svg width="30px" xmlns="http://www.w3.org/2000/svg"
73
+ xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"
74
+ x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;"
75
+ xml:space="preserve">
76
+ <style type="text/css">
77
+ .st0 {
78
+ fill: #9D1F24;
79
+ }
80
+
81
+ .st1 {
82
+ fill: #D83B3F;
83
+ }
84
+ </style>
85
+ <g>
86
+ <path class="st0"
87
+ d="M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2 C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z" />
88
+ <path class="st1"
89
+ d="M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2 c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6 S11.7,0.5,9.9,3.5z" />
90
+ </g>
91
+ </svg>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div class="code-view vx-mb-5" id="loaderView">
98
+ <div class="code-navigation">
99
+ <button class="active">HTML</button>
100
+ <button>CSS</button>
101
+ </div>
102
+ <code class="language-markup">
103
+ <script type="prism-html-markup">
104
+ <div class="vx-v-loader">
105
+ <div class="vx-v-loader-container">
106
+ <div class="vx-v-loader-colored-blocks">
107
+ <div class="vx-v-loader-colored-blocks-rotater">
108
+ <div class="vx-v-loader-colored-block"></div>
109
+ <div class="vx-v-loader-colored-block"></div>
110
+ <div class="vx-v-loader-colored-block"></div>
111
+ <div class="vx-v-loader-colored-block"></div>
112
+ <div class="vx-v-loader-colored-block"></div>
113
+ <div class="vx-v-loader-colored-block"></div>
114
+ </div>
115
+ <div class="vx-v-loader-colored-blocks-inner"></div>
116
+ </div>
117
+ <div class="vx-v-loader-inner">
118
+ <svg width="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
119
+ version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16"
120
+ style="enable-background:new 0 0 16 16;" xml:space="preserve">
121
+ <style type="text/css">
122
+ .st0 {
123
+ fill: #9D1F24;
124
+ }
125
+
126
+ .st1 {
127
+ fill: #D83B3F;
128
+ }
129
+ </style>
130
+ <g>
131
+ <path class="st0"
132
+ d="M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2 C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z" />
133
+ <path class="st1"
134
+ d="M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2 c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6 S11.7,0.5,9.9,3.5z" />
135
+ </g>
136
+ </svg>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </script>
141
+ </code>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
148
+ <script src="../less.js"></script>
149
+ <script src="../utility/prism.js"></script>
150
+ <script>
151
+ $(document).ready(function () {
152
+ $('button').click(function () {
153
+ var tab_id = $(this).attr('data-tab');
154
+ // $('preview-block button').removeClass('active');
155
+ $('.code-view vx-mb-5').removeClass('active');
156
+ // $(this).addClass('active');
157
+ $("#" + tab_id).toggleClass('active');
158
+ })
159
+ });
160
+ </script>
161
+ </body>
162
+
163
+ </html>
package/css-build/sw/pwabuilder-sw-register.js ADDED
@@ -0,0 +1,14 @@
1
+ // This is the "Offline page" service worker
2
+
3
+ // Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
4
+ // If you get an error about not being able to import, double check that you have type="module" on your <script /> tag
5
+
6
+ /*
7
+ This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
8
+ tell the user when there is an update available and let the user know when your PWA is ready to use offline.
9
+ */
10
+
11
+ import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
12
+
13
+ const el = document.createElement('pwa-update');
14
+ document.body.appendChild(el);