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/range-slider.html ADDED
@@ -0,0 +1,279 @@
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="stylesheet" type="text/css" href="../utility/prism.css" />
9
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/range-slider.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/forms.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
28
+ </head>
29
+
30
+ <body>
31
+ <section>
32
+ <div class="head vx-mb-5">
33
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Range Slider</h2>
34
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
35
+ The HTML5 range input element is used when a user can choose between a min and a max value but the precise value chosen is not considered important.
36
+ The range input control allows the user to chose a value when they don’t care (or know) what the specific number value chosen is.
37
+ This is an imprecise input control that should only be used when the exact value is not important for the user to know.
38
+ Range controls work well when the users is more concerned with percent distance between the min and the max.
39
+ </p>
40
+ </div>
41
+ <div class="vx-d-flex vx-align-start">
42
+ <div class="page-container">
43
+ <div class="container" id="defaultRangeLayout">
44
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Default Range Slider</h3>
45
+ <div class="preview-block">
46
+ <div class="action-buttons">
47
+ <button class="vx-btn md transparent">
48
+ <i class="icons">&#xe9b6;</i> Copy Code
49
+ </button>
50
+ <button class="vx-btn md transparent" data-tab="defaultRange">
51
+ <i class="icons rotate">&#xea95;</i> View Code
52
+ </button>
53
+ </div>
54
+ <div class="preview-container vx-bg-white vx-p-5">
55
+ <input type="range" min="1" max="100" value="50" class="vx-slider">
56
+ </div>
57
+ </div>
58
+ <div class="code-view vx-mb-5" id="defaultRange">
59
+ <div class="code-navigation">
60
+ <button class="active">HTML</button>
61
+ <button>CSS</button>
62
+ </div>
63
+ <code class="language-markup">
64
+ <script type="prism-html-markup">
65
+ <input type="range" min="1" max="100" value="50" class="vx-slider">
66
+ </script>
67
+ </code>
68
+ </div>
69
+ </div>
70
+ <div class="container" id="smallRangeLayout">
71
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Range Slider</h3>
72
+ <div class="preview-block">
73
+ <div class="action-buttons">
74
+ <button class="vx-btn md transparent">
75
+ <i class="icons">&#xe9b6;</i> Copy Code
76
+ </button>
77
+ <button class="vx-btn md transparent" data-tab="smallRange">
78
+ <i class="icons rotate">&#xea95;</i> View Code
79
+ </button>
80
+ </div>
81
+ <div class="preview-container vx-bg-white vx-p-5">
82
+ <input type="range" min="1" max="100" value="30" class="vx-slider sm">
83
+ </div>
84
+ </div>
85
+ <div class="code-view vx-mb-5" id="smallRange">
86
+ <div class="code-navigation">
87
+ <button class="active">HTML</button>
88
+ <button>CSS</button>
89
+ </div>
90
+ <code class="language-markup">
91
+ <script type="prism-html-markup">
92
+ <input type="range" min="1" max="100" value="30" class="vx-slider sm">
93
+ </script>
94
+ </code>
95
+ </div>
96
+ </div>
97
+ <div class="container" id="largeRangeLayout">
98
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Large Range Slider</h3>
99
+ <div class="preview-block">
100
+ <div class="action-buttons">
101
+ <button class="vx-btn md transparent">
102
+ <i class="icons">&#xe9b6;</i> Copy Code
103
+ </button>
104
+ <button class="vx-btn md transparent" data-tab="largeRange">
105
+ <i class="icons rotate">&#xea95;</i> View Code
106
+ </button>
107
+ </div>
108
+ <div class="preview-container vx-bg-white vx-p-5">
109
+ <input type="range" min="1" max="100" value="70" class="vx-slider lg">
110
+ </div>
111
+ </div>
112
+ <div class="code-view vx-mb-5" id="largeRange">
113
+ <div class="code-navigation">
114
+ <button class="active">HTML</button>
115
+ <button>CSS</button>
116
+ </div>
117
+ <code class="language-markup">
118
+ <script type="prism-html-markup">
119
+ <input type="range" min="1" max="100" value="70" class="vx-slider lg">
120
+ </script>
121
+ </code>
122
+ </div>
123
+ </div>
124
+ <div class="container" id="disabledRangeLayout">
125
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Disabled Range Slider</h3>
126
+ <div class="preview-block">
127
+ <div class="action-buttons">
128
+ <button class="vx-btn md transparent">
129
+ <i class="icons">&#xe9b6;</i> Copy Code
130
+ </button>
131
+ <button class="vx-btn md transparent" data-tab="disabledRange">
132
+ <i class="icons rotate">&#xea95;</i> View Code
133
+ </button>
134
+ </div>
135
+ <div class="preview-container vx-bg-white vx-p-5">
136
+ <input type="range" min="1" max="100" value="50" class="vx-slider" disabled>
137
+ </div>
138
+ </div>
139
+ <div class="code-view vx-mb-5" id="disabledRange">
140
+ <div class="code-navigation">
141
+ <button class="active">HTML</button>
142
+ <button>CSS</button>
143
+ </div>
144
+ <code class="language-markup">
145
+ <script type="prism-html-markup">
146
+ <input type="range" min="1" max="100" value="50" class="vx-slider" disabled>
147
+ </script>
148
+ </code>
149
+ </div>
150
+ </div>
151
+ <div class="container" id="labelRangeLayout">
152
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Range Slider with label</h3>
153
+ <div class="preview-block">
154
+ <div class="action-buttons">
155
+ <button class="vx-btn md transparent">
156
+ <i class="icons">&#xe9b6;</i> Copy Code
157
+ </button>
158
+ <button class="vx-btn md transparent" data-tab="labelRange">
159
+ <i class="icons rotate">&#xea95;</i> View Code
160
+ </button>
161
+ </div>
162
+ <div class="preview-container vx-bg-white vx-p-5">
163
+ <div class="vx-form-group vx-pl-5 vx-pr-5">
164
+ <label class="vx-control-panel">Slider label</label>
165
+ <input type="range" min="1" max="100" value="80" class="vx-slider">
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="code-view vx-mb-5" id="labelRange">
170
+ <div class="code-navigation">
171
+ <button class="active">HTML</button>
172
+ <button>CSS</button>
173
+ </div>
174
+ <code class="language-markup">
175
+ <script type="prism-html-markup">
176
+ <div class="vx-form-group vx-pl-5 vx-pr-5">
177
+ <label class="vx-control-panel">Slider label</label>
178
+ <input type="range" min="1" max="100" value="80" class="vx-slider">
179
+ </div>
180
+ </script>
181
+ </code>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="page-quick-menu">
186
+ <div class="vx-sub-menu vx-p-0">
187
+ <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>
188
+ <ul class="vx-p-0">
189
+ <li>
190
+ <a href="#defaultRangeLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Default Range Slider</a>
191
+ </li>
192
+ <li>
193
+ <a href="#smallRangeLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Range Slider</a>
194
+ </li>
195
+ <li>
196
+ <a href="#largeRangeLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Large Range Slider</a>
197
+ </li>
198
+ <li>
199
+ <a href="#disabledSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Disabled Range Slider</a>
200
+ </li>
201
+ <li>
202
+ <a href="#labelRangeLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Range Slider with label</a>
203
+ </li>
204
+ </ul>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+
211
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
212
+ <script async src="../less.js"></script>
213
+ <script src="../utility/prism.js"></script>
214
+ <script>
215
+ // function copyToClipboard1() {
216
+ // var copyText = document.getElementById("form1");
217
+ // copyText.select();
218
+ // copyText.setSelectionRange(0, 999999999999999999999)
219
+ // document.execCommand('copy');
220
+ // alert("Copied the text");
221
+ // }
222
+ // function copyToClipboard2() {
223
+ // var copyText = document.getElementById("form2");
224
+ // copyText.select();
225
+ // copyText.setSelectionRange(0, 999999999999999999999)
226
+ // document.execCommand("copy");
227
+ // alert("Copied the text");
228
+ // }
229
+ // function copyToClipboard3() {
230
+ // var copyText = document.getElementById("form3");
231
+ // copyText.select();
232
+ // copyText.setSelectionRange(0, 999999999999999999999)
233
+ // document.execCommand("copy");
234
+ // alert("Copied the text");
235
+ // }
236
+ $(document).ready(function () {
237
+ $('button').click(function () {
238
+ var tab_id = $(this).attr('data-tab');
239
+ // $('preview-block button').removeClass('active');
240
+ $('.code-view vx-mb-5').removeClass('active');
241
+ // $(this).addClass('active');
242
+ $("#" + tab_id).toggleClass('active');
243
+ })
244
+ });
245
+ $('ul li a.vx-fs-3[href*="#"]')
246
+ .not('[href="#"]')
247
+ .not('[href="#0"]')
248
+ .click(function (event) {
249
+ if (
250
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
251
+ &&
252
+ location.hostname == this.hostname
253
+ ) {
254
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
255
+ $(this).addClass('active');
256
+ var target = $(this.hash);
257
+ console.log(target);
258
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
259
+ if (target.length) {
260
+ event.preventDefault();
261
+ $('html, body').animate({
262
+ scrollTop: target.offset().top - 110
263
+ }, 100, function () {
264
+ var $target = $(target);
265
+ $target.focus();
266
+ if ($target.is(":focus")) {
267
+ return false;
268
+ } else {
269
+ $target.attr('tabindex', '-1');
270
+ $target.focus();
271
+ };
272
+ });
273
+ }
274
+ }
275
+ });
276
+ </script>
277
+ </body>
278
+
279
+ </html>